Merged in feature/remove-cypress-graphql-mocks-cypress-10 (pull request #121)

Feature/remove cypress graphql mocks cypress 10

client/cypress.e2e.ts

@@ -1,9 +1,21 @@
 import {defineConfig} from 'cypress';
+import {readFileSync} from "fs";
+import {resolve} from "path";
 export default defineConfig( {
   e2e: {
     "baseUrl": "http://localhost:8000",
     specPattern: 'cypress/e2e/e2e/**/*.{spec,cy}.{js,ts}',
     supportFile: 'cypress/support/e2e.ts',
+    setupNodeEvents(on, config) {
+      on('task', {
+        getSchema() {
+          return readFileSync(
+            resolve(__dirname, '../server/schema.graphql'),
+            'utf8'
+          );
+        }
+      });
+    },
   },
   "videoUploadOnPasses": false,
   "reporter": "junit",

client/cypress/e2e/frontend/instruments/instruments-page.spec.js

@@ -112,19 +112,19 @@ describe('Instruments Page', () => {
 
     cy.getByDataCy('instrument').should('have.length', 3);
 
-    cy.contains(LANGUAGE_COMMUNICATION_VALUE).click();
+    cy.getByDataCy('filter-entry').filter(`:contains("${LANGUAGE_COMMUNICATION_VALUE}")`).click();
     cy.getByDataCy('instrument').should('have.length', 2);
 
-    cy.contains(SOCIETY_VALUE).click();
+    cy.getByDataCy('filter-entry').filter(`:contains("${SOCIETY_VALUE}")`).click();
     cy.getByDataCy('instrument').should('have.length', 1);
 
-    cy.contains(INTERDISCIPLINARY_VALUE).click();
+    cy.getByDataCy('filter-entry').filter(`:contains("${INTERDISCIPLINARY_VALUE}")`).click();
     cy.getByDataCy('instrument').should('have.length', 0);
 
-    cy.contains('Analyse').click();
+    cy.get('.filter-entry').filter(`:contains("Analyse")`).click();
     cy.getByDataCy('instrument').should('have.length', 1);
 
-    cy.contains('Ethik').click();
+    cy.get('.filter-entry').filter(`:contains("Ethik")`).click();
     cy.getByDataCy('instrument').should('have.length', 1);
 
     cy.getByDataCy('filter-all-instruments').click();

client/cypress/e2e/frontend/portfolio/project-page.spec.js

@@ -155,14 +155,17 @@ describe('Project Page', () => {
     cy.mockGraphqlOps({
       operations: getOperationsForSharing,
     });
-
-    cy.visit('/portfolio/groot');
     const unsharedText = 'Mit Lehrperson teilen';
     const sharedText = 'Nicht mehr teilen';
+
+    cy.visit('/portfolio/groot');
+    cy.getByDataCy('project-title').contains('Groot'); // sanity check, make sure the page is fully loaded
     cy.getByDataCy('project-share-link').should('contain', unsharedText);
     cy.getByDataCy('project-share-link').click();
+    cy.getByDataCy('project-title').contains('Groot'); // sanity check, make sure the page is fully loaded
     cy.getByDataCy('project-share-link').should('contain', sharedText);
     cy.getByDataCy('project-share-link').click();
+    cy.getByDataCy('project-title').contains('Groot'); // sanity check, make sure the page is fully loaded
     cy.getByDataCy('project-share-link').should('contain', unsharedText);
   });
 
@@ -203,6 +206,7 @@ describe('Project Page', () => {
       cy.getByDataCy('use-template-button').should('exist').click();
       cy.getByDataCy('upload-document-button').should('exist');
       cy.getByDataCy('modal-save-button').click();
+      cy.get('.modal').should('not.exist'); // make sure the modal is closed
 
       cy.get('.project-entry:last-of-type').within(() => {
         cy.get('.project-entry__paragraph:first-of-type').contains('Schwierigkeiten');

client/cypress/e2e/frontend/spellcheck.spec.js

@@ -2,6 +2,8 @@ import module from '../../fixtures/module.minimal';
 
 const spellCheck = require('../../fixtures/spell-check.json');
 
+const userText = 'Hir ist ein Feler gewesen';
+
 const operations = {
   MeQuery: {
     me: {
@@ -42,7 +44,7 @@ const operations = {
           'solution': null,
           'submission': {
             'id': 'U3R1ZGVudFN1Ym1pc3Npb25Ob2RlOjE=',
-            'text': 'Hir ist ein Feler gewesen',
+            'text': userText,
             'final': false,
             'document': '',
             'submissionFeedback': {
@@ -144,6 +146,7 @@ describe('Spellcheck', () => {
   it('should highlight three errors', () => {
     cy.visit('/module/lohn-und-budget/');
 
+    cy.getByDataCy('submission-textarea').should('have.value', userText);
     cy.getByDataCy('spellcheck-correction').should('have.length', 0);
     cy.getByDataCy('spellcheck-button').click();
     cy.getByDataCy('spellcheck-correction').should('have.length', 3);

client/cypress/integration/frontend/instruments/instrument-page.spec.js

@@ -4,21 +4,21 @@ describe('Instruments Page', () => {
   });
 
   it('opens the instruments page', () => {
-    cy.mockGraphqlOps({
+    // cy.mockGraphqlOps({
-      operations: {
+    //   operations: {
-        MeQuery: {},
+    //     MeQuery: {},
-        InstrumentQuery: {
+    //     InstrumentQuery: {
-          instrument: {
+    //       instrument: {
-            title: 'A Guitar',
+    //         title: 'A Guitar',
-              intro: 'Money for Nothing',
+    //           intro: 'Money for Nothing',
-              contents: ''
+    //           contents: ''
-            //   id: ID!
+    //         //   id: ID!
-            //   bookmarks: [InstrumentBookmarkNode]
+    //         //   bookmarks: [InstrumentBookmarkNode]
-            //   type: InstrumentTypeNode
+    //         //   type: InstrumentTypeNode
-          }
+    //       }
-        },
+    //     },
-      },
+    //   },
-    });
+    // });
     cy.visit('instrument/blabliblablub');
 
     cy.getByDataCy('instrument-title').should('exist').should('contain', 'A Guitar');

client/cypress/support/commands.js

@@ -1,151 +0,0 @@
-// ***********************************************
-// 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
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- 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) => { ... })
-// installed a fork of the original package, because of this issue:
-// https://github.com/tgriesser/cypress-graphql-mock/issues/23
-// todo: once above issue is fixed, go back to the original repo -> npm install cypress-graphql-mock
-// import 'cypress-graphql-mock';
-import '@iam4x/cypress-graphql-mock';
-import mocks from '../fixtures/mocks';
-
-Cypress.Commands.add('apolloLogin', (username, password) => {
-  const payload = {
-    'operationName': 'BetaLogin',
-    'variables': {
-      'input': {
-        'usernameInput': username,
-        'passwordInput': password,
-      },
-    },
-    'query': 'mutation BetaLogin($input: BetaLoginInput!) {\n  betaLogin(input: $input) {\n    success\n    __typename\n  }\n}\n',
-  };
-
-  cy.request({
-    method: 'POST',
-    url: '/api/graphql-public/',
-    body: payload,
-  });
-});
-
-// todo: replace with apollo call
-Cypress.Commands.add('login', (username, password, visitLogin = false) => {
-  if (visitLogin) {
-    cy.visit('/beta-login');
-  }
-
-  if (username !== '') {
-    cy.get('[data-cy=email-input]').type(username);
-  }
-
-  if (password !== '') {
-    cy.get('[data-cy=password-input]').type(password);
-  }
-  cy.get('[data-cy=login-button]').click();
-});
-
-Cypress.Commands.add('logout', () => {
-  cy.get('[data-cy=user-icon]').click();
-  cy.get('[data-cy=logout]').click();
-});
-
-Cypress.Commands.add('loginByCsrf', (username, password, csrftoken) => {
-  cy.request({
-    method: 'POST',
-    url: '/accounts/login/',
-    failOnStatusCode: false,
-    form: true,
-    body: {
-      username: username,
-      password: password,
-      csrfmiddlewaretoken: csrftoken,
-    },
-  });
-});
-
-Cypress.Commands.add('startGraphQLCapture', () => {
-  cy.server();
-  cy.route('POST', '/api/graphql/').as('graphQL');
-});
-
-
-Cypress.Commands.add('changePassword', (oldPassword, newPassword) => {
-  if (oldPassword) {
-    cy.get('[data-cy=old-password]').type(oldPassword);
-  }
-
-  if (newPassword) {
-    cy.get('[data-cy=new-password]').type(newPassword);
-  }
-  cy.get('[data-cy=change-password-button]').click();
-});
-
-Cypress.Commands.add('checkEmailAvailable', (email) => {
-  cy.get('[data-cy="email-input"]').type(email);
-  cy.get('[data-cy="hello-button"]').click();
-});
-
-Cypress.Commands.add('enterPassword', (password) => {
-  cy.get('[data-cy="password-input"]').type(password);
-  cy.get('[data-cy="login-button"]').click();
-});
-
-Cypress.Commands.add('getByDataCy', (selector) => {
-  return cy.get(`[data-cy=${selector}]`);
-});
-
-Cypress.Commands.add('selectClass', (schoolClass) => {
-  cy.getByDataCy('user-widget-avatar').click();
-  cy.getByDataCy('class-selection').click();
-  cy.getByDataCy('class-selection-entry').contains(schoolClass).click();
-});
-
-Cypress.Commands.add('fakeLogin', () => {
-  cy.log('Logging in (fake)');
-  cy.setCookie('loginStatus', 'true');
-});
-
-Cypress.Commands.add('isSubmissionReadOnly', (myText) => {
-  cy.get('.submission-form__textarea--readonly').as('textarea');
-
-  cy.get('@textarea').invoke('val').should('contain', myText);
-  cy.get('@textarea').should('have.attr', 'readonly');
-  cy.getByDataCy('submission-form-submit').should('not.exist');
-});
-
-Cypress.Commands.add('openSidebar', () => {
-    cy.getByDataCy('user-widget-avatar').click();
-});
-
-Cypress.Commands.add('setup', () => {
-  cy.fakeLogin('nino.teacher', 'test');
-    cy.server();
-    cy.viewport('macbook-15');
-    cy.task('getSchema').then(schema => {
-      cy.mockGraphql({
-        schema,
-        mocks,
-      });
-    });
-});

client/cypress/support/commands.ts

@@ -25,6 +25,8 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 //
+import {makeExecutableSchema} from "@graphql-tools/schema";
+
 declare global {
   namespace Cypress {
     interface Chainable {
@@ -63,8 +65,9 @@ declare global {
 // https://github.com/tgriesser/cypress-graphql-mock/issues/23
 // todo: once above issue is fixed, go back to the original repo -> npm install cypress-graphql-mock
 // import 'cypress-graphql-mock';
-import '@iam4x/cypress-graphql-mock';
 import mocks from '../fixtures/mocks';
+import {addMocksToSchema} from "@graphql-tools/mock";
+import {graphql, GraphQLError} from "graphql";
 
 Cypress.Commands.add('apolloLogin', (username, password) => {
   const payload = {
@@ -131,12 +134,78 @@ Cypress.Commands.add('openSidebar', () => {
 
 Cypress.Commands.add('setup', () => {
   cy.fakeLogin('nino.teacher', 'test');
-  cy.server();
   cy.viewport('macbook-15');
-  cy.task('getSchema').then((schema: string) => {
+  cy.mockGraphql();
-    cy.mockGraphql({
-      schema,
-      mocks,
-    });
-  });
 });
+
+Cypress.Commands.add('mockGraphql', (options?: any) => {
+  cy.task('getSchema').then(schemaString => {
+    const schema = makeExecutableSchema({typeDefs: schemaString});
+    const schemaWithMocks = addMocksToSchema({schema, mocks});
+
+    let currentOperations = options && options.operations ? options.operations : {};
+
+    // rebuilding what was in cypress-graphql-mock package here, because now we can just intercept the graphql call instead of messing with fetch
+    cy.intercept('POST', '/api/graphql', (req) => {
+      const {operationName, query, variables} = req.body;
+      const rootValue = getRootValue(currentOperations, operationName, variables);
+
+      if (!rootValue) {
+        return req;
+      }
+
+      if (
+        // Additional checks here because of transpilation.
+        // We will lose instanceof if we are not using specific babel plugin, or using pure TS to compile front-end
+        rootValue instanceof GraphQLError ||
+        rootValue.constructor === GraphQLError ||
+        rootValue.constructor.name === "GraphQLError"
+      ) {
+        return req.reply(
+          {
+            body: {
+              data: {},
+              errors: [rootValue]
+            }
+          }
+        );
+      }
+
+      graphql({
+        schema: schemaWithMocks,
+        source: query,
+        variableValues: variables,
+        operationName,
+        rootValue
+      }).then(result => {
+        req.reply({
+          ...result,
+        });
+      }, e => {
+        console.error(e);
+      });
+    }).as('graphqlRequest');
+
+    cy.wrap({
+      setOperations: (options: any) => {
+        currentOperations = {
+          ...currentOperations,
+          ...options.operations
+        };
+      }
+    }).as('mockGraphqlOps');
+  });
+
+});
+
+Cypress.Commands.add('mockGraphqlOps', (options) => {
+  cy.get('@mockGraphqlOps').invoke('setOperations' as any, options);
+});
+
+const getRootValue = (allOperations: any, operationName: string, variables: any) => {
+  const operation = allOperations[operationName];
+  if (typeof operation === 'function') {
+    return operation(variables);
+  }
+  return operation;
+};

client/mock.js

@@ -0,0 +1,29 @@
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
+const {  addMocksToSchema} = require('@graphql-tools/mock');
+const { makeExecutableSchema } = require('@graphql-tools/schema');
+const { graphql } = require('graphql');
+
+const schemaString = readFileSync(
+  resolve(__dirname,'../server/schema.graphql'),
+  'utf8'
+);
+
+// Make a GraphQL schema with no resolvers
+const schema = makeExecutableSchema({ typeDefs: schemaString })
+
+// Create a new schema with mocks
+const schemaWithMocks = addMocksToSchema({ schema })
+
+const query = /* GraphQL */ `
+  query MeQuery {
+    me {
+     firstName 
+    }
+  }
+`
+
+graphql({
+  schema: schemaWithMocks,
+  source: query,
+}).then(result => console.log('Got result', result))

client/package.json

@@ -36,7 +36,6 @@
     "@babel/runtime": "^7.5.4",
     "@graphql-tools/mock": "^8.6.5",
     "@graphql-tools/schema": "^8.3.7",
-    "@iam4x/cypress-graphql-mock": "^0.0.1",
     "@tiptap/core": "^2.0.0-beta.174",
     "@tiptap/extension-bullet-list": "^2.0.0-beta.26",
     "@tiptap/extension-document": "^2.0.0-beta.15",

client/src/components/instruments/FilterEntry.vue

@@ -2,6 +2,7 @@
   <a
     :class="typeClass"
     class="filter-entry"
+    data-cy="filter-entry"
     :style="categoryStyle"
   >
     <span class="filter-entry__text">{{ text }}</span>