Merge pull request #12 from abdmmar/ci

chore(ci): setup action

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+      - name: Install dependencies
+        run: yarn install
+      - name: Run test
+        run: yarn test
+      - name: Generate custom elements
+        run: yarn generate-ce
+      - name: Generate .d.ts file
+        run: yarn generate-dts
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

__tests__/__snapshots__/toast.js.snap

@@ -1,25 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`toast should add blank wc-toast-item to the DOM 1`] = `"<wc-toast-item type=\\"blank\\" duration=\\"\\" data-toast-item-id=\\"1\\" theme=\\"light\\"><wc-toast-icon type=\\"blank\\" icon=\\"\\" aria-hidden=\\"true\\"></wc-toast-icon><wc-toast-content message=\\"Hello World\\"></wc-toast-content></wc-toast-item>"`;
+exports[`toast should add blank wc-toast-item to the DOM 1`] = `"<wc-toast-item type="blank" duration="" data-toast-item-id="1" theme="light"><wc-toast-icon type="blank" icon="" aria-hidden="true"></wc-toast-icon><wc-toast-content message="Hello World"></wc-toast-content></wc-toast-item>"`;
 
-exports[`toast should add closeable wc-toast-item to the DOM 1`] = `"<wc-toast-item type=\\"blank\\" duration=\\"\\" data-toast-item-id=\\"12\\" theme=\\"light\\"><wc-toast-icon type=\\"blank\\" icon=\\"\\" aria-hidden=\\"true\\"></wc-toast-icon><wc-toast-content message=\\"Closeable\\"></wc-toast-content><wc-toast-close-button></wc-toast-close-button></wc-toast-item>"`;
+exports[`toast should add closeable wc-toast-item to the DOM 1`] = `"<wc-toast-item type="blank" duration="" data-toast-item-id="12" theme="light"><wc-toast-icon type="blank" icon="" aria-hidden="true"></wc-toast-icon><wc-toast-content message="Closeable"></wc-toast-content><wc-toast-close-button></wc-toast-close-button></wc-toast-item>"`;
 
-exports[`toast should add custom style wc-toast-item to the DOM 1`] = `"<wc-toast-item type=\\"blank\\" duration=\\"\\" data-toast-item-id=\\"11\\" theme=\\"custom\\" style=\\"--wc-toast-background:royalblue; --wc-toast-stroke:undefined; --wc-toast-color:white;\\"><wc-toast-icon type=\\"blank\\" icon=\\"\\" aria-hidden=\\"true\\"></wc-toast-icon><wc-toast-content message=\\"Custom Style\\"></wc-toast-content></wc-toast-item>"`;
+exports[`toast should add custom style wc-toast-item to the DOM 1`] = `"<wc-toast-item type="blank" duration="" data-toast-item-id="11" theme="custom" style="--wc-toast-background: royalblue; --wc-toast-color: white;"><wc-toast-icon type="blank" icon="" aria-hidden="true"></wc-toast-icon><wc-toast-content message="Custom Style"></wc-toast-content></wc-toast-item>"`;
 
-exports[`toast should add custom svg wc-toast-item to the DOM 1`] = `"<wc-toast-item type=\\"blank\\" duration=\\"\\" data-toast-item-id=\\"10\\" theme=\\"light\\"><wc-toast-icon type=\\"svg\\" icon=\\"\\" aria-hidden=\\"true\\"><svg slot=\\"svg\\" xmlns=\\"http://www.w3.org/2000/svg\\" fill=\\"none\\" viewBox=\\"0 0 24 24\\" stroke=\\"currentColor\\" width=\\"20\\" height=\\"20\\"><path stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"2\\" d=\\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\\"></path></svg></wc-toast-icon><wc-toast-content message=\\"Custom SVG\\"></wc-toast-content></wc-toast-item>"`;
+exports[`toast should add custom svg wc-toast-item to the DOM 1`] = `"<wc-toast-item type="blank" duration="" data-toast-item-id="10" theme="light"><wc-toast-icon type="svg" icon="" aria-hidden="true"><svg slot="svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg></wc-toast-icon><wc-toast-content message="Custom SVG"></wc-toast-content></wc-toast-item>"`;
 
-exports[`toast should add dark mode wc-toast-item to the DOM 1`] = `"<wc-toast-item type=\\"blank\\" duration=\\"\\" data-toast-item-id=\\"9\\" theme=\\"dark\\" style=\\"--wc-toast-background:#2a2a32; --wc-toast-stroke:#f9f9fa; --wc-toast-color:#f9f9fa;\\"><wc-toast-icon type=\\"blank\\" icon=\\"\\" aria-hidden=\\"true\\"></wc-toast-icon><wc-toast-content message=\\"❤ Dark mode\\"></wc-toast-content></wc-toast-item>"`;
+exports[`toast should add dark mode wc-toast-item to the DOM 1`] = `"<wc-toast-item type="blank" duration="" data-toast-item-id="9" theme="dark" style="--wc-toast-background: #2a2a32; --wc-toast-stroke: #f9f9fa; --wc-toast-color: #f9f9fa;"><wc-toast-icon type="blank" icon="" aria-hidden="true"></wc-toast-icon><wc-toast-content message="❤ Dark mode"></wc-toast-content></wc-toast-item>"`;
 
-exports[`toast should add emoji wc-toast-item to the DOM 1`] = `"<wc-toast-item type=\\"blank\\" duration=\\"\\" data-toast-item-id=\\"8\\" theme=\\"light\\"><wc-toast-icon type=\\"custom\\" icon=\\"🤓\\" aria-hidden=\\"true\\"></wc-toast-icon><wc-toast-content message=\\"Icon\\"></wc-toast-content></wc-toast-item>"`;
+exports[`toast should add emoji wc-toast-item to the DOM 1`] = `"<wc-toast-item type="blank" duration="" data-toast-item-id="8" theme="light"><wc-toast-icon type="custom" icon="🤓" aria-hidden="true"></wc-toast-icon><wc-toast-content message="Icon"></wc-toast-content></wc-toast-item>"`;
 
-exports[`toast should add error wc-toast-item to the DOM 1`] = `"<wc-toast-item type=\\"error\\" duration=\\"\\" data-toast-item-id=\\"3\\" theme=\\"light\\"><wc-toast-icon type=\\"error\\" icon=\\"\\" aria-hidden=\\"true\\"></wc-toast-icon><wc-toast-content message=\\"Error\\"></wc-toast-content></wc-toast-item>"`;
+exports[`toast should add error wc-toast-item to the DOM 1`] = `"<wc-toast-item type="error" duration="" data-toast-item-id="3" theme="light"><wc-toast-icon type="error" icon="" aria-hidden="true"></wc-toast-icon><wc-toast-content message="Error"></wc-toast-content></wc-toast-item>"`;
 
-exports[`toast should add promise-error wc-toast-item to the DOM: error 1`] = `"<wc-toast-item type=\\"error\\" duration=\\"\\" data-toast-item-id=\\"7\\" theme=\\"light\\"><wc-toast-icon type=\\"error\\" icon=\\"\\" aria-hidden=\\"true\\"></wc-toast-icon><wc-toast-content message=\\"Authentication failed!\\"></wc-toast-content></wc-toast-item>"`;
+exports[`toast should add promise-error wc-toast-item to the DOM: error 1`] = `"<wc-toast-item type="error" duration="" data-toast-item-id="7" theme="light"><wc-toast-icon type="error" icon="" aria-hidden="true"></wc-toast-icon><wc-toast-content message="Authentication failed!"></wc-toast-content></wc-toast-item>"`;
 
-exports[`toast should add promise-error wc-toast-item to the DOM: loading 1`] = `"<wc-toast-item type=\\"loading\\" duration=\\"\\" data-toast-item-id=\\"6\\" theme=\\"light\\"><wc-toast-icon type=\\"loading\\" icon=\\"\\" aria-hidden=\\"true\\"></wc-toast-icon><wc-toast-content message=\\"Authenticating...\\"></wc-toast-content></wc-toast-item>"`;
+exports[`toast should add promise-error wc-toast-item to the DOM: loading 1`] = `"<wc-toast-item type="loading" duration="" data-toast-item-id="6" theme="light"><wc-toast-icon type="loading" icon="" aria-hidden="true"></wc-toast-icon><wc-toast-content message="Authenticating..."></wc-toast-content></wc-toast-item>"`;
 
-exports[`toast should add promise-success wc-toast-item to the DOM: loading 1`] = `"<wc-toast-item type=\\"loading\\" duration=\\"\\" data-toast-item-id=\\"4\\" theme=\\"light\\"><wc-toast-icon type=\\"loading\\" icon=\\"\\" aria-hidden=\\"true\\"></wc-toast-icon><wc-toast-content message=\\"Authenticating...\\"></wc-toast-content></wc-toast-item>"`;
+exports[`toast should add promise-success wc-toast-item to the DOM: loading 1`] = `"<wc-toast-item type="loading" duration="" data-toast-item-id="4" theme="light"><wc-toast-icon type="loading" icon="" aria-hidden="true"></wc-toast-icon><wc-toast-content message="Authenticating..."></wc-toast-content></wc-toast-item>"`;
 
-exports[`toast should add promise-success wc-toast-item to the DOM: success 1`] = `"<wc-toast-item type=\\"success\\" duration=\\"\\" data-toast-item-id=\\"5\\" theme=\\"light\\"><wc-toast-icon type=\\"success\\" icon=\\"\\" aria-hidden=\\"true\\"></wc-toast-icon><wc-toast-content message=\\"Authentication success!\\"></wc-toast-content></wc-toast-item>"`;
+exports[`toast should add promise-success wc-toast-item to the DOM: success 1`] = `"<wc-toast-item type="success" duration="" data-toast-item-id="5" theme="light"><wc-toast-icon type="success" icon="" aria-hidden="true"></wc-toast-icon><wc-toast-content message="Authentication success!"></wc-toast-content></wc-toast-item>"`;
 
-exports[`toast should add success wc-toast-item to the DOM 1`] = `"<wc-toast-item type=\\"success\\" duration=\\"\\" data-toast-item-id=\\"2\\" theme=\\"light\\"><wc-toast-icon type=\\"success\\" icon=\\"\\" aria-hidden=\\"true\\"></wc-toast-icon><wc-toast-content message=\\"Success\\"></wc-toast-content></wc-toast-item>"`;
+exports[`toast should add success wc-toast-item to the DOM 1`] = `"<wc-toast-item type="success" duration="" data-toast-item-id="2" theme="light"><wc-toast-icon type="success" icon="" aria-hidden="true"></wc-toast-icon><wc-toast-content message="Success"></wc-toast-content></wc-toast-item>"`;

__tests__/__snapshots__/wc-toast.js.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`wc-toast should add wc-toast with position=bottom-center to the DOM 1`] = `"<wc-toast position=\\"bottom-center\\" role=\\"status\\" aria-live=\\"polite\\" style=\\"--wc-toast-factor:-1; --wc-toast-position:center; --wc-toast-direction:column;\\"></wc-toast>"`;
+exports[`wc-toast should add wc-toast with position=bottom-center to the DOM 1`] = `"<wc-toast position="bottom-center" style="--wc-toast-factor: -1; --wc-toast-position: center; --wc-toast-direction: column;" role="status" aria-live="polite"></wc-toast>"`;
 
-exports[`wc-toast should add wc-toast with position=bottom-left to the DOM 1`] = `"<wc-toast position=\\"bottom-left\\" role=\\"status\\" aria-live=\\"polite\\" style=\\"--wc-toast-factor:-1; --wc-toast-position:flex-start; --wc-toast-direction:column;\\"></wc-toast>"`;
+exports[`wc-toast should add wc-toast with position=bottom-left to the DOM 1`] = `"<wc-toast position="bottom-left" style="--wc-toast-factor: -1; --wc-toast-position: flex-start; --wc-toast-direction: column;" role="status" aria-live="polite"></wc-toast>"`;
 
-exports[`wc-toast should add wc-toast with position=bottom-right to the DOM 1`] = `"<wc-toast position=\\"bottom-right\\" role=\\"status\\" aria-live=\\"polite\\" style=\\"--wc-toast-factor:-1; --wc-toast-position:flex-end; --wc-toast-direction:column;\\"></wc-toast>"`;
+exports[`wc-toast should add wc-toast with position=bottom-right to the DOM 1`] = `"<wc-toast position="bottom-right" style="--wc-toast-factor: -1; --wc-toast-position: flex-end; --wc-toast-direction: column;" role="status" aria-live="polite"></wc-toast>"`;
 
-exports[`wc-toast should add wc-toast with position=top-center to the DOM 1`] = `"<wc-toast position=\\"top-center\\" role=\\"status\\" aria-live=\\"polite\\" style=\\"--wc-toast-factor:1; --wc-toast-position:center; --wc-toast-direction:column-reverse;\\"></wc-toast>"`;
+exports[`wc-toast should add wc-toast with position=top-center to the DOM 1`] = `"<wc-toast position="top-center" style="--wc-toast-factor: 1; --wc-toast-position: center; --wc-toast-direction: column-reverse;" role="status" aria-live="polite"></wc-toast>"`;
 
-exports[`wc-toast should add wc-toast with position=top-left to the DOM 1`] = `"<wc-toast position=\\"top-left\\" role=\\"status\\" aria-live=\\"polite\\" style=\\"--wc-toast-factor:1; --wc-toast-position:flex-start; --wc-toast-direction:column-reverse;\\"></wc-toast>"`;
+exports[`wc-toast should add wc-toast with position=top-left to the DOM 1`] = `"<wc-toast position="top-left" style="--wc-toast-factor: 1; --wc-toast-position: flex-start; --wc-toast-direction: column-reverse;" role="status" aria-live="polite"></wc-toast>"`;
 
-exports[`wc-toast should add wc-toast with position=top-right to the DOM 1`] = `"<wc-toast position=\\"top-right\\" role=\\"status\\" aria-live=\\"polite\\" style=\\"--wc-toast-factor:1; --wc-toast-position:flex-end; --wc-toast-direction:column-reverse;\\"></wc-toast>"`;
+exports[`wc-toast should add wc-toast with position=top-right to the DOM 1`] = `"<wc-toast position="top-right" style="--wc-toast-factor: 1; --wc-toast-position: flex-end; --wc-toast-direction: column-reverse;" role="status" aria-live="polite"></wc-toast>"`;

__tests__/toast.js

@@ -295,7 +295,7 @@ describe('toast', () => {
     expect(toastItem.getAttribute('data-toast-item-id')).toBe(toastItemCount.toString());
     expect(toastItem.getAttribute('theme')).toBe('custom');
     expect(toastItem.style.getPropertyValue('--wc-toast-background')).toBe(customStyle.background);
-    expect(toastItem.style.getPropertyValue('--wc-toast-stroke')).toBe('undefined');
+    expect(toastItem.style.getPropertyValue('--wc-toast-stroke')).toBe('');
     expect(toastItem.style.getPropertyValue('--wc-toast-color')).toBe(customStyle.color);
     expect(toastItem.outerHTML).toMatchSnapshot();
 

jest.config.js

@@ -1,7 +1,13 @@
 export default {
   rootDir: '.',
-  runner: 'jest-electron/runner',
-  testEnvironment: 'jest-electron/environment',
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    browsers: [
+      'chrome',
+      'firefox',
+      'safari'
+    ]
+  },
   transform: {
     '^.+\\.[t|j]s?$': 'babel-jest'
   },

package.json

@@ -1,13 +1,14 @@
 {
   "name": "wc-toast",
-  "version": "1.2.7",
+  "version": "0.0.0-development",
   "author": "Abdullah Ammar <[email protected]> (https://abdmmar.com/)",
   "license": "MIT",
   "type": "module",
   "main": "src/index.js",
   "module": "src/index.js",
   "files": [
-    "src"
+    "src",
+    "types"
   ],
   "exports": {
     ".": {
@@ -30,11 +31,12 @@
     "generate-ce": "cem analyze --globs \"./src/wc-*.js\" --outdir \"./src/\"",
     "generate-dts": "tsc",
     "test:watch": "jest --watch --verbose false",
-    "test": "jest"
+    "test": "jest",
+    "semantic-release": "semantic-release"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/abdmmar/wc-toast.git"
+    "url": "https://github.com/abdmmar/wc-toast.git"
   },
   "bugs": {
     "url": "https://github.com/abdmmar/wc-toast/issues"
@@ -46,10 +48,23 @@
     "babel-jest": "27.4.5",
     "eslint": "8.4.1",
     "eslint-config-prettier": "8.3.0",
-    "jest": "26",
+    "jest": "29",
     "jest-electron": "0.1.12",
+    "jest-environment-jsdom": "29.2.1",
     "prettier": "2.5.1",
     "regenerator-runtime": "0.13.9",
+    "semantic-release": "^19.0.5",
     "typescript": "4.5.4"
+  },
+  "release": {
+    "branches": [
+      "main",
+      "next",
+      "canary",
+      {
+        "name": "/(?<type>chore|feat|feature|fix|hotfix|refactor|style)(?<scope>(?:\\([^()\r\n]*\\)|\\()?(?<breaking>!)?)(?<subject>:.*)?/gm",
+        "prerelease": true
+      }
+    ]
   }
 }

test/utils.js

@@ -24,5 +24,5 @@ export function getToastItemFromDOM() {
  * Source: https://stackoverflow.com/questions/44741102/how-to-make-jest-wait-for-all-asynchronous-code-to-finish-execution-before-expec
  */
 export function flushPromises() {
-  new Promise(setImmediate);
+  new Promise(process.nextTick);
 }