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

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

Feature/remove cypress graphql mocks cypress 10
This commit is contained in:
Ramon Wenger 2022-10-17 14:47:11 +00:00
parent bb4c22bee8 381411b965
commit 0928fb607b
11 changed files with 8118 additions and 6384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/cypress.e2e.ts
View File

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

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

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

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

5
client/cypress/e2e/frontend/spellcheck.spec.js
View File

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

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

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

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

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

85
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, 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({
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);
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;
};

29
client/mock.js Normal file
View File

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

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>