fixup! fix(aria/menu): update unit tests to use ngMenuContent

Author: wagnermaciel

src/aria/menu/menu.spec.ts

@@ -227,25 +227,24 @@ describe('Standalone Menu Pattern', () => {
       const apple = getItem('Apple');
       const banana = getItem('Banana');
       const berries = getItem('Berries');
-      const blueberry = getItem('Blueberry');
 
       keydown(apple!, 'ArrowDown');
       keydown(banana!, 'ArrowDown');
       keydown(berries!, 'ArrowRight');
 
       expect(isSubmenuExpanded()).toBe(true);
-      expect(document.activeElement).toBe(blueberry);
+      expect(document.activeElement).toBe(getItem('Blueberry'));
     });
 
     it('should close submenu on arrow left', () => {
       const apple = getItem('Apple');
       const banana = getItem('Banana');
       const berries = getItem('Berries');
-      const blueberry = getItem('Blueberry');
 
       keydown(apple!, 'ArrowDown');
       keydown(banana!, 'ArrowDown');
       keydown(berries!, 'ArrowRight');
+      const blueberry = getItem('Blueberry');
       keydown(blueberry!, 'ArrowLeft');
 
       expect(isSubmenuExpanded()).toBe(false);
@@ -254,54 +253,51 @@ describe('Standalone Menu Pattern', () => {
 
     it('should close submenu on click outside', () => {
       const berries = getItem('Berries');
-      const blueberry = getItem('Blueberry');
 
       click(berries!);
       expect(isSubmenuExpanded()).toBe(true);
 
-      focusout(blueberry!, document.body);
+      focusout(getItem('Blueberry')!, document.body);
       expect(isSubmenuExpanded()).toBe(false);
     });
 
     it('should expand submenu on enter', () => {
       const apple = getItem('Apple');
       const banana = getItem('Banana');
       const berries = getItem('Berries');
-      const blueberry = getItem('Blueberry');
 
       keydown(apple!, 'ArrowDown');
       keydown(banana!, 'ArrowDown');
       keydown(berries!, 'Enter');
 
       expect(isSubmenuExpanded()).toBe(true);
-      expect(document.activeElement).toBe(blueberry);
+      expect(document.activeElement).toBe(getItem('Blueberry'));
     });
 
     it('should expand submenu on space', () => {
       const apple = getItem('Apple');
       const banana = getItem('Banana');
       const berries = getItem('Berries');
-      const blueberry = getItem('Blueberry');
 
       keydown(apple!, 'ArrowDown');
       keydown(banana!, 'ArrowDown');
       keydown(berries!, ' ');
 
       expect(isSubmenuExpanded()).toBe(true);
-      expect(document.activeElement).toBe(blueberry);
+      expect(document.activeElement).toBe(getItem('Blueberry'));
     });
 
     it('should close submenu on escape', () => {
       const apple = getItem('Apple');
       const banana = getItem('Banana');
       const berries = getItem('Berries');
-      const blueberry = getItem('Blueberry');
 
       keydown(apple!, 'ArrowDown');
       keydown(banana!, 'ArrowDown');
       keydown(berries!, 'ArrowRight');
 
       expect(isSubmenuExpanded()).toBe(true);
+      const blueberry = getItem('Blueberry');
       expect(document.activeElement).toBe(blueberry);
 
       keydown(blueberry!, 'Escape');
@@ -332,11 +328,11 @@ describe('Standalone Menu Pattern', () => {
       const apple = getItem('Apple');
       const banana = getItem('Banana');
       const berries = getItem('Berries');
-      const blueberry = getItem('Blueberry');
 
       keydown(apple!, 'ArrowDown');
       keydown(banana!, 'ArrowDown');
       keydown(berries!, 'Enter'); // open submenu
+      const blueberry = getItem('Blueberry');
 
       expect(document.activeElement).toBe(blueberry);
 
@@ -351,11 +347,11 @@ describe('Standalone Menu Pattern', () => {
       const apple = getItem('Apple');
       const banana = getItem('Banana');
       const berries = getItem('Berries');
-      const blueberry = getItem('Blueberry');
 
       keydown(apple!, 'ArrowDown');
       keydown(banana!, 'ArrowDown');
       keydown(berries!, ' '); // open submenu
+      const blueberry = getItem('Blueberry');
 
       expect(document.activeElement).toBe(blueberry);
 
@@ -369,12 +365,12 @@ describe('Standalone Menu Pattern', () => {
       const apple = getItem('Apple');
       const banana = getItem('Banana');
       const berries = getItem('Berries');
-      const blueberry = getItem('Blueberry');
 
       keydown(apple!, 'ArrowDown');
       keydown(banana!, 'ArrowDown');
       keydown(berries!, 'ArrowRight');
       expect(isSubmenuExpanded()).toBe(true);
+      const blueberry = getItem('Blueberry');
       expect(document.activeElement).toBe(blueberry);
 
       const externalElement = document.createElement('button');
@@ -424,25 +420,24 @@ describe('Standalone Menu Pattern', () => {
       const apple = getItem('Apple');
       const banana = getItem('Banana');
       const berries = getItem('Berries');
-      const blueberry = getItem('Blueberry');
 
       keydown(apple!, 'ArrowDown');
       keydown(banana!, 'ArrowDown');
       keydown(berries!, 'ArrowLeft');
 
       expect(isSubmenuExpanded()).toBe(true);
-      expect(document.activeElement).toBe(blueberry);
+      expect(document.activeElement).toBe(getItem('Blueberry'));
     });
 
     it('should close submenu on arrow right', () => {
       const apple = getItem('Apple');
       const banana = getItem('Banana');
       const berries = getItem('Berries');
-      const blueberry = getItem('Blueberry');
 
       keydown(apple!, 'ArrowDown');
       keydown(banana!, 'ArrowDown');
       keydown(berries!, 'ArrowLeft');
+      const blueberry = getItem('Blueberry');
       keydown(blueberry!, 'ArrowRight');
 
       expect(isSubmenuExpanded()).toBe(false);
@@ -454,7 +449,13 @@ describe('Standalone Menu Pattern', () => {
 describe('Menu Trigger Pattern', () => {
   let fixture: ComponentFixture<MenuTriggerExample>;
 
+  const focusin = (element: Element) => {
+    element.dispatchEvent(new FocusEvent('focusin', {bubbles: true}));
+    fixture.detectChanges();
+  };
+
   const keydown = (element: Element, key: string, modifierKeys: {} = {}) => {
+    focusin(element);
     element.dispatchEvent(
       new KeyboardEvent('keydown', {
         key,
@@ -466,6 +467,7 @@ describe('Menu Trigger Pattern', () => {
   };
 
   const click = (element: Element, eventInit?: PointerEventInit) => {
+    focusin(element);
     element.dispatchEvent(new PointerEvent('click', {bubbles: true, ...eventInit}));
     fixture.detectChanges();
   };
@@ -479,7 +481,6 @@ describe('Menu Trigger Pattern', () => {
     TestBed.configureTestingModule({});
     fixture = TestBed.createComponent(MenuTriggerExample);
     fixture.detectChanges();
-    getItem('Apple')?.focus();
   }
 
   function getTrigger(): HTMLElement {
@@ -598,7 +599,7 @@ describe('Menu Trigger Pattern', () => {
       expect(isExpanded()).toBe(false);
     });
 
-    it('should close on selecting an item on space', () => {
+    it('should close on selecting an item on space', async () => {
       click(getTrigger());
       keydown(getItem('Apple')!, ' ');
       expect(isExpanded()).toBe(false);