test(alert): add basic test coverage

components/alert/karma.conf.js

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const { createDefaultConfig } = require('@open-wc/testing-karma');
+const merge = require('deepmerge');
+
+module.exports = config => {
+  config.set(
+    merge(createDefaultConfig(config), {
+      files: [
+        // runs all files ending with .test in the test folder,
+        // can be overwritten by passing a --grep flag. examples:
+        //
+        // npm run test -- --grep test/foo/bar.test.js
+        // npm run test -- --grep test/bar/*
+        { pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' },
+      ],
+
+      esm: {
+        nodeResolve: true,
+      },
+      // you can overwrite/extend the config further
+    }),
+  );
+  return config;
+};

components/alert/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@accessible-web-components/alert",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0",
   "description": "An accessible alert web component",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
     "start": "es-dev-server --app-index demo/index.html --node-resolve --watch --open --preserve-symlinks",
-    "test": "npx karma start ../../karma.conf.cjs",
-    "test:watch": "npx karma start ../../karma.conf.cjs --auto-watch=true --single-run=false"
+    "test": "karma start --coverage",
+    "test:watch": "karma start --auto-watch=true --single-run=false"
   },
   "keywords": [
     "web components",
@@ -25,7 +25,8 @@
     "@open-wc/testing": "^2.0.0",
     "@open-wc/testing-karma": "^3.0.0",
     "es-dev-server": "^1.56.0",
-    "semantic-release": "^17.1.1"
+    "semantic-release": "^17.1.1",
+    "deepmerge": "^3.2.0"
   },
   "repository": {
     "type": "git",

components/alert/test/alert.test.js

@@ -0,0 +1,38 @@
+import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
+import '../awc-alert.js';
+
+describe('awc-alert', () => {
+  const markup = html`<awc-alert title="Test title" message="Test message"></awc-alert>`;
+
+  it('should initialise its markup correctly', async () => {
+    const el = await fixture(markup);
+
+    await elementUpdated(el);
+
+    expect(el).dom.to.equal(`
+      <awc-alert
+        message="Test message"
+        title="Test title">
+      </awc-alert>
+    `);
+  });
+
+  it('has a static shadow-dom', async () => {
+    const el = await fixture(html` <awc-alert></awc-alert> `);
+
+    expect(el).shadowDom.to.equal(`
+      <div role="alert">
+        <p class="alert__message">
+        </p>
+      </div>
+    `);
+  });
+
+  it('should pass an automated accessibility test', async () => {
+    const el = await fixture(markup);
+
+    await elementUpdated(el);
+
+    expect(el).to.be.accessible();
+  });
+});