test(blurhash-canvas): add tests

components/__tests__/BlurhashCanvas.spec.ts

@@ -0,0 +1,64 @@
+import { shallowMount, Wrapper } from '@vue/test-utils';
+import BlurhashCanvas from '~/components/BlurhashCanvas.vue';
+
+let wrapper: Wrapper<Vue>;
+
+beforeEach(() => {
+  wrapper = shallowMount(BlurhashCanvas, {
+    propsData: {
+      hash: 'L7F$k?_*41GX^]KhTnJ8G?OXvz#;'
+    }
+  });
+});
+
+describe('BlurhashCanvas', () => {
+  test('has a hash property of type String', () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(wrapper.vm.$options.props.hash).toBeDefined();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(wrapper.vm.$options.props.hash.type).toBe(String);
+  });
+
+  test('has a width property of type Number', () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(wrapper.vm.$options.props.width).toBeDefined();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(wrapper.vm.$options.props.width.type).toBe(Number);
+  });
+
+  test('has a height property of type Number', () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(wrapper.vm.$options.props.height).toBeDefined();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(wrapper.vm.$options.props.height.type).toBe(Number);
+  });
+
+  test('has a punch property of type Number', () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(wrapper.vm.$options.props.punch).toBeDefined();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(wrapper.vm.$options.props.punch.type).toBe(Number);
+  });
+
+  test('requires a hash', () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(wrapper.vm.$options.props.hash.required).toBeTruthy();
+  });
+
+  test('has a default width and height', () => {
+    expect(wrapper.props().width).toBe(32);
+  });
+
+  test('has a default punch', () => {
+    expect(wrapper.props().punch).toBe(1);
+  });
+});

jest.config.js

@@ -1,8 +1,7 @@
 module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/$1',
-    '^~/(.*)$': '<rootDir>/$1',
-    '^vue$': 'vue/dist/vue.common.js'
+    '^~/(.*)$': '<rootDir>/$1'
   },
   moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
   transform: {
@@ -14,5 +13,7 @@ module.exports = {
   collectCoverageFrom: [
     '<rootDir>/components/**/*.vue',
     '<rootDir>/pages/**/*.vue'
-  ]
+  ],
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
+  setupFiles: ['jest-canvas-mock']
 };

package.json

@@ -66,6 +66,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "husky": "^4.3.0",
     "jest": "^26.1.0",
+    "jest-canvas-mock": "^2.3.0",
     "lint-staged": "^10.4.0",
     "prettier": "^2.1.2",
     "stylelint": "^13.7.2",

test/.keep

@@ -1 +0,0 @@
-REMOVE THIS FILE WHEN ADDING A FILE TO THIS DIRECTORY

tsconfig.json

@@ -21,7 +21,8 @@
       "@nuxtjs/axios",
       "@nuxtjs/auth-next",
       "@nuxtjs/vuetify",
-      "nuxt-i18n"
+      "nuxt-i18n",
+      "jest"
     ]
   },
   "exclude": ["node_modules", ".nuxt", "dist"]

vue-shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+
+  export default Vue;
+}

yarn.lock

@@ -3857,7 +3857,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -4398,6 +4398,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssfontparser@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz#f4022fc8f9700c68029d542084afbaf425a3f3e3"
+  integrity sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=
+
 cssnano-preset-default@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
@@ -7262,6 +7267,14 @@ istanbul-reports@^3.0.2:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
+jest-canvas-mock@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.3.0.tgz#50f4cc178ae52c4c0e2ce4fd3a3ad2a41ad4eb36"
+  integrity sha512-3TMyR66VG2MzAW8Negzec03bbcIjVJMfGNvKzrEnbws1CYKqMNkvIJ8LbkoGYfp42tKqDmhIpQq3v+MNLW2A2w==
+  dependencies:
+    cssfontparser "^1.2.1"
+    moo-color "^1.0.2"
+
 jest-changed-files@^26.3.0:
   version "26.3.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.3.0.tgz#68fb2a7eb125f50839dab1f5a17db3607fe195b1"
@@ -8518,6 +8531,13 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+moo-color@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.2.tgz#837c40758d2d58763825d1359a84e330531eca64"
+  integrity sha512-5iXz5n9LWQzx/C2WesGFfpE6RLamzdHwsn3KpfzShwbfIqs7stnoEpaNErf/7+3mbxwZ4s8Foq7I0tPxw7BWHg==
+  dependencies:
+    color-name "^1.1.4"
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"