refactor(sbb-tooltip): migrate tooltip and toolti-trigger

sbb-design-systems · Oct 12, 2023 · e1a97c0 · e1a97c0
1 parent dc981b5
commit e1a97c0
Show file tree

Hide file tree

Showing 12 changed files with 570 additions and 543 deletions.
diff --git a/src/components/sbb-navigation/sbb-navigation.e2e.ts b/src/components/sbb-navigation/sbb-navigation.e2e.ts
@@ -227,7 +227,6 @@ describe('sbb-navigation', () => {
     expect(secondSectionDialog).not.to.have.attribute('open');
 
     secondAction.click();
-    console.log('second click');
 
     await waitForCondition(() => secondSection.getAttribute('data-state') === 'opened');
     expect(firstSection.getAttribute('data-state')).not.to.be.equal('opened');

diff --git a/src/components/sbb-tooltip-trigger/index.ts b/src/components/sbb-tooltip-trigger/index.ts
@@ -0,0 +1 @@
+export * from './sbb-tooltip-trigger';
diff --git a/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.e2e.ts b/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.e2e.ts
@@ -1,112 +1,122 @@
 import events from '../sbb-tooltip/sbb-tooltip.events';
-import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
-import { waitForCondition } from '../../global/testing';
+
+import { assert, expect, fixture } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import { html } from 'lit/static-html.js';
+import { waitForCondition, waitForLitRender } from '../../global/testing';
+import { EventSpy } from '../../global/testing/event-spy';
+import '../sbb-tooltip/sbb-tooltip';
+import { SbbTooltipTrigger } from './sbb-tooltip-trigger';
 
 describe('sbb-tooltip-trigger', () => {
-  let element: E2EElement, page: E2EPage;
+  let element: SbbTooltipTrigger;
 
   beforeEach(async () => {
-    page = await newE2EPage();
-    await page.setContent(`
+    await fixture(html`
       <sbb-tooltip-trigger id="tooltip-trigger"></sbb-tooltip-trigger>
       <sbb-tooltip id="tooltip" trigger="tooltip-trigger" disable-animation>
-        Tooltip content. <sbb-link id="tooltip-link" variant="inline" sbb-tooltip-close>Link</sbb-link>
+        Tooltip content.
+        <sbb-link id="tooltip-link" variant="inline" sbb-tooltip-close>Link</sbb-link>
       </sbb-tooltip>
     `);
-    element = await page.find('sbb-tooltip-trigger');
-    await page.waitForChanges();
+    element = document.querySelector('sbb-tooltip-trigger');
+    await element.updateComplete;
   });
 
   it('renders', () => {
-    expect(element).toHaveClass('hydrated');
+    assert.instanceOf(element, SbbTooltipTrigger);
   });
 
   it('shows tooltip on tooltip-trigger click', async () => {
-    const dialog = await page.find('sbb-tooltip >>> dialog');
-    const willOpenEventSpy = await page.spyOnEvent(events.willOpen);
-    const didOpenEventSpy = await page.spyOnEvent(events.didOpen);
+    // NOTE: the ">>>" operator is not supported outside stencil. (convert it to something like "element.shadowRoot.querySelector(...)")
+    const dialog = document.querySelector('sbb-tooltip').shadowRoot.querySelector('dialog');
+    const willOpenEventSpy = new EventSpy(events.willOpen);
+    const didOpenEventSpy = new EventSpy(events.didOpen);
 
-    await page.waitForChanges();
+    await element.updateComplete;
     await element.click();
 
-    await page.waitForChanges();
+    await element.updateComplete;
     await waitForCondition(() => willOpenEventSpy.events.length === 1);
-    expect(willOpenEventSpy).toHaveReceivedEventTimes(1);
+    expect(willOpenEventSpy.count).to.be.equal(1);
 
-    await page.waitForChanges();
+    await element.updateComplete;
     await waitForCondition(() => didOpenEventSpy.events.length === 1);
-    expect(didOpenEventSpy).toHaveReceivedEventTimes(1);
+    expect(didOpenEventSpy.count).to.be.equal(1);
 
-    await page.waitForChanges();
-    expect(dialog).toHaveAttribute('open');
+    await element.updateComplete;
+    expect(dialog).to.have.attribute('open');
   });
 
   it("doesn't show tooltip on disabled tooltip-trigger click", async () => {
-    const dialog = await page.find('sbb-tooltip >>> dialog');
-    const willOpenEventSpy = await page.spyOnEvent(events.willOpen);
-    element.setProperty('disabled', true);
+    // NOTE: the ">>>" operator is not supported outside stencil. (convert it to something like "element.shadowRoot.querySelector(...)")
+    const dialog = document.querySelector('sbb-tooltip').shadowRoot.querySelector('dialog');
+    const willOpenEventSpy = new EventSpy(events.willOpen);
+    element.disabled = true;
 
-    await page.waitForChanges();
+    await element.updateComplete;
     await element.click();
 
-    await page.waitForChanges();
+    await element.updateComplete;
     await waitForCondition(() => willOpenEventSpy.events.length === 0);
-    expect(willOpenEventSpy).toHaveReceivedEventTimes(0);
+    expect(willOpenEventSpy.count).to.be.equal(0);
 
-    await page.waitForChanges();
-    expect(dialog).not.toHaveAttribute('open');
+    await element.updateComplete;
+    expect(dialog).not.to.have.attribute('open');
   });
 
   it('shows tooltip on keyboard event', async () => {
-    const tooltipTrigger = await page.find('sbb-tooltip-trigger');
-    const dialog = await page.find('sbb-tooltip >>> dialog');
-    const changeSpy = await tooltipTrigger.spyOnEvent('focus');
+    const tooltipTrigger = document.querySelector('sbb-tooltip-trigger');
+    // NOTE: the ">>>" operator is not supported outside stencil. (convert it to something like "element.shadowRoot.querySelector(...)")
+    const dialog = document.querySelector('sbb-tooltip').shadowRoot.querySelector('dialog');
+    const changeSpy = new EventSpy('focus', tooltipTrigger);
 
     await tooltipTrigger.focus();
-    await page.waitForChanges();
+    await element.updateComplete;
     await waitForCondition(() => changeSpy.events.length === 1);
-    expect(changeSpy).toHaveReceivedEventTimes(1);
+    expect(changeSpy.count).to.be.equal(1);
 
-    await page.keyboard.down('Enter');
-    await page.waitForChanges();
+    await sendKeys({ down: 'Enter' });
+    await element.updateComplete;
 
-    expect(dialog).toHaveAttribute('open');
+    expect(dialog).to.have.attribute('open');
   });
 
   it('shows tooltip on keyboard event with hover-trigger', async () => {
-    const tooltipTrigger = await page.find('sbb-tooltip-trigger');
-    const tooltip = await page.find('sbb-tooltip');
-    const dialog = await page.find('sbb-tooltip >>> dialog');
-    const changeSpy = await tooltipTrigger.spyOnEvent('focus');
+    const tooltipTrigger = document.querySelector('sbb-tooltip-trigger');
+    const tooltip = document.querySelector('sbb-tooltip');
+    // NOTE: the ">>>" operator is not supported outside stencil. (convert it to something like "element.shadowRoot.querySelector(...)")
+    const dialog = document.querySelector('sbb-tooltip').shadowRoot.querySelector('dialog');
+    const changeSpy = new EventSpy('focus', tooltipTrigger);
 
-    tooltip.setProperty('hoverTrigger', true);
-    await page.waitForChanges();
+    tooltip.hoverTrigger = true;
+    await element.updateComplete;
 
     await tooltipTrigger.focus();
-    await page.waitForChanges();
+    await element.updateComplete;
     await waitForCondition(() => changeSpy.events.length === 1);
-    expect(changeSpy).toHaveReceivedEventTimes(1);
+    expect(changeSpy.count).to.be.equal(1);
 
-    await page.keyboard.down('Enter');
-    await page.waitForChanges();
+    await sendKeys({ down: 'Enter' });
+    await element.updateComplete;
 
-    expect(dialog).toHaveAttribute('open');
+    expect(dialog).to.have.attribute('open');
   });
 
   it("doesn't focus tooltip-trigger on keyboard event when disabled", async () => {
-    const tooltipTrigger = await page.find('sbb-tooltip-trigger');
-    const tooltip = await page.find('sbb-tooltip');
-    const dialog = await page.find('sbb-tooltip >>> dialog');
-    const changeSpy = await tooltipTrigger.spyOnEvent('focus');
+    const tooltipTrigger = document.querySelector('sbb-tooltip-trigger');
+    const tooltip = document.querySelector('sbb-tooltip');
+    const dialog = document.querySelector('sbb-tooltip').shadowRoot.querySelector('dialog');
+    const changeSpy = new EventSpy('focus', tooltipTrigger);
 
-    element.setProperty('disabled', true);
-    tooltip.setProperty('hoverTrigger', true);
-    await page.waitForChanges();
+    tooltipTrigger.disabled = true;
+    tooltip.hoverTrigger = true;
+    await waitForLitRender(element);
 
-    await tooltipTrigger.focus();
-    await page.waitForChanges();
+    await sendKeys({ down: 'Tab' });
+    await waitForLitRender(element);
 
-    expect(changeSpy).not.toHaveReceivedEvent();
-    expect(dialog).not.toHaveAttribute('open');
+    expect(changeSpy.count).not.to.be.greaterThan(0);
+    expect(dialog).not.to.have.attribute('open');
   });
 });
diff --git a/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.scss b/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.scss
@@ -35,7 +35,7 @@
   --sbb-tooltip-color: var(--sbb-color-cement-default);
 }
 
-:host([disabled]:not([disabled='false'])) {
+:host([disabled]) {
   --sbb-tooltip-color: var(--sbb-color-graphite-default);
 
   @include sbb.if-forced-colors {
@@ -45,7 +45,7 @@
   pointer-events: none;
 }
 
-:host([disabled]:not([disabled='false'])[negative]:not([negative='false'])) {
+:host([disabled][negative]:not([negative='false'])) {
   --sbb-tooltip-color: var(--sbb-color-smoke-default);
 }
 
@@ -55,7 +55,7 @@
   @include sbb.icon-button-variables-negative;
 }
 
-:host([data-icon-small][disabled]:not([disabled='false'])) {
+:host([data-icon-small][disabled]) {
   @include sbb.icon-button-disabled('.sbb-tooltip-trigger');
 }
 
@@ -65,7 +65,7 @@
   @include sbb.icon-button-focus-visible('.sbb-tooltip-trigger');
 }
 
-:host([data-icon-small]:not([disabled]:not([disabled='false']), :active, [data-active]):hover) {
+:host([data-icon-small]:not([disabled], :active, [data-active]):hover) {
   @include sbb.icon-button-hover('.sbb-tooltip-trigger');
 }
 

diff --git a/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.spec.ts b/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.spec.ts
@@ -1,43 +1,50 @@
-import { SbbTooltipTrigger } from './sbb-tooltip-trigger';
-import { newSpecPage } from '@stencil/core/testing';
+import '../sbb-icon';
+import './sbb-tooltip-trigger';
+
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
 
 describe('sbb-tooltip-trigger', () => {
   it('renders', async () => {
-    const { root } = await newSpecPage({
-      components: [SbbTooltipTrigger],
-      html: '<sbb-tooltip-trigger />',
-    });
+    const root = await fixture(html`<sbb-tooltip-trigger />`);
 
-    expect(root).toEqualHtml(`
-        <sbb-tooltip-trigger role="button" tabindex="0" dir="ltr">
-          <mock:shadow-root>
-            <span class="sbb-tooltip-trigger">
-              <slot>
-                <sbb-icon name="circle-information-small"></sbb-icon>
-              </slot>
-            </span>
-          </mock:shadow-root>
-        </sbb-tooltip-trigger>
-      `);
+    expect(root).dom.to.be.equal(
+      `<sbb-tooltip-trigger role="button" tabindex="0" dir="ltr"></sbb-tooltip-trigger>`,
+    );
+    expect(root).shadowDom.to.be.equal(
+      `<span class="sbb-tooltip-trigger">
+        <slot>
+          <sbb-icon 
+            aria-hidden="true"
+            data-namespace="default"
+            name="circle-information-small"
+            role="img">
+          </sbb-icon>
+        </slot>
+      </span>
+    `,
+    );
   });
 
   it('renders with custom content', async () => {
-    const { root } = await newSpecPage({
-      components: [SbbTooltipTrigger],
-      html: '<sbb-tooltip-trigger>Custom Content</sbb-tooltip-trigger>',
-    });
+    const root = await fixture(html`<sbb-tooltip-trigger>Custom Content</sbb-tooltip-trigger>`);
 
-    expect(root).toEqualHtml(`
-        <sbb-tooltip-trigger role="button" tabindex="0" dir="ltr">
-          <mock:shadow-root>
-            <span class="sbb-tooltip-trigger">
-              <slot>
-                <sbb-icon name="circle-information-small"></sbb-icon>
-              </slot>
-            </span>
-          </mock:shadow-root>
-          Custom Content
-        </sbb-tooltip-trigger>
-      `);
+    expect(root).dom.to.be.equal(
+      `<sbb-tooltip-trigger role="button" tabindex="0" dir="ltr">
+        Custom Content
+      </sbb-tooltip-trigger>`,
+    );
+    expect(root).shadowDom.to.be.equal(
+      `<span class="sbb-tooltip-trigger">
+        <slot>
+          <sbb-icon 
+            aria-hidden="true"
+            data-namespace="default"
+            name="circle-information-small"
+            role="img">
+          </sbb-icon>
+        </slot>
+      </span>`,
+    );
   });
 });
diff --git a/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.stories.tsx b/src/components/sbb-tooltip-trigger/sbb-tooltip-trigger.stories.tsx
@@ -1,8 +1,11 @@
 /** @jsx h */
 import { Fragment, h, JSX } from 'jsx-dom';
 import readme from './readme.md?raw';
-import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/html';
+import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/web-components';
 import type { InputType } from '@storybook/types';
+import './sbb-tooltip-trigger';
+import '../sbb-tooltip';
+import '../sbb-link';
 
 const wrapperStyle = (context: StoryContext): Record<string, string> => ({
   'background-color': context.args.negative