add test runner and initial alert tests

package.json

@@ -33,7 +33,9 @@
     "build": "node scripts/build.cjs",
     "prepublishOnly": "npm run build",
     "prettier": "prettier --write --loglevel warn .",
-    "create": "node scripts/create-component.cjs"
+    "create": "node scripts/create-component.cjs",
+    "test": "web-test-runner \"src/**/*.test.ts\" --node-resolve --puppeteer",
+    "test:watch": "web-test-runner \"src/**/*.test.ts\" --node-resolve --puppeteer --watch"
   },
   "dependencies": {
     "@popperjs/core": "^2.7.0",
@@ -44,7 +46,11 @@
     "qr-creator": "^1.0.0"
   },
   "devDependencies": {
+    "@open-wc/testing": "^2.5.33",
     "@types/color": "^3.0.1",
+    "@web/dev-server-esbuild": "^0.2.12",
+    "@web/test-runner": "^0.13.5",
+    "@web/test-runner-puppeteer": "^0.10.0",
     "bluebird": "^3.7.2",
     "bootstrap-icons": "^1.4.1",
     "browser-sync": "^2.26.14",
@@ -65,6 +71,7 @@
     "prettier": "^2.2.1",
     "recursive-copy": "^2.0.11",
     "sass": "^1.32.7",
+    "sinon": "^11.1.1",
     "tslib": "^2.2.0",
     "typedoc": "^0.20.28",
     "typescript": "^4.2.4",

src/components/alert/alert.test.ts

@@ -0,0 +1,93 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
+
+import '../../../dist/shoelace.js';
+import type SlAlert from './alert';
+
+describe('<sl-alert>', () => {
+  it('should be visible with the open attribute', async () => {
+    const el = await fixture(html` <sl-alert open>I am an alert</sl-alert> `);
+    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+
+    expect(base.hidden).to.be.false;
+  });
+
+  it('should not be visible without the open attribute', async () => {
+    const el = await fixture(html` <sl-alert open>I am an alert</sl-alert> `);
+    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+
+    expect(base.hidden).to.be.false;
+  });
+
+  it('should emit sl-show and sl-after-show when calling show()', async () => {
+    const el = (await fixture(html` <sl-alert>I am an alert</sl-alert> `)) as SlAlert;
+    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+    const showHandler = sinon.spy();
+    const afterShowHandler = sinon.spy();
+
+    el.addEventListener('sl-show', showHandler);
+    el.addEventListener('sl-after-show', afterShowHandler);
+    el.show();
+
+    await waitUntil(() => showHandler.calledOnce);
+    await waitUntil(() => afterShowHandler.calledOnce);
+
+    expect(showHandler).to.have.been.calledOnce;
+    expect(afterShowHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.false;
+  });
+
+  it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
+    const el = (await fixture(html` <sl-alert open>I am an alert</sl-alert> `)) as SlAlert;
+    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+    const hideHandler = sinon.spy();
+    const afterHideHandler = sinon.spy();
+
+    el.addEventListener('sl-hide', hideHandler);
+    el.addEventListener('sl-after-hide', afterHideHandler);
+    el.hide();
+
+    await waitUntil(() => hideHandler.calledOnce);
+    await waitUntil(() => afterHideHandler.calledOnce);
+
+    expect(hideHandler).to.have.been.calledOnce;
+    expect(afterHideHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.true;
+  });
+
+  it('should emit sl-show and sl-after-show when adding the open attribute', async () => {
+    const el = (await fixture(html` <sl-alert>I am an alert</sl-alert> `)) as SlAlert;
+    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+    const showHandler = sinon.spy();
+    const afterShowHandler = sinon.spy();
+
+    el.addEventListener('sl-show', showHandler);
+    el.addEventListener('sl-after-show', afterShowHandler);
+    el.open = true;
+
+    await waitUntil(() => showHandler.calledOnce);
+    await waitUntil(() => afterShowHandler.calledOnce);
+
+    expect(showHandler).to.have.been.calledOnce;
+    expect(afterShowHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.false;
+  });
+
+  it('should emit sl-hide and sl-after-hide when removing the open attribute', async () => {
+    const el = (await fixture(html` <sl-alert open>I am an alert</sl-alert> `)) as SlAlert;
+    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
+    const hideHandler = sinon.spy();
+    const afterHideHandler = sinon.spy();
+
+    el.addEventListener('sl-hide', hideHandler);
+    el.addEventListener('sl-after-hide', afterHideHandler);
+    el.open = false;
+
+    await waitUntil(() => hideHandler.calledOnce);
+    await waitUntil(() => afterHideHandler.calledOnce);
+
+    expect(hideHandler).to.have.been.calledOnce;
+    expect(afterHideHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.true;
+  });
+});

web-test-runner.config.js

@@ -0,0 +1,13 @@
+import { esbuildPlugin } from '@web/dev-server-esbuild';
+
+export default {
+  plugins: [esbuildPlugin({ ts: true, target: 'auto' })],
+  testRunnerHtml: testFramework => `
+    <html>
+      <head></head>
+      <body>
+        <script type="module" src="${testFramework}"></script>
+      </body>
+    </html>
+  `
+};