Skip to content

Commit bfe0177

Browse files
wagnermacielwagnermaciel
committed
fix(aria/menu): update unit tests to use ngMenuContent
(cherry picked from commit 5c7b36f)
1 parent f84a030 commit bfe0177

File tree

1 file changed

+66
-51
lines changed

1 file changed

+66
-51
lines changed

‎src/aria/menu/menu.spec.ts‎

Lines changed: 66 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Component, DebugElement} from '@angular/core';
22
import {ComponentFixture, TestBed} from '@angular/core/testing';
33
import {By} from '@angular/platform-browser';
4-
import {Menu, MenuBar, MenuItem, MenuTrigger} from './menu';
4+
import {Menu, MenuBar, MenuContent, MenuItem, MenuTrigger} from './menu';
55
import {provideFakeDirectionality} from '@angular/cdk/testing/private';
66

77
describe('Standalone Menu Pattern', () => {
@@ -227,25 +227,24 @@ describe('Standalone Menu Pattern', () => {
227227
const apple = getItem('Apple');
228228
const banana = getItem('Banana');
229229
const berries = getItem('Berries');
230-
const blueberry = getItem('Blueberry');
231230

232231
keydown(apple!, 'ArrowDown');
233232
keydown(banana!, 'ArrowDown');
234233
keydown(berries!, 'ArrowRight');
235234

236235
expect(isSubmenuExpanded()).toBe(true);
237-
expect(document.activeElement).toBe(blueberry);
236+
expect(document.activeElement).toBe(getItem('Blueberry'));
238237
});
239238

240239
it('should close submenu on arrow left', () => {
241240
const apple = getItem('Apple');
242241
const banana = getItem('Banana');
243242
const berries = getItem('Berries');
244-
const blueberry = getItem('Blueberry');
245243

246244
keydown(apple!, 'ArrowDown');
247245
keydown(banana!, 'ArrowDown');
248246
keydown(berries!, 'ArrowRight');
247+
const blueberry = getItem('Blueberry');
249248
keydown(blueberry!, 'ArrowLeft');
250249

251250
expect(isSubmenuExpanded()).toBe(false);
@@ -254,54 +253,51 @@ describe('Standalone Menu Pattern', () => {
254253

255254
it('should close submenu on click outside', () => {
256255
const berries = getItem('Berries');
257-
const blueberry = getItem('Blueberry');
258256

259257
click(berries!);
260258
expect(isSubmenuExpanded()).toBe(true);
261259

262-
focusout(blueberry!, document.body);
260+
focusout(getItem('Blueberry')!, document.body);
263261
expect(isSubmenuExpanded()).toBe(false);
264262
});
265263

266264
it('should expand submenu on enter', () => {
267265
const apple = getItem('Apple');
268266
const banana = getItem('Banana');
269267
const berries = getItem('Berries');
270-
const blueberry = getItem('Blueberry');
271268

272269
keydown(apple!, 'ArrowDown');
273270
keydown(banana!, 'ArrowDown');
274271
keydown(berries!, 'Enter');
275272

276273
expect(isSubmenuExpanded()).toBe(true);
277-
expect(document.activeElement).toBe(blueberry);
274+
expect(document.activeElement).toBe(getItem('Blueberry'));
278275
});
279276

280277
it('should expand submenu on space', () => {
281278
const apple = getItem('Apple');
282279
const banana = getItem('Banana');
283280
const berries = getItem('Berries');
284-
const blueberry = getItem('Blueberry');
285281

286282
keydown(apple!, 'ArrowDown');
287283
keydown(banana!, 'ArrowDown');
288284
keydown(berries!, ' ');
289285

290286
expect(isSubmenuExpanded()).toBe(true);
291-
expect(document.activeElement).toBe(blueberry);
287+
expect(document.activeElement).toBe(getItem('Blueberry'));
292288
});
293289

294290
it('should close submenu on escape', () => {
295291
const apple = getItem('Apple');
296292
const banana = getItem('Banana');
297293
const berries = getItem('Berries');
298-
const blueberry = getItem('Blueberry');
299294

300295
keydown(apple!, 'ArrowDown');
301296
keydown(banana!, 'ArrowDown');
302297
keydown(berries!, 'ArrowRight');
303298

304299
expect(isSubmenuExpanded()).toBe(true);
300+
const blueberry = getItem('Blueberry');
305301
expect(document.activeElement).toBe(blueberry);
306302

307303
keydown(blueberry!, 'Escape');
@@ -332,11 +328,11 @@ describe('Standalone Menu Pattern', () => {
332328
const apple = getItem('Apple');
333329
const banana = getItem('Banana');
334330
const berries = getItem('Berries');
335-
const blueberry = getItem('Blueberry');
336331

337332
keydown(apple!, 'ArrowDown');
338333
keydown(banana!, 'ArrowDown');
339334
keydown(berries!, 'Enter'); // open submenu
335+
const blueberry = getItem('Blueberry');
340336

341337
expect(document.activeElement).toBe(blueberry);
342338

@@ -351,11 +347,11 @@ describe('Standalone Menu Pattern', () => {
351347
const apple = getItem('Apple');
352348
const banana = getItem('Banana');
353349
const berries = getItem('Berries');
354-
const blueberry = getItem('Blueberry');
355350

356351
keydown(apple!, 'ArrowDown');
357352
keydown(banana!, 'ArrowDown');
358353
keydown(berries!, ' '); // open submenu
354+
const blueberry = getItem('Blueberry');
359355

360356
expect(document.activeElement).toBe(blueberry);
361357

@@ -369,12 +365,12 @@ describe('Standalone Menu Pattern', () => {
369365
const apple = getItem('Apple');
370366
const banana = getItem('Banana');
371367
const berries = getItem('Berries');
372-
const blueberry = getItem('Blueberry');
373368

374369
keydown(apple!, 'ArrowDown');
375370
keydown(banana!, 'ArrowDown');
376371
keydown(berries!, 'ArrowRight');
377372
expect(isSubmenuExpanded()).toBe(true);
373+
const blueberry = getItem('Blueberry');
378374
expect(document.activeElement).toBe(blueberry);
379375

380376
const externalElement = document.createElement('button');
@@ -424,25 +420,24 @@ describe('Standalone Menu Pattern', () => {
424420
const apple = getItem('Apple');
425421
const banana = getItem('Banana');
426422
const berries = getItem('Berries');
427-
const blueberry = getItem('Blueberry');
428423

429424
keydown(apple!, 'ArrowDown');
430425
keydown(banana!, 'ArrowDown');
431426
keydown(berries!, 'ArrowLeft');
432427

433428
expect(isSubmenuExpanded()).toBe(true);
434-
expect(document.activeElement).toBe(blueberry);
429+
expect(document.activeElement).toBe(getItem('Blueberry'));
435430
});
436431

437432
it('should close submenu on arrow right', () => {
438433
const apple = getItem('Apple');
439434
const banana = getItem('Banana');
440435
const berries = getItem('Berries');
441-
const blueberry = getItem('Blueberry');
442436

443437
keydown(apple!, 'ArrowDown');
444438
keydown(banana!, 'ArrowDown');
445439
keydown(berries!, 'ArrowLeft');
440+
const blueberry = getItem('Blueberry');
446441
keydown(blueberry!, 'ArrowRight');
447442

448443
expect(isSubmenuExpanded()).toBe(false);
@@ -454,7 +449,13 @@ describe('Standalone Menu Pattern', () => {
454449
describe('Menu Trigger Pattern', () => {
455450
let fixture: ComponentFixture<MenuTriggerExample>;
456451

452+
const focusin = (element: Element) => {
453+
element.dispatchEvent(new FocusEvent('focusin', {bubbles: true}));
454+
fixture.detectChanges();
455+
};
456+
457457
const keydown = (element: Element, key: string, modifierKeys: {} = {}) => {
458+
focusin(element);
458459
element.dispatchEvent(
459460
new KeyboardEvent('keydown', {
460461
key,
@@ -466,6 +467,7 @@ describe('Menu Trigger Pattern', () => {
466467
};
467468

468469
const click = (element: Element, eventInit?: PointerEventInit) => {
470+
focusin(element);
469471
element.dispatchEvent(new PointerEvent('click', {bubbles: true, ...eventInit}));
470472
fixture.detectChanges();
471473
};
@@ -478,7 +480,6 @@ describe('Menu Trigger Pattern', () => {
478480
function setupMenu() {
479481
fixture = TestBed.createComponent(MenuTriggerExample);
480482
fixture.detectChanges();
481-
getItem('Apple')?.focus();
482483
}
483484

484485
function getTrigger(): HTMLElement {
@@ -597,7 +598,7 @@ describe('Menu Trigger Pattern', () => {
597598
expect(isExpanded()).toBe(false);
598599
});
599600

600-
it('should close on selecting an item on space', () => {
601+
it('should close on selecting an item on space', async () => {
601602
click(getTrigger());
602603
keydown(getItem('Apple')!, ' ');
603604
expect(isExpanded()).toBe(false);
@@ -945,20 +946,24 @@ describe('Menu Bar Pattern', () => {
945946
@Component({
946947
template: `
947948
<div ngMenu [expansionDelay]="0" (onSelect)="onSelect($event)">
948-
<div ngMenuItem value='Apple' searchTerm='Apple'>Apple</div>
949-
<div ngMenuItem value='Banana' searchTerm='Banana'>Banana</div>
950-
<div ngMenuItem value='Berries' searchTerm='Berries' [submenu]="berriesMenu">Berries</div>
951-
952-
<div ngMenu [expansionDelay]="0" #berriesMenu="ngMenu">
953-
<div ngMenuItem value='Blueberry' searchTerm='Blueberry'>Blueberry</div>
954-
<div ngMenuItem value='Blackberry' searchTerm='Blackberry'>Blackberry</div>
955-
<div ngMenuItem value='Strawberry' searchTerm='Strawberry'>Strawberry</div>
956-
</div>
957-
958-
<div ngMenuItem value='Cherry' searchTerm='Cherry' [disabled]="true">Cherry</div>
949+
<ng-template ngMenuContent>
950+
<div ngMenuItem value='Apple' searchTerm='Apple'>Apple</div>
951+
<div ngMenuItem value='Banana' searchTerm='Banana'>Banana</div>
952+
<div ngMenuItem value='Berries' searchTerm='Berries' [submenu]="berriesMenu">Berries</div>
953+
954+
<div ngMenu [expansionDelay]="0" #berriesMenu="ngMenu">
955+
<ng-template ngMenuContent>
956+
<div ngMenuItem value='Blueberry' searchTerm='Blueberry'>Blueberry</div>
957+
<div ngMenuItem value='Blackberry' searchTerm='Blackberry'>Blackberry</div>
958+
<div ngMenuItem value='Strawberry' searchTerm='Strawberry'>Strawberry</div>
959+
</ng-template>
960+
</div>
961+
962+
<div ngMenuItem value='Cherry' searchTerm='Cherry' [disabled]="true">Cherry</div>
963+
</ng-template>
959964
</div>
960965
`,
961-
imports: [Menu, MenuItem],
966+
imports: [Menu, MenuItem, MenuContent],
962967
})
963968
class StandaloneMenuExample {
964969
onSelect(value: string) {}
@@ -969,20 +974,24 @@ class StandaloneMenuExample {
969974
<button ngMenuTrigger [menu]="menu">Open menu</button>
970975
971976
<div ngMenu [expansionDelay]="0" #menu="ngMenu">
972-
<div ngMenuItem value='Apple' searchTerm='Apple'>Apple</div>
973-
<div ngMenuItem value='Banana' searchTerm='Banana'>Banana</div>
974-
<div ngMenuItem value='Berries' searchTerm='Berries' [submenu]="berriesMenu">Berries</div>
975-
976-
<div ngMenu [expansionDelay]="0" #berriesMenu="ngMenu">
977-
<div ngMenuItem value='Blueberry' searchTerm='Blueberry'>Blueberry</div>
978-
<div ngMenuItem value='Blackberry' searchTerm='Blackberry'>Blackberry</div>
979-
<div ngMenuItem value='Strawberry' searchTerm='Strawberry'>Strawberry</div>
980-
</div>
981-
982-
<div ngMenuItem value='Cherry' searchTerm='Cherry'>Cherry</div>
977+
<ng-template ngMenuContent>
978+
<div ngMenuItem value='Apple' searchTerm='Apple'>Apple</div>
979+
<div ngMenuItem value='Banana' searchTerm='Banana'>Banana</div>
980+
<div ngMenuItem value='Berries' searchTerm='Berries' [submenu]="berriesMenu">Berries</div>
981+
982+
<div ngMenu [expansionDelay]="0" #berriesMenu="ngMenu">
983+
<ng-template ngMenuContent>
984+
<div ngMenuItem value='Blueberry' searchTerm='Blueberry'>Blueberry</div>
985+
<div ngMenuItem value='Blackberry' searchTerm='Blackberry'>Blackberry</div>
986+
<div ngMenuItem value='Strawberry' searchTerm='Strawberry'>Strawberry</div>
987+
</ng-template>
988+
</div>
989+
990+
<div ngMenuItem value='Cherry' searchTerm='Cherry'>Cherry</div>
991+
</ng-template>
983992
</div>
984993
`,
985-
imports: [Menu, MenuItem, MenuTrigger],
994+
imports: [Menu, MenuItem, MenuTrigger, MenuContent],
986995
})
987996
class MenuTriggerExample {}
988997

@@ -993,26 +1002,32 @@ class MenuTriggerExample {}
9931002
<div ngMenuItem value='Edit' searchTerm='Edit' [submenu]="editMenu">Edit</div>
9941003
9951004
<div ngMenu [expansionDelay]="0" #editMenu="ngMenu">
996-
<div ngMenuItem value='Undo' searchTerm='Undo'>Undo</div>
997-
<div ngMenuItem value='Redo' searchTerm='Redo'>Redo</div>
1005+
<ng-template ngMenuContent>
1006+
<div ngMenuItem value='Undo' searchTerm='Undo'>Undo</div>
1007+
<div ngMenuItem value='Redo' searchTerm='Redo'>Redo</div>
1008+
</ng-template>
9981009
</div>
9991010
10001011
<div ngMenuItem [submenu]="viewMenu" value='View' searchTerm='View'>View</div>
10011012
10021013
<div ngMenu [expansionDelay]="0" #viewMenu="ngMenu">
1003-
<div ngMenuItem value='Zoom In' searchTerm='Zoom In'>Zoom In</div>
1004-
<div ngMenuItem value='Zoom Out' searchTerm='Zoom Out'>Zoom Out</div>
1005-
<div ngMenuItem value='Full Screen' searchTerm='Full Screen'>Full Screen</div>
1014+
<ng-template ngMenuContent>
1015+
<div ngMenuItem value='Zoom In' searchTerm='Zoom In'>Zoom In</div>
1016+
<div ngMenuItem value='Zoom Out' searchTerm='Zoom Out'>Zoom Out</div>
1017+
<div ngMenuItem value='Full Screen' searchTerm='Full Screen'>Full Screen</div>
1018+
</ng-template>
10061019
</div>
10071020
10081021
<div ngMenuItem [submenu]="helpMenu" value='Help' searchTerm='Help'>Help</div>
10091022
10101023
<div ngMenu [expansionDelay]="0" #helpMenu="ngMenu">
1011-
<div ngMenuItem value='Documentation' searchTerm='Documentation'>Documentation</div>
1012-
<div ngMenuItem value='About' searchTerm='About'>About</div>
1024+
<ng-template ngMenuContent>
1025+
<div ngMenuItem value='Documentation' searchTerm='Documentation'>Documentation</div>
1026+
<div ngMenuItem value='About' searchTerm='About'>About</div>
1027+
</ng-template>
10131028
</div>
10141029
</div>
10151030
`,
1016-
imports: [Menu, MenuBar, MenuItem],
1031+
imports: [Menu, MenuBar, MenuItem, MenuContent],
10171032
})
10181033
class MenuBarExample {}

0 commit comments

Comments
 (0)