Master <- Dev

.github/workflows/unit-tests.yaml

@@ -0,0 +1,21 @@
+name: Unit Tests
+on: push
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Get yarn cache directory path
+      id: yarn-cache-dir-path
+      run: echo "::set-output name=dir::$(yarn cache dir)"
+    - uses: actions/cache@v2
+      id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+      with:
+        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+    - name: Install modules
+      run: yarn install --silent --immutable
+    - name: Run Unit Tests
+      run: yarn test:prod

.gitignore

@@ -7,3 +7,4 @@ dist-ssr
 node_modules
 build-storybook.log
 storybook-static/
+coverage/

babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  env: {
+    test: {
+      presets: [
+        ['@babel/preset-env', { useBuiltIns: 'entry', corejs: '2', targets: { node: 'current' } }],
+        ['@babel/preset-typescript', { allExtensions: true }],
+      ],
+    },
+  },
+}

jest.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.vue$': 'vue-jest',
+  },
+  modulePaths: ['<rootDir>'],
+  rootDir: './',
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  collectCoverage: true,
+  globals: {
+    'ts-jest': {
+      babelConfig: true,
+    },
+    'vue-jest': {
+      transform: {
+        '^tsx?$': 'babel-jest',
+      },
+    },
+  },
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lc-component-library",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "license": "MIT",
   "files": [
     "dist"
@@ -12,7 +12,9 @@
     "build": "vite build",
     "storybook": "start-storybook -p 6006",
     "dev": "vite",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "test:unit": "jest --watch",
+    "test:prod": "node ./node_modules/.bin/jest"
   },
   "exports": {
     ".": {
@@ -25,6 +27,8 @@
     }
   },
   "dependencies": {
+    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-typescript": "^7.13.0",
     "@vee-validate/i18n": "^4.1.20",
     "@vee-validate/rules": "^4.1.20",
     "esno": "0.4.4",
@@ -41,21 +45,27 @@
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/vue3": "^6.3.0",
     "@tailwindcss/postcss7-compat": "^2.1.0",
+    "@types/jest": "^26.0.23",
     "@typescript-eslint/eslint-plugin": "4.21.0",
     "@vitejs/plugin-vue": "1.2.1",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@vue/compiler-sfc": "3.1.1",
+    "@vue/test-utils": "^2.0.0-rc.6",
     "autoprefixer": "^9",
     "babel-loader": "^8.2.2",
     "chromatic": "5.9.0",
     "cross-env": "^7.0.3",
     "eslint": "7.23.0",
     "fast-glob": "^3.2.5",
+    "jest": "^26.6.3",
     "postcss": ">=8.2.10",
     "tailwindcss": "2.1.0",
+    "ts-jest": "^26.5.6",
     "tsup": "^4.3.1",
     "typescript": "4.2.3",
     "vite": "2.1.5",
-    "vue-loader": "^16.2.0"
+    "vue-jest": "^5.0.0-alpha.9",
+    "vue-loader": "^16.2.0",
+    "vue-tsc": "^0.0.24"
   },
   "eslintConfig": {
     "extends": "@antfu/eslint-config",

src/components/LcButton.vue → src/components/LcButton/LcButton.vue

@@ -10,6 +10,7 @@
     <span
       v-if="loader"
       class="lc-btn-loader"
+      data-testid="lc-btn-loader"
     >
       <i class="lc-btn-loader__spin" />
     </span>
@@ -20,7 +21,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { vColor, vFontWeight, vSize, vVariant } from '../validators/LcButton'
+import { vColor, vFontWeight, vSize, vVariant } from '../../validators/LcButton'
 
 // Types
 interface ComputedClass {
@@ -91,6 +92,7 @@ export default defineComponent({
           white: 'lc-btn--white',
           grey: 'lc-btn--grey',
           black: 'lc-btn--black',
+          red: 'lc-btn--red',
           disabled: 'lc-btn--disabled',
         },
         link: {
@@ -100,20 +102,22 @@ export default defineComponent({
           grey: 'lc-link--grey',
           black: 'lc-link--black',
           white: 'lc-link--white',
+          red: 'lc-link--red',
           disabled: 'lc-link--disabled',
         },
         outline: {
           primary: 'lc-outline--primary',
           secondary: 'lc-outline--secondary',
           grey: 'lc-outline--grey',
+          red: 'lc-outline--red',
           disabled: 'lc-outline--disabled',
         },
         icon: {
           primary: 'lc-icon--primary',
           secondary: 'lc-icon--secondary',
           red: 'lc-icon--red',
         },
-      },
+      } as any,
       btnSizes: {
         btn: {
           xs: 'lc-btn--xs',
@@ -136,13 +140,13 @@ export default defineComponent({
           lg: 'lc-icon--lg',
           xl: 'lc-icon--xl',
         },
-      },
+      } as any,
       btnVariants: {
         btn: 'lc-btn',
         link: 'lc-link',
         outline: 'lc-outline',
         icon: 'lc-icon',
-      },
+      } as any,
     }
   },
   computed: {
@@ -183,9 +187,9 @@ export default defineComponent({
         blockClass[this.variant],
         blockFullClass[this.variant],
         hasIconClass[this.variant],
-        this.btnColors[this.variant][color],
-        this.btnSizes[this.variant][size],
-        this.btnVariants[this.variant],
+        this.btnColors[this.variant] && this.btnColors[this.variant][color] ? this.btnColors[this.variant][color] : '',
+        this.btnSizes[this.variant] && this.btnSizes[this.variant][size] ? this.btnSizes[this.variant][size] : '',
+        this.btnVariants[this.variant] ? this.btnVariants[this.variant] : '',
         weightClass[this.variant],
       ]
     },
@@ -315,6 +319,9 @@ export default defineComponent({
 .lc-btn--black {
   @apply text-black focus:text-black md:hover:text-black;
 }
+.lc-btn--red {
+  @apply text-white bg-red-100 hover:bg-red-200;
+}
 .lc-btn--disabled {
   @apply pointer-events-none bg-gray-400 hover:bg-gray-400 text-white;
 }
@@ -341,6 +348,9 @@ export default defineComponent({
 .lc-link--white {
   @apply text-white focus:text-white focus:underline hover:text-white hover:underline;
 }
+.lc-link--red {
+  @apply text-red-100 focus:text-red-200 md:hover:text-red-200;
+}
 .lc-link--disabled {
   @apply pointer-events-none text-gray-400 md:hover:text-gray-400;
 }
@@ -358,6 +368,9 @@ export default defineComponent({
 .lc-outline--grey {
   @apply bg-white font-medium text-black border-gray-400 focus:bg-white focus:font-medium focus:text-black focus:border-gray-400 hover:bg-gray-200 hover:text-black;
 }
+.lc-outline--red {
+  @apply bg-white font-medium text-red-100 border-red-100 hover:bg-gray-200 hover:text-red-500;
+}
 .lc-outline--disabled {
   @apply pointer-events-none bg-white font-medium text-gray-500 border border-gray-500 text-gray-400 md:hover:text-gray-400;
 }