diff --git a/change/@ni-nimble-components-f31b32ac-57bb-4930-9c62-963b33be9e56.json b/change/@ni-nimble-components-f31b32ac-57bb-4930-9c62-963b33be9e56.json new file mode 100644 index 0000000000..e7db77f403 --- /dev/null +++ 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": "rajsite@users.noreply.github.com", + "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 new file mode 100644 index 0000000000..84c7cda625 --- /dev/null +++ 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": "rajsite@users.noreply.github.com", + "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 index 51df3bf396..bc4bcd7d6d 100644 --- 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> { return await fixture( - html`` + html`<${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 index f246803f8e..83851eb15c 100644 --- 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> { return await fixture( - html` - + <${iconXmarkTag} ${ref('xmarkIcon')} slot="start" - > - + <${iconCheckTag} ${ref('checkIcon')} slot="end" - > - `, + > + `, { 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> { return await fixture( html` - - - + <${menuTag}> + <${menuItemTag}> + <${iconXmarkTag} slot="start"> Item 1 - - Item 2 + <${anchorMenuItemTag} ${ref('item2')} href="a" + >Item 2 - Item 3Item 3 - - - Item 4.1 - + <${menuTag}> + <${menuItemTag}>Item 4.1 + <${anchorMenuItemTag} ${ref('item4dot2')} href="c" - >Item 4.2Item 4.2 - Item 4.3Item 4.3 - + Item 4 - - + + `, { 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 index 8ba857c8e7..d1219982c9 100644 --- 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> { - return await fixture( - html`` - ); + return await fixture(html`<${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 index c3af5aea97..e8bf245730 100644 --- 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> { return await fixture( - html` - - - - ` + html`<${anchorTabsTag} activeid="tab-two"> + <${anchorTabTag}> + <${anchorTabTag} id="tab-two"> + <${anchorTabTag} id="tab-three"> + ` ); } @@ -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> { return await fixture( - html` - - + <${anchorTabTag} href="foo"> + <${anchorTabTag} href="foo" id="tab-two" - > - + <${anchorTabTag} href="foo" id="tab-three" - > - ` + > + ` ); } 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 index b18fc8c49f..3154d2f9bb 100644 --- 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> { return await fixture( - html` - + <${iconXmarkTag} ${ref('xmarkIcon')} slot="start" - > - + <${iconCheckTag} ${ref('checkIcon')} slot="end" - > - `, + > + `, { 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( // prettier-ignore html` - - Root1 - SubRoot - Leaf1 - - Leaf 2 - - Root2 - SubRoot 2 - Leaf 3 - - - `, + <${treeViewTag} ${ref('treeView')}> + <${treeItemTag} ${ref('root1')}>Root1 + <${treeItemTag} ${ref('subRoot1')}>SubRoot + <${anchorTreeItemTag} ${ref('leaf1')} href="#" selected>Leaf1 + + <${anchorTreeItemTag} ${ref('leaf2')} href="#">Leaf 2 + + <${treeItemTag} ${ref('root2')}>Root2 + <${treeItemTag} ${ref('subRoot2')}>SubRoot 2 + <${anchorTreeItemTag} ${ref('leaf3')} href="#">Leaf 3 + + + `, { source } ); } diff --git a/packages/nimble-components/src/anchor/tests/anchor.spec.ts b/packages/nimble-components/src/anchor/tests/anchor.spec.ts index 749046d7e5..76c9da8758 100644 --- 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> { - return await fixture(html``); + return await fixture(html`<${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> { return await fixture( - html`` + html`<${anchorTag} contenteditable>` ); } 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 index f5ea83ab5d..3118aea1e9 100644 --- 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 ); }); diff --git a/packages/nimble-components/src/banner/tests/banner.spec.ts b/packages/nimble-components/src/banner/tests/banner.spec.ts index fce6b149c5..eaf9de6e46 100644 --- a/packages/nimble-components/src/banner/tests/banner.spec.ts +++ b/packages/nimble-components/src/banner/tests/banner.spec.ts @@ -13,10 +13,10 @@ import { buttonTag } from '../../button'; async function setup(): Promise> { return await fixture(html` - + <${bannerTag}> Title Message text - + `); } @@ -24,10 +24,10 @@ async function setupWithLabelProvider(): Promise> { return await fixture(html` <${themeProviderTag}> <${labelProviderCoreTag}> - + <${bannerTag}> Title Message text - + `); } @@ -47,7 +47,7 @@ describe('Banner', () => { }); it('can construct an element instance', () => { - expect(document.createElement('nimble-banner')).toBeInstanceOf(Banner); + expect(document.createElement(bannerTag)).toBeInstanceOf(Banner); }); it("should initialize 'open' to false", () => { @@ -81,7 +81,7 @@ describe('Banner', () => { it("should remove 'open' when dismiss button is clicked", () => { element.open = true; - element.shadowRoot?.querySelector('nimble-button')?.click(); + element.shadowRoot?.querySelector(buttonTag)?.click(); expect(element.open).toBeFalse(); }); @@ -92,13 +92,13 @@ describe('Banner', () => { it("should hide dismiss button when 'preventDismiss' set", async () => { element.preventDismiss = true; await waitForUpdatesAsync(); - expect(element.shadowRoot?.querySelector('nimble-button')).toBeNull(); + expect(element.shadowRoot?.querySelector(buttonTag)).toBeNull(); }); it("should default label of dismiss button to 'Close'", () => { expect( element.shadowRoot - ?.querySelector('nimble-button') + ?.querySelector(buttonTag) ?.innerText.includes('Close') ).toBeTrue(); }); diff --git a/packages/nimble-components/src/breadcrumb-item/tests/breadcrumb-item.spec.ts b/packages/nimble-components/src/breadcrumb-item/tests/breadcrumb-item.spec.ts index 505cbcf14f..31d006fdc5 100644 --- a/packages/nimble-components/src/breadcrumb-item/tests/breadcrumb-item.spec.ts +++ b/packages/nimble-components/src/breadcrumb-item/tests/breadcrumb-item.spec.ts @@ -1,12 +1,8 @@ import { BreadcrumbItem, breadcrumbItemTag } from '..'; describe('Breadcrumb Item', () => { - it('should export its tag', () => { - expect(breadcrumbItemTag).toBe('nimble-breadcrumb-item'); - }); - it('can construct an element instance', () => { - expect(document.createElement('nimble-breadcrumb-item')).toBeInstanceOf( + expect(document.createElement(breadcrumbItemTag)).toBeInstanceOf( BreadcrumbItem ); }); diff --git a/packages/nimble-components/src/breadcrumb/tests/breadcrumb.spec.ts b/packages/nimble-components/src/breadcrumb/tests/breadcrumb.spec.ts index 3858a1d3da..683c073c75 100644 --- a/packages/nimble-components/src/breadcrumb/tests/breadcrumb.spec.ts +++ b/packages/nimble-components/src/breadcrumb/tests/breadcrumb.spec.ts @@ -1,12 +1,8 @@ import { Breadcrumb, breadcrumbTag } from '..'; describe('Breadcrumb', () => { - it('should export its tag', () => { - expect(breadcrumbTag).toBe('nimble-breadcrumb'); - }); - it('can construct an element instance', () => { - expect(document.createElement('nimble-breadcrumb')).toBeInstanceOf( + expect(document.createElement(breadcrumbTag)).toBeInstanceOf( Breadcrumb ); }); diff --git a/packages/nimble-components/src/button/tests/button.spec.ts b/packages/nimble-components/src/button/tests/button.spec.ts index 10bce0f8c2..ec1432daeb 100644 --- a/packages/nimble-components/src/button/tests/button.spec.ts +++ b/packages/nimble-components/src/button/tests/button.spec.ts @@ -8,12 +8,8 @@ describe('Button', () => { return await fixture