Vue step 1

.circleci/config.yml

@@ -1,18 +1,18 @@
 version: 2
 jobs:
-  test:
+  step-one:
     docker:
-      - image: circleci/node:14
+      - image: circleci/node:16
     working_directory: ~/repo
     steps:
       - checkout
       - run: yarn install --immutable --immutable-cache
       - run:
-          name: Run ci checks
-          command: yarn ci-check
+          name: Run tests
+          command: yarn test:unit
 
 workflows:
   version: 2
   main:
     jobs:
-      - test
+      - step-one

package.json

@@ -5,31 +5,31 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "ci-check": "yarn format:diff && yarn test:unit",
+    "ci-check": "yarn format:diff",
     "format:diff": "prettier --list-different \"src/**/*.{js,vue,scss}\"",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "core-js": "^2.6.5",
-    "vue": "^2.6.10",
-    "vue-router": "^3.0.3"
+    "core-js": "^3.11.0",
+    "vue": "^2.6.12",
+    "vue-router": "^3.5.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.9.0",
-    "@vue/cli-plugin-eslint": "^3.9.0",
-    "@vue/cli-plugin-unit-jest": "^3.9.0",
-    "@vue/cli-service": "^3.9.0",
-    "@vue/eslint-config-prettier": "^4.0.1",
-    "@vue/test-utils": "1.0.0-beta.29",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "node-sass": "^4.9.0",
-    "sass-loader": "^7.1.0",
-    "vue-template-compiler": "^2.6.10"
+    "@vue/cli-plugin-babel": "^4.5.12",
+    "@vue/cli-plugin-eslint": "^4.5.12",
+    "@vue/cli-plugin-unit-jest": "^4.5.12",
+    "@vue/cli-service": "^4.5.12",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/test-utils": "1.1.4",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
+    "eslint": "^7.25.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-vue": "^7.9.0",
+    "sass": "^1.32.11",
+    "sass-loader": "^10.1.1",
+    "vue-template-compiler": "^2.6.12"
   },
   "prettier": {
     "singleQuote": true
@@ -64,6 +64,7 @@
       "json",
       "vue"
     ],
+    "setupFiles": ["./tests/setup.js"],
     "transform": {
       "^.+\\.vue$": "vue-jest",
       ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",

tests/setup.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+
+import CarbonComponentsVue from '@carbon/vue';
+Vue.use(CarbonComponentsVue);
+
+// import VueRouter from "vue-router";
+// Vue.use(VueRouter);

tests/stubs/router-view-stub.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="router-vue-stub"><slot /></div>
+</template>

tests/unit/app.spec.js

@@ -0,0 +1,29 @@
+import { RouterLinkStub, shallowMount, mount } from '@vue/test-utils';
+import App from '@/App.vue';
+import RouterViewStub from '../stubs/router-view-stub.vue';
+
+describe('Vue Step 1 Tests', () => {
+  it('Renders without crashing', () => {
+    const wrapper = shallowMount(App, {
+      stubs: {
+        RouterLink: RouterLinkStub,
+        'router-view': RouterViewStub
+      }
+    });
+  });
+
+  it('It has a Carbon header', () => {
+    const wrapper = mount(App, {
+      stubs: {
+        RouterLink: RouterLinkStub,
+        'router-view': RouterViewStub
+      }
+    });
+
+    wrapper.get('.bx--header');
+    wrapper.get('.bx--content');
+    wrapper.get('.bx--skip-to-content');
+    wrapper.get('.bx--header__name');
+    wrapper.get('.bx--header__nav');
+  });
+});