ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Replace cypress-graphql-mock with a custom command

This commit is contained in:
Ramon Wenger 2022-10-13 16:09:10 +02:00
parent e83ebb73a0
commit fbcd5dcd6d
6 changed files with 8031 additions and 6386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/cypress/e2e/frontend/instruments/instruments-page.spec.js
View File

@ -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();

171
client/cypress/support/commands.js
View File

@ -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);
});
});
});
});

60
client/cypress/support/commands.ts
View File

@ -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({
schema,
mocks,
cy.mockGraphql();
});
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;
};

14130
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
client/package.json
View File

@ -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",

1
client/src/components/instruments/FilterEntry.vue
View File

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