Add select testing entry point, and use pageObject in test.

ni · Mar 8, 2024 · a4c5069 · a4c5069
1 parent 285fb2c
commit a4c5069
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/angular-workspace/projects/ni/nimble-angular/select/testing/ng-package.json b/angular-workspace/projects/ni/nimble-angular/select/testing/ng-package.json
@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+}
diff --git a/angular-workspace/projects/ni/nimble-angular/select/testing/public-api.ts b/angular-workspace/projects/ni/nimble-angular/select/testing/public-api.ts
@@ -0,0 +1 @@
+export * from './select.pageobject';
diff --git a/...tives/select/testing/select.pageobject.ts → ...gular/select/testing/select.pageobject.ts b/...tives/select/testing/select.pageobject.ts → ...gular/select/testing/select.pageobject.ts
diff --git a/...ngular/src/directives/select/tests/nimble-select-control-value-accessor.directive.spec.ts b/...ngular/src/directives/select/tests/nimble-select-control-value-accessor.directive.spec.ts
@@ -1,16 +1,12 @@
 import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChange, SimpleChanges, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SelectPageObject } from '@ni/nimble-angular/select/testing';
 import { NimbleSelectModule } from '../nimble-select.module';
 import { NimbleListOptionModule } from '../../list-option/nimble-list-option.module';
 import { processUpdates, waitForUpdatesAsync } from '../../../testing/async-helpers';
 import type { Select } from '../nimble-select.directive';
 
-function setSelectValue(select: Select, index: number): void {
-    select.dispatchEvent(new Event('click'));
-    select.options[index].dispatchEvent(new Event('click', { bubbles: true }));
-}
-
 describe('Nimble select control value accessor', () => {
     describe('when using option\'s [ngValue] binding', () => {
         @Component({
@@ -46,6 +42,7 @@ describe('Nimble select control value accessor', () => {
         let select: Select;
         let fixture: ComponentFixture<TestHostComponent>;
         let testHostComponent: TestHostComponent;
+        let pageObject: SelectPageObject;
 
         beforeEach(() => {
             TestBed.configureTestingModule({
@@ -58,6 +55,7 @@ describe('Nimble select control value accessor', () => {
             fixture = TestBed.createComponent(TestHostComponent);
             testHostComponent = fixture.componentInstance;
             select = testHostComponent.select.nativeElement;
+            pageObject = new SelectPageObject(select);
             fixture.detectChanges();
             // wait for select's 'options' property to be updated from slotted content
             await waitForUpdatesAsync();
@@ -81,7 +79,8 @@ describe('Nimble select control value accessor', () => {
         }));
 
         it('updates bound property when selected value is changed', () => {
-            setSelectValue(select, 2);
+            pageObject.clickSelect();
+            pageObject.clickOption(2);
             fixture.detectChanges();
 
             expect(testHostComponent.selectedOption).toBe(testHostComponent.selectOptions[2]);
@@ -110,7 +109,8 @@ describe('Nimble select control value accessor', () => {
         it('fires ngModelChange one time with expected value', () => {
             const ngModelChangeSpy = spyOn(testHostComponent, 'onModelValueChange');
             const indexToSelect = 2;
-            setSelectValue(select, indexToSelect);
+            pageObject.clickSelect();
+            pageObject.clickOption(indexToSelect);
             fixture.detectChanges();
             expect(ngModelChangeSpy).toHaveBeenCalledOnceWith(testHostComponent.selectOptions[indexToSelect]);
         });
@@ -142,6 +142,7 @@ describe('Nimble select control value accessor', () => {
         let select: Select;
         let fixture: ComponentFixture<TestHostComponent>;
         let testHostComponent: TestHostComponent;
+        let pageObject: SelectPageObject;
 
         beforeEach(() => {
             TestBed.configureTestingModule({
@@ -154,6 +155,7 @@ describe('Nimble select control value accessor', () => {
             fixture = TestBed.createComponent(TestHostComponent);
             testHostComponent = fixture.componentInstance;
             select = testHostComponent.select.nativeElement;
+            pageObject = new SelectPageObject(select);
             fixture.detectChanges();
             // wait for select's 'options' property to be updated from slotted content
             await waitForUpdatesAsync();
@@ -177,7 +179,8 @@ describe('Nimble select control value accessor', () => {
         }));
 
         it('updates bound property when selected value is changed', () => {
-            setSelectValue(select, 2);
+            pageObject.clickSelect();
+            pageObject.clickOption(2);
             fixture.detectChanges();
 
             expect(testHostComponent.selectedOption).toBe(testHostComponent.selectOptions[2].value.toString());

diff --git a/angular-workspace/projects/ni/nimble-angular/src/public-api.ts b/angular-workspace/projects/ni/nimble-angular/src/public-api.ts
@@ -67,7 +67,6 @@ export * from './directives/radio-group/nimble-radio-group.directive';
 export * from './directives/radio-group/nimble-radio-group.module';
 export * from './directives/select/nimble-select-control-value-accessor.directive';
 export * from './directives/select/nimble-select.directive';
-export * from './directives/select/testing/select.pageobject';
 export * from './directives/select/nimble-select.module';
 export * from './directives/spinner/nimble-spinner.directive';
 export * from './directives/spinner/nimble-spinner.module';