setup screenshot test config properly

dnbexperience · Feb 7, 2019 · 613c97b · 613c97b
1 parent 1d70276
commit 613c97b
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 17 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -35,7 +35,7 @@ jobs:
 
   deploy-preview:
     docker:
-      - image: circleci/node:10.6
+      - image: circleci/node:latest-browsers
     working_directory: ~/repo
     steps:
       - checkout
@@ -77,7 +77,7 @@ jobs:
 
   deploy-release:
     docker:
-      - image: circleci/node:10.6
+      - image: circleci/node:latest-browsers
     working_directory: ~/repo
     steps:
       - checkout

diff --git a/.drone.yml b/.drone.yml
@@ -26,7 +26,7 @@ steps:
           - rc/*
 
   - name: deploy-preview
-    image: node:10.6
+    image: buildkite/puppeteer
     environment:
       FIGMA_MAIN_FILE:
         from_secret: FIGMA_MAIN_FILE
@@ -81,7 +81,6 @@ steps:
       - yarn test-ci
       - yarn prepublish-ci
       - yarn build-ci
-      - yarn test-ci-screenshots
       - yarn deploy-ci
       - yarn publish-ci
     when:

diff --git a/packages/dnb-ui-lib/jest-screenshot.json b/packages/dnb-ui-lib/jest-screenshot.json
@@ -0,0 +1,3 @@
+{
+  "pixelThresholdRelative": 0.15
+}
diff --git a/packages/dnb-ui-lib/jest.config.screenshots.js b/packages/dnb-ui-lib/jest.config.screenshots.js
@@ -3,10 +3,11 @@ const config = require('./jest.config.js')
 module.exports = {
   ...config,
   ...{
+    testRegex: 'screenshot.test.js$',
     globalSetup: './src/core/jest/jestPuppeteerSetup.js',
     globalTeardown: './src/core/jest/jestPuppeteerTeardown.js',
     testEnvironment: './src/core/jest/jestPuppeteerEnvironment.js',
-    testRegex: 'screenshot.test.js$',
+    setupFilesAfterEnv: ['./src/core/jest/setupJestScreenshot.js'],
     modulePathIgnorePatterns: config.modulePathIgnorePatterns.filter(i => {
       return i !== 'screenshot'
     })

diff --git a/packages/dnb-ui-lib/scripts/figma/helpers/docHelpers.js b/packages/dnb-ui-lib/scripts/figma/helpers/docHelpers.js
@@ -207,7 +207,7 @@ export const getFigmaDoc = async ({
   forceRefetch = null,
   preventUpdate = null
 } = {}) => {
-  if (!figmaFile) {
+  if (!(figmaFile && String(figmaFile).length > 0)) {
     figmaFile = defaultFigmaFile
   }
 

diff --git a/packages/dnb-ui-lib/src/core/jest/jestPuppeteerSetup.js b/packages/dnb-ui-lib/src/core/jest/jestPuppeteerSetup.js
@@ -35,7 +35,10 @@ module.exports = async function() {
     // })
   }
 
-  const browser = await puppeteer.launch()
+  const browser = await puppeteer.launch({
+    // to get rid of the "libX11-xcb.so" missing problem, we set these flags
+    args: ['--no-sandbox', '--disable-setuid-sandbox']
+  })
   // store the browser instance so we can teardown it later
   // this global is only available in the teardown but not in TestEnvironments
   global.__BROWSER_GLOBAL__ = browser

diff --git a/packages/dnb-ui-lib/src/core/jest/jestSetupScreenshots.js b/packages/dnb-ui-lib/src/core/jest/jestSetupScreenshots.js
@@ -5,14 +5,6 @@
 
 const path = require('path')
 const os = require('os')
-const { setupJestScreenshot } = require('jest-screenshot')
-
-const screenshotConfig = {
-  // detectAntialiasing: true, // Whether to attempt to detect antialiasing and ignore related changes when comparing both images.
-  // pixelThresholdRelative: 0, // If specified, jest-screenshot will fail if more than the specified relative amount of pixels are different from the snapshot. When setting this to 0.5 for example, more than 50% of the pixels need to be different for the test to fail.
-  // colorThreshold: 1 // A number in the range from 0 to 1 describing how sensitive the comparison of two pixels should be.
-  // colorThreshold: 0
-}
 
 const testScreenshotOnHost = '127.0.0.1'
 const testScreenshotOnPort = 8000
@@ -62,6 +54,4 @@ module.exports.setupPageScreenshot = (options = { timeout: 10e3 }) => {
     }
     done()
   })
-
-  setupJestScreenshot({ ...screenshotConfig, ...options })
 }
diff --git a/packages/dnb-ui-lib/src/core/jest/setupJestScreenshot.js b/packages/dnb-ui-lib/src/core/jest/setupJestScreenshot.js
@@ -0,0 +1,7 @@
+/**
+ * Jest Setup for Screenshot testing
+ *
+ */
+
+const { setupJestScreenshot } = require('jest-screenshot')
+setupJestScreenshot()