Minor fixes.

ni · Oct 22, 2024 · fa56503 · fa56503
1 parent 6288f36
commit fa56503
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 28 deletions.
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
@@ -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,15 +454,13 @@ 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();
         });
 
         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
@@ -33,6 +33,7 @@ export abstract class TabsBasePageObject<T extends TabsOwner> {
     public async setTabsWidth(width: number): Promise<void> {
         this.tabsElement.style.width = `${width}px`;
         await waitForUpdatesAsync();
+        await waitForUpdatesAsync(); // wait for the resize observer to fire
     }
 
     public async clickScrollLeftButton(): Promise<void> {

diff --git 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,15 +123,13 @@ 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();
         });
 
         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
@@ -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
@@ -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',