From 193b721bfced61e2faa1293118b8ff086634a317 Mon Sep 17 00:00:00 2001 From: Zacky Ma Date: Tue, 12 May 2026 14:42:23 -0700 Subject: [PATCH] test(web-components): convert to use component tag name constants in newly added tests (#36199) --- .../src/menu-list/menu-list.spec.ts | 10 +- packages/web-components/src/tree/tree.spec.ts | 92 +++++++++---------- 2 files changed, 51 insertions(+), 51 deletions(-) diff --git a/packages/web-components/src/menu-list/menu-list.spec.ts b/packages/web-components/src/menu-list/menu-list.spec.ts index 68511a4c83f8a7..686e363528020c 100644 --- a/packages/web-components/src/menu-list/menu-list.spec.ts +++ b/packages/web-components/src/menu-list/menu-list.spec.ts @@ -402,14 +402,14 @@ test.describe('MenuList', () => { test('should navigate to previously hidden items when visibility restored', async ({ fastPage }) => { const { element } = fastPage; - const menuItems = element.locator('fluent-menu-item'); + const menuItems = element.locator(MenuItemTagName); await fastPage.setTemplate({ innerHTML: /* html */ ` - Menu item 1 - - Menu item 3 - Menu item 4 + <${MenuItemTagName}>Menu item 1 + <${MenuItemTagName} hidden="hidden">Menu item 2 + <${MenuItemTagName}>Menu item 3 + <${MenuItemTagName}>Menu item 4 `, }); diff --git a/packages/web-components/src/tree/tree.spec.ts b/packages/web-components/src/tree/tree.spec.ts index 03b2c13c6b70c4..3e065dc9d60f5b 100644 --- a/packages/web-components/src/tree/tree.spec.ts +++ b/packages/web-components/src/tree/tree.spec.ts @@ -244,14 +244,14 @@ test.describe('Tree', () => { }); test('should move focus down with ArrowDown', async ({ fastPage, page }) => { const { element } = fastPage; - const treeItems = element.locator(`:scope > fluent-tree-item`); + const treeItems = element.locator(`:scope > ${TreeItemTagName}`); await fastPage.setTemplate({ innerHTML: /* html */ ` - Item 1 - Item 2 - Item 3 - `, + <${TreeItemTagName}>Item 1 + <${TreeItemTagName}>Item 2 + <${TreeItemTagName}>Item 3 + `, }); await treeItems.nth(0).focus(); @@ -266,14 +266,14 @@ test.describe('Tree', () => { test('should move focus up with ArrowUp', async ({ fastPage, page }) => { const { element } = fastPage; - const treeItems = element.locator(`:scope > fluent-tree-item`); + const treeItems = element.locator(`:scope > ${TreeItemTagName}`); await fastPage.setTemplate({ innerHTML: /* html */ ` - Item 1 - Item 2 - Item 3 - `, + <${TreeItemTagName}>Item 1 + <${TreeItemTagName}>Item 2 + <${TreeItemTagName}>Item 3 + `, }); await treeItems.nth(0).focus(); @@ -290,15 +290,15 @@ test.describe('Tree', () => { test('should expand a collapsed item with ArrowRight', async ({ fastPage, page }) => { const { element } = fastPage; - const parentItem = element.locator(`:scope > fluent-tree-item`); + const parentItem = element.locator(`:scope > ${TreeItemTagName}`); await fastPage.setTemplate({ innerHTML: /* html */ ` - - Item 1 - Nested Item A - - `, + <${TreeItemTagName}> + Item 1 + <${TreeItemTagName} slot="item">Nested Item A + + `, }); await parentItem.focus(); @@ -311,16 +311,16 @@ test.describe('Tree', () => { test('should focus child after ArrowRight on an expanded item', async ({ fastPage, page }) => { const { element } = fastPage; - const parentItem = element.locator(`:scope > fluent-tree-item`); - const nestedItem = parentItem.locator('fluent-tree-item'); + const parentItem = element.locator(`:scope > ${TreeItemTagName}`); + const nestedItem = parentItem.locator(TreeItemTagName); await fastPage.setTemplate({ innerHTML: /* html */ ` - - Item 1 - Nested Item A - - `, + <${TreeItemTagName}> + Item 1 + <${TreeItemTagName} slot="item">Nested Item A + + `, }); await parentItem.focus(); @@ -336,15 +336,15 @@ test.describe('Tree', () => { test('should collapse an expanded item with ArrowLeft', async ({ fastPage, page }) => { const { element } = fastPage; - const parentItem = element.locator(`:scope > fluent-tree-item`); + const parentItem = element.locator(`:scope > ${TreeItemTagName}`); await fastPage.setTemplate({ innerHTML: /* html */ ` - - Item 1 - Nested Item A - - `, + <${TreeItemTagName}> + Item 1 + <${TreeItemTagName} slot="item">Nested Item A + + `, }); await parentItem.focus(); @@ -357,16 +357,16 @@ test.describe('Tree', () => { test('should focus parent item with ArrowLeft on a nested item', async ({ fastPage, page }) => { const { element } = fastPage; - const parentItem = element.locator(`:scope > fluent-tree-item`); - const nestedItem = parentItem.locator('fluent-tree-item'); + const parentItem = element.locator(`:scope > ${TreeItemTagName}`); + const nestedItem = parentItem.locator(TreeItemTagName); await fastPage.setTemplate({ innerHTML: /* html */ ` - - Item 1 - Nested Item A - - `, + <${TreeItemTagName}> + Item 1 + <${TreeItemTagName} slot="item">Nested Item A + + `, }); await parentItem.focus(); @@ -386,14 +386,14 @@ test.describe('Tree', () => { test('should focus first item with Home key', async ({ fastPage, page }) => { const { element } = fastPage; - const treeItems = element.locator(`:scope > fluent-tree-item`); + const treeItems = element.locator(`:scope > ${TreeItemTagName}`); await fastPage.setTemplate({ innerHTML: /* html */ ` - Item 1 - Item 2 - Item 3 - `, + <${TreeItemTagName}>Item 1 + <${TreeItemTagName}>Item 2 + <${TreeItemTagName}>Item 3 + `, }); await treeItems.nth(0).focus(); @@ -407,14 +407,14 @@ test.describe('Tree', () => { test('should focus last item with End key', async ({ fastPage, page }) => { const { element } = fastPage; - const treeItems = element.locator(`:scope > fluent-tree-item`); + const treeItems = element.locator(`:scope > ${TreeItemTagName}`); await fastPage.setTemplate({ innerHTML: /* html */ ` - Item 1 - Item 2 - Item 3 - `, + <${TreeItemTagName}>Item 1 + <${TreeItemTagName}>Item 2 + <${TreeItemTagName}>Item 3 + `, }); await treeItems.nth(0).focus();