feat(components): add e2e for the post-tabs

packages/components/cypress/e2e/collapsible.cy.ts

@@ -1,7 +1,8 @@
 describe('collapsible', () => {
   describe('default', () => {
     beforeEach(() => {
-      cy.registerCollapsibleFrom('/iframe.html?id=components-collapsible--default');
+      cy.getComponent('collapsible');
+      cy.get('@collapsible').find('.collapse').as('collapse');
       cy.get('@collapsible').find('.accordion-header').as('header');
       cy.get('@collapsible').find('.accordion-body').as('body');
     });
@@ -62,9 +63,8 @@ describe('collapsible', () => {
 
   describe('initially collapsed', () => {
     beforeEach(() => {
-      cy.registerCollapsibleFrom(
-        '/iframe.html?id=components-collapsible--initially-collapsed',
-      );
+      cy.getComponent('collapsible', 'initially-collapsed');
+      cy.get('@collapsible').find('.collapse').as('collapse');
       cy.get('@collapsible').find('.accordion-header').as('header');
     });
 
@@ -89,7 +89,8 @@ describe('collapsible', () => {
 
   describe('custom trigger', () => {
     beforeEach(() => {
-      cy.registerCollapsibleFrom('/iframe.html?id=components-collapsible--custom-trigger');
+      cy.getComponent('collapsible', 'custom-trigger');
+      cy.get('@collapsible').find('.collapse').as('collapse');
       cy.get('[aria-controls="collapsible-example--custom-trigger"]').as('controls');
       cy.get('@controls').contains('Toggle').as('toggle');
       cy.get('@controls').contains('Show').as('show');

packages/components/cypress/e2e/tabs.cy.ts

@@ -0,0 +1,74 @@
+describe('tabs', () => {
+  describe('default', () => {
+    beforeEach(() => {
+      cy.getComponent('tabs');
+      cy.get('post-tab-header').as('headers');
+      cy.get('post-tab-panel').as('panels');
+    });
+
+    it('should render', () => {
+      cy.get('@tabs').should('exist');
+    });
+
+    it('should show three tab headers', () => {
+      cy.get('@headers').should('have.length', 3);
+    });
+
+    it('should only show the first tab header as active', () => {
+      cy.get('@headers').each(($el, index) => {
+        cy.wrap($el).find('.active').should(index === 0 ? 'exist' : 'not.exist');
+      });
+    });
+
+    it('should only show the tab panel associated with the first tab header', () => {
+      cy.get('@panels').should('have.length', 1);
+      cy.get('@headers').first().invoke('attr', 'panel').then(panel => {
+        cy.get('@panels').invoke('attr', 'name').should('equal', panel);
+      });
+    });
+
+    it('should activate a clicked tab header and deactivate the tab header that was previously activated', () => {
+      cy.get('@headers').last().click();
+
+      cy.get('@headers').first().find('.active').should('not.exist');
+      cy.get('@headers').last().find('.active').should('exist');
+    });
+
+    it('should show the panel associated with a clicked tab header and hide the panel that was previously shown', () => {
+      cy.get('@headers').last().click();
+
+      // wait for the fade out animation to complete
+      cy.wait(200);
+
+      cy.get('@headers').last().invoke('attr', 'panel').then(panel => {
+        cy.get('@panels').should('have.length', 1);
+        cy.get('@panels').invoke('attr', 'name').should('equal', panel);
+      });
+    });
+  });
+
+  describe('active panel', () => {
+    beforeEach(() => {
+      cy.getComponent('tabs', 'active-panel');
+      cy.get('post-tab-header').as('headers');
+      cy.get('post-tab-panel').as('panels');
+    });
+
+    it('should only show the requested active tab panel', () => {
+      cy.get('@panels').should('have.length', 1);
+      cy.get('@tabs').invoke('attr', 'active-panel').then(activePanel => {
+        cy.get('@panels').invoke('attr', 'name').should('equal', activePanel);
+      });
+    });
+
+    it('should show as active only the tab header associated with the requested active tab panel', () => {
+      cy.get('@tabs').invoke('attr', 'active-panel').then(activePanel => {
+        cy.get('@headers').each($el => {
+          cy.wrap($el).invoke('attr', 'panel').then(panel => {
+            cy.wrap($el).find('.active').should(panel === activePanel ? 'exist' : 'not.exist');
+          });
+        });
+      });
+    });
+  });
+});

packages/components/cypress/support/commands.ts

@@ -48,10 +48,9 @@ export const isInViewport = function (_chai: Chai.ChaiStatic) {
 
 chai.use(isInViewport);
 
-Cypress.Commands.add('registerCollapsibleFrom', (url: string) => {
-  cy.visit(url);
-  cy.get('post-collapsible').as('collapsible');
-  cy.get('@collapsible').find('.collapse').as('collapse');
+Cypress.Commands.add('getComponent', (component: string, story = 'default') => {
+  cy.visit(`/iframe.html?id=components-${component}--${story}`);
+  cy.get(`post-${component}`).as(component);
 });
 
 Cypress.Commands.add('checkVisibility', (visibility: 'visible' | 'hidden') => {

packages/components/cypress/support/index.d.ts

@@ -1,7 +1,7 @@
 declare global {
   namespace Cypress {
     interface Chainable {
-      registerCollapsibleFrom(url: string): Chainable<any>;
+      getComponent(component: string, story?: string): Chainable<any>;
       checkVisibility(visibility: 'visible' | 'hidden'): Chainable<any>;
       checkAriaExpanded(isExpanded: 'true' | 'false'): Chainable<any>;
     }

packages/documentation/cypress/snapshots/components/tab.snapshot.ts → packages/documentation/cypress/snapshots/components/tabs.snapshot.ts

@@ -1,6 +1,6 @@
-describe('Tab', () => {
+describe('Tabs', () => {
   it('default', () => {
-    cy.visit('./iframe.html?id=snapshots--tab');
+    cy.visit('./iframe.html?id=snapshots--tabs');
     cy.percySnapshot('Tabs', { widths: [1440] });
   });
 });

packages/documentation/src/stories/components/tab/tab.docs.mdx → packages/documentation/src/stories/components/tabs/tabs.docs.mdx

@@ -1,9 +1,9 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
-import * as TabStories from './tab.stories';
+import * as TabStories from './tabs.stories';
 
 <Meta of={TabStories} />
 
-# Tab
+# Tabs
 <div className="lead">
   Organize content across different sections that are shown one at a time.
 </div>

packages/documentation/src/stories/components/tab/tab.snapshot.stories.tsx → packages/documentation/src/stories/components/tabs/tabs.snapshot.stories.tsx

@@ -1,5 +1,5 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
-import meta, { Default } from './tab.stories';
+import meta from './tabs.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils/bombArgs';
 
@@ -10,7 +10,7 @@ export default {
 
 type Story = StoryObj<HTMLPostTabsElement>;
 
-export const Tab: Story = {
+export const Tabs: Story = {
   render: (_args: HTMLPostTabsElement, context: StoryContext<HTMLPostTabsElement>) => {
     return html`
       <div>

packages/documentation/src/stories/components/tab/tab.stories.tsx → packages/documentation/src/stories/components/tabs/tabs.stories.tsx

@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta<HTMLPostTabsElement> =  {
-  title: 'Components/Tab',
+  title: 'Components/Tabs',
   component: 'post-tabs',
   render: renderTabs,
   parameters: {