Replace cypress-graphql-mock with a custom command

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/support/commands.js

@@ -1,171 +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 mocks from '../fixtures/mocks';
-
-import {makeExecutableSchema} from '@graphql-tools/schema';
-import {addMocksToSchema} from '@graphql-tools/mock';
-import {graphql} from 'graphql';
-
-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.viewport('macbook-15');
-  cy.task('getSchema').then(schemaString => {
-    const schema = makeExecutableSchema({typeDefs: schemaString});
-    const schemaWithMocks = addMocksToSchema({schema, mocks});
-
-    cy.intercept('POST', '/api/graphql', (req) => {
-      const {query, variables} = req.body;
-      console.log(query, variables);
-      graphql({
-        schema: schemaWithMocks,
-        source: query,
-        variableValues: variables,
-      }).then(result => {
-        console.log('result');
-        console.log(result);
-        req.reply({
-          ...result,
-        });
-      }, e => {
-        console.log('error message');
-        console.log(e.message);
-        console.error(e);
-      });
-    });
-  });
-});

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} from "graphql";
 
 Cypress.Commands.add('apolloLogin', (username, password) => {
   const payload = {
@@ -131,12 +134,57 @@ 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);
+
+      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/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>