Setup GitHub actions to run CI/CD (#104)

* ci: add github actions yaml config file

* ci: add stub Cypress test so it does not fail

* ci: change ie browserlist entry causing Cypress e2e tests to fail

* test: add explicit cypress component test command to tests action

* ci: add npm install command to explicitly install peer dependencies

* ci: move vue to a dev dependecy so it is always installed
       npm v6 does not automatically install peer dependencies

* ci: fix path to cypress alias of vue and reduce GH action env's until fully setup

* chore: update git emojis and remove `wip` type

* docs: add docs in readme file about testing GH actions locally

* style: switch GH actions yaml config to use yaml array syntax

ISSUES CLOSED: #100

Author: patrickcate

.browserslistrc

@@ -2,4 +2,4 @@
 last 2 versions
 Firefox ESR
 not dead
-not ie
+not ie >= 0

.cz-config.js

@@ -4,7 +4,7 @@ module.exports = {
   types: [
     { value: 'feat', name: '✨ feat: A new feature' },
     { value: 'fix', name: '🐛 fix: A bug fix' },
-    { value: 'docs', name: '📝 docs: Documentation only changes' },
+    { value: 'docs', name: '📚 docs: Documentation only changes' },
     {
       value: 'style',
       name: '🎨 style: Changes that do not affect the meaning of the code\n(white-space, formatting, missing semi-colons, etc)',
@@ -15,15 +15,15 @@ module.exports = {
     },
     {
       value: 'perf',
-      name: '⚡ perf: A code change that improves performance',
+      name: '🚀 perf: A code change that improves performance',
     },
     {
       value: 'test',
       name: '✅ test: Adding missing tests or stories (example scopes: Cypress, Storybook)',
     },
     {
       value: 'build',
-      name: '🔨 build: Changes that affect the build system or external dependencies (example scopes: Vite, npm, hygen)',
+      name: '🛠 build: Changes that affect the build system or external dependencies (example scopes: Vite, npm, hygen)',
     },
     {
       value: 'ci',
@@ -33,8 +33,7 @@ module.exports = {
       value: 'chore',
       name: '👷 chore: Changes to the build process or auxiliary tools\nand libraries such as documentation generation',
     },
-    { value: 'revert', name: '⏪ revert: Reverts a previous commit' },
-    { value: 'WIP', name: '🚧 WIP: Work in progress' },
+    { value: 'revert', name: '🗑 revert: Reverts a previous commit' },
   ],
 
   // override the messages, defaults are as follows

.github/workflows/tests.yml

@@ -0,0 +1,60 @@
+name: Tests
+
+on:
+  - push
+  - pull_request
+
+jobs:
+  # This job lints all files with ESLint.
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint files
+        run: npm run lint
+
+  # This job runs all Cypress tests.
+  cypress-test:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os:
+          - ubuntu-latest
+          # TODO: Re-enable once a public release of the library is available.
+          # Mac and windows env's take significantly longer to run.
+          # - macos-latest
+          # - windows-latest
+        node:
+          - 14
+          - 16
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: E2E tests on Node v${{ matrix.node }}
+        uses: cypress-io/github-action@v2
+        with:
+          command: npm run test:e2e
+
+      - name: Component tests on Node v${{ matrix.node }}
+        uses: cypress-io/github-action@v2
+        with:
+          # We have already installed everything.
+          install: false
+          command: npm run test:component

.gitignore

@@ -8,6 +8,7 @@ dist-ssr
 cypress/examples
 cypress/videos
 cypress/screenshots
+cypress/downloads
 
 # Storybook artifacts.
 .storybook/examples

README.md

@@ -6,3 +6,18 @@ A Vue 3 implementation of the [USWDS](https://designsystem.digital.gov).
 
 - [VSCode](https://code.visualstudio.com)
 - [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+
+## Testing Github Actions Locally
+
+Use [act](https://github.com/nektos/act) to test Github actions locally.
+
+**Note:** Because the [act](https://github.com/nektos/act) docker containers do not have the XVFB dependency installed, you must use a custom docker container from Cypress by adding:
+
+```yaml
+container:
+  image: cypress/browsers:node14.17.0-chrome91-ff89
+```
+
+The specific container can be one of [Cypress's docker images](https://github.com/cypress-io/cypress-docker-images).
+
+You may also need to temporarily adjust the node matrix versions to use the provided by the Cypress container.

cypress.json

@@ -1,4 +1,5 @@
 {
+  "video": false,
   "component": {
     "componentFolder": "src/components",
     "testFiles": "**/*.test.js"

cypress/integration/init.test.js

@@ -0,0 +1,5 @@
+describe('cypress runs', () => {
+  it('cypress does not fail because of no test files in integration folder', () => {
+    expect(true).to.equal(true)
+  })
+})

cypress/plugins/index.js

@@ -28,7 +28,15 @@ module.exports = (on, config) => {
       configFile: path.resolve(__dirname, '..', '..', 'vite.config.js'),
       resolve: {
         alias: {
-          vue: 'vue/dist/vue.esm-bundler.js',
+          vue: path.resolve(
+            __dirname,
+            '..',
+            '..',
+            'node_modules',
+            'vue',
+            'dist',
+            'vue.esm-bundler.js'
+          ),
         },
       },
     }

cypress/support/index.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands.js'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')