Test with Jest

francoischalifour · Sep 19, 2017 · 7a90e8b · 7a90e8b
1 parent 7145633
commit 7a90e8b
Show file tree

Hide file tree

Showing 8 changed files with 4,045 additions and 900 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
   "scripts": {
     "lint": "standard",
     "lint:fix": "standard --fix",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "precommit": "lint-staged",
     "clean": "rimraf ./dist && mkdir dist",
     "prebuild": "npm run clean && npm run lint",
@@ -25,9 +27,13 @@
       "git add"
     ]
   },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
   "babel": {
     "presets": [
-      "es2015"
+      "env"
     ],
     "plugins": [
       "transform-object-assign"
@@ -61,19 +67,20 @@
     "javascript"
   ],
   "devDependencies": {
-    "autoprefixer": "^7.1.1",
+    "autoprefixer": "^7.1.4",
     "babel": "^6.23.0",
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.1.1",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
     "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-preset-es2015": "^6.24.1",
-    "css-loader": "^0.28.4",
+    "babel-preset-env": "^1.6.0",
+    "css-loader": "^0.28.7",
     "husky": "^0.14.3",
-    "lint-staged": "^4.0.2",
+    "jest": "^21.1.0",
+    "lint-staged": "^4.2.1",
     "postcss-loader": "^2.0.6",
-    "rimraf": "^2.6.1",
-    "standard": "^10.0.2",
+    "rimraf": "^2.6.2",
+    "standard": "^10.0.3",
     "style-loader": "^0.18.2",
-    "webpack": "^3.3.0"
+    "webpack": "^3.6.0"
   }
 }
diff --git a/src/__tests__/__snapshots__/medium-zoom-test.js.snap b/src/__tests__/__snapshots__/medium-zoom-test.js.snap
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`hide hide() renders correctly 1`] = `
+<body>
+  <img
+    class="medium-zoom-image"
+  />
+</body>
+`;
+
+exports[`mediumZoom init with only an option object attaches scaled images and applies options 1`] = `
+<body>
+  <img
+    class="medium-zoom-image"
+    width="200"
+  />
+  <img />
+  <p />
+</body>
+`;
+
+exports[`show show() renders correctly 1`] = `
+<body>
+  <img
+    class="medium-zoom-image medium-zoom-image--open"
+  />
+  <div
+    class="medium-zoom-overlay"
+    style="background-color: rgb(255, 255, 255);"
+  />
+</body>
+`;
+
+exports[`show show() renders correctly with options overlay background 1`] = `
+<body>
+  <img
+    class="medium-zoom-image medium-zoom-image--open"
+  />
+  <div
+    class="medium-zoom-overlay"
+    style="background-color: rgb(186, 218, 85);"
+  />
+</body>
+`;
+
+exports[`update update() background updates the background option, returns all options and renders correctly 1`] = `
+<body>
+  <img
+    class="medium-zoom-image medium-zoom-image--open"
+  />
+  <div
+    class="medium-zoom-overlay"
+    style="background-color: rgb(0, 0, 0);"
+  />
+</body>
+`;
diff --git a/src/__tests__/integration-test.js b/src/__tests__/integration-test.js
@@ -0,0 +1,38 @@
+/* eslint-env jest */
+const mediumZoom = require('../medium-zoom')
+
+global.requestAnimationFrame = cb => setTimeout(cb, 0)
+
+describe('click', () => {
+  const root = document.body
+
+  beforeEach(() => {
+    while (root.firstChild) {
+      root.removeChild(root.firstChild)
+    }
+  })
+
+  test('click on an image should add classes', () => {
+    const image = document.createElement('img')
+    root.appendChild(image)
+
+    mediumZoom('img')
+
+    image.click()
+    const classNames = [...image.classList]
+
+    expect(classNames).toEqual(['medium-zoom-image', 'medium-zoom-image--open'])
+  })
+
+  test('click on a detached image should not add classes', () => {
+    const image = document.createElement('img')
+    root.appendChild(image)
+
+    const zoom = mediumZoom('img')
+    zoom.detach()
+
+    image.click()
+
+    expect(image.classList).toHaveLength(0)
+  })
+})