test: init unit tests. update docs and dependencies

Author: guastallaigor

README.md

@@ -84,24 +84,21 @@ Vue.use(VueImageKit)
 and then import it in your `nuxt.config.js` file
 ```js
 plugins: [
-    '~/plugins/vue-image-kit.js'
+  { src: '~/plugins/vue-image-kit', mode: 'client' }
 ]
 ```
 
 ## Basic usage
 
 ```html
 <template>
-  <div>
-    <div style="height:4500px;width:100vw;background:gray">&nbsp;</div>
-    <vue-image-kit
-      hash="6xhf1gnexgdgk"
-      src="lion_BllLvaqVn.jpg"
-      width="1400px"
-      height="800px"
-      alt="Lion image"
-    />
-  </div>
+  <vue-image-kit
+    hash="6xhf1gnexgdgk"
+    src="lion_BllLvaqVn.jpg"
+    :width="1400"
+    :height="800"
+    alt="Lion image"
+  />
 </template>
 ```
 
@@ -117,8 +114,8 @@ plugins: [
 | sizes           | Array  | []              | false    | Array of numbers that will define the images sizes attribute. Each number correspond to one of the images max-width. Empty by default, which gets each of the images srcset prop and subtract by 40px |
 | defaultSize     | Number | 1080            | true     | Images default size. Must be larger than the largest srcset and sizes |
 | customTransform | String | ''              | false    | Use this to append any extra image kit transform that you want |
-| width           | String | ''              | false    | Images width. Any valid CSS unit It will be set with inline style |
-| height          | String | ''              | false    | Images height. Any valid CSS unit. It will be set with inline style |
+| width           | Number | null            | false    | Images width. Width number in pixels. It will be set with inline style |
+| height          | Number | null            | false    | Images height. Height number in pixels. It will be set with inline style |
 | alt             | String | ''              | false    | Images alt attribute |
 
 ## Development

jest.config.js

@@ -1,28 +1,5 @@
 module.exports = {
-  moduleFileExtensions: [
-    'js',
-    'jsx',
-    'json',
-    'vue'
-  ],
-  transform: {
-    '^.+\\.vue$': 'vue-jest',
-    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-    '^.+\\.jsx?$': 'babel-jest'
-  },
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1'
-  },
-  snapshotSerializers: [
-    'jest-serializer-vue'
-  ],
-  testMatch: [
-    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
-  ],
-  testURL: 'http://localhost/',
+  preset: '@vue/cli-plugin-unit-jest',
   coverageDirectory: './coverage/',
-  collectCoverage: true,
-  transformIgnorePatterns: [
-    'node_modules/(?!(babel-jest|jest-vue-preprocessor)/)'
-  ]
+  collectCoverage: true
 }

package.json

@@ -19,7 +19,6 @@
     "vue": "^2.6.10"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.7.4",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@storybook/addon-actions": "^5.2.6",
@@ -31,20 +30,15 @@
     "@vue/cli-plugin-eslint": "^4.1.1",
     "@vue/cli-plugin-unit-jest": "^4.1.1",
     "@vue/cli-service": "^4.1.1",
-    "@vue/eslint-config-standard": "^5.0.0",
+    "@vue/eslint-config-standard": "^4.0.0",
     "@vue/test-utils": "^1.0.0-beta.29",
-    "babel-core": "6.26.3",
     "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
     "commitizen": "^4.0.3",
     "core-js": "3.4.5",
-    "eslint": "^6.7.1",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^10.0.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0s",
     "husky": "^3.1.0",
+    "jest-canvas-mock": "^2.2.0",
     "vue-cli-plugin-storybook": "^0.6.1",
     "vue-template-compiler": "^2.6.10"
   },

src/components/VueImageKit.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="vue-image-kit">
     <div v-if="dataUrl" :style="{ backgroundColor }" class="vue-image-kit__placeholder">
-      <img :src="placeholder || dataUrl" :alt="alt" :style="{ width, height }">
+      <img :src="placeholder || dataUrl" alt="Placeholder" :style="{ width: `${width}px`, height: `${height}px` }">
     </div>
-    <img :srcset="getSrcset" :sizes="getSizes" :src="getSrc" :alt="alt" :style="{ width, height }" class="vue-image-kit__img"/>
+    <img :srcset="getSrcset" :sizes="getSizes" :src="getSrc" :alt="alt" :style="{ width: `${width}px`, height: `${height}px` }" class="vue-image-kit__img"/>
   </div>
 </template>
 
@@ -28,12 +28,12 @@ export default {
       default: ''
     },
     width: {
-      type: String,
-      default: ''
+      type: Number,
+      default: null
     },
     height: {
-      type: String,
-      default: ''
+      type: Number,
+      default: null
     },
     alt: {
       type: String,

stories/index.stories.js

@@ -36,7 +36,7 @@ timelineStory.add('Default', () => {
         type: String,
         default: text('Placeholder', '')
       },
-      background: {
+      backgroundColor: {
         type: String,
         default: text('Background', '')
       },
@@ -73,7 +73,7 @@ timelineStory.add('Default', () => {
       :hash="hash"
       :src="src"
       :placeholder="placeholder"
-      :background="background"
+      :background-color="backgroundColor"
       :srcset="srcset"
       :sizes="sizes"
       :width="width"

tests/unit/__snapshots__/vue-horizontal-timeline.spec.js.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`When I create the VueImageKit component should match snapshot 1`] = `
+<div class="vue-image-kit">
+  <!----> <img srcset="/6xhf1gnexgdgk/tr:w-320/lion_BllLvaqVn.jpg 320w, /6xhf1gnexgdgk/tr:w-480/lion_BllLvaqVn.jpg 480w, /6xhf1gnexgdgk/tr:w-800/lion_BllLvaqVn.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, (max-width: 800px) 760px 1080px" src="" alt="" class="vue-image-kit__img"></div>
+`;