tests: add jest, and some example tests

Author: mrholek

.eslintrc.js

@@ -9,10 +9,16 @@ module.exports = {
     },
   },
   extends: [
-    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    // TODO: clean-up
+    'plugin:vue/vue3-essential',
     'eslint:recommended',
-    'plugin:vue/vue3-recommended',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    '@vue/prettier/@typescript-eslint',
+    // 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    // 'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    // 'eslint:recommended',
+    // 'plugin:vue/vue3-recommended',
   ],
   // plugins: ['@typescript-eslint'],
   rules: {

package.json

@@ -18,8 +18,9 @@
     "docs:dev": "vuepress dev docs --clean-cache",
     "docs:build": "vuepress build docs",
     "lint": "eslint 'src/components/**/*.{js,ts,tsx}'",
-    "test": "jest --coverage",
-    "test:clear": "jest --clearCache"
+    "test": "jest -u",
+    "test:clear": "jest --clearCache",
+    "test:coverage": "jest --coverage"
   },
   "homepage": "https://coreui.io/vue/",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
@@ -48,8 +49,10 @@
     "@typescript-eslint/eslint-plugin": "^4.29.3",
     "@typescript-eslint/parser": "^4.29.3",
     "@vue/compiler-sfc": "^3.2.5",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/server-renderer": "^3.2.5",
-    "@vue/test-utils": "^2.0.0-rc.4",
+    "@vue/test-utils": "^2.0.0-0",
     "@vuepress/plugin-toc": "^2.0.0-beta.24",
     "auto-changelog": "^2.3.0",
     "babel-loader": "^8.2.2",
@@ -70,7 +73,7 @@
     "typescript": "4.3.5",
     "vue": "^3.2.6",
     "vue-docgen-cli": "^4.41.1",
-    "vue-jest": "^5.0.0-alpha.7",
+    "vue-jest": "^5.0.0-0",
     "vue-prism-component": "^2.0.0",
     "vue-router": "^4.0.11",
     "vue-types": "^4.0.3",
@@ -91,9 +94,9 @@
       "vue"
     ],
     "transform": {
+      ".*\\.(ts)$": "ts-jest",
       ".*\\.(vue)$": "vue-jest"
-    },
-    "testRegex": "/src/.*\\.(spec.tsx)$"
+    }
   },
   "standard": {
     "ignore": [

src/__tests__/index.spec.ts

@@ -0,0 +1,38 @@
+import { shallowMount } from '@vue/test-utils'
+import { CAlert as Component } from './../../'
+
+const ComponentName = 'CAlert'
+const wrapper = shallowMount(Component)
+const customWrapper = shallowMount(Component, {
+  props: {
+    color: 'success',
+  },
+  attrs: {
+    class: 'bazinga',
+  },
+  slots: {
+    default: 'Hello World!',
+  },
+})
+
+describe(`Loads and display ${ComponentName} component`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  it('renders correctly', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('renders correctly with slot', () => {
+    expect(customWrapper.element).toMatchSnapshot()
+  })
+})
+
+describe(`Customize ${ComponentName} component`, () => {
+  it('has a prope class names', () => {
+    expect(customWrapper.find('div').classes('alert')).toBe(true)
+    expect(customWrapper.find('div').classes('alert-success')).toBe(true)
+  })
+  it('default slot contains text', () => {
+    expect(customWrapper.text()).toBe('Hello World!')
+  })
+})

src/components/alert/__tests__/CAlert.spec.ts

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loads and display CAlert component renders correctly 1`] = `
+<transition-stub>
+  <div
+    class="alert alert-undefined"
+  >
+    <!---->
+    <!---->
+  </div>
+</transition-stub>
+`;
+
+exports[`Loads and display CAlert component renders correctly with slot 1`] = `
+<transition-stub
+  class="bazinga"
+>
+  <div
+    class="alert alert-success alert-success"
+  >
+    
+    Hello World!
+    
+    <!---->
+  </div>
+</transition-stub>
+`;

src/components/alert/__tests__/CAlert.spec.tsx

@@ -0,0 +1,39 @@
+import { shallowMount } from '@vue/test-utils'
+import { CBadge as Component } from './../../'
+
+const ComponentName = 'CBadge'
+const wrapper = shallowMount(Component)
+const customWrapper = shallowMount(Component, {
+  props: {
+    color: 'success',
+  },
+  attrs: {
+    class: 'bazinga',
+  },
+  slots: {
+    default: 'Hello World!',
+  },
+})
+
+describe(`Loads and display ${ComponentName} component`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  it('renders correctly', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('renders correctly with slot', () => {
+    expect(customWrapper.element).toMatchSnapshot()
+  })
+})
+
+describe(`Customize ${ComponentName} component`, () => {
+  it('has a prope class names', () => {
+    expect(customWrapper.classes('bazinga')).toBe(true)
+    expect(customWrapper.classes('badge')).toBe(true)
+    expect(customWrapper.classes('bg-success')).toBe(true)
+  })
+  it('default slot contains text', () => {
+    expect(customWrapper.text()).toBe('Hello World!')
+  })
+})

src/components/alert/__tests__/__snapshots__/CAlert.spec.ts.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loads and display CBadge component renders correctly 1`] = `
+<span
+  class="badge"
+/>
+`;
+
+exports[`Loads and display CBadge component renders correctly with slot 1`] = `
+<span
+  class="badge bg-success bazinga"
+>
+  Hello World!
+</span>
+`;