Skip to content

Update frontend tests for nodejs, jest, and vue/test-utils upgrades #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bjester merged 1 commit into from
Apr 7, 2025
Merged

Update frontend tests for nodejs, jest, and vue/test-utils upgrades #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 29 additions & 28 deletions contentcuration/contentcuration/frontend/accounts/pages/__tests__/accountsMain.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@ import { mount } from '@vue/test-utils';
import router from '../../router';
import AccountsMain from '../AccountsMain.vue';

const login = jest.fn();

function makeWrapper() {
async function makeWrapper() {
const wrapper = mount(AccountsMain, {
router,
stubs: ['GlobalSnackbar', 'PolicyModals'],
Expand All @@ -18,19 +16,14 @@ function makeWrapper() {
},
},
});
wrapper.setMethods({
login: data => {
return new Promise(resolve => {
login(data);
resolve();
});
},
});
wrapper.setData({
await wrapper.setData({
username: 'test@test.com',
password: 'pass',
});
return wrapper;

const login = jest.spyOn(wrapper.vm, 'login');
login.mockImplementation(() => Promise.resolve());
return [wrapper, login];
}

function makeFailedPromise(statusCode) {
Expand All @@ -46,54 +39,62 @@ function makeFailedPromise(statusCode) {
}

describe('main', () => {
let wrapper, loginToProceed;
let wrapper, login, loginToProceed;

beforeEach(async () => {
wrapper = makeWrapper();
login.mockReset();
[wrapper, login] = await makeWrapper();
await wrapper.vm.$nextTick();
loginToProceed = wrapper.findAll('[data-test="loginToProceed"]').at(0);
loginToProceed = wrapper.findAllComponents('[data-test="loginToProceed"]').at(0);
});

afterEach(() => {
if (wrapper) {
wrapper.destroy();
}
});
it('should trigger submit method when form is submitted', () => {

it('should trigger submit method when form is submitted', async () => {
expect(loginToProceed.isVisible()).toBe(false);
const submit = jest.fn();
wrapper.setMethods({ submit });
wrapper.find({ ref: 'form' }).trigger('submit');
const submit = jest.spyOn(wrapper.vm, 'submit');
submit.mockImplementation(() => {});
await wrapper.findComponent({ ref: 'form' }).trigger('submit');
expect(submit).toHaveBeenCalled();
});

it('should call login with username and password provided', () => {
expect(loginToProceed.isVisible()).toBe(false);
wrapper.vm.submit();
expect(login).toHaveBeenCalled();
});
it('should fail if username is not provided', () => {

it('should fail if username is not provided', async () => {
expect(loginToProceed.isVisible()).toBe(false);
wrapper.setData({ username: ' ' });
await wrapper.setData({ username: ' ' });
wrapper.vm.submit();
expect(login).not.toHaveBeenCalled();
});
it('should fail if password is not provided', () => {

it('should fail if password is not provided', async () => {
expect(loginToProceed.isVisible()).toBe(false);
wrapper.setData({ password: '' });
await wrapper.setData({ password: '' });
wrapper.vm.submit();
expect(login).not.toHaveBeenCalled();
});

it('should set loginFailed if login fails', async () => {
expect(loginToProceed.isVisible()).toBe(false);
wrapper.setMethods({ login: makeFailedPromise() });
jest.spyOn(wrapper.vm, 'login').mockImplementation(makeFailedPromise());
await wrapper.vm.submit();
expect(wrapper.vm.loginFailed).toBe(true);
});

it('should say account has not been activated if login returns 405', async () => {
expect(loginToProceed.isVisible()).toBe(false);
wrapper.setMethods({ login: makeFailedPromise() });
jest.spyOn(wrapper.vm, 'login').mockImplementation(makeFailedPromise());
await wrapper.vm.submit();
expect(wrapper.vm.loginFailed).toBe(true);
});

it('should navigate to next url if next query param is set', async () => {
const testUrl = '/testnext/';
const location = new URL(`http://studio.time/?next=${testUrl}`);
Expand All @@ -103,7 +104,7 @@ describe('main', () => {
window.location.assign = jest.fn();

wrapper.destroy();
wrapper = makeWrapper();
[wrapper, login] = await makeWrapper();
await wrapper.vm.$nextTick();
loginToProceed = wrapper.findAll('[data-test="loginToProceed"]').at(0);
expect(loginToProceed.isVisible()).toBe(true);
Expand Down
129 changes: 67 additions & 62 deletions contentcuration/contentcuration/frontend/accounts/pages/__tests__/create.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,7 @@ const defaultData = {
accepted_tos: true,
};

const register = jest.fn();

function makeWrapper(formData) {
async function makeWrapper(formData) {
const wrapper = mount(Create, {
router,
computed: {
Expand All @@ -46,21 +44,15 @@ function makeWrapper(formData) {
stubs: ['PolicyModals'],
mocks: connectionStateMocks,
});
wrapper.setData({
await wrapper.setData({
form: {
...defaultData,
...formData,
},
});
wrapper.setMethods({
register: data => {
return new Promise(resolve => {
register(data);
resolve();
});
},
});
return wrapper;
const register = jest.spyOn(wrapper.vm, 'register');
register.mockImplementation(() => Promise.resolve());
return [wrapper, { register }];
}
function makeFailedPromise(statusCode) {
return () => {
Expand All @@ -75,38 +67,39 @@ function makeFailedPromise(statusCode) {
}

describe('create', () => {
beforeEach(() => {
register.mockReset();
});
it('should trigger submit method when form is submitted', () => {
const submit = jest.fn();
const wrapper = makeWrapper();
wrapper.setMethods({ submit });
wrapper.find({ ref: 'form' }).trigger('submit');
it('should trigger submit method when form is submitted', async () => {
const [wrapper] = await makeWrapper();
const submit = jest.spyOn(wrapper.vm, 'submit');
submit.mockImplementation(() => Promise.resolve());
await wrapper.findComponent({ ref: 'form' }).trigger('submit');
expect(submit).toHaveBeenCalled();
});
it('should call register with form data', () => {
const wrapper = makeWrapper();
wrapper.find({ ref: 'form' }).trigger('submit');
expect(register.mock.calls[0][0]).toEqual({

it('should call register with form data', async () => {
const [wrapper, mocks] = await makeWrapper();
await wrapper.findComponent({ ref: 'form' }).trigger('submit');
expect(mocks.register.mock.calls[0][0]).toEqual({
...defaultData,
locations: defaultData.locations.join('|'),
uses: defaultData.uses.join('|'),
policies: '{}',
});
});

it('should automatically fill the email if provided in the query param', () => {
router.push({ name: 'Create', query: { email: 'newtest@test.com' } });
const wrapper = mount(Create, { router, stubs: ['PolicyModals'], mocks: connectionStateMocks });
expect(wrapper.vm.form.email).toBe('newtest@test.com');
});

describe('validation', () => {
it('should call register if form is valid', () => {
const wrapper = makeWrapper();
it('should call register if form is valid', async () => {
const [wrapper, mocks] = await makeWrapper();
wrapper.vm.submit();
expect(register).toHaveBeenCalled();
expect(mocks.register).toHaveBeenCalled();
});
it('should fail if required fields are not set', () => {

it('should fail if required fields are not set', async () => {
const form = {
first_name: '',
last_name: '',
Expand All @@ -120,55 +113,67 @@ describe('create', () => {
accepted_tos: false,
};

Object.keys(form).forEach(field => {
const wrapper = makeWrapper({ [field]: form[field] });
wrapper.vm.submit();
expect(register).not.toHaveBeenCalled();
});
});
it('should fail if password1 is too short', () => {
const wrapper = makeWrapper({ password1: '123' });
wrapper.vm.submit();
expect(register).not.toHaveBeenCalled();
});
it('should fail if password1 and password2 do not match', () => {
const wrapper = makeWrapper({ password1: 'some other password' });
wrapper.vm.submit();
expect(register).not.toHaveBeenCalled();
for (const field of Object.keys(form)) {
const [wrapper, mocks] = await makeWrapper({ [field]: form[field] });
await wrapper.vm.submit();
expect(mocks.register).not.toHaveBeenCalled();
}
});
it('should fail if uses field is set to fields that require more input that is not provided', () => {
[uses.STORING, uses.OTHER].forEach(use => {
const wrapper = makeWrapper({ uses: [use] });
wrapper.vm.submit();
expect(register).not.toHaveBeenCalled();
});

it('should fail if password1 is too short', async () => {
const [wrapper, mocks] = await makeWrapper({ password1: '123' });
await wrapper.vm.submit();
expect(mocks.register).not.toHaveBeenCalled();
});
it('should fail if source field is set to an option that requires more input that is not provided', () => {
[sources.ORGANIZATION, sources.CONFERENCE, sources.OTHER].forEach(source => {
const wrapper = makeWrapper({ source });
wrapper.vm.submit();
expect(register).not.toHaveBeenCalled();
});

it('should fail if password1 and password2 do not match', async () => {
const [wrapper, mocks] = await makeWrapper({ password1: 'some other password' });
await wrapper.vm.submit();
expect(mocks.register).not.toHaveBeenCalled();
});

it.each(
[uses.STORING, uses.OTHER],
'should fail if uses field is set to fields that require more input that is not provided',
async use => {
const [wrapper, mocks] = await makeWrapper({ uses: [use] });
await wrapper.vm.submit();
expect(mocks.register).not.toHaveBeenCalled();
},
);

it.each(
[sources.ORGANIZATION, sources.CONFERENCE, sources.OTHER],
'should fail if source field is set to an option that requires more input that is not provided',
async source => {
const [wrapper, mocks] = await makeWrapper({ source });
await wrapper.vm.submit();
expect(mocks.register).not.toHaveBeenCalled();
},
);
});

describe('on backend failures', () => {
let wrapper;
beforeEach(() => {
wrapper = makeWrapper();
let wrapper, mocks;

beforeEach(async () => {
[wrapper, mocks] = await makeWrapper();
});

it('should say account with email already exists if register returns a 403', async () => {
wrapper.setMethods({ register: makeFailedPromise(403) });
mocks.register.mockImplementation(makeFailedPromise(403));
await wrapper.vm.submit();
expect(wrapper.vm.errors.email).toHaveLength(1);
});

it('should say account has not been activated if register returns 405', async () => {
wrapper.setMethods({ register: makeFailedPromise(405) });
mocks.register.mockImplementation(makeFailedPromise(405));
await wrapper.vm.submit();
expect(wrapper.vm.$route.name).toBe('AccountNotActivated');
});

it('registrationFailed should be true if any other error is returned', async () => {
wrapper.setMethods({ register: makeFailedPromise() });
mocks.register.mockImplementation(makeFailedPromise());
await wrapper.vm.submit();
expect(wrapper.vm.valid).toBe(false);
expect(wrapper.vm.registrationFailed).toBe(true);
Expand Down
29 changes: 12 additions & 17 deletions contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,32 @@ import { mount } from '@vue/test-utils';
import VueRouter from 'vue-router';
import ForgotPassword from '../resetPassword/ForgotPassword';

const sendPasswordResetLink = jest.fn();

function makeWrapper() {
return mount({
...ForgotPassword,
return mount(ForgotPassword, {
// Need to add a router instance as a child component relies on route linking
router: new VueRouter(),
});
}

describe('forgotPassword', () => {
let wrapper;
let sendPasswordResetLink;

beforeEach(() => {
wrapper = makeWrapper();
wrapper.setMethods({
sendPasswordResetLink: () => {
return new Promise(resolve => {
sendPasswordResetLink();
resolve();
});
},
});
sendPasswordResetLink.mockReset();
sendPasswordResetLink = jest.spyOn(wrapper.vm, 'sendPasswordResetLink');
sendPasswordResetLink.mockImplementation(() => Promise.resolve());
});
it('should not call sendPasswordResetLink on submit if email is invalid', () => {
wrapper.find({ ref: 'form' }).trigger('submit');
it('should not call sendPasswordResetLink on submit if email is invalid', async () => {
wrapper.findComponent({ ref: 'form' }).trigger('submit');
await wrapper.vm.$nextTick();
expect(sendPasswordResetLink).not.toHaveBeenCalled();
});
it('should call sendPasswordResetLink on submit if email is valid', () => {
it('should call sendPasswordResetLink on submit if email is valid', async () => {
wrapper.setData({ email: 'test@test.com' });
wrapper.find({ ref: 'form' }).trigger('submit');
await wrapper.vm.$nextTick();
wrapper.findComponent({ ref: 'form' }).trigger('submit');
await wrapper.vm.$nextTick();
expect(sendPasswordResetLink).toHaveBeenCalled();
});
});
Loading