mgr/dashboard: FixtureHelper

Fixes: https://tracker.ceph.com/issues/38933
Signed-off-by: Stephan Müller <smueller@suse.com>
(cherry picked from commit ef1d17ddbd2a88e3956888bc98568794500eeba6)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.spec.ts
index a8a998c3cec75ed282b68c74187ee0a8a0b648a6..66c69ee65ddd183b8827c8a8343660600bf5ca51 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.spec.ts
@@ -7,7 +7,12 @@ import { ToastModule } from 'ng2-toastr';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { of } from 'rxjs';
 
-import { configureTestBed, FormHelper, i18nProviders } from '../../../../testing/unit-test-helper';
+import {
+  configureTestBed,
+  FixtureHelper,
+  FormHelper,
+  i18nProviders
+} from '../../../../testing/unit-test-helper';
 import { ErasureCodeProfileService } from '../../../shared/api/erasure-code-profile.service';
 import { ErasureCodeProfile } from '../../../shared/models/erasure-code-profile';
 import { TaskWrapperService } from '../../../shared/services/task-wrapper.service';
@@ -19,6 +24,7 @@ describe('ErasureCodeProfileFormComponent', () => {
   let ecpService: ErasureCodeProfileService;
   let fixture: ComponentFixture<ErasureCodeProfileFormComponent>;
   let formHelper: FormHelper;
+  let fixtureHelper: FixtureHelper;
   let data: {};
 
   configureTestBed({
@@ -28,6 +34,7 @@ describe('ErasureCodeProfileFormComponent', () => {
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ErasureCodeProfileFormComponent);
+    fixtureHelper = new FixtureHelper(fixture);
     component = fixture.componentInstance;
     formHelper = new FormHelper(component.form);
     ecpService = TestBed.get(ErasureCodeProfileService);
@@ -75,8 +82,7 @@ describe('ErasureCodeProfileFormComponent', () => {
     it(`should show all default form controls`, () => {
       const showDefaults = (plugin) => {
         formHelper.setValue('plugin', plugin);
-        formHelper.expectIdElementsVisible(
-          fixture,
+        fixtureHelper.expectIdElementsVisible(
           [
             'name',
             'plugin',
@@ -103,11 +109,11 @@ describe('ErasureCodeProfileFormComponent', () => {
       });
 
       it(`should show 'packetSize' and 'technique'`, () => {
-        formHelper.expectIdElementsVisible(fixture, ['packetSize', 'technique'], true);
+        fixtureHelper.expectIdElementsVisible(['packetSize', 'technique'], true);
       });
 
       it(`should not show any other plugin specific form control`, () => {
-        formHelper.expectIdElementsVisible(fixture, ['c', 'l', 'crushLocality'], false);
+        fixtureHelper.expectIdElementsVisible(['c', 'l', 'crushLocality'], false);
       });
     });
 
@@ -123,16 +129,12 @@ describe('ErasureCodeProfileFormComponent', () => {
       });
 
       it(`should show 'technique'`, () => {
-        formHelper.expectIdElementsVisible(fixture, ['technique'], true);
+        fixtureHelper.expectIdElementsVisible(['technique'], true);
         expect(fixture.debugElement.query(By.css('#technique'))).toBeTruthy();
       });
 
       it(`should not show any other plugin specific form control`, () => {
-        formHelper.expectIdElementsVisible(
-          fixture,
-          ['c', 'l', 'crushLocality', 'packetSize'],
-          false
-        );
+        fixtureHelper.expectIdElementsVisible(['c', 'l', 'crushLocality', 'packetSize'], false);
       });
     });
 
@@ -147,11 +149,11 @@ describe('ErasureCodeProfileFormComponent', () => {
       });
 
       it(`should show 'l' and 'crushLocality'`, () => {
-        formHelper.expectIdElementsVisible(fixture, ['l', 'crushLocality'], true);
+        fixtureHelper.expectIdElementsVisible(['l', 'crushLocality'], true);
       });
 
       it(`should not show any other plugin specific form control`, () => {
-        formHelper.expectIdElementsVisible(fixture, ['c', 'packetSize', 'technique'], false);
+        fixtureHelper.expectIdElementsVisible(['c', 'packetSize', 'technique'], false);
       });
     });
 
@@ -166,12 +168,11 @@ describe('ErasureCodeProfileFormComponent', () => {
       });
 
       it(`should show 'c'`, () => {
-        formHelper.expectIdElementsVisible(fixture, ['c'], true);
+        fixtureHelper.expectIdElementsVisible(['c'], true);
       });
 
       it(`should not show any other plugin specific form control`, () => {
-        formHelper.expectIdElementsVisible(
-          fixture,
+        fixtureHelper.expectIdElementsVisible(
           ['l', 'crushLocality', 'packetSize', 'technique'],
           false
         );

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts
index c61ce23423960f82dd19a48127897b1cd720bc00..7f78a0ef4f054e7cc646d7bd3965caf05869c043 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.spec.ts
@@ -10,7 +10,12 @@ import { BsModalService } from 'ngx-bootstrap/modal';
 import { TabsModule } from 'ngx-bootstrap/tabs';
 import { of } from 'rxjs';
 
-import { configureTestBed, FormHelper, i18nProviders } from '../../../../testing/unit-test-helper';
+import {
+  configureTestBed,
+  FixtureHelper,
+  FormHelper,
+  i18nProviders
+} from '../../../../testing/unit-test-helper';
 import { NotFoundComponent } from '../../../core/not-found/not-found.component';
 import { ErasureCodeProfileService } from '../../../shared/api/erasure-code-profile.service';
 import { PoolService } from '../../../shared/api/pool.service';
@@ -29,6 +34,7 @@ import { PoolFormComponent } from './pool-form.component';
 describe('PoolFormComponent', () => {
   const OSDS = 8;
   let formHelper: FormHelper;
+  let fixtureHelper: FixtureHelper;
   let component: PoolFormComponent;
   let fixture: ComponentFixture<PoolFormComponent>;
   let poolService: PoolService;
@@ -104,6 +110,7 @@ describe('PoolFormComponent', () => {
 
   const setUpPoolComponent = () => {
     fixture = TestBed.createComponent(PoolFormComponent);
+    fixtureHelper = new FixtureHelper(fixture);
     component = fixture.componentInstance;
     component.info = {
       pool_names: [],
@@ -746,8 +753,8 @@ describe('PoolFormComponent', () => {
     });
 
     it('should not show info per default', () => {
-      formHelper.expectElementVisible(fixture, '#crushRule', true);
-      formHelper.expectElementVisible(fixture, '#crush-info-block', false);
+      fixtureHelper.expectElementVisible('#crushRule', true);
+      fixtureHelper.expectElementVisible('#crush-info-block', false);
     });
 
     it('should show info if the info button is clicked', () => {
@@ -757,7 +764,7 @@ describe('PoolFormComponent', () => {
       expect(component.data.crushInfo).toBeTruthy();
       fixture.detectChanges();
       expect(infoButton.classes['active']).toBeTruthy();
-      formHelper.expectIdElementsVisible(fixture, ['crushRule', 'crush-info-block'], true);
+      fixtureHelper.expectIdElementsVisible(['crushRule', 'crush-info-block'], true);
     });
   });
 
@@ -772,8 +779,8 @@ describe('PoolFormComponent', () => {
     });
 
     it('should not show info per default', () => {
-      formHelper.expectElementVisible(fixture, '#erasureProfile', true);
-      formHelper.expectElementVisible(fixture, '#ecp-info-block', false);
+      fixtureHelper.expectElementVisible('#erasureProfile', true);
+      fixtureHelper.expectElementVisible('#ecp-info-block', false);
     });
 
     it('should show info if the info button is clicked', () => {
@@ -782,7 +789,7 @@ describe('PoolFormComponent', () => {
       expect(component.data.erasureInfo).toBeTruthy();
       fixture.detectChanges();
       expect(infoButton.classes['active']).toBeTruthy();
-      formHelper.expectIdElementsVisible(fixture, ['erasureProfile', 'ecp-info-block'], true);
+      fixtureHelper.expectIdElementsVisible(['erasureProfile', 'ecp-info-block'], true);
     });
 
     describe('ecp deletion', () => {

diff --git a/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts b/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts
index 64540c9c6a4758f059aaa2ee20ecd6c44ea1e16e..539ee792f4a38661c5273f8ea8e4986719ba3cda 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts
@@ -169,22 +169,49 @@ export class FormHelper {
   expectError(control: AbstractControl | string, error: string) {
     expect(this.getControl(control).hasError(error)).toBeTruthy();
   }
+}
+
+export class FixtureHelper {
+  fixture: ComponentFixture<any>;
+
+  constructor(fixture: ComponentFixture<any>) {
+    this.fixture = fixture;
+  }
 
   /**
    * Expect a list of id elements to be visible or not.
    */
-  expectIdElementsVisible(fixture: ComponentFixture<any>, ids: string[], visibility: boolean) {
-    fixture.detectChanges();
+  expectIdElementsVisible(ids: string[], visibility: boolean) {
     ids.forEach((css) => {
-      this.expectElementVisible(fixture, `#${css}`, visibility);
+      this.expectElementVisible(`#${css}`, visibility);
     });
   }
 
   /**
-   * Expect a specific element in fixture to be visible or not.
+   * Expect a specific element to be visible or not.
    */
-  expectElementVisible(fixture: ComponentFixture<any>, css: string, visibility: boolean) {
-    expect(Boolean(fixture.debugElement.query(By.css(css)))).toBe(visibility);
+  expectElementVisible(css: string, visibility: boolean) {
+    expect(Boolean(this.getElementByCss(css))).toBe(visibility);
+  }
+
+  expectFormFieldToBe(css: string, value: string) {
+    const props = this.getElementByCss(css).properties;
+    expect(props['value'] || props['checked'].toString()).toBe(value);
+  }
+
+  clickElement(css: string) {
+    this.getElementByCss(css).triggerEventHandler('click', null);
+    this.fixture.detectChanges();
+  }
+
+  getText(css: string) {
+    const e = this.getElementByCss(css);
+    return e ? e.nativeElement.textContent.trim() : null;
+  }
+
+  getElementByCss(css: string) {
+    this.fixture.detectChanges();
+    return this.fixture.debugElement.query(By.css(css));
   }
 }