Merge branch 'master' into npm-scripts-cleanup

.circleci/config.yml

@@ -69,7 +69,7 @@ jobs:
       - run: sudo apt-get install xvfb libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
       - run: sudo yarn global add bolt
       - run: bolt
-      - run: yarn pm2 start packages/test-project/index.js
+      - run: CLOUDINARY_CLOUD_NAME=$CLOUDINARY_CLOUD_NAME CLOUDINARY_KEY=$CLOUDINARY_KEY CLOUDINARY_SECRET=$CLOUDINARY_SECRET yarn pm2 start packages/test-project/index.js
       - save_cache:
           paths:
             - node_modules

.gitignore

@@ -75,3 +75,4 @@ junit.xml
 # Cypress
 cypress/screenshots
 cypress/videos
+cypress/mock

cypress/integration/test_project_spec.js → cypress/integration/create-buttons_spec.js

@@ -1,60 +1,3 @@
-describe('Test Project Smoke Tests', () => {
-  it('Should be able to access welcome message /', () => {
-    cy.visit('http://localhost:3000/');
-
-    cy.get('body').should('contain', 'Welcome');
-  });
-
-  it('Should be able to click through to admin page.', () => {
-    cy.visit('http://localhost:3000/');
-
-    cy.contains('Open').click();
-
-    cy.url().should('include', '/admin');
-  });
-});
-
-describe('Nav Bar', () => {
-  // Testing links which should open in a new tab is a bit tricky in Cypress.
-  // The discussion at this page lists some of the details.
-  // https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__tab-handling-links/cypress/integration/tab_handling_anchor_links_spec.js
-  [
-    { text: 'Dashboard', target: '/admin' },
-    { text: 'Users', target: '/admin/users' },
-    { text: 'Posts', target: '/admin/posts' },
-    { text: 'Post Categories', target: '/admin/post-categories' },
-    {
-      text: 'GitHub',
-      target: 'https://github.com/keystonejs/keystone-5',
-      newTab: true,
-    },
-    { text: 'Graphiql', target: '/admin/graphiql', newTab: true },
-    { text: 'Style Guide', target: '/admin/style-guide' },
-    { text: 'Sign Out', target: '/admin/signin' },
-  ].forEach(({ text, target, newTab = false }) => {
-    it(`${newTab ? 'Check' : 'Click'} ${text}`, () => {
-      cy.visit('http://localhost:3000/admin');
-
-      cy
-        .get('nav')
-        .contains(text)
-        .should('have.attr', 'href', target);
-      if (newTab) {
-        cy
-          .get('nav')
-          .contains(text)
-          .should('have.attr', 'target', '_blank');
-      } else {
-        cy
-          .get('nav')
-          .contains(text)
-          .click();
-        cy.url().should('include', target);
-      }
-    });
-  });
-});
-
 describe('Home page', () => {
   [
     { text: 'Users', target: 'users' },
@@ -121,4 +64,38 @@ describe('Home page', () => {
       cy.contains('div', `Create ${text} Dialog`).should('not.exist');
     });
   });
+
+  it('Ensure Create Modal opens inside the detail view, has the correct fields, and Cancels', () => {
+    cy.visit('http://localhost:3000/admin/users');
+
+    cy.get('a[href^="/admin/users/"]:first').click();
+    cy.get('button[appearance="create"]').click();
+
+    [
+      {
+        text: 'User',
+        labels: [
+          'Name',
+          'Email',
+          'Password',
+          'Twitterid',
+          'Twitterusername',
+          'Company',
+        ],
+      },
+    ].forEach(({ text, labels }) => {
+      cy
+        .contains('div', `Create ${text} Dialog`)
+        .contains('h3', `Create ${text}`);
+      cy.contains('div', `Create ${text} Dialog`).contains('button', 'Create');
+      labels.forEach(label => {
+        cy.contains('div[data-selector="field-container"]', label);
+      });
+      cy
+        .contains('div', `Create ${text} Dialog`)
+        .contains('button', 'Cancel')
+        .click();
+      cy.contains('div', `Create ${text} Dialog`).should('not.exist');
+    });
+  });
 });

cypress/integration/load-users-list_spec.js

@@ -3,13 +3,13 @@ describe('Loading User item', function() {
     return cy
       .graphql_query(
         `
-      query {
-        allUsers(first: 1) {
-          id
-          name
-        }
-      }
-    `
+          query {
+            allUsers(first: 1) {
+              id
+              name
+            }
+          }
+        `
       )
       .then(({ allUsers: [user] }) => {
         cy.visit(`http://localhost:3000/admin/users/${user.id}`);

cypress/integration/update-user-attachment_spec.js → cypress/integration/local-file-upload_spec.js

@@ -3,33 +3,45 @@ describe('Adding a file', function() {
     return cy
       .graphql_query(
         `
-      query {
-        allUsers(first: 1) {
-          id
-          name
-        }
-      }
-    `
+          query {
+            allUsers(first: 1) {
+              id
+              name
+            }
+          }
+        `
       )
       .then(({ allUsers: [user] }) => {
         const fileContent = `Some important content ${Math.random()}`;
         cy.visit(`http://localhost:3000/admin/users/${user.id}`);
-        cy.writeFile('cypress/fixtures/upload.txt', fileContent);
-        cy.upload_file('input[name=attachment][type=file]', 'upload.txt');
+        cy.writeFile('cypress/mock/upload.txt', fileContent);
+        cy.upload_file(
+          'input[name=attachment][type=file]',
+          '../mock/upload.txt'
+        );
+
+        // Setup to track XHR requests
+        cy.server();
+        // Alias the graphql request route
+        cy.route('post', '**/admin/api').as('graphqlPost');
+        // Avoid accidentally mocking routes
+        cy.server({ enable: false });
+
         cy.get('button[type="submit"]').click();
-        cy.contains('-upload.txt');
+        cy.contains('upload.txt');
+        cy.wait('@graphqlPost');
         return cy
           .graphql_query(
             `
-        query {
-          User(where: { id: "${user.id}" }) {
-            attachment {
-              id
-              publicUrl
-            }
-          }
-        }
-      `
+              query {
+                User(where: { id: "${user.id}" }) {
+                  attachment {
+                    id
+                    publicUrl
+                  }
+                }
+              }
+            `
           )
           .then(({ User: { attachment } }) => {
             // Assert the URL is visible in the admin UI

cypress/integration/nav-bar_spec.js

@@ -0,0 +1,40 @@
+describe('Nav Bar', () => {
+  // Testing links which should open in a new tab is a bit tricky in Cypress.
+  // The discussion at this page lists some of the details.
+  // https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__tab-handling-links/cypress/integration/tab_handling_anchor_links_spec.js
+  [
+    { text: 'Dashboard', target: '/admin' },
+    { text: 'Users', target: '/admin/users' },
+    { text: 'Posts', target: '/admin/posts' },
+    { text: 'Post Categories', target: '/admin/post-categories' },
+    {
+      text: 'GitHub',
+      target: 'https://github.com/keystonejs/keystone-5',
+      newTab: true,
+    },
+    { text: 'Graphiql', target: '/admin/graphiql', newTab: true },
+    { text: 'Style Guide', target: '/admin/style-guide' },
+    { text: 'Sign Out', target: '/admin/signin' },
+  ].forEach(({ text, target, newTab = false }) => {
+    it(`${newTab ? 'Check' : 'Click'} ${text}`, () => {
+      cy.visit('http://localhost:3000/admin');
+
+      cy
+        .get('nav')
+        .contains(text)
+        .should('have.attr', 'href', target);
+      if (newTab) {
+        cy
+          .get('nav')
+          .contains(text)
+          .should('have.attr', 'target', '_blank');
+      } else {
+        cy
+          .get('nav')
+          .contains(text)
+          .click();
+        cy.url().should('include', target);
+      }
+    });
+  });
+});

cypress/integration/relationship-field-re-hydration_spec.js

@@ -0,0 +1,36 @@
+describe('Testing re-hydration', () => {
+  before(() => {
+    cy.visit('http://localhost:3000/admin/posts');
+    cy.get('button[appearance="create"]').click();
+    cy
+      .get('label[for="ks-input-categories"] + div div[role="button"] > svg')
+      .click();
+    cy
+      .get('label[for="ks-input-categories"] + div div[role="listbox"]')
+      .should('not.contain', 'New Category');
+  });
+
+  after(() => {
+    cy.visit('http://localhost:3000/admin/post-categories');
+    cy.get('a:contains("New Category"):first').click();
+    cy.get('button:contains("Delete"):first').click();
+    cy.get('body:last footer button:first').click();
+  });
+
+  it('Our new category should appear after we add it', () => {
+    cy.visit('http://localhost:3000/admin/post-categories');
+    cy.get('button[appearance="create"]').click();
+    cy.get('#ks-input-name').type('New Category');
+    cy.get('div[class*="Dialog"] button[appearance="create"]').click();
+    cy.get('body').should('contain', 'New Category');
+
+    cy.get('nav a:contains("Posts")').click();
+    cy.get('button[appearance="create"]').click();
+    cy
+      .get('label[for="ks-input-categories"] + div div[role="button"] > svg')
+      .click();
+    cy
+      .get('label[for="ks-input-categories"] + div div[role="listbox"]')
+      .should('contain', 'New Category');
+  });
+});

cypress/integration/saving-text_spec.js

@@ -0,0 +1,55 @@
+describe('Adding data', () => {
+  [
+    {
+      text: 'User',
+      url: 'http://localhost:3000/admin/users',
+      data: {
+        'ks-input-name': 'John Doe',
+        'ks-input-email': '[email protected]',
+        'ks-input-password': 'password1',
+        'ks-input-twitterId': '@johndoe',
+        'ks-input-twitterUsername': 'John Doe',
+      },
+    },
+    {
+      text: 'Post',
+      url: 'http://localhost:3000/admin/posts',
+      data: {
+        'ks-input-name': 'My post',
+        'ks-input-slug': 'mypost',
+      },
+    },
+    {
+      text: 'Post Category',
+      url: 'http://localhost:3000/admin/post-categories',
+      data: {
+        'ks-input-name': 'My category',
+        'ks-input-slug': 'mycategory',
+      },
+    },
+  ].forEach(({ text, url, data }) => {
+    it(`Adding data to ${text}`, () => {
+      cy.visit(url);
+      cy.get('button[appearance="create"]').click();
+
+      Object.keys(data).forEach(item => {
+        cy.get(`#${item}`).type(data[item]);
+      });
+
+      // Setup to track XHR requests
+      cy.server();
+      // Alias the graphql request route
+      cy.route('post', '**/admin/api').as('graphqlPost');
+      // Avoid accidentally mocking routes
+      cy.server({ enable: false });
+
+      cy.get('div[class*="Dialog"] button[appearance="create"]').click();
+
+      cy.wait('@graphqlPost');
+
+      Object.keys(data).forEach(item => {
+        cy.get(`#${item}`).should('have.value', data[item]);
+      });
+    });
+  });
+});

cypress/integration/welcome-message_spec.js

@@ -0,0 +1,15 @@
+describe('Test Project Smoke Tests', () => {
+  it('Should be able to access welcome message /', () => {
+    cy.visit('http://localhost:3000/');
+
+    cy.get('body').should('contain', 'Welcome');
+  });
+
+  it('Should be able to click through to admin page.', () => {
+    cy.visit('http://localhost:3000/');
+
+    cy.contains('Open').click();
+
+    cy.url().should('include', '/admin');
+  });
+});

cypress/support/index.js

@@ -18,3 +18,11 @@ import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
+
+// Cypress doesn’t recognize `window.fetch` calls as XHR requests, which makes
+// it impossible to stub them. We delete `fetch` from the window object so the
+// polyfill (which uses proper `XMLHttpRequest`) kicks in.
+// "lolwat?" Yeah, me too. Check out: https://github.com/cypress-io/cypress/issues/687#issuecomment-384953881
+Cypress.on('window:before:load', function(win) {
+  win.fetch = require('cross-fetch');
+});

package.json

@@ -10,13 +10,12 @@
     "format:file": "prettier --write",
     "format": "prettier --write \"**/*.js\"",
     "fresh": "bolt ws exec -- rm -rf node_modules && rm -rf node_modules && bolt",
-    "jest": "jest",
+    "test:unit": "jest",
+    "test": "yarn lint && yarn jest && yarn cypress:run",
     "lint:eslint": "eslint .",
     "lint:prettier": "prettier --list-different \"**/*.js\"",
     "lint": "yarn lint:prettier && yarn lint:eslint",
     "start": "cd packages/test-project && yarn start",
-    "test:all": "yarn test && yarn cypress:run",
-    "test": "yarn lint && yarn jest"
   },
   "dependencies": {
     "apollo-cache-inmemory": "^1.1.12",
@@ -40,6 +39,7 @@
     "body-parser": "^1.18.2",
     "cloudinary": "^1.11.0",
     "cors": "^2.8.4",
+    "cross-fetch": "^2.2.0",
     "cuid": "^2.1.1",
     "dotenv-safe": "^5.0.1",
     "emotion": "^9.1.1",