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

Author: bjester

contentcuration/contentcuration/frontend/accounts/pages/__tests__/accountsMain.spec.js

@@ -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'],
@@ -18,19 +16,14 @@ function makeWrapper() {
       },
     },
   });
-  wrapper.setMethods({
-    login: data => {
-      return new Promise(resolve => {
-        login(data);
-        resolve();
-      });
-    },
-  });
-  wrapper.setData({
+  await wrapper.setData({
     username: '[email protected]',
     password: 'pass',
   });
-  return wrapper;
+
+  const login = jest.spyOn(wrapper.vm, 'login');
+  login.mockImplementation(() => Promise.resolve());
+  return [wrapper, login];
 }
 
 function makeFailedPromise(statusCode) {
@@ -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}`);
@@ -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);

contentcuration/contentcuration/frontend/accounts/pages/__tests__/create.spec.js

@@ -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: {
@@ -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 () => {
@@ -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: '[email protected]' } });
     const wrapper = mount(Create, { router, stubs: ['PolicyModals'], mocks: connectionStateMocks });
     expect(wrapper.vm.form.email).toBe('[email protected]');
   });
+
   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: '',
@@ -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);

contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js

@@ -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: '[email protected]' });
-    wrapper.find({ ref: 'form' }).trigger('submit');
+    await wrapper.vm.$nextTick();
+    wrapper.findComponent({ ref: 'form' }).trigger('submit');
+    await wrapper.vm.$nextTick();
     expect(sendPasswordResetLink).toHaveBeenCalled();
   });
 });