@@ -28,14 +28,13 @@ import {
2828} from '@angular/material/autocomplete' ;
2929import { MatError , MatFormFieldModule } from '@angular/material/form-field' ;
3030import { MatInputModule } from '@angular/material/input' ;
31- import { OverlayContainer } from '@angular/cdk/overlay' ;
32- import { DebugElement , NgZone } from '@angular/core' ;
31+ import { DebugElement } from '@angular/core' ;
3332import {
3433 ComponentFixture ,
3534 fakeAsync ,
36- inject ,
3735 TestBed ,
3836 tick ,
37+ waitForAsync ,
3938} from '@angular/core/testing' ;
4039import { ReactiveFormsModule } from '@angular/forms' ;
4140import { By } from '@angular/platform-browser' ;
@@ -44,11 +43,15 @@ import {
4443 ErrorTestExpectation ,
4544 setupMockStore ,
4645 getJsonFormsService ,
47- } from '@jsonforms/angular-test ' ;
46+ } from './common ' ;
4847import { ControlElement , JsonSchema , Actions } from '@jsonforms/core' ;
4948import { AutocompleteControlRenderer } from '../src' ;
5049import { JsonFormsAngularService } from '@jsonforms/angular' ;
5150import { ErrorObject } from 'ajv' ;
51+ import { initTestEnvironment } from './test' ;
52+ import { HarnessLoader } from '@angular/cdk/testing' ;
53+ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed' ;
54+ import { MatAutocompleteHarness } from '@angular/material/autocomplete/testing' ;
5255
5356const data = { foo : 'A' } ;
5457const schema : JsonSchema = {
@@ -80,17 +83,19 @@ const errorTest: ErrorTestExpectation = {
8083 indexOfElement : 0 ,
8184} ;
8285
86+ initTestEnvironment ( ) ;
87+
8388describe ( 'Autocomplete control Base Tests' , ( ) => {
8489 let fixture : ComponentFixture < AutocompleteControlRenderer > ;
8590 let component : AutocompleteControlRenderer ;
8691 let inputElement : HTMLInputElement ;
87- beforeEach ( ( ) => {
92+ beforeEach ( waitForAsync ( ( ) => {
8893 TestBed . configureTestingModule ( {
8994 declarations : [ componentUT ] ,
9095 imports : imports ,
9196 providers : providers ,
9297 } ) . compileComponents ( ) ;
93- } ) ;
98+ } ) ) ;
9499 beforeEach ( ( ) => {
95100 fixture = TestBed . createComponent ( componentUT ) ;
96101 component = fixture . componentInstance ;
@@ -211,40 +216,21 @@ describe('Autocomplete control Base Tests', () => {
211216describe ( 'AutoComplete control Input Event Tests' , ( ) => {
212217 let fixture : ComponentFixture < AutocompleteControlRenderer > ;
213218 let component : AutocompleteControlRenderer ;
214- let inputElement : HTMLInputElement ;
215- let overlayContainer : OverlayContainer ;
216- let overlayContainerElement : HTMLElement ;
217- let zone : NgZone ;
218- beforeEach ( ( ) => {
219+ let loader : HarnessLoader ;
220+ beforeEach ( waitForAsync ( ( ) => {
219221 TestBed . configureTestingModule ( {
220222 declarations : [ componentUT ] ,
221223 imports : imports ,
222224 providers : [ ...providers ] ,
223225 } ) . compileComponents ( ) ;
224-
225- inject ( [ OverlayContainer ] , ( oc : OverlayContainer ) => {
226- overlayContainer = oc ;
227- overlayContainerElement = oc . getContainerElement ( ) ;
228- } ) ( ) ;
229- } ) ;
230- beforeEach ( ( ) => {
226+ } ) ) ;
227+ beforeEach ( waitForAsync ( ( ) => {
231228 fixture = TestBed . createComponent ( componentUT ) ;
232229 component = fixture . componentInstance ;
233- zone = TestBed . inject ( NgZone ) ;
234- spyOn ( zone , 'runOutsideAngular' ) . and . callFake ( ( fn : ( ) => any ) => fn ( ) ) ;
235- inputElement = fixture . debugElement . query ( By . css ( 'input' ) ) . nativeElement ;
236- } ) ;
230+ loader = TestbedHarnessEnvironment . loader ( fixture ) ;
231+ } ) ) ;
237232
238- afterEach ( inject (
239- [ OverlayContainer ] ,
240- ( currentOverlayContainer : OverlayContainer ) => {
241- // Since we're resetting the testing module in some of the tests,
242- // we can potentially have multiple overlay containers.
243- currentOverlayContainer . ngOnDestroy ( ) ;
244- overlayContainer . ngOnDestroy ( ) ;
245- }
246- ) ) ;
247- it ( 'should update via input event' , fakeAsync ( ( ) => {
233+ it ( 'should update via input event' , fakeAsync ( async ( ) => {
248234 setupMockStore ( fixture , { uischema, schema, data } ) ;
249235 getJsonFormsService ( component ) . updateCore (
250236 Actions . init ( data , schema , uischema )
@@ -255,14 +241,12 @@ describe('AutoComplete control Input Event Tests', () => {
255241
256242 const spy = spyOn ( component , 'onSelect' ) ;
257243
258- inputElement . focus ( ) ;
259- zone . runOutsideAngular ( ( ) => zone . onStable . emit ( null ) ) ;
244+ await ( await loader . getHarness ( MatAutocompleteHarness ) ) . focus ( ) ;
260245 fixture . detectChanges ( ) ;
261246
262- const options = overlayContainerElement . querySelectorAll (
263- 'mat-option'
264- ) as NodeListOf < HTMLElement > ;
265- options . item ( 1 ) . click ( ) ;
247+ await (
248+ await loader . getHarness ( MatAutocompleteHarness )
249+ ) . selectOption ( { text : 'B' } ) ;
266250 tick ( ) ;
267251 fixture . detectChanges ( ) ;
268252
@@ -272,7 +256,7 @@ describe('AutoComplete control Input Event Tests', () => {
272256
273257 expect ( event . option . value ) . toBe ( 'B' ) ;
274258 } ) ) ;
275- it ( 'options should prefer own props' , fakeAsync ( ( ) => {
259+ it ( 'options should prefer own props' , fakeAsync ( async ( ) => {
276260 setupMockStore ( fixture , { uischema, schema, data } ) ;
277261 getJsonFormsService ( component ) . updateCore (
278262 Actions . init ( data , schema , uischema )
@@ -283,33 +267,30 @@ describe('AutoComplete control Input Event Tests', () => {
283267 fixture . detectChanges ( ) ;
284268 const spy = spyOn ( component , 'onSelect' ) ;
285269
286- inputElement . focus ( ) ;
287- zone . runOutsideAngular ( ( ) => zone . onStable . emit ( null ) ) ;
270+ await ( await loader . getHarness ( MatAutocompleteHarness ) ) . focus ( ) ;
288271 fixture . detectChanges ( ) ;
289272
290- fixture . whenStable ( ) . then ( ( ) => {
291- const options = overlayContainerElement ?. querySelectorAll (
292- 'mat-option'
293- ) as NodeListOf < HTMLElement > ;
294- ( options [ 1 ] as HTMLElement ) . click ( ) ;
295- fixture . detectChanges ( ) ;
296- tick ( ) ;
297- const event = spy . calls . mostRecent ( )
298- . args [ 0 ] as MatAutocompleteSelectedEvent ;
299- expect ( event . option . value ) . toBe ( 'Y' ) ;
300- } ) ;
273+ await (
274+ await loader . getHarness ( MatAutocompleteHarness )
275+ ) . selectOption ( { text : 'Y' } ) ;
276+ fixture . detectChanges ( ) ;
277+ tick ( ) ;
278+
279+ const event = spy . calls . mostRecent ( )
280+ . args [ 0 ] as MatAutocompleteSelectedEvent ;
281+ expect ( event . option . value ) . toBe ( 'Y' ) ;
301282 } ) ) ;
302283} ) ;
303284describe ( 'AutoComplete control Error Tests' , ( ) => {
304285 let fixture : ComponentFixture < AutocompleteControlRenderer > ;
305286 let component : AutocompleteControlRenderer ;
306- beforeEach ( ( ) => {
287+ beforeEach ( waitForAsync ( ( ) => {
307288 TestBed . configureTestingModule ( {
308289 declarations : [ componentUT ] ,
309290 imports : imports ,
310291 providers : providers ,
311292 } ) . compileComponents ( ) ;
312- } ) ;
293+ } ) ) ;
313294 beforeEach ( ( ) => {
314295 fixture = TestBed . createComponent ( componentUT ) ;
315296 component = fixture . componentInstance ;
@@ -349,13 +330,13 @@ describe('AutoComplete control updateFilter function', () => {
349330 let fixture : ComponentFixture < AutocompleteControlRenderer > ;
350331 let component : AutocompleteControlRenderer ;
351332
352- beforeEach ( ( ) => {
333+ beforeEach ( waitForAsync ( ( ) => {
353334 TestBed . configureTestingModule ( {
354335 declarations : [ componentUT ] ,
355336 imports : imports ,
356337 providers : providers ,
357338 } ) . compileComponents ( ) ;
358- } ) ;
339+ } ) ) ;
359340
360341 beforeEach ( ( ) => {
361342 fixture = TestBed . createComponent ( componentUT ) ;
0 commit comments