Add e2e tests for slTabGroup

2026-01-12 12:09:26 +00:00 · 2020-08-10 21:40:03 +01:00
parent b77c7f5a43
commit 5218a08e00
1 changed files with 127 additions and 0 deletions
--- a/test/e2e/tab-group.e2e.ts
+++ b/test/e2e/tab-group.e2e.ts
@@ -0,0 +1,127 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<sl-tab-group>
+  <sl-tab slot="nav" panel="general">General</sl-tab>
+  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
+  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
+  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+
+  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
+  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
+  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
+  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
+</sl-tab-group>
+`;
+
+describe('tab group', () => {
+  it('should only show first panel by default', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const firstPanelName = 'general';
+
+    const firstPanel = await page.find(`sl-tab-panel[name=${firstPanelName}]`);
+    expect(await firstPanel.isVisible()).toBe(true);
+
+    const otherPanels = await page.findAll(`sl-tab-panel:not([name=${firstPanelName}]`);
+    for (let panel of otherPanels) {
+      expect(await panel.isVisible()).not.toBe(true);
+    }
+  });
+
+  it('should have first tab activated by default', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const firstPanelName = 'general';
+
+    const tab = await page.find(`sl-tab[panel=${firstPanelName}] >>> .tab`);
+    expect(tab).toHaveClass('tab--active');
+  });
+
+  it('should show appropriate panel when tab is selected by clicking', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const selectedPanelName = 'custom';
+
+    const selectedTab = await page.find(`sl-tab[panel=${selectedPanelName}]`);
+    await selectedTab.click();
+
+    const selectedPanel = await page.find(`sl-tab-panel[name=${selectedPanelName}]`);
+    expect(await selectedPanel.isVisible()).toBe(true);
+
+    const otherPanels = await page.findAll(`sl-tab-panel:not([name=${selectedPanelName}]`);
+    for (let panel of otherPanels) {
+      expect(await panel.isVisible()).not.toBe(true);
+    }
+  });
+
+  it('should have appropriate tab activated when selected by clicking', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const selectedPanelName = 'advanced';
+
+    const selectedTab = await page.find(`sl-tab[panel=${selectedPanelName}]`);
+    await selectedTab.click();
+
+    const tab = await page.find(`sl-tab[panel=${selectedPanelName}] >>> .tab`);
+    expect(tab).toHaveClass('tab--active');
+  });
+
+  it('should show appropriate panel when show method called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const selectedPanelName = 'custom';
+
+    const tabGroup = await page.find('sl-tab-group');
+    await tabGroup.callMethod('show', selectedPanelName);
+
+    const selectedPanel = await page.find(`sl-tab-panel[name=${selectedPanelName}]`);
+    expect(await selectedPanel.isVisible()).toBe(true);
+
+    const tab = await page.find(`sl-tab[panel=${selectedPanelName}] >>> .tab`);
+    expect(tab).toHaveClass('tab--active');
+  });
+
+  it('should emit slTabHide and slTabShow events when tab is changed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const tabGroup = await page.find('sl-tab-group');
+    const slTabHide = await tabGroup.spyOnEvent('slTabHide');
+    const slTabShow = await tabGroup.spyOnEvent('slTabShow');
+
+    const selectedPanelName = 'advanced';
+
+    const selectedTab = await page.find(`sl-tab[panel=${selectedPanelName}]`);
+    await selectedTab.click();
+
+    expect(slTabHide).toHaveReceivedEventTimes(1);
+    expect(slTabHide).toHaveReceivedEventDetail({ name: 'general' });
+    expect(slTabShow).toHaveReceivedEventTimes(1);
+    expect(slTabShow).toHaveReceivedEventDetail({ name: 'advanced' });
+  });
+
+  it('should change tab with the show method', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const tabGroup = await page.find('sl-tab-group');
+    const slTabHide = await tabGroup.spyOnEvent('slTabHide');
+    const slTabShow = await tabGroup.spyOnEvent('slTabShow');
+
+    const selectedPanelName = 'advanced';
+
+    const selectedTab = await page.find(`sl-tab[panel=${selectedPanelName}]`);
+    await selectedTab.click();
+
+    expect(slTabHide).toHaveReceivedEventTimes(1);
+    expect(slTabHide).toHaveReceivedEventDetail({ name: 'general' });
+    expect(slTabShow).toHaveReceivedEventTimes(1);
+    expect(slTabShow).toHaveReceivedEventDetail({ name: 'advanced' });
+  });
+});