refactor(sbb-button): lit migration (#1997)

src/components/sbb-button/index.ts

@@ -0,0 +1 @@
+export * from './sbb-button';

src/components/sbb-button/sbb-button.e2e.ts

@@ -1,97 +1,103 @@
-import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
 import { waitForCondition } from '../../global/testing';
+import { assert, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { sendKeys } from '@web/test-runner-commands';
+import { EventSpy } from '../../global/testing/event-spy';
+import { SbbButton } from './sbb-button';
 
 describe('sbb-button', () => {
-  let element: E2EElement, page: E2EPage;
+  let element: SbbButton;
 
   beforeEach(async () => {
-    page = await newE2EPage();
-    await page.setContent('<sbb-button id="focus-id">I am a button</sbb-button>');
-    element = await page.find('sbb-button');
+    element = await fixture(html`<sbb-button id="focus-id">I am a button</sbb-button>`);
   });
 
   it('renders', async () => {
-    expect(element).toHaveClass('hydrated');
+    assert.instanceOf(element, SbbButton);
   });
 
   describe('events', () => {
     it('dispatches event on click', async () => {
-      await page.waitForChanges();
-      const clickSpy = await page.spyOnEvent('click');
+      await element.updateComplete;
+      const clickSpy = new EventSpy('click');
 
       await element.click();
       await waitForCondition(() => clickSpy.events.length === 1);
-      expect(clickSpy).toHaveReceivedEventTimes(1);
+      expect(clickSpy.count).to.be.equal(1);
     });
 
     it('should not dispatch event on click if disabled', async () => {
-      element.setAttribute('disabled', true);
+      element.setAttribute('disabled', 'true');
 
-      await page.waitForChanges();
+      await element.updateComplete;
 
-      const clickSpy = await page.spyOnEvent('click');
+      const clickSpy = new EventSpy('click');
 
-      await element.click();
-      expect(clickSpy).not.toHaveReceivedEvent();
+      element.click();
+      expect(clickSpy.count).not.to.be.greaterThan(0);
     });
 
     it('should dispatch event on click if is-static', async () => {
-      element.setAttribute('is-static', true);
+      element.setAttribute('is-static', 'true');
 
-      await page.waitForChanges();
+      await element.updateComplete;
 
-      const clickSpy = await page.spyOnEvent('click');
+      const clickSpy = new EventSpy('click');
 
       await element.click();
-      expect(clickSpy).toHaveReceivedEvent();
+      expect(clickSpy.count).to.be.greaterThan(0);
     });
 
     it('should dispatch click event on pressing Enter', async () => {
-      const clickSpy = await page.spyOnEvent('click');
-      await element.press('Enter');
-      expect(clickSpy).toHaveReceivedEvent();
+      const clickSpy = new EventSpy('click');
+      element.focus();
+      await sendKeys({ press: 'Enter' });
+      expect(clickSpy.count).to.be.greaterThan(0);
     });
 
     it('should dispatch click event on pressing Space', async () => {
-      const clickSpy = await page.spyOnEvent('click');
-      await element.press(' ');
-      expect(clickSpy).toHaveReceivedEvent();
+      const clickSpy = new EventSpy('click');
+      element.focus();
+      await sendKeys({ press: ' ' });
+      expect(clickSpy.count).to.be.greaterThan(0);
     });
 
     it('should dispatch click event on pressing Enter with href', async () => {
-      element.setAttribute('href', 'test');
-      await page.waitForChanges();
+      element.setAttribute('href', '#');
+      await element.updateComplete;
 
-      const clickSpy = await page.spyOnEvent('click');
-      await element.press('Enter');
-      expect(clickSpy).toHaveReceivedEvent();
+      const clickSpy = new EventSpy('click');
+      element.focus();
+      await sendKeys({ press: 'Enter' });
+      expect(clickSpy.count).to.be.greaterThan(0);
     });
 
     it('should not dispatch click event on pressing Space with href', async () => {
-      element.setAttribute('href', 'test');
-      await page.waitForChanges();
+      element.setAttribute('href', '#');
+      await element.updateComplete;
 
-      const clickSpy = await page.spyOnEvent('click');
-      await element.press(' ');
-      expect(clickSpy).not.toHaveReceivedEvent();
+      const clickSpy = new EventSpy('click');
+      element.focus();
+      await sendKeys({ press: ' ' });
+      expect(clickSpy.count).not.to.be.greaterThan(0);
     });
 
     it('should stop propagating host click if disabled', async () => {
-      element.setProperty('disabled', true);
+      element.disabled = true;
 
-      const clickSpy = await page.spyOnEvent('click');
+      const clickSpy = new EventSpy('click');
 
-      element.triggerEvent('click');
-      await page.waitForChanges();
+      element.dispatchEvent(new CustomEvent('click'));
+      await element.updateComplete;
 
-      expect(clickSpy).not.toHaveReceivedEvent();
+      expect(clickSpy.count).not.to.be.greaterThan(0);
     });
 
     it('should receive focus', async () => {
-      await element.focus();
-      await page.waitForChanges();
+      element.focus();
+      await element.updateComplete;
 
-      expect(await page.evaluate(() => document.activeElement.id)).toBe('focus-id');
+      expect(document.activeElement.id).to.be.equal('focus-id');
     });
   });
 });