Improve GitHub actions and fix package.json SCSS script (#669)

* run actions on dependencies change

* add bundlesize token to master run

* fix bundlesize commit number

* add cypress env

* also run on - '.browserslistrc' changes

* update node-sass to allow install on Node 12 and trigger events

* use script

* add group

* skip husky on cypress

* upgrade csso dependency to make it trim sourcemaps

* fix run-p / run-s use

* remove commited assets on check

* commit assets

* remove cypress record

* restore recording

* reduce bundlesize limits

* try to specify key implicity

* remove Cypress recording

* restore build in bundlesize

* regenerate package-json.lock

* commit generated assets

* handle no-js case in lint

* fix lint error

.github/workflows/bundlesize.yml

@@ -5,6 +5,8 @@ on:
     paths:
       - 'src/scripts/**'
       - 'src/styles/**'
+      - 'package-lock.json'
+      - '.browserslistrc'
 
 jobs:
   measure:
@@ -26,13 +28,15 @@ jobs:
           CYPRESS_INSTALL_BINARY: 0
           HUSKY_SKIP_INSTALL: true
 
+      # we don't need to build here, as even minized assets expected to be commited
+
       - run: npx bundlesize
         env:
           CI: true
           BUNDLESIZE_GITHUB_TOKEN: ${{secrets.BUNDLESIZE_GITHUB_TOKEN}}
           CI_REPO_NAME: ${{ github.event.repository.name }}
           CI_REPO_OWNER: ${{ github.event.organization.login }}
-          CI_COMMIT_SHA: ${{ github.sha }}
+          CI_COMMIT_SHA: ${{ github.event.after }}
-          GIT_COMMIT: ${{ github.sha }}
+          GIT_COMMIT: ${{ github.event.after }}
           CI_BRANCH: ${{ github.head_ref }}
           FORCE_COLOR: 2

.github/workflows/cypress.yml

@@ -15,11 +15,18 @@ jobs:
         with:
           node-version: 10
 
-      - name: Build library
+      - name: Install dependencies
         run: npm ci
+        env:
+          HUSKY_SKIP_INSTALL: true
 
       - name: run Cypress
-        run: npm run test:e2e
+        run: npx run-p --race start cypress:run
         env:
           CI: true
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           DEBUG: commit-info,cypress:server:record
+          # https://docs.cypress.io/guides/guides/continuous-integration.html#Environment-variables
+          COMMIT_INFO_BRANCH: ${{ github.head_ref }}
+          COMMIT_INFO_AUTHOR: ${{ github.event.sender.login }}
+          COMMIT_INFO_SHA: ${{ github.event.after }}

.github/workflows/lint.yml

@@ -4,6 +4,8 @@ on:
   pull_request:
     paths:
       - 'src/scripts/**'
+      - package-lock.json
+      - '.browserslistrc'
 
 jobs:
   eslint:
@@ -26,6 +28,7 @@ jobs:
 
       - name: run eslint
         run: |
-          CHANGED_JS=$(git --no-pager diff --name-only ..origin/master | grep '^src\/scripts\/.*\.js$' | grep -v json)
+          CHANGED_JS=$(git --no-pager diff --name-only ..origin/master | grep '^src\/scripts\/.*\.js$' | paste -sd " " -)
+          if [[ -z $(sed -e 's/[[:space:]]*$//' <<<${CHANGED_JS}) ]]; then CHANGED_JS="src/scripts"; fi
           echo $CHANGED_JS
           node node_modules/eslint/bin/eslint.js $CHANGED_JS

.github/workflows/npmpublish.yml

@@ -31,6 +31,7 @@ jobs:
           CI_COMMIT_SHA: ${{ github.sha }}
           GIT_COMMIT: ${{ github.sha }}
           CI_BRANCH: ${{ github.head_ref }}
+          BUNDLESIZE_GITHUB_TOKEN: ${{secrets.BUNDLESIZE_GITHUB_TOKEN}}
           FORCE_COLOR: 2
           HUSKY_SKIP_INSTALL: true
 
@@ -79,3 +80,4 @@ jobs:
           files: RELEASE.txt
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+

.github/workflows/unit-tests.yml

@@ -4,6 +4,8 @@ on:
   pull_request:
     paths:
       - 'src/scripts/**'
+      - package-lock.json
+      - '.browserslistrc'
 
 jobs:
   test:

package.json

@@ -6,25 +6,26 @@
   "types": "./types/index.d.ts",
   "scripts": {
     "start": "run-p js:watch css:watch",
-    "build": "npm run js:build && npm run css:build",
+    "build": "run-p js:build css:build",
     "lint": "eslint src/scripts",
     "coverage": "nyc --reporter=lcov --reporter=text --reporter=text-summary mocha",
     "bundlesize": "bundlesize",
     "cypress:run": "$(npm bin)/cypress run",
     "cypress:open": "$(npm bin)/cypress open",
-    "test": "npm run test:unit && npm run test:e2e",
+    "cypress:ci": "cypress run --record --group --ci-build-id $GITHUB_SHA",
+    "test": "run-s test:unit test:e2e",
     "test:unit": "mocha",
     "test:unit:watch": "mocha --watch --inspect=5556",
     "test:e2e": "run-p --race start cypress:run",
     "js:watch": "NODE_ENV=development node server.js",
     "js:build": "webpack --config webpack.config.prod.js",
     "css:watch": "nodemon -e scss -x \"npm run css:build\"",
-    "css:build": "run-p css:sass css:prefix css:min",
+    "css:build": "run-s css:sass css:prefix css:min",
-    "css:sass": "node-sass --output-style expanded --include-path  scss src/styles/base.scss public/assets/styles/base.css && node-sass --output-style expanded --include-path scss src/styles/choices.scss public/assets/styles/choices.css",
+    "css:sass": "node-sass --output-style expanded --include-path scss src/styles/base.scss public/assets/styles/base.css && node-sass --output-style expanded --include-path scss src/styles/choices.scss public/assets/styles/choices.css",
     "css:prefix": "postcss public/assets/styles/*.css --use autoprefixer --no-map --env prod --dir public/assets/styles",
-    "css:min": "csso public/assets/styles/base.css public/assets/styles/base.min.css && csso public/assets/styles/choices.css public/assets/styles/choices.min.css",
+    "css:min": "csso public/assets/styles/base.css --output public/assets/styles/base.min.css && csso public/assets/styles/choices.css --output public/assets/styles/choices.min.css",
     "deploy": "git subtree push --prefix public origin gh-pages",
-    "prepush": "run-p lint test:unit && npm run bundlesize",
+    "prepush": "run-s lint test:unit bundlesize",
     "preversion": "npm test",
     "postversion": "git push --no-verify --atomic",
     "prepublishOnly": "npm run build"
@@ -62,7 +63,7 @@
     "babel-loader": "^8.0.6",
     "bundlesize": "^0.18.0",
     "chai": "^4.2.0",
-    "csso": "^1.8.2",
+    "csso-cli": "2.0.2",
     "cypress": "3.2.0",
     "eslint": "^6.5.1",
     "eslint-config-airbnb-base": "^14.0.0",
@@ -75,7 +76,7 @@
     "husky": "^3.0.9",
     "jsdom": "^15.2.0",
     "mocha": "^6.2.2",
-    "node-sass": "^4.11.0",
+    "node-sass": "^4.12.0",
     "nodemon": "^1.18.10",
     "npm-run-all": "^4.1.5",
     "nyc": "^14.1.1",
@@ -121,7 +122,7 @@
     },
     {
       "path": "public/assets/styles/choices.min.css",
-      "maxSize": "2 kB"
+      "maxSize": "1.8 kB"
     }
   ]
 }

src/scripts/templates.test.js

@@ -365,9 +365,7 @@ describe('templates', () => {
       it('returns expected html', () => {
         const expectedOutput = strToEl(`
           <div
-            class="${classes.item} ${classes.itemChoice} ${
+            class="${classes.item} ${classes.itemChoice} ${classes.itemSelectable}"
-          classes.itemSelectable
-        }"
             data-select-text="${itemSelectText}"
             data-choice
             data-id="${data.id}"
@@ -399,9 +397,7 @@ describe('templates', () => {
       it('returns expected html', () => {
         const expectedOutput = strToEl(`
           <div
-            class="${classes.item} ${classes.itemChoice} ${
+            class="${classes.item} ${classes.itemChoice} ${classes.itemDisabled}"
-          classes.itemDisabled
-        }"
             data-select-text="${itemSelectText}"
             data-choice
             data-id="${data.id}"
@@ -434,9 +430,7 @@ describe('templates', () => {
       it('returns expected html', () => {
         const expectedOutput = strToEl(`
           <div
-            class="${classes.item} ${classes.itemChoice} ${
+            class="${classes.item} ${classes.itemChoice} ${classes.itemSelectable} ${classes.placeholder}"
-          classes.itemSelectable
-        } ${classes.placeholder}"
             data-select-text="${itemSelectText}"
             data-choice
             data-id="${data.id}"
@@ -468,9 +462,7 @@ describe('templates', () => {
       it('returns expected html', () => {
         const expectedOutput = strToEl(`
           <div
-            class="${classes.item} ${classes.itemChoice} ${
+            class="${classes.item} ${classes.itemChoice} ${classes.itemSelectable}"
-          classes.itemSelectable
-        }"
             data-select-text="${itemSelectText}"
             data-choice
             data-id="${data.id}"
@@ -526,9 +518,7 @@ describe('templates', () => {
     it('returns expected html', () => {
       const value = 'test';
       const expectedOutput = strToEl(
-        `<div class="${classes.list} ${
+        `<div class="${classes.list} ${classes.listDropdown}" aria-expanded="false"></div>`,
-          classes.listDropdown
-        }" aria-expanded="false"></div>`,
       );
       const actualOutput = templates.dropdown(classes, value);
 
@@ -563,9 +553,7 @@ describe('templates', () => {
       describe('no results', () => {
         it('adds no results classname', () => {
           const expectedOutput = strToEl(`
-            <div class="${classes.item} ${classes.itemChoice} ${
+            <div class="${classes.item} ${classes.itemChoice} ${classes.noResults}">
-            classes.noResults
-          }">
               ${label}
             </div>
           `);
@@ -580,9 +568,7 @@ describe('templates', () => {
       describe('no choices', () => {
         it('adds no choices classname', () => {
           const expectedOutput = strToEl(`
-            <div class="${classes.item} ${classes.itemChoice} ${
+            <div class="${classes.item} ${classes.itemChoice} ${classes.noChoices}">
-            classes.noChoices
-          }">
               ${label}
             </div>
           `);