Setup integration tests (#209)

.circleci/config.yml

@@ -1,17 +1,34 @@
 version: 2.1
 
+cache-key: &cache-key
+  key: dependency-cache-primary-{{ arch }}-{{ checksum ".nvmrc" }}-{{ checksum "package-lock.json" }}
+
 jobs:
   all:
     docker:
-      - image: circleci/node:carbon
+      - image: cypress/browsers:node8.15.1-chrome73
     steps:
       - checkout
-      - run: npm install
+      - restore_cache: *cache-key
+      - run: npm ci
+      - run:
+          name: Reverting "package-lock.json"
+          # `npm install` can modify `package-lock.json`. If it happens, we're caching dependencies
+          # with a wrong key. To mitigate this problem we restore the original lock file.
+          command: git checkout -- package-lock.json
+      - save_cache:
+          <<: *cache-key
+          paths:
+            - ./node_modules
       - run: npm run lint
       - run: npm test
       - run: npm run build
       - run: npm run size
       - run: npm run integration
+      - store_test_results:
+          path: test/cypress/reports
+      - store_artifacts:
+          path: test/cypress/screenshots
 
 workflows:
   version: 2
@@ -25,7 +42,7 @@ workflows:
       - all
     triggers:
       - schedule:
-          cron: "40 * * * *"
+          cron: '40 * * * *'
           filters:
             branches:
               only:

.eslintignore

@@ -0,0 +1,5 @@
+# ignore nested node_modules
+**/node_modules/**
+/node_modules
+/dist
+**/build/**

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": "standard",
+  "extends": ["standard"],
   "rules": {
     "no-var": "error",
     "prefer-const": "error"

.gitignore

@@ -3,3 +3,9 @@
 /.DS_Store
 /dist/cf-extension-api.js
 /dist/cf-extension-api.map
+/test/cypress/reports
+/test/cypress/videos
+/test/cypress/screenshots
+cypress.env.json
+.env
+.env.local

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "jsxBracketSameLine": true,
+  "semi": false
+}

cypress.json

@@ -0,0 +1,17 @@
+{
+  "fixturesFolder": "./test/cypress/fixtures",
+  "integrationFolder": "./test/cypress/integration",
+  "pluginsFile": "./test/cypress/plugins/index.js",
+  "supportFile": "./test/cypress/support/index.js",
+  "videosFolder": "./test/cypress/videos",
+  "video": false,
+  "screenshotsFolder": "./test/cypress/screenshots",
+  "testFiles": "**/*.spec.js",
+  "ignoreTestFiles": "**/example*.js",
+  "baseUrl": "https://app.contentful.com",
+  "reporter": "junit",
+  "reporterOptions": {
+    "mochaFile": "test/cypress/reports/cypress-test-results.xml"
+  },
+  "chromeWebSecurity": false
+}

docs/run-integration-tests.md

@@ -0,0 +1,41 @@
+# Run integration tests
+
+## Writing tests and running them locally
+
+1. Create `.env` file at the root of the repository with the following variables:
+
+```bash
+# Generate PAT token here: https://www.contentful.com/r/knowledgebase/personal-access-tokens/
+CONTENTFUL_CMA_TOKEN=<personal-cma-token>
+# ID of the space
+CONTENTFUL_SPACE_ID=<testing-space-id>
+# Url of the web app we test against
+CYPRESS_BASE_URL=https://app.contentful.com
+# If true, then local version of ui-extension-sdk will be used in all testing extension
+# Otherwise, it's latest version of ui-extension-sdk from NPM
+TEST_LOCAL_SDK=true
+# Target environment for local testing.
+# When running tests locally we won't create a new environment dynamically
+CONTENTFUL_LOCAL_TESTING_ENV=<envinonment-name-that-you-will-use-for-testing>
+```
+
+2. Run the following commands
+
+```bash
+# install all build dependencies
+npm install
+# build local version of ui-extensions-sdk
+npm run build
+# build all testing extensions and install them in testing environment of your space
+npm run integration:local
+```
+
+3. Open Cypress in development mode
+
+```bash
+npm run cypress:open
+```
+
+4. Edit cypress tests
+
+Edit exising tests or create a new one in `test/cypress/integration` folder.