Handles Menu destroy

Author: goodguyry

package-lock.json

@@ -31,6 +31,7 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.11",
     "jest": "^29.3.1",
+    "jest-after-this": "^1.0.2",
     "jest-cli": "^29.3.1",
     "jest-environment-jsdom": "^29.4.2"
   },

package.json

@@ -248,10 +248,11 @@ export default class Menu extends AriaComponent {
     this.disclosures.forEach((disclosure) => {
       this.removeAttributes(disclosure.controller);
       this.removeAttributes(disclosure.target);
+
+      disclosure.controller.removeEventListener('click', this.controllerHandleClick);
+      disclosure.controller.removeEventListener('focusout', this.constructor.controllerHandleFocusout);
     });
 
-    controller.removeEventListener('click', this.controllerHandleClick);
-    controller.removeEventListener('focusout', this.constructor.controllerHandleFocusout);
     document.body.removeEventListener('keydown', this.bodyHandleKeydown);
     this.off('focusout', this.menuHandleFocusout);
     this.off('click', this.menuHandleClick);

src/Menu/Menu.js

@@ -1,4 +1,5 @@
 /* eslint-disable max-len */
+import { afterThis } from 'jest-after-this';
 import user from '@/.jest/user';
 import Menu from '.';
 
@@ -207,6 +208,12 @@ describe('The Menu should initialize as expected', () => {
   });
 
   test('Clicking a menu link re-sets aria-current', async () => {
+    afterThis(() => {
+      // Clean up to reset attributes.
+      menuLink.removeAttribute('aria-current');
+      current.setAttribute('aria-current', 'page');
+    });
+
     const menuLink = document.querySelector('.sublist2-first-item');
     const current = document.querySelector('[aria-current="page"]');
 
@@ -216,23 +223,23 @@ describe('The Menu should initialize as expected', () => {
     expect(current.getAttribute('aria-current')).toBeNull();
   });
 
-  test.skip('All attributes are removed from elements managed by the Menu', () => {
+  test('All attributes are removed from elements managed by the Menu', () => {
     menu.destroy();
+    expect(onDestroy).toHaveBeenCalledTimes(1);
 
     expect(list.element).toBeUndefined();
-    expect(onDestroy).toHaveBeenCalledTimes(1);
 
-    expect(sublistOne.getAttribute('aria-hidden')).toBeNull();
+    expect(firstController.getAttribute('aria-expanded')).toBeNull();
+    expect(secondController.getAttribute('aria-expanded')).toBeNull();
+    expect(firstTarget.getAttribute('aria-hidden')).toBeNull();
+    expect(secondTarget.getAttribute('aria-hidden')).toBeNull();
 
     // Quick and dirty verification that the original markup is restored.
     expect(document.body.innerHTML).toEqual(menuMarkup);
 
-    expect(onDestroy).toHaveBeenCalledTimes(1);
-    return Promise.resolve().then(() => {
-      const { detail } = getEventDetails(onDestroy);
+    const { detail } = getEventDetails(onDestroy);
 
-      expect(detail.element).toStrictEqual(list);
-      expect(detail.instance).toStrictEqual(menu);
-    });
+    expect(detail.element).toStrictEqual(list);
+    expect(detail.instance).toStrictEqual(menu);
   });
 });