Integration testing (codesandbox#251)

* Integration tests

* Test HTML and make screenshot treshold looser

* Remove html

* Remove obsolete snapshots

* Adjust threshold to 3%

Author: CompuIves

.circleci/config.yml

@@ -0,0 +1,36 @@
+version: 2
+
+jobs:
+  build:
+    working_directory: ~/codesandbox-client
+    docker:
+      - image: circleci/node:8.4.0
+    environment:
+      TZ: "/usr/share/zoneinfo/Europe/Amsterdam"
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      - run:
+          name: Install Dependency
+          command: yarn install
+      - save_cache:
+          key: dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          paths:
+            - ./node_modules
+            - ~/.yarn-cache
+      - run:
+          name: Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
+          command: sh ./integration-tests/scripts/workaround-puppeteer-issue-290.sh
+      - run:
+          name: Start Server
+          command: yarn start:test
+          background: true
+      - run:
+          name: Test
+          command: |
+            sleep 2
+            yarn test:integrations -- --maxWorkers=2
+      - store_artifacts:
+          path: integration-tests/tests/__image_snapshots__/__diff_output__
+          destination: image_snapshot_diff

.gitignore

@@ -3,6 +3,8 @@
 # dependencies
 /node_modules
 
+/integration-tests/**/__diff_output__
+
 # testing
 coverage
 

config/webpack.common.js

@@ -14,21 +14,32 @@ const babelProd = require('./babel.prod');
 const NODE_ENV = JSON.parse(env['process.env.NODE_ENV']);
 const __DEV__ = NODE_ENV === 'development'; // eslint-disable-line no-underscore-dangle
 const __PROD__ = NODE_ENV === 'production'; // eslint-disable-line no-underscore-dangle
+const __TEST__ = NODE_ENV === 'test'; // eslint-disable-line no-underscore-dangle
 const babelConfig = __DEV__ ? babelDev : babelProd;
 
 module.exports = {
-  entry: {
-    app: [require.resolve('./polyfills'), path.join(paths.appSrc, 'index.js')],
-    sandbox: [
-      require.resolve('./polyfills'),
-      path.join(paths.sandboxSrc, 'index.js'),
-    ],
-    embed: [
-      require.resolve('./polyfills'),
-      path.join(paths.embedSrc, 'index.js'),
-    ],
-    vendor: ['react', 'react-dom', 'styled-components'],
-  },
+  entry: __TEST__
+    ? {
+        sandbox: [
+          require.resolve('./polyfills'),
+          path.join(paths.sandboxSrc, 'index.js'),
+        ],
+      }
+    : {
+        app: [
+          require.resolve('./polyfills'),
+          path.join(paths.appSrc, 'index.js'),
+        ],
+        sandbox: [
+          require.resolve('./polyfills'),
+          path.join(paths.sandboxSrc, 'index.js'),
+        ],
+        embed: [
+          require.resolve('./polyfills'),
+          path.join(paths.embedSrc, 'index.js'),
+        ],
+        vendor: ['react', 'react-dom', 'styled-components'],
+      },
   target: 'web',
   node: {
     fs: 'empty',

integration-tests/jest.config.json

@@ -0,0 +1,5 @@
+{
+  "rootDir": "../",
+  "setupTestFrameworkScriptFile": "<rootDir>/integration-tests/setup.js",
+  "roots": ["integration-tests"]
+}

integration-tests/scripts/workaround-puppeteer-issue-290.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+# Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
+
+sudo apt-get update
+sudo apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
+  libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
+  libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \
+  libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \
+  ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

integration-tests/setup.js

@@ -0,0 +1,3 @@
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+expect.extend({ toMatchImageSnapshot });