added tests

Author: yairEO

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
-TODO.md
+TODO.md
+tests/__image_snapshots__

dist/color-picker.min.js

@@ -0,0 +1,17 @@
+module.exports = {
+  browsers: ['chromium', 'firefox', 'webkit'],
+  launchOptions: {
+    headless: true
+  },
+  contextOptions: {
+    deviceScaleFactor: 1,
+    viewport: {
+        width: 750,
+        height: 750
+    }
+  },
+  serverOptions: {
+    command: 'serve . -p 5000',
+    port: 5000
+  }
+}

jest-playwright.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  preset: 'jest-playwright-preset',
+  coverageReporters: ['text'],
+  setupFilesAfterEnv: ['<rootDir>/tests/setup.js'],
+  testTimeout: 35000 // Most timeouts in playwright are set to 30s
+}

jest.config.js

@@ -41,7 +41,7 @@
         "makedir": "mkdirp dist",
         "push": "git push origin",
         "push:tags": "git push origin --tags",
-        "test": "echo \"No test specified\"",
+        "test": "jest",
         "prepublishOnly": "npm run build:prod && git add . && git commit -am '[BUILD]' && pkg-ok"
     },
     "author": {
@@ -63,27 +63,28 @@
     },
     "devDependencies": {
         "@babel/core": "^7.12.10",
-        "@babel/preset-env": "^7.12.10",
+        "@babel/preset-env": "^7.12.11",
         "@rollup/plugin-babel": "^5.2.2",
         "@rollup/plugin-commonjs": "^17.0.0",
-        "@rollup/plugin-node-resolve": "^11.0.0",
+        "@rollup/plugin-node-resolve": "^11.0.1",
         "concurrently": "^5.3.0",
         "jest": "^26.6.3",
         "jest-environment-puppeteer": "^4.4.0",
-        "jest-image-snapshot": "^4.2.0",
+        "jest-image-snapshot": "^4.3.0",
         "jest-playwright-preset": "^1.4.2",
         "mkdirp": "^1.0.4",
         "node-sass": "^5.0.0",
         "onchange": "^7.1.0",
-        "playwright-chromium": "^1.6.2",
-        "playwright-firefox": "^1.6.2",
-        "playwright-webkit": "^1.6.2",
+        "playwright-chromium": "^1.7.1",
+        "playwright-firefox": "^1.7.1",
+        "playwright-webkit": "^1.7.1",
         "rimraf": "^3.0.2",
-        "rollup": "^2.34.2",
+        "rollup": "^2.35.1",
         "rollup-plugin-cleanup": "^3.2.1",
         "rollup-plugin-livereload": "^2.0.0",
         "rollup-plugin-scss": "^2.6.1",
         "rollup-plugin-serve": "^1.1.0",
-        "rollup-plugin-terser": "^7.0.2"
+        "rollup-plugin-terser": "^7.0.2",
+        "serve": "^11.3.2"
     }
 }

package-lock.json

@@ -0,0 +1,17 @@
+module.exports = {
+  browsers: ['chromium', 'firefox', 'webkit'],
+  launchOptions: {
+    headless: true
+  },
+  contextOptions: {
+    deviceScaleFactor: 1,
+    viewport: {
+      width: 750,
+      height: 750
+    }
+  },
+  serverOptions: {
+    command: 'serve . -p 5000',
+    port: 5000
+  }
+}

package.json

@@ -0,0 +1,22 @@
+const { loadVisualTest } = require('./utils')
+
+describe('color picker', () => {
+
+    it('Should display Hue, Saturation, Lightness & Alpha range sliders', async () => {
+        await loadVisualTest('basic.html')
+        expect(await page.screenshot()).toMatchImageSnapshot()
+    })
+
+    it('Should display 4 colors in the swatches: red, blue, green, pink', async () => {
+        await loadVisualTest('swatches.html')
+        expect(await page.screenshot()).toMatchImageSnapshot()
+    })
+
+    // it('Should call all callbacks with correct arguments', async() => {
+    //     await page.goto(`http://localhost:5000/tests/visual/basic.html`)
+
+    //     page.click('.color-picker')
+
+    //     expect(1).toEqual(1)
+    // })
+})

src/jest-playwright.config.js

@@ -0,0 +1,4 @@
+const {toMatchImageSnapshot} = require('jest-image-snapshot')
+expect.extend({toMatchImageSnapshot})
+
+global.URL_BASE = 'http://localhost:5000/tests/visual'

tests/basic.test.js

@@ -0,0 +1,9 @@
+module.exports.loadVisualTest = async name => {
+  // Load page
+  await page.goto(`http://localhost:5000/tests/visual/${name}`, {
+      waitUntil: 'load' // networkidle doesn't work on firefox, it get's stuck
+  })
+
+  // Wait until the next frame
+  await page.evaluate(() => new Promise(requestAnimationFrame))
+}

tests/setup.js

@@ -0,0 +1,20 @@
+<meta charset="utf-8">
+<script src="/dist/color-picker.min.js"></script>
+<link rel="stylesheet" href="/dist/styles.css">
+<script type="module">
+    const cPicker = new ColorPicker({
+        color: 'red', // accepts formats: HEX(A), RGB(A), HSL(A)
+        className: 'fooClass',
+        onClickOutside(e){
+            window.onClickOutside(e.target)
+        },
+        onInput(color){
+            window.onInput(color)
+        },
+        onChange(color){
+            window.onChange(color)
+        }
+    })
+
+    document.body.appendChild(cPicker.DOM.scope)
+</script>

tests/utils.js

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<script src="/dist/color-picker.min.js"></script>
+<link rel="stylesheet" href="/dist/styles.css">
+<script type="module">
+    const cPicker = new ColorPicker({
+        swatches: ['red', '#FF0000', '#0000FF', 'RGBA(0,128,0,1, .5)', 'HSLA(349.5, 100%, 87.6%, 100%)']
+    })
+
+    document.body.appendChild(cPicker.DOM.scope)
+</script>