fix: menu-item emit current state in checked chnage event

microsoft · Oct 14, 2024 · cebcecc · cebcecc
1 parent 04dd27b
commit cebcecc
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 1 deletion.
diff --git a/packages/web-components/src/menu-item/menu-item.ts b/packages/web-components/src/menu-item/menu-item.ts
@@ -111,7 +111,7 @@ export class MenuItem extends FASTElement {
     toggleState(this.elementInternals, 'checked', checkableMenuItem ? next : false);
 
     if (this.$fastController.isConnected) {
-      this.$emit('change');
+      this.$emit('change', next, { bubbles: true });
     }
   }
 

diff --git a/packages/web-components/src/menu-list/menu-list.spec.ts b/packages/web-components/src/menu-list/menu-list.spec.ts
@@ -1,6 +1,8 @@
+import { once } from 'events';
 import { test } from '@playwright/test';
 import { expect, fixtureURL } from '../helpers.tests.js';
 import { MenuItemRole } from '../menu-item/menu-item.options.js';
+import { MenuItem } from '../menu-item/menu-item.js';
 
 test.describe('Menu', () => {
   test.beforeEach(async ({ page }) => {
@@ -521,4 +523,67 @@ test.describe('Menu', () => {
       await expect(item).toHaveAttribute('data-indent', '2');
     }
   });
+
+  test.describe('`change` event', () => {
+    test('should emit `change` event when `checked` property changed', async ({ page }) => {
+      const element = page.locator('fluent-menu-list');
+      const menuItems = element.locator('fluent-menu-item');
+
+      await page.setContent(/* html */ `
+      <fluent-menu-list>
+        <fluent-menu-item role="menuitemradio">Menu Item 1</fluent-menu-item>
+        <fluent-menu-item>Menu item 2</fluent-menu-item>
+        <fluent-menu-item>Menu item 3</fluent-menu-item>
+        <fluent-menu-item>Menu item 4</fluent-menu-item>
+      </fluent-menu-list>
+      `);
+
+      const [wasChanged] = await Promise.all([
+        menuItems.nth(0).evaluate(
+          node => new Promise(resolve => node.addEventListener('change', () => resolve(true), { once: true })),
+        ),
+        menuItems.nth(0).evaluate((node: MenuItem) => {
+          node.checked = true;
+        }),
+      ]);
+
+      expect(wasChanged).toEqual(true);
+    });
+
+    test('should emit change event when menu-item checked and unchecked', async ({ page }) => {
+      const element = page.locator('fluent-menu-list');
+      const menuItems = element.locator('fluent-menu-item');
+
+      await page.setContent(/* html */ `
+      <fluent-menu-list>
+        <fluent-menu-item role="menuitemradio">Menu Item 1</fluent-menu-item>
+        <fluent-menu-item checked role="menuitemradio">Menu item 2</fluent-menu-item>
+        <fluent-menu-item role="menuitemradio">Menu item 3</fluent-menu-item>
+        <fluent-menu-item role="menuitemradio">Menu item 4</fluent-menu-item>
+      </fluent-menu-list>
+      `);
+
+      let wasChanged = menuItems.nth(0).evaluate((node: MenuItem) => {
+          return new Promise(resolve => {
+              node.addEventListener('change', (evt) => {
+                resolve((evt as any).detail)
+              });
+          });
+      });
+
+        await menuItems.nth(0).click();
+        await expect(wasChanged).resolves.toBeTruthy();
+
+        wasChanged = menuItems.nth(0).evaluate((node: MenuItem) => {
+          return new Promise(resolve => {
+              node.addEventListener('change', (evt) => {
+                resolve((evt as any).detail)
+              });
+          });
+      });
+
+      await menuItems.nth(1).click();
+      await expect(wasChanged).resolves.toBeFalsy();
+    });
+    });
 });