Consistent tags (#2445)

# Pull Request ## 🤨 Rationale - Stops using hard coded element tag names - Removes unnecessary test asserting tag name string value - A couple tests used a fixture with invalid tag names, i.e. `nimble-xmark-icon` ## 👩‍💻 Implementation See above ## 🧪 Testing Rely on CI. ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed.
ni · Oct 23, 2024 · 858c553 · 858c553
1 parent 1f2a90a
commit 858c553
Show file tree

Hide file tree

Showing 132 changed files with 652 additions and 982 deletions.
diff --git a/change/@ni-nimble-components-f31b32ac-57bb-4930-9c62-963b33be9e56.json b/change/@ni-nimble-components-f31b32ac-57bb-4930-9c62-963b33be9e56.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Remove hard-coded nimble tag name strings",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@ni-spright-components-a82462a5-daa8-4d83-9f17-b81c520b40b3.json b/change/@ni-spright-components-a82462a5-daa8-4d83-9f17-b81c520b40b3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Remove hard-coded nimble tag name strings",
+  "packageName": "@ni/spright-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/nimble-components/src/anchor-button/tests/anchor-button.spec.ts b/packages/nimble-components/src/anchor-button/tests/anchor-button.spec.ts
@@ -1,12 +1,12 @@
 import { html } from '@microsoft/fast-element';
 import { parameterizeSpec } from '@ni/jasmine-parameterized';
-import { AnchorButton } from '..';
+import { AnchorButton, anchorButtonTag } from '..';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import { fixture, Fixture } from '../../utilities/tests/fixture';
 
 async function setup(): Promise<Fixture<AnchorButton>> {
     return await fixture<AnchorButton>(
-        html`<nimble-anchor-button></nimble-anchor-button>`
+        html`<${anchorButtonTag}></${anchorButtonTag}>`
     );
 }
 
@@ -24,7 +24,7 @@ describe('AnchorButton', () => {
     });
 
     it('can construct an element instance', () => {
-        expect(document.createElement('nimble-anchor-button')).toBeInstanceOf(
+        expect(document.createElement(anchorButtonTag)).toBeInstanceOf(
             AnchorButton
         );
     });

diff --git a/packages/nimble-components/src/anchor-menu-item/tests/anchor-menu-item.spec.ts b/packages/nimble-components/src/anchor-menu-item/tests/anchor-menu-item.spec.ts
@@ -1,12 +1,13 @@
 import { customElement, html, ref } from '@microsoft/fast-element';
 import { MenuItem as FoundationMenuItem } from '@microsoft/fast-foundation';
 import { parameterizeSpec } from '@ni/jasmine-parameterized';
-import { AnchorMenuItem } from '..';
-import type { IconCheck } from '../../icons/check';
-import type { IconXmark } from '../../icons/xmark';
-import type { Menu } from '../../menu';
+import { AnchorMenuItem, anchorMenuItemTag } from '..';
+import { iconCheckTag, type IconCheck } from '../../icons/check';
+import { iconXmarkTag, type IconXmark } from '../../icons/xmark';
+import { menuTag, type Menu } from '../../menu';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import { fixture, Fixture } from '../../utilities/tests/fixture';
+import { menuItemTag } from '../../menu-item';
 
 @customElement('foundation-menu-item')
 export class TestMenuItem extends FoundationMenuItem {}
@@ -20,16 +21,16 @@ describe('Anchor Menu Item', () => {
 
         async function setup(source: Model): Promise<Fixture<AnchorMenuItem>> {
             return await fixture<AnchorMenuItem>(
-                html`<nimble-anchor-menu-item href="#">
-                    <nimble-xmark-icon
+                html`<${anchorMenuItemTag} href="#">
+                    <${iconXmarkTag}
                         ${ref('xmarkIcon')}
                         slot="start"
-                    ></nimble-xmark-icon>
-                    <nimble-check-icon
+                    ></${iconXmarkTag}>
+                    <${iconCheckTag}
                         ${ref('checkIcon')}
                         slot="end"
-                    ></nimble-check-icon>
-                </nimble-anchor-menu-item>`,
+                    ></${iconCheckTag}>
+                </${anchorMenuItemTag}>`,
                 { source }
             );
         }
@@ -49,9 +50,9 @@ describe('Anchor Menu Item', () => {
         });
 
         it('can construct an element instance', () => {
-            expect(
-                document.createElement('nimble-anchor-menu-item')
-            ).toBeInstanceOf(AnchorMenuItem);
+            expect(document.createElement(anchorMenuItemTag)).toBeInstanceOf(
+                AnchorMenuItem
+            );
         });
 
         it('should set the role to menuitem', async () => {
@@ -118,32 +119,32 @@ describe('Anchor Menu Item', () => {
         async function setup(source: Model): Promise<Fixture<Menu>> {
             return await fixture<Menu>(
                 html`
-                    <nimble-menu>
-                        <nimble-menu-item>
-                            <nimble-icon-xmark slot="start"></nimble-icon-xmark>
+                    <${menuTag}>
+                        <${menuItemTag}>
+                            <${iconXmarkTag} slot="start"></${iconXmarkTag}>
                             Item 1
-                        </nimble-menu-item>
-                        <nimble-anchor-menu-item ${ref('item2')} href="a"
-                            >Item 2</nimble-anchor-menu-item
+                        </${menuItemTag}>
+                        <${anchorMenuItemTag} ${ref('item2')} href="a"
+                            >Item 2</${anchorMenuItemTag}
                         >
-                        <nimble-anchor-menu-item ${ref('item3')} href="b"
-                            >Item 3</nimble-anchor-menu-item
+                        <${anchorMenuItemTag} ${ref('item3')} href="b"
+                            >Item 3</${anchorMenuItemTag}
                         >
-                        <nimble-menu-item>
-                            <nimble-menu>
-                                <nimble-menu-item>Item 4.1</nimble-menu-item>
-                                <nimble-anchor-menu-item
+                        <${menuItemTag}>
+                            <${menuTag}>
+                                <${menuItemTag}>Item 4.1</${menuItemTag}>
+                                <${anchorMenuItemTag}
                                     ${ref('item4dot2')}
                                     href="c"
-                                    >Item 4.2</nimble-anchor-menu-item
+                                    >Item 4.2</${anchorMenuItemTag}
                                 >
-                                <nimble-anchor-menu-item href="d"
-                                    >Item 4.3</nimble-anchor-menu-item
+                                <${anchorMenuItemTag} href="d"
+                                    >Item 4.3</${anchorMenuItemTag}
                                 >
-                            </nimble-menu>
+                            </${menuTag}>
                             Item 4
-                        </nimble-menu-item>
-                    </nimble-menu>
+                        </${menuItemTag}>
+                    </${menuTag}>
                 `,
                 { source }
             );

diff --git a/packages/nimble-components/src/anchor-tab/tests/anchor-tab.spec.ts b/packages/nimble-components/src/anchor-tab/tests/anchor-tab.spec.ts
@@ -1,13 +1,11 @@
 import { html } from '@microsoft/fast-element';
 import { parameterizeSpec } from '@ni/jasmine-parameterized';
-import { AnchorTab } from '..';
+import { AnchorTab, anchorTabTag } from '..';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import { Fixture, fixture } from '../../utilities/tests/fixture';
 
 async function setup(): Promise<Fixture<AnchorTab>> {
-    return await fixture<AnchorTab>(
-        html`<nimble-anchor-tab></nimble-anchor-tab>`
-    );
+    return await fixture<AnchorTab>(html`<${anchorTabTag}></${anchorTabTag}>`);
 }
 
 describe('AnchorTab', () => {
@@ -24,9 +22,7 @@ describe('AnchorTab', () => {
     });
 
     it('can construct an element instance', () => {
-        expect(document.createElement('nimble-anchor-tab')).toBeInstanceOf(
-            AnchorTab
-        );
+        expect(document.createElement(anchorTabTag)).toBeInstanceOf(AnchorTab);
     });
 
     const attributeNames = [

diff --git a/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.spec.ts b/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.spec.ts
@@ -9,9 +9,9 @@ import {
     keyTab
 } from '@microsoft/fast-web-utilities';
 import { parameterizeSpec } from '@ni/jasmine-parameterized';
-import { AnchorTabs } from '..';
+import { AnchorTabs, anchorTabsTag } from '..';
 import '../../anchor-tab';
-import type { AnchorTab } from '../../anchor-tab';
+import { anchorTabTag, type AnchorTab } from '../../anchor-tab';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import { fixture, Fixture } from '../../utilities/tests/fixture';
 
@@ -31,11 +31,11 @@ describe('AnchorTabs', () => {
     describe('without hrefs', () => {
         async function setup(): Promise<Fixture<AnchorTabs>> {
             return await fixture<AnchorTabs>(
-                html`<nimble-anchor-tabs activeid="tab-two">
-                    <nimble-anchor-tab></nimble-anchor-tab>
-                    <nimble-anchor-tab id="tab-two"></nimble-anchor-tab>
-                    <nimble-anchor-tab id="tab-three"></nimble-anchor-tab>
-                </nimble-anchor-tabs>`
+                html`<${anchorTabsTag} activeid="tab-two">
+                    <${anchorTabTag}></${anchorTabTag}>
+                    <${anchorTabTag} id="tab-two"></${anchorTabTag}>
+                    <${anchorTabTag} id="tab-three"></${anchorTabTag}>
+                </${anchorTabsTag}>`
             );
         }
 
@@ -49,7 +49,7 @@ describe('AnchorTabs', () => {
         });
 
         it('can construct an element instance', () => {
-            expect(document.createElement('nimble-anchor-tabs')).toBeInstanceOf(
+            expect(document.createElement(anchorTabsTag)).toBeInstanceOf(
                 AnchorTabs
             );
         });
@@ -83,15 +83,9 @@ describe('AnchorTabs', () => {
 
         it('should populate tabs array with anchor tabs', () => {
             expect(element.tabs.length).toBe(3);
-            expect(element.tabs[0]?.nodeName.toLowerCase()).toBe(
-                'nimble-anchor-tab'
-            );
-            expect(element.tabs[1]?.nodeName.toLowerCase()).toBe(
-                'nimble-anchor-tab'
-            );
-            expect(element.tabs[2]?.nodeName.toLowerCase()).toBe(
-                'nimble-anchor-tab'
-            );
+            expect(element.tabs[0]?.nodeName.toLowerCase()).toBe(anchorTabTag);
+            expect(element.tabs[1]?.nodeName.toLowerCase()).toBe(anchorTabTag);
+            expect(element.tabs[2]?.nodeName.toLowerCase()).toBe(anchorTabTag);
         });
 
         it('should set activetab property based on activeid', () => {
@@ -159,17 +153,17 @@ describe('AnchorTabs', () => {
     describe('with hrefs', () => {
         async function setupWithHrefs(): Promise<Fixture<AnchorTabs>> {
             return await fixture<AnchorTabs>(
-                html`<nimble-anchor-tabs activeid="tab-two">
-                    <nimble-anchor-tab href="foo"></nimble-anchor-tab>
-                    <nimble-anchor-tab
+                html`<${anchorTabsTag} activeid="tab-two">
+                    <${anchorTabTag} href="foo"></${anchorTabTag}>
+                    <${anchorTabTag}
                         href="foo"
                         id="tab-two"
-                    ></nimble-anchor-tab>
-                    <nimble-anchor-tab
+                    ></${anchorTabTag}>
+                    <${anchorTabTag}
                         href="foo"
                         id="tab-three"
-                    ></nimble-anchor-tab>
-                </nimble-anchor-tabs>`
+                    ></${anchorTabTag}>
+                </${anchorTabsTag}>`
             );
         }
 

diff --git a/packages/nimble-components/src/anchor-tree-item/tests/anchor-tree-item.spec.ts b/packages/nimble-components/src/anchor-tree-item/tests/anchor-tree-item.spec.ts
@@ -1,12 +1,12 @@
 import { customElement, html, ref } from '@microsoft/fast-element';
 import { TreeItem as FoundationTreeItem } from '@microsoft/fast-foundation';
 import { parameterizeSpec } from '@ni/jasmine-parameterized';
-import { AnchorTreeItem } from '..';
-import type { IconCheck } from '../../icons/check';
-import type { IconXmark } from '../../icons/xmark';
+import { AnchorTreeItem, anchorTreeItemTag } from '..';
+import { iconCheckTag, type IconCheck } from '../../icons/check';
+import { iconXmarkTag, type IconXmark } from '../../icons/xmark';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
-import type { TreeItem } from '../../tree-item';
-import type { TreeView } from '../../tree-view';
+import { treeItemTag, type TreeItem } from '../../tree-item';
+import { treeViewTag, type TreeView } from '../../tree-view';
 import { fixture, Fixture } from '../../utilities/tests/fixture';
 
 @customElement('foundation-tree-item')
@@ -21,16 +21,16 @@ describe('Anchor Tree Item', () => {
 
         async function setup(source: Model): Promise<Fixture<AnchorTreeItem>> {
             return await fixture<AnchorTreeItem>(
-                html`<nimble-anchor-tree-item href="#">
-                    <nimble-xmark-icon
+                html`<${anchorTreeItemTag} href="#">
+                    <${iconXmarkTag}
                         ${ref('xmarkIcon')}
                         slot="start"
-                    ></nimble-xmark-icon>
-                    <nimble-check-icon
+                    ></${iconXmarkTag}>
+                    <${iconCheckTag}
                         ${ref('checkIcon')}
                         slot="end"
-                    ></nimble-check-icon>
-                </nimble-anchor-tree-item>`,
+                    ></${iconCheckTag}>
+                </${anchorTreeItemTag}>`,
                 { source }
             );
         }
@@ -50,9 +50,9 @@ describe('Anchor Tree Item', () => {
         });
 
         it('can construct an element instance', () => {
-            expect(
-                document.createElement('nimble-anchor-tree-item')
-            ).toBeInstanceOf(AnchorTreeItem);
+            expect(document.createElement(anchorTreeItemTag)).toBeInstanceOf(
+                AnchorTreeItem
+            );
         });
 
         it('should set the role to treeitem', async () => {
@@ -128,19 +128,19 @@ describe('Anchor Tree Item', () => {
             return await fixture<TreeView>(
                 // prettier-ignore
                 html<Model>`
-                <nimble-tree-view ${ref('treeView')}>
-                    <nimble-tree-item ${ref('root1')}>Root1
-                        <nimble-tree-item ${ref('subRoot1')}>SubRoot
-                            <nimble-anchor-tree-item ${ref('leaf1')} href="#" selected>Leaf1</nimble-anchor-tree-item>
-                        </nimble-tree-item>
-                        <nimble-anchor-tree-item ${ref('leaf2')} href="#">Leaf 2</nimble-anchor-tree-item>
-                    </nimble-tree-item>
-                    <nimble-tree-item ${ref('root2')}>Root2
-                        <nimble-tree-item ${ref('subRoot2')}>SubRoot 2
-                            <nimble-anchor-tree-item ${ref('leaf3')} href="#">Leaf 3</nimble-anchor-tree-item>
-                        </nimble-tree-item>
-                    </nimble-tree-item>
-                </nimble-tree-view>`,
+                <${treeViewTag} ${ref('treeView')}>
+                    <${treeItemTag} ${ref('root1')}>Root1
+                        <${treeItemTag} ${ref('subRoot1')}>SubRoot
+                            <${anchorTreeItemTag} ${ref('leaf1')} href="#" selected>Leaf1</${anchorTreeItemTag}>
+                        </${treeItemTag}>
+                        <${anchorTreeItemTag} ${ref('leaf2')} href="#">Leaf 2</${anchorTreeItemTag}>
+                    </${treeItemTag}>
+                    <${treeItemTag} ${ref('root2')}>Root2
+                        <${treeItemTag} ${ref('subRoot2')}>SubRoot 2
+                            <${anchorTreeItemTag} ${ref('leaf3')} href="#">Leaf 3</${anchorTreeItemTag}>
+                        </${treeItemTag}>
+                    </${treeItemTag}>
+                </${treeViewTag}>`,
                 { source }
             );
         }

diff --git a/packages/nimble-components/src/anchor/tests/anchor.spec.ts b/packages/nimble-components/src/anchor/tests/anchor.spec.ts
@@ -5,7 +5,7 @@ import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import { fixture, Fixture } from '../../utilities/tests/fixture';
 
 async function setup(): Promise<Fixture<Anchor>> {
-    return await fixture<Anchor>(html`<nimble-anchor></nimble-anchor>`);
+    return await fixture<Anchor>(html`<${anchorTag}></${anchorTag}>`);
 }
 
 describe('Anchor', () => {
@@ -21,12 +21,8 @@ describe('Anchor', () => {
         await disconnect();
     });
 
-    it('should export its tag', () => {
-        expect(anchorTag).toBe('nimble-anchor');
-    });
-
     it('can construct an element instance', () => {
-        expect(document.createElement('nimble-anchor')).toBeInstanceOf(Anchor);
+        expect(document.createElement(anchorTag)).toBeInstanceOf(Anchor);
     });
 
     it('should set the "control" class on the internal control', async () => {
@@ -157,7 +153,7 @@ describe('Anchor', () => {
     describe('with contenteditable without value', () => {
         async function setupWithContenteditable(): Promise<Fixture<Anchor>> {
             return await fixture<Anchor>(
-                html`<nimble-anchor contenteditable></nimble-anchor>`
+                html`<${anchorTag} contenteditable></${anchorTag}>`
             );
         }
 

diff --git a/packages/nimble-components/src/anchored-region/tests/anchored-region.spec.ts b/packages/nimble-components/src/anchored-region/tests/anchored-region.spec.ts
@@ -1,12 +1,8 @@
 import { AnchoredRegion, anchoredRegionTag } from '..';
 
 describe('Anchored Region', () => {
-    it('should export its tag', () => {
-        expect(anchoredRegionTag).toBe('nimble-anchored-region');
-    });
-
     it('can construct an element instance', () => {
-        expect(document.createElement('nimble-anchored-region')).toBeInstanceOf(
+        expect(document.createElement(anchoredRegionTag)).toBeInstanceOf(
             AnchoredRegion
         );
     });