feat(tabs): add test coverage, update import paths

adobe · Feb 16, 2023 · d104b52 · d104b52
1 parent 0249b94
commit d104b52
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/packages/tabs/stories/index.ts b/packages/tabs/stories/index.ts
@@ -12,9 +12,9 @@ governing permissions and limitations under the License.
 import { html, nothing, TemplateResult } from '@spectrum-web-components/base';
 import { repeat } from '@spectrum-web-components/base/src/directives.js';
 
-import '@spectrum-web-components/tabs/sp-tab-panel.js';
-import '@spectrum-web-components/tabs/sp-tab.js';
-import '@spectrum-web-components/tabs/sp-tabs.js';
+import '../sp-tab-panel.js';
+import '../sp-tab.js';
+import '../sp-tabs.js';
 import '../sp-tabs-overflow.js';
 
 export const renderTabsOverflowExample = (

diff --git a/packages/tabs/test/tabs-overflow.test.ts b/packages/tabs/test/tabs-overflow.test.ts
@@ -14,11 +14,15 @@ import { html, nothing } from '@spectrum-web-components/base';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { TabsOverflow } from '../src/TabsOverflow';
+import { Tab } from '../src/Tab';
 import { ActionButton } from '@spectrum-web-components/action-button';
 import '@spectrum-web-components/theme/sp-theme.js';
 import '@spectrum-web-components/theme/scale-medium.js';
 import '@spectrum-web-components/theme/theme-light.js';
 import '../sp-tabs-overflow.js';
+import '../sp-tabs.js';
+import '../sp-tab.js';
+import '../sp-tab-panel.js';
 
 const renderTabsOverflow = async (
     count: number,
@@ -110,4 +114,33 @@ describe('TabsOverflow', () => {
 
         expect(spTabsOverflows.getAttribute('size')).to.equal('m');
     });
+
+    it('should scroll when the button is clicked', async () => {
+        const el = await renderTabsOverflow(20, 'l', true);
+        await elementUpdated(el);
+
+        const spTabsOverflows: TabsOverflow = el.querySelector(
+            'sp-tabs-overflow'
+        ) as TabsOverflow;
+        const leftButton = spTabsOverflows.shadowRoot.querySelector(
+            '.left-scroll'
+        ) as ActionButton;
+
+        const rightButton = spTabsOverflows.shadowRoot.querySelector(
+            '.right-scroll'
+        ) as ActionButton;
+
+        leftButton.click();
+
+        const tabsEl = spTabsOverflows.querySelector('sp-tab') as Tab;
+        const initialLeft = tabsEl.getBoundingClientRect().left;
+        rightButton.click();
+        await elementUpdated(el);
+        rightButton.click();
+        await elementUpdated(el);
+        rightButton.click();
+        await elementUpdated(el);
+        const finalLeft = tabsEl.getBoundingClientRect().left;
+        expect(finalLeft).to.be.lessThanOrEqual(initialLeft);
+    });
 });