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

Fix most jest tests

This commit is contained in:
Ramon Wenger 2022-10-26 14:20:57 +02:00
parent 243422cf9a
commit a0fd6fddd1
10 changed files with 1322 additions and 5661 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
client/cypress/e2e/frontend/modules/snapshots.spec.js
View File

@ -1,10 +1,9 @@
import module from '../../../fixtures/module.minimal';
import { getMinimalMe } from '../../../support/helpers';
import { hasOperationName } from '../../../support/graphql';
import {getMinimalMe} from '../../../support/helpers';
import {hasOperationName} from '../../../support/graphql';
let snapshotTitle;
let deleteSuccess;
let page;
const moduleWithSnapshots = {
...module,
@ -28,68 +27,71 @@ const moduleWithSnapshots = {
],
};
const mockDeleteSnapshot = (success) => {
cy.intercept('POST', '/api/graphql', (req) => {
if (hasOperationName(req, 'DeleteSnapshot')) {
let result;
if (success) {
result = {
message: 'yay!',
__typename: 'Success',
};
} else {
result = {
reason: 'Not the owner',
__typename: 'NotOwner',
};
}
req.reply({
data: {
deleteSnapshot: {
result,
},
},
});
}
});
};
// const mockDeleteSnapshot = (success) => {
// cy.intercept('POST', '/api/graphql', (req) => {
// if (hasOperationName(req, 'DeleteSnapshot')) {
// let result;
// if (success) {
// result = {
// message: 'yay!',
// __typename: 'Success',
// };
// } else {
// result = {
// reason: 'Not the owner',
// __typename: 'NotOwner',
// };
// }
// req.reply({
// data: {
// deleteSnapshot: {
// result,
// },
// },
// });
//
// }
// });
// };
const mockUpdateSnapshot = (title) => {
cy.intercept('POST', '/api/graphql', (req) => {
if (hasOperationName(req, 'UpdateSnapshot')) {
let snapshot;
if (title) {
snapshot = {
__typename: 'SnapshotNode',
id: 'U25hcHNob3ROb2RlOjQ=',
title,
};
} else {
snapshot = {
__typename: 'NotOwner',
reason: 'Not the owner',
};
}
req.reply({
data: {
updateSnapshot: {
snapshot,
},
},
});
}
});
};
// const mockUpdateSnapshot = (title) => {
// cy.intercept('POST', '/api/graphql', (req) => {
// if (hasOperationName(req, 'UpdateSnapshot')) {
// let snapshot;
// if (title) {
// snapshot = {
// __typename: 'SnapshotNode',
// id: 'U25hcHNob3ROb2RlOjQ=',
// title,
// };
// } else {
// snapshot = {
// __typename: 'NotOwner',
// reason: 'Not the owner',
// };
// }
// req.reply({
// data: {
// updateSnapshot: {
// snapshot,
// },
// },
// });
// }
// });
//
// };
// wait for the specified amount of requests in the test, so they don't spill over to the next test
const waitForNRequests = (n) => {
const waitNTimes = (n) => {
for (let i = 0; i < n; i++) {
cy.wait('@graphqlRequest');
}
};
describe('Snapshot', () => {
const operations = (isTeacher) => ({
const operations = isTeacher => ({
operations: {
UpdateSnapshot: {
updateSnapshot: {
@ -127,22 +129,21 @@ describe('Snapshot', () => {
};
}
return result;
},
},
},
MeQuery: getMinimalMe({ isTeacher }),
MeQuery: getMinimalMe({isTeacher}),
ModuleDetailsQuery: {
module,
},
CreateSnapshot: {
createSnapshot: {
snapshot: {
id: 'snapshot-id',
title: 'Mi Snapshot',
created: '2022-01-01',
creator: 'me',
shared: false,
mine: true,
id: '',
title: '',
created: '',
creator: '',
},
success: true,
},
@ -178,7 +179,6 @@ describe('Snapshot', () => {
},
SnapshotDetail: {
snapshot: {
title: 'Shared snapshot',
chapters: [],
module: {},
},
@ -194,7 +194,6 @@ describe('Snapshot', () => {
beforeEach(() => {
snapshotTitle = false;
deleteSuccess = false;
page = moduleWithSnapshots;
cy.setup();
});
@ -202,7 +201,7 @@ describe('Snapshot', () => {
cy.mockGraphqlOps(operations(true));
cy.visit('module/miteinander-reden/');
cy.getByDataCy('snapshot-menu').should('be.visible');
waitForNRequests(4);
waitNTimes(4);
});
it('Menu is not visible for student', () => {
@ -211,27 +210,19 @@ describe('Snapshot', () => {
cy.getByDataCy('module-title').should('be.visible');
cy.getByDataCy('snapshot-menu').should('not.exist');
waitForNRequests(3);
waitNTimes(3);
});
it('Creates Snapshot', () => {
cy.mockGraphqlOps(operations(true));
cy.visit('module/miteinander-reden/snapshots');
cy.getByDataCy('snapshot-list')
.should('exist')
.within(() => {
cy.get('.snapshots__snapshot').should('have.length', 1);
});
cy.getByDataCy('back-link').click();
cy.visit('module/miteinander-reden/');
cy.getByDataCy('module-snapshots-button').click();
cy.getByDataCy('create-snapshot-button').click();
cy.getByDataCy('show-all-snapshots-button').click();
cy.getByDataCy('snapshot-list')
.should('exist')
.within(() => {
cy.get('.snapshots__snapshot').should('have.length', 2);
});
waitForNRequests(7);
cy.getByDataCy('snapshot-list').should('exist').within(() => {
cy.get('.snapshots__snapshot').should('have.length', 1);
});
waitNTimes(7);
});
it('Applies Snapshot', () => {
@ -243,7 +234,7 @@ describe('Snapshot', () => {
cy.getByDataCy('module-title').should('exist');
cy.getByDataCy('snapshot-header').should('not.exist');
waitForNRequests(8);
waitNTimes(9);
});
it('Renames Snapshot', () => {
@ -252,12 +243,12 @@ describe('Snapshot', () => {
snapshotTitle = newTitle;
// mockUpdateSnapshot(newTitle);
cy.visit('module/miteinander-reden/snapshots');
cy.getByDataCy('snapshot-link').should('contain.text', 'Old Title');
cy.getByDataCy('snapshot-link').should('have.text', 'Old Title');
cy.getByDataCy('rename-snapshot-button').click();
cy.getByDataCy('edit-name-input').clear().type(newTitle);
cy.getByDataCy('modal-save-button').click();
cy.getByDataCy('snapshot-link').should('contain.text', 'New Title');
waitForNRequests(5);
cy.getByDataCy('snapshot-link').should('have.text', 'New Title');
waitNTimes(5);
});
it('Deletes Snapshot', () => {
@ -269,7 +260,7 @@ describe('Snapshot', () => {
cy.getByDataCy('delete-snapshot-button').click();
cy.getByDataCy('modal-save-button').click();
cy.getByDataCy('snapshot-entry').should('have.length', 0);
waitForNRequests(6);
waitNTimes(6);
});
it('Displays the Snapshot list correcly', () => {
@ -278,16 +269,13 @@ describe('Snapshot', () => {
cy.getByDataCy('snapshot-entry').should('have.length', 1);
cy.getByDataCy('delete-snapshot-button').should('exist');
cy.getByDataCy('rename-snapshot-button').should('exist');
cy.getByDataCy('snapshot-link').should('contain.text', 'Old Title');
cy.getByDataCy('snapshot-link').should('have.text', 'Old Title');
cy.getByDataCy('team-snapshots-link').click();
cy.getByDataCy('snapshot-entry').should('have.length', 1);
cy.getByDataCy('snapshot-link').should('contain.text', 'Shared snapshot');
cy.getByDataCy('snapshot-link').should('have.text', 'Shared snapshot');
cy.getByDataCy('delete-snapshot-button').should('not.exist');
cy.getByDataCy('rename-snapshot-button').should('not.exist');
cy.getByDataCy('snapshot-link').click();
cy.getByDataCy('module-title').should('contain.text', 'Shared snapshot');
waitForNRequests(5);
waitNTimes(4);
});
afterEach(() => {});
});

39
client/jest.config.js
View File

@ -1,21 +1,42 @@
module.exports = {
moduleFileExtensions: ['js', 'jsx', 'ts', 'json', 'vue'],
moduleFileExtensions: [
'js',
'jsx',
'ts',
'json',
'vue',
],
transform: {
'\\.(gql|graphql)$': 'jest-transform-graphql',
'\\.(gql|graphql)$': '@graphql-tools/jest-transform',
'^.+\\.js$': 'babel-jest',
'^.+\\.ts$': 'babel-jest',
'^.+\\.vue$': '@vue/vue2-jest',
'^.+\\.vue$': '@vue/vue3-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
},
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
transformIgnorePatterns: ['/node_modules/'],
modulePaths: [
'<rootDir>/src',
'<rootDir>/node_modules',
],
transformIgnorePatterns: [
'/node_modules/',
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
'^gql/(.*)$': '<rootDir>/src/graphql/gql/$1',
},
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
snapshotSerializers: [
'<rootDir>/node_modules/jest-serializer-vue',
],
testEnvironment: 'jsdom',
testMatch: ['**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'],
testURL: 'http://localhost/',
watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
testEnvironmentOptions: {
url: 'http://localhost/',
customExportConditions: ['node', 'node-addons'] // needed according to https://github.com/vuejs/vue-jest/issues/479
},
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
],
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
};

6700
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
client/package.json
View File

@ -48,10 +48,11 @@
"@vue/apollo-option": "^4.0.0-alpha.16",
"@vue/compat": "3.2.30",
"@vue/compiler-sfc": "3.2.30",
"@vue/vue3-jest": "^27.0.0",
"@vue/test-utils": "^2.2.0",
"@vue/vue3-jest": "^29.1.1",
"autoprefixer": "^10.4.12",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.5.1",
"babel-jest": "^29.2.2",
"babel-loader": "^8.0.6",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^10.1.0",
@ -72,7 +73,8 @@
"graphql-tag": "^2.10.1",
"graphql-tools": "^8.2.5",
"html-webpack-plugin": "^5.5.0",
"jest": "^27.5.1",
"jest": "^29.2.2",
"jest-environment-jsdom": "^29.2.2",
"jest-serializer-vue": "^2.0.2",
"jest-transform-graphql": "^2.1.0",
"jest-transform-stub": "^2.0.0",

2
client/src/components/instruments/FilterGroup.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="filter-group">
<filter-entry
:text="title"
v-bind="$attrs"
:text="title"
:type="category"
:category="category"
:is-category="true"

1
client/src/pages/license-activation.vue
View File

@ -64,7 +64,6 @@
</template>
<script>
import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
import LoadingButton from '@/components/LoadingButton';

13
client/tests/unit/checkbox.spec.js
View File

@ -1,9 +1,9 @@
import { createLocalVue, mount } from '@vue/test-utils';
import {mount} from '@vue/test-utils';
import Checkbox from '@/components/ui/BaseInput';
const localVue = createLocalVue();
describe('Checkbox.vue', () => {
it('should display the provided props', async () => {
const props = {
label: 'Lonely label',
@ -11,8 +11,7 @@ describe('Checkbox.vue', () => {
item: null,
};
const wrapper = mount(Checkbox, {
propsData: props,
localVue,
props,
});
const input = wrapper.find('[data-cy="base-input-input"]');
@ -25,19 +24,19 @@ describe('Checkbox.vue', () => {
it.skip('should emit updated value', async () => {
// todo: failed after update from jest@25 to jest@27, probably already at jest@26
const labelText = 'Lonely label';
const item = { name: 'bla' };
const item = {name: 'bla'};
const props = {
label: labelText,
checked: false,
item,
};
const wrapper = mount(Checkbox, {
propsData: props,
localVue,
props,
});
wrapper.element.click();
expect(wrapper.emitted()['input'][0]).toEqual([!props.checked, item]);
});
});

24
client/tests/unit/class-selection-widget.spec.js
View File

@ -1,5 +1,5 @@
import { createLocalVue, mount } from '@vue/test-utils';
import { createMockClient } from 'mock-apollo-client';
import {mount} from '@vue/test-utils';
import {createMockClient} from 'mock-apollo-client';
import SIDEBAR from '@/graphql/gql/local/sidebar.gql';
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
@ -11,9 +11,9 @@ import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQue
import VueApollo from 'vue-apollo';
import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
// https://dev.to/n_tepluhina/testing-vue-apollo-2020-edition-2l2p
const localVue = createLocalVue();
localVue.use(VueApollo);
const updateSettingsResponse = {
@ -85,7 +85,9 @@ const meQueryResponse = {
},
team: null,
isTeacher: true,
permissions: ['users.can_manage_school_class_content'],
permissions: [
'users.can_manage_school_class_content',
],
onboardingVisited: true,
},
},
@ -104,14 +106,14 @@ const schoolClasses = [
{
id: 'abcd123',
name: 'Hello',
},
{
}, {
id: 'xyz098',
name: 'Kitty',
},
];
describe('ClassSelectionWidget.vue', () => {
let mockClient;
let apolloProvider;
let wrapper;
@ -125,6 +127,7 @@ describe('ClassSelectionWidget.vue', () => {
moduleDetailHandler: jest.fn().mockResolvedValueOnce(moduleDetailResponse),
};
const createComponent = () => {
mockClient = createMockClient();
mockClient.cache.writeQuery = jest.fn();
@ -141,7 +144,6 @@ describe('ClassSelectionWidget.vue', () => {
});
wrapper = mount(ClassSelectionWidget, {
localVue,
apolloProvider,
mocks: {
$route: {
@ -153,12 +155,15 @@ describe('ClassSelectionWidget.vue', () => {
});
wrapper.vm.me.schoolClass = schoolClasses;
};
it('should delete the modules cache and query the current module on a class change', async () => {
createComponent();
wrapper.vm.me.selectedClass = { id: 'abcd123' };
wrapper.vm.me.selectedClass = {id: 'abcd123'};
wrapper.vm.updateSelectedClassAndHidePopover(schoolClasses[1]);
expect(requestHandlers.updateSettingsHandler).toHaveBeenCalledWith({
@ -175,6 +180,7 @@ describe('ClassSelectionWidget.vue', () => {
// expect(requestHandlers.mySchoolClassHandler).toHaveBeenCalled();
// current module is being refetched
// expect(requestHandlers.moduleDetailHandler).toHaveBeenCalledWith({slug});
});
afterEach(() => {
@ -182,4 +188,6 @@ describe('ClassSelectionWidget.vue', () => {
mockClient = null;
apolloProvider = null;
});
});

15
client/tests/unit/comment-input.spec.js
View File

@ -1,16 +1,16 @@
import { createLocalVue, shallowMount } from '@vue/test-utils';
import {shallowMount} from '@vue/test-utils';
import CommentInput from '@/components/rooms/CommentInput';
const localVue = createLocalVue();
localVue.directive('auto-grow', {});
describe('CommentInput.vue', () => {
it('should clear input after submit', async () => {
const inputText = 'some value';
const wrapper = shallowMount(CommentInput, {
localVue,
});
const wrapper = shallowMount(CommentInput,{
directives: {
'auto-grow': {}
}
} );
const textInput = wrapper.find('[data-cy="comment-textarea"]');
await textInput.setValue(inputText);
@ -19,4 +19,5 @@ describe('CommentInput.vue', () => {
expect(wrapper.emitted()['submit'][0]).toEqual([inputText]);
});
});

11
client/tests/unit/text-form.spec.js
View File

@ -1,18 +1,16 @@
import { createLocalVue, shallowMount } from '@vue/test-utils';
import {shallowMount} from '@vue/test-utils';
import TextForm from '@/components/content-forms/TextForm';
const localVue = createLocalVue();
describe('TextForm.vue', () => {
it('should emit user input and its index', async () => {
const inputText = 'some value';
const props = {
value: { text: '' },
index: 1,
index: 1
};
const wrapper = shallowMount(TextForm, {
propsData: props,
localVue,
props,
});
const textInput = wrapper.find('[data-cy="text-form-input"]');
@ -20,4 +18,5 @@ describe('TextForm.vue', () => {
expect(wrapper.emitted()['change-text'][0]).toEqual([inputText, props.index]);
});
});