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 9ef630eec3..fe4495b3f4 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 @@ -411,21 +411,17 @@ describe('AnchorTabs', () => { it('should show scroll buttons when the tabs overflow the container', async () => { await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue(); }); it('should hide scroll buttons when the tabs no longer overflow the container', async () => { await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire await tabsPageObject.setTabsWidth(1000); - await waitForUpdatesAsync(); // wait for the resize observer to fire expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse(); }); it('should scroll left when the left scroll button is clicked', async () => { await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire element.activeid = 'tab-six'; // scrolls to the last tab const currentScrollOffset = tabsPageObject.getTabsViewScrollOffset(); await tabsPageObject.clickScrollLeftButton(); @@ -436,21 +432,18 @@ describe('AnchorTabs', () => { it('should not scroll left when the left scroll button is clicked and the first tab is active', async () => { await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire await tabsPageObject.clickScrollLeftButton(); expect(tabsPageObject.getTabsViewScrollOffset()).toBe(0); }); it('should scroll right when the right scroll button is clicked', async () => { await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire await tabsPageObject.clickScrollRightButton(); expect(tabsPageObject.getTabsViewScrollOffset()).toBeGreaterThan(0); }); it('should not scroll right when the right scroll button is clicked and the last tab is active', async () => { await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire element.activeid = 'tab-six'; // scrolls to the last tab const currentScrollOffset = tabsPageObject.getTabsViewScrollOffset(); await tabsPageObject.clickScrollRightButton(); @@ -461,7 +454,6 @@ describe('AnchorTabs', () => { it('should show scroll buttons when new tab is added and tabs overflow the container', async () => { await tabsPageObject.setTabsWidth(450); - await waitForUpdatesAsync(); // wait for the resize observer to fire expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse(); await tabsPageObject.addTab('New Tab With Extremely Long Name'); expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue(); @@ -469,7 +461,6 @@ describe('AnchorTabs', () => { it('should hide scroll buttons when tab is removed and tabs no longer overflow the container', async () => { await tabsPageObject.setTabsWidth(500); - await waitForUpdatesAsync(); // wait for the resize observer to fire await tabsPageObject.addTab('New Tab With Extremely Long Name'); expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue(); await tabsPageObject.removeTab(6); @@ -478,7 +469,6 @@ describe('AnchorTabs', () => { it('should show scroll buttons when tab label is updated and tabs overflow the container', async () => { await tabsPageObject.setTabsWidth(450); - await waitForUpdatesAsync(); // wait for the resize observer to fire expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse(); await tabsPageObject.updateTabLabel( 0, @@ -489,7 +479,6 @@ describe('AnchorTabs', () => { it('should hide scroll buttons when tab label is updated and tabs no longer overflow the container', async () => { await tabsPageObject.setTabsWidth(550); - await waitForUpdatesAsync(); // wait for the resize observer to fire await tabsPageObject.addTab('New Tab With Extremely Long Name'); expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue(); await tabsPageObject.updateTabLabel(6, 'Tab 6'); diff --git a/packages/nimble-components/src/patterns/tabs/testing/tabs-base.pageobject.ts b/packages/nimble-components/src/patterns/tabs/testing/tabs-base.pageobject.ts index 7fa7bc7465..2792ca2a29 100644 --- a/packages/nimble-components/src/patterns/tabs/testing/tabs-base.pageobject.ts +++ b/packages/nimble-components/src/patterns/tabs/testing/tabs-base.pageobject.ts @@ -33,6 +33,7 @@ export abstract class TabsBasePageObject { public async setTabsWidth(width: number): Promise { this.tabsElement.style.width = `${width}px`; await waitForUpdatesAsync(); + await waitForUpdatesAsync(); // wait for the resize observer to fire } public async clickScrollLeftButton(): Promise { diff --git a/packages/nimble-components/src/tabs/tests/tabs.spec.ts b/packages/nimble-components/src/tabs/tests/tabs.spec.ts index 0a8f45c358..6732a8e5bc 100644 --- a/packages/nimble-components/src/tabs/tests/tabs.spec.ts +++ b/packages/nimble-components/src/tabs/tests/tabs.spec.ts @@ -39,7 +39,6 @@ describe('Tabs', () => { await connect(); const tabsPageObject = new TabsPageObject(element); await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire element.activeid = '6'; // scrolls to the last tab await waitForUpdatesAsync(); expect(tabsPageObject.getTabsViewScrollOffset()).toBeGreaterThan(0); @@ -52,7 +51,6 @@ describe('Tabs', () => { await connect(); const tabsPageObject = new TabsPageObject(element); await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire await tabsPageObject.clickTab(2); // clicks the third tab await waitForUpdatesAsync(); expect(tabsPageObject.getTabsViewScrollOffset()).toBe(0); @@ -82,21 +80,17 @@ describe('Tabs', () => { it('should show scroll buttons when the tabs overflow the container', async () => { await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue(); }); it('should hide scroll buttons when the tabs no longer overflow the container', async () => { - await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire - await tabsPageObject.setTabsWidth(1000); - await waitForUpdatesAsync(); // wait for the resize observer to fire + await tabsPageObject.setTabsWidth(300); // first make the tabs overflow + await tabsPageObject.setTabsWidth(1000); // then make the tabs fit expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse(); }); it('should scroll left when the left scroll button is clicked', async () => { await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire element.activeid = '6'; // scrolls to the last tab const currentScrollOffset = tabsPageObject.getTabsViewScrollOffset(); await tabsPageObject.clickScrollLeftButton(); @@ -107,21 +101,18 @@ describe('Tabs', () => { it('should not scroll left when the left scroll button is clicked and the first tab is active', async () => { await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire await tabsPageObject.clickScrollLeftButton(); expect(tabsPageObject.getTabsViewScrollOffset()).toBe(0); }); it('should scroll right when the right scroll button is clicked', async () => { await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire await tabsPageObject.clickScrollRightButton(); expect(tabsPageObject.getTabsViewScrollOffset()).toBeGreaterThan(0); }); it('should not scroll right when the right scroll button is clicked and the last tab is active', async () => { await tabsPageObject.setTabsWidth(300); - await waitForUpdatesAsync(); // wait for the resize observer to fire element.activeid = '6'; // scrolls to the last tab const currentScrollOffset = tabsPageObject.getTabsViewScrollOffset(); await tabsPageObject.clickScrollRightButton(); @@ -132,7 +123,6 @@ describe('Tabs', () => { it('should show scroll buttons when new tab is added and tabs overflow the container', async () => { await tabsPageObject.setTabsWidth(450); - await waitForUpdatesAsync(); // wait for the resize observer to fire expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse(); await tabsPageObject.addTab('New Tab With Extremely Long Name'); expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue(); @@ -140,7 +130,6 @@ describe('Tabs', () => { it('should hide scroll buttons when tab is removed and tabs no longer overflow the container', async () => { await tabsPageObject.setTabsWidth(500); - await waitForUpdatesAsync(); // wait for the resize observer to fire await tabsPageObject.addTab('New Tab With Extremely Long Name'); expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue(); await tabsPageObject.removeTab(6); @@ -149,7 +138,6 @@ describe('Tabs', () => { it('should show scroll buttons when tab label is updated and tabs overflow the container', async () => { await tabsPageObject.setTabsWidth(450); - await waitForUpdatesAsync(); // wait for the resize observer to fire expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse(); await tabsPageObject.updateTabLabel( 0, @@ -160,7 +148,6 @@ describe('Tabs', () => { it('should hide scroll buttons when tab label is updated and tabs no longer overflow the container', async () => { await tabsPageObject.setTabsWidth(550); - await waitForUpdatesAsync(); // wait for the resize observer to fire await tabsPageObject.addTab('New Tab With Extremely Long Name'); expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue(); await tabsPageObject.updateTabLabel(6, 'Tab 6'); diff --git a/packages/storybook/src/nimble/anchor-tabs/anchor-tabs.stories.ts b/packages/storybook/src/nimble/anchor-tabs/anchor-tabs.stories.ts index bd5b2edc45..2a240a68b4 100644 --- a/packages/storybook/src/nimble/anchor-tabs/anchor-tabs.stories.ts +++ b/packages/storybook/src/nimble/anchor-tabs/anchor-tabs.stories.ts @@ -40,7 +40,7 @@ const simpleTabs = [ { title: 'Nimble', id: '3', disabled: false, href: 'https://nimble.ni.dev' } ] as const; -const wideTabs: readonly AnchorTabArgs[] = [ +const wideTabs = [ { title: 'Tab 1 that is too long to fit in the drop down width', id: '1', diff --git a/packages/storybook/src/nimble/tabs/tabs.stories.ts b/packages/storybook/src/nimble/tabs/tabs.stories.ts index 6c69d14e9c..5424acd800 100644 --- a/packages/storybook/src/nimble/tabs/tabs.stories.ts +++ b/packages/storybook/src/nimble/tabs/tabs.stories.ts @@ -50,7 +50,7 @@ const simpleTabs = [ { title: 'Tab 3', id: '3', disabled: false } ] as const; -const wideTabs = [ +const wideTabs = [ { title: 'Tab 1 that is too long to fit in the drop down width', id: '1',