test: added code coverage

test: linted

Author: samuelOsborne

.gitignore

@@ -47,4 +47,5 @@ dist/
 
 # Tests
 coverage/
-cypress/react-testing-pages/src/components/lottie-react.js
+cypress/react-testing-pages/src/components/lottie-react.js
+.nyc_output

babel.config.js

@@ -0,0 +1,25 @@
+const { CODE_COVERAGE } = process.env;
+const plugins = [];
+if (CODE_COVERAGE === 'true') plugins.push('istanbul');
+
+module.exports = function(api) {
+  api.cache(true);
+
+  return {
+    presets: [
+      '@babel/preset-typescript',
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            edge: '17',
+            firefox: '60',
+            chrome: '67',
+            safari: '11.1',
+          },
+        },
+      ],
+    ],
+    plugins,
+  };
+};

cypress/plugins/index.js

@@ -19,4 +19,10 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  require('@cypress/code-coverage/task')(on, config)
+  // include any other plugin code...
+
+  // It's IMPORTANT to return the config object
+  // with any changed environment variables
+  return config
 }

cypress/support/index.js

@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
+import '@cypress/code-coverage/support'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

package.json

@@ -10,8 +10,12 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.16.11",
     "@commitlint/cli": "^12.1.1",
     "@commitlint/config-conventional": "^12.1.1",
+    "@cypress/code-coverage": "^3.9.12",
+    "@istanbuljs/nyc-config-typescript": "^1.0.2",
+    "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-strip": "^1.3.2",
@@ -35,6 +39,7 @@
     "@typescript-eslint/eslint-plugin": "^2.24.0",
     "@typescript-eslint/parser": "^2.24.0",
     "babel-loader": "^8.1.0",
+    "babel-plugin-istanbul": "^6.1.1",
     "css-loader": "^3.5.3",
     "csstype": "^2.6.10",
     "cypress": "^9.5.1",
@@ -61,9 +66,11 @@
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-typescript2": "^0.27.0",
     "semantic-release": "^17.4.2",
+    "source-map-support": "^0.5.21",
     "style-loader": "^1.2.1",
     "ts-jest": "^26.0.0",
     "ts-loader": "^7.0.4",
+    "ts-node": "^10.7.0",
     "typescript": "^3.5.3",
     "typings-for-css-modules-loader": "^1.7.0",
     "webpack": "^4.43.0"
@@ -80,9 +87,9 @@
     "build-with-coverage": "CODE_COVERAGE=true rollup -c",
     "prepublishOnly": "yarn build",
     "build-tests": "yarn run build-with-coverage && cp ./dist/lottie-react.js ./cypress/react-testing-pages/src/components/",
-    "run-tests": "while ! nc -z localhost 8080 ; do sleep 1 ; done && yarn run start-cypress",
+    "run-tests": "while ! nc -z localhost 8080 ; do sleep 1 ; done && yarn run start-cypress && npx nyc report --reporter=text-summary",
     "postrun-tests": "kill $(lsof -t -i:8080)",
-    "start-and-run-tests": "yarn run build-tests && yarn run serve-app && yarn run-tests;",
+    "start-and-run-tests": "yarn run build-tests && yarn run serve-app && yarn run-tests",
     "serve-app": "cd ./cypress/react-testing-pages && yarn && yarn run start &",
     "start-cypress": "yarn run cypress run",
     "lint": "tsc --noEmit && eslint . --ext .ts,.tsx,.js",
@@ -122,5 +129,9 @@
     "src/**/*.{js,jsx,ts,tsx,json}": [
       "eslint . --ext .ts,.tsx,.js --fix"
     ]
+  },
+  "nyc": {
+    "extends": "@istanbuljs/nyc-config-typescript",
+    "all": true
   }
 }

rollup.config.js

@@ -1,3 +1,4 @@
+import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import strip from '@rollup/plugin-strip';
@@ -29,7 +30,6 @@ export default {
       name,
     },
   ],
-
   plugins: [
     // Remove debugger statements and console.log calls
     isProduction && strip(),
@@ -43,6 +43,11 @@ export default {
     // Convert commonjs modules to ES modules
     commonjs(),
 
+    babel({
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs'],
+      exclude: ['./node_modules/**'],
+    }),
+
     // Use Typescript to transpile code
     // typescript({ lib: ['es5', 'es6', 'dom'], target: 'es5' }),
     typescript({ tsconfig: './tsconfig.json' }),