chore: first pass at cypress e2e tests

.travis.yml

@@ -1,37 +1,22 @@
 language: node_js
 node_js:
+  - 10
+  - 12
   - stable
-  - lts/*
 before_install:
   - npm config set spin false --global
+addons:
+  apt:
+    packages:
+      # Ubuntu 16+ does not install this dependency by default, so we need to install it ourselves
+      - libgconf-2-4
+cache:
+  yarn: true
+  directories:
+    - ~/.cache
 install:
-  - yarn --frozen-lockfile --ignore-scripts # ignore prepublish scripts
+  - yarn --frozen-lockfile # ignore prepublish scripts
+  - cypress install
 after_success:
   - codecov
-cache: yarn
-# deploy:
-#   - provider: script
-#     skip_cleanup: true
-#     email: agomezs@fb.com
-#     api_key:
-#       secure: uKXlFfrKz0uOcu1tIwfQOS8A4rpVu0fIfSFReIo1hWd2CujqKIt94KalsgxVLxQfhxePVepzBamHlGu0x9B9uqz7uFe+nzKQ4df1k/UGElv+vozIoxsTs70sZe/XHqhazraT3B/4G98LoDuP+3c6qBbq6vJvehGG+9q3btuYoXqeF1BAGDW6YNGoq/fDUHCwsyg7n1LIBCWtWKJTlbtk4ppMfPNIE10UYMmREzXaMzY+mShlBs0/SlWIRDen5JujgV0jeVVCOJPS+wsCKZ17gWoIRpJgCHCgPfiTuU05CC+KkSuQoCaCYEdH1np9wJhpuaFK9I8myAlMMwzBQf61TnsQKcP/RjU1padL88RGgzspT36CEGXXqGHLbAR48nmL95B7SN+ZfnAtwlBXvvyNvt6V+VVvv4sgQ9C7vvV2Uj3ebOlmbEz9+8SPCQ5LuRVzxmYunkt2WacrV2uEPHRmsges70VIBGhAz3D09gTAHvZJFaLPeQTMFswm/TxJzbkWWL/2uEulG71A6QAJNV+zYT8OfEg3dhjKqolgqwHoDmXU8im6za+5MRuyZ8NaJ1NJ3iJMTXfInrmCGDhhm8ufO2eH35/tDl2lBAluvBsr8cgw3Sdd4yYAoP/utiIuXlMMFvjMfo0cJsaqQ2MLY5zXb/n/xoUC0Q9hr3tzc8ZMkQo=
-#     on:
-#       tags: true
-#       branch: master
-#     script: "lerna exec -- yarn publish"
-#   - provider: releases
-#     skip_cleanup: true
-#     api_key:
-#       secure: HzZELTrnObaY3L/Qf+sgxtzwZM8KpNNB3CzxHjkihIkl8bt2ibUgvPrArsUisyGI5WXiW6KMzyjDEmODjyT61InCUzXwdqtH7cpcYL1hLrCXUK1MH2yobesMlqcZiu1BdXgYPfhxA9BzA8aQmSmcnIj1+8nVh2ZRYcPE4Lct3eExzLKUr4hvDoGhfStEknLcuSaiICQXqVRQbnVclR/D5fZ77Nt/XdX6yTPd5+BqtEaLXM8rO1zCmD23QNrgHl9lOzIlc7hJ87TQ2t58f1l3nqxaDQieNGctM8ahrPHfYxKX2MZsuKgNEtBmsm+ldnaI2yKoFZNiBY4nEy35beqLROHihisxMo5+kw5L6f7aQ4YpI8lrmeWXUjHBIv9lpnuo8DVO2sBwhvywNhcHqLMX5wt6akh8HSdERpUxcA9cIPVY3vi3tGIJTxidxZUqFHM83Bvh54pss5Afi9HWodTIP+0/HtB7WdKBXH0F4CefuLDhy4aVb5tMo+bi1ENhjpdjl3o+VshkEYXOP2Ge8DAoatFqgXjrc/OQS+Ca7n/75dGwZVBGsX0Gg2Bp+zaWIp5xgqImclsBuk+879/tHUitxt4ZjkWH8E07voiU7WIrmw/BX/kQR3l5T1ROjjtJg1dGuRTSryjCzg+qx3ssXmf4szsaSgOTTPdMgI6HY5cJxEQ=
-#     file:
-#       - packages/graphiql/graphiql.js
-#       - packages/graphiql/graphiql.min.js
-#       - packages/graphiql/graphiql.css
-#       - packages/codemirror-graphql/hint.js
-#       - packages/codemirror-graphql/info.js
-#       - packages/codemirror-graphql/jump.js
-#       - packages/codemirror-graphql/lint.js
-#       - packages/codemirror-graphql/mode.js
-#     on:
-#       tags: true
-#       branch: master
+

cypress.json

@@ -0,0 +1 @@
+{}

package.json

@@ -20,8 +20,10 @@
   },
   "scripts": {
     "build": "tsc --build && lerna run build --scope codemirror-graphql --scope graphiql --scope graphql-language-service --scope graphql-language-service-server",
-    "test": "yarn run lint && yarn run check && yarn run build && yarn run testonly",
+    "test": "yarn run lint && yarn run check && yarn run build && yarn run testonly && yarn run e2e",
     "testonly": "jest && lerna run test --scope codemirror-graphql",
+    "e2e": "cd packages/graphiql && yarn e2e",
+    "cypress:open": "cd packages/graphiql && yarn e2e:server & cypress open --project ./packages/graphiql",
     "t": "yarn run testonly",
     "lint": "eslint --ext=ts,js,jsx,tsx . || (printf '\\033[33mTry: \\033[7m yarn run lint -- --fix \\033[0m\\n' && exit 1)",
     "lint:fix": "eslint --ext=ts,js,jsx,tsx . --fix",
@@ -54,6 +56,7 @@
     "chai": "4.2.0",
     "codecov": "^3.5.0",
     "conventional-changelog-conventionalcommits": "^4.1.0",
+    "cypress": "^3.4.1",
     "eslint": "^6.4.0",
     "eslint-config-prettier": "6.3.0",
     "eslint-plugin-babel": "5.3.0",
@@ -72,6 +75,7 @@
     "mocha": "6.1.4",
     "prettier": "^1.18.2",
     "ts-jest": "^24.1.0",
-    "typescript": "^3.6.3"
+    "typescript": "^3.6.3",
+    "wait-on": "^3.3.0"
   }
 }

packages/graphiql/.gitignore

@@ -5,3 +5,4 @@ dist/
 example/yarn.lock
 example/graphiql.js
 example/graphiql.css
+test/pid

packages/graphiql/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:8080",
+  "video": false
+}

packages/graphiql/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

packages/graphiql/cypress/integration/init.spec.js

@@ -0,0 +1,58 @@
+
+const testQuery = `{
+longDescriptionType {
+  id
+  image
+  hasArgs
+  test {
+    id
+    isTest
+    __typename
+  }
+ }
+}`
+
+const mockSuccess = {
+  "data": {
+    "longDescriptionType": {
+      "id": "abc123",
+      "image": "/images/logo.svg",
+      "hasArgs": "{\"defaultValue\":\"test default value\"}",
+      "test": {
+        "id": "abc123",
+        "isTest": true,
+        "__typename": "Test"
+      }
+    }
+  }
+}
+
+
+describe('GraphiQL On Initialization', function() {
+  it('Renders without error', function() {
+    const containers = [
+      '#graphiql', '.graphiql-container', '.topBarWrap', '.editorWrap', '.queryWrap', '.resultWrap', '.variable-editor'
+    ]
+    cy.visit(`/?query=${testQuery}`)
+    containers.forEach(cSelector => cy.get(cSelector).should('be.visible'))
+  })
+
+  it('Executes a GraphQL query over HTTP that has the expected result', function() {
+    cy.get('.execute-button').click()
+    cy.window().then((w) => {
+      cy.expect(JSON.parse(w.g.resultComponent.viewer.getValue())).to.deep.equal(mockSuccess)
+    })
+  })
+
+  it('Toggles doc pane off', function() {
+    // there are two components with .docExplorerHide, one in query history
+    cy.get('.docExplorerWrap button.docExplorerHide').click()
+    cy.get('.doc-explorer').should('not.exist')
+  })
+
+  it('Toggles doc pane back on', function() {
+    cy.get('.docExplorerShow').click()
+    cy.get('.doc-explorer').should('be.visible')
+  })
+
+})

packages/graphiql/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

packages/graphiql/cypress/support/commands.js

@@ -0,0 +1,26 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+Cypress.Commands.add('getCy', cyName => {
+  return cy.get(`[data-cy=${cyName}]`);
+});
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

packages/graphiql/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

packages/graphiql/package.json

@@ -27,6 +27,8 @@
     "build-flow": "node ../../resources/buildFlow.js",
     "check": "flow check",
     "dev": "babel-node test/server.js",
+    "e2e": "yarn e2e:server && cypress run && kill -9 `cat test/pid`",
+    "e2e:server": "PORT=8080 babel-node test/server.js & wait-on http://localhost:8080",
     "test": "node ../../resources/runTests ENZYME=true"
   },
   "lint-staged": {

packages/graphiql/test/server.js

@@ -13,11 +13,12 @@ import browserifyShim from 'browserify-shim';
 import watchify from 'watchify';
 import babelify from 'babelify';
 import graphqlHTTP from 'express-graphql';
-
+import fs from 'fs'
 import schema from './schema';
+
 
-const app = express();
 
+const app = express();
 // Server
 app.use('/graphql', graphqlHTTP({ schema }));
 
@@ -59,8 +60,17 @@ app.use(express.static(__dirname));
 
 console.log('Initial build...');
 makeBundle(() => {
-  app.listen(0, function() {
+  app.listen(process.env.PORT || 0, function() {
     const port = this.address().port;
-    console.log(`Started on http://localhost:${port}/`);
+    console.log('PID', process.pid)
+    fs.writeFile(path.join(__dirname, 'pid'), parseInt(process.pid, 10), () => {
+      console.log(`Started on http://localhost:${port}/`);
+    }) 
+    process.once('SIGINT', () => {
+      process.exit()
+    })
+    process.once('SIGTERM', () => {
+      process.exit()
+    })
   });
 });

resources/util.js

@@ -20,12 +20,10 @@ function cp(source, destination) {
 function exec(executable, ...args) {
   try {
     print(execFileSync(executable, args).toString());
+  } catch (err) {
+    console.error(err);
+    throw err;
   }
-  catch(err) {
-    console.error(err)
-    throw err
-  }
-
 }
 
 function print(string) {