|
1 | | -import { mount } from '@vue/test-utils'; |
| 1 | +import { render, screen, fireEvent, waitFor } from '@testing-library/vue'; |
2 | 2 | import VueRouter from 'vue-router'; |
3 | 3 | import ForgotPassword from '../resetPassword/ForgotPassword'; |
4 | 4 |
|
5 | | -function makeWrapper() { |
6 | | - return mount(ForgotPassword, { |
7 | | - // Need to add a router instance as a child component relies on route linking |
8 | | - router: new VueRouter(), |
| 5 | +const sendPasswordResetLinkMock = jest.fn(() => Promise.resolve()); |
| 6 | + |
| 7 | +const renderComponent = () => { |
| 8 | + const router = new VueRouter({ |
| 9 | + routes: [ |
| 10 | + { path: '/', name: 'Main' }, |
| 11 | + { path: '/forgot-password', name: 'ForgotPassword' }, |
| 12 | + { path: '/password-instructions-sent', name: 'PasswordInstructionsSent' }, |
| 13 | + ], |
| 14 | + }); |
| 15 | + |
| 16 | + const utils = render(ForgotPassword, { |
| 17 | + router, |
| 18 | + store: { |
| 19 | + modules: { |
| 20 | + account: { |
| 21 | + namespaced: true, |
| 22 | + actions: { |
| 23 | + sendPasswordResetLink: sendPasswordResetLinkMock, |
| 24 | + }, |
| 25 | + }, |
| 26 | + }, |
| 27 | + }, |
9 | 28 | }); |
10 | | -} |
11 | 29 |
|
12 | | -describe('forgotPassword', () => { |
13 | | - let wrapper; |
14 | | - let sendPasswordResetLink; |
| 30 | + return { ...utils, router }; |
| 31 | +}; |
15 | 32 |
|
| 33 | +describe('ForgotPassword', () => { |
16 | 34 | beforeEach(() => { |
17 | | - wrapper = makeWrapper(); |
18 | | - sendPasswordResetLink = jest.spyOn(wrapper.vm, 'sendPasswordResetLink'); |
19 | | - sendPasswordResetLink.mockImplementation(() => Promise.resolve()); |
20 | | - }); |
21 | | - it('should not call sendPasswordResetLink on submit if email is invalid', async () => { |
22 | | - wrapper.findComponent({ ref: 'form' }).trigger('submit'); |
23 | | - await wrapper.vm.$nextTick(); |
24 | | - expect(sendPasswordResetLink).not.toHaveBeenCalled(); |
25 | | - }); |
26 | | - it('should call sendPasswordResetLink on submit if email is valid', async () => { |
27 | | - wrapper.setData({ email: 'test@test.com' }); |
28 | | - await wrapper.vm.$nextTick(); |
29 | | - wrapper.findComponent({ ref: 'form' }).trigger('submit'); |
30 | | - await wrapper.vm.$nextTick(); |
31 | | - expect(sendPasswordResetLink).toHaveBeenCalled(); |
| 35 | + jest.clearAllMocks(); |
| 36 | + }); |
| 37 | + |
| 38 | + it('should render the forgot password form', () => { |
| 39 | + renderComponent(); |
| 40 | + expect(screen.getByText('Reset your password')).toBeInTheDocument(); |
| 41 | + expect(screen.getByLabelText('Email')).toBeInTheDocument(); |
| 42 | + expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument(); |
| 43 | + }); |
| 44 | + |
| 45 | + it('should not submit form with empty email', async () => { |
| 46 | + renderComponent(); |
| 47 | + await fireEvent.click(screen.getByRole('button', { name: 'Submit' })); |
| 48 | + expect(sendPasswordResetLinkMock).not.toHaveBeenCalled(); |
| 49 | + }); |
| 50 | + |
| 51 | + it('should not submit form with invalid email', async () => { |
| 52 | + renderComponent(); |
| 53 | + await fireEvent.update(screen.getByLabelText(/email/i), 'invalid-email'); |
| 54 | + await fireEvent.click(screen.getByRole('button', { name: 'Submit' })); |
| 55 | + expect(sendPasswordResetLinkMock).not.toHaveBeenCalled(); |
| 56 | + }); |
| 57 | + |
| 58 | + it('should submit form with valid email and navigate to success page', async () => { |
| 59 | + sendPasswordResetLinkMock.mockResolvedValue({}); |
| 60 | + const { router } = renderComponent(); |
| 61 | + await fireEvent.update(screen.getByLabelText(/email/i), 'test@test.com'); |
| 62 | + await fireEvent.click(screen.getByRole('button', { name: 'Submit' })); |
| 63 | + await waitFor(() => { |
| 64 | + expect(sendPasswordResetLinkMock).toHaveBeenCalledTimes(1); |
| 65 | + expect(sendPasswordResetLinkMock).toHaveBeenCalledWith(expect.anything(), 'test@test.com'); |
| 66 | + }); |
| 67 | + await waitFor(() => { |
| 68 | + expect(router.currentRoute.name).toBe('PasswordInstructionsSent'); |
| 69 | + }); |
| 70 | + }); |
| 71 | + |
| 72 | + it('should show error banner when submission fails', async () => { |
| 73 | + sendPasswordResetLinkMock.mockRejectedValue(new Error('Failed')); |
| 74 | + renderComponent(); |
| 75 | + await fireEvent.update(screen.getByLabelText(/email/i), 'test@test.com'); |
| 76 | + await fireEvent.click(screen.getByRole('button', { name: 'Submit' })); |
| 77 | + expect(await screen.findByTestId('error-banner')).toBeInTheDocument(); |
32 | 78 | }); |
33 | 79 | }); |
0 commit comments