refactor: move login unit tests to RTL

fix: migrate login tests to RTL Description: Migrate login unit tests to RTL VAN-1770
openedx · Jan 5, 2024 · 5105ca3 · 5105ca3
1 parent db3655c
commit 5105ca3
Show file tree

Hide file tree

Showing 4 changed files with 375 additions and 179 deletions.
diff --git a/src/login/tests/AccountActivationMessage.test.jsx b/src/login/tests/AccountActivationMessage.test.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 
 import { mergeConfig } from '@edx/frontend-platform';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
-import { mount } from 'enzyme';
+import {
+  render, screen,
+} from '@testing-library/react';
 
 import AccountActivationMessage from '../AccountActivationMessage';
 import { ACCOUNT_ACTIVATION_MESSAGE } from '../data/constants';
@@ -17,18 +19,22 @@ describe('AccountActivationMessage', () => {
   });
 
   it('should match account already activated message', () => {
-    const accountActivationMessage = mount(
+    render(
       <IntlProvider locale="en">
         <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
       </IntlProvider>,
     );
 
     const expectedMessage = 'This account has already been activated.';
-    expect(accountActivationMessage.find('#account-activation-message').find('div').first().text()).toEqual(expectedMessage);
+
+    expect(screen.getByText(
+      '',
+      { selector: '#account-activation-message' },
+    ).textContent).toBe(expectedMessage);
   });
 
   it('should match account activated success message', () => {
-    const accountActivationMessage = mount(
+    render(
       <IntlProvider locale="en">
         <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
       </IntlProvider>,
@@ -37,29 +43,38 @@ describe('AccountActivationMessage', () => {
     const expectedMessage = 'Success! You have activated your account.'
                             + 'You will now receive email updates and alerts from us related to '
                             + 'the courses you are enrolled in. Sign in to continue.';
-    expect(accountActivationMessage.find('#account-activation-message').first().text()).toEqual(expectedMessage);
+
+    expect(screen.getByText(
+      '',
+      { selector: '#account-activation-message' },
+    ).textContent).toBe(expectedMessage);
   });
 
   it('should match account activation error message', () => {
-    const accountActivationMessage = mount(
+    render(
       <IntlProvider locale="en">
         <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
       </IntlProvider>,
     );
 
     const expectedMessage = 'Your account could not be activated'
                             + 'Something went wrong, please contact support to resolve this issue.';
-    expect(accountActivationMessage.find('#account-activation-message').first().text()).toEqual(expectedMessage);
+
+    expect(screen.getByText(
+      '',
+      { selector: '#account-activation-message' },
+    ).textContent).toBe(expectedMessage);
   });
 
   it('should not display anything for invalid message type', () => {
-    const accountActivationMessage = mount(
+    const { container } = render(
       <IntlProvider locale="en">
         <IntlAccountActivationMessage messageType="invalid-message" />
       </IntlProvider>,
     );
 
-    expect(accountActivationMessage).toEqual({});
+    const accountActivationMessage = container.querySelectorAll('#account-activation-message');
+    expect(accountActivationMessage[0]).toBe(undefined);
   });
 });
 
@@ -71,36 +86,45 @@ describe('EmailConfirmationMessage', () => {
   });
 
   it('should match email already confirmed message', () => {
-    const accountVerificationMessage = mount(
+    render(
       <IntlProvider locale="en">
         <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
       </IntlProvider>,
     );
 
     const expectedMessage = 'This email has already been confirmed.';
-    expect(accountVerificationMessage.find('#account-activation-message').find('div').first().text()).toEqual(expectedMessage);
+
+    expect(screen.getByText(
+      '',
+      { selector: '#account-activation-message' },
+    ).textContent).toBe(expectedMessage);
   });
 
   it('should match email confirmation success message', () => {
-    const accountVerificationMessage = mount(
+    render(
       <IntlProvider locale="en">
         <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
       </IntlProvider>,
     );
-
     const expectedMessage = 'Success! You have confirmed your email.Sign in to continue.';
-    expect(accountVerificationMessage.find('#account-activation-message').first().text()).toEqual(expectedMessage);
+
+    expect(screen.getByText(
+      '',
+      { selector: '#account-activation-message' },
+    ).textContent).toBe(expectedMessage);
   });
 
   it('should match email confirmation error message', () => {
-    const accountVerificationMessage = mount(
+    render(
       <IntlProvider locale="en">
         <IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
       </IntlProvider>,
     );
-
     const expectedMessage = 'Your email could not be confirmed'
                             + 'Something went wrong, please contact support to resolve this issue.';
-    expect(accountVerificationMessage.find('#account-activation-message').first().text()).toEqual(expectedMessage);
+    expect(screen.getByText(
+      '',
+      { selector: '#account-activation-message' },
+    ).textContent).toBe(expectedMessage);
   });
 });
diff --git a/src/login/tests/ChangePasswordPrompt.test.jsx b/src/login/tests/ChangePasswordPrompt.test.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
-import { mount } from 'enzyme';
+import {
+  fireEvent, render, screen,
+} from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
 
@@ -39,15 +41,15 @@ describe('ChangePasswordPromptTests', () => {
     delete window.location;
     window.location = { href: getConfig().BASE_URL };
 
-    const changePasswordPrompt = mount(
+    render(
       <IntlProvider locale="en">
         <MemoryRouter>
           <IntlChangePasswordPrompt {...props} />
         </MemoryRouter>
       </IntlProvider>,
     );
 
-    changePasswordPrompt.find('button#password-security-close').simulate('click');
+    fireEvent.click(screen.getByText('Close'));
     expect(window.location.href).toBe(dashboardUrl);
   });
 
@@ -56,7 +58,7 @@ describe('ChangePasswordPromptTests', () => {
       variant: 'block',
     };
 
-    const changePasswordPrompt = mount(
+    render(
       <IntlProvider locale="en">
         <MemoryRouter>
           <IntlChangePasswordPrompt {...props} />
@@ -65,10 +67,12 @@ describe('ChangePasswordPromptTests', () => {
     );
 
     await act(async () => {
-      await changePasswordPrompt.find('div.pgn__modal-backdrop').first().simulate('click');
+      await fireEvent.click(screen.getByText(
+        '',
+        { selector: '.pgn__modal-backdrop' },
+      ));
     });
 
-    changePasswordPrompt.update();
     expect(mockedNavigator).toHaveBeenCalledWith(RESET_PAGE);
   });
 });