test: improve tests

src/components/EditSections/EditContactInfo/EditContactInfo.test.js

@@ -1,12 +1,13 @@
-import { screen } from '@folio/jest-config-stripes/testing-library/react';
-import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 import { Form } from 'react-final-form';
 
-import '__mock__/stripesComponents.mock';
+import { screen } from '@folio/jest-config-stripes/testing-library/react';
+import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 
 import renderWithRouter from 'helpers/renderWithRouter';
 import EditContactInfo from './EditContactInfo';
 
+jest.unmock('@folio/stripes/components');
+
 const onSubmit = jest.fn();
 
 const arrayMutators = {
@@ -28,7 +29,8 @@ const renderEditContactInfo = (props) => {
       <EditContactInfo {...props} />
     </>
   );
-  renderWithRouter(
+
+  return renderWithRouter(
     <Form
       id="form-user"
       mutators={{
@@ -71,15 +73,21 @@ describe('Render Edit contact Information component', () => {
     renderEditContactInfo(props);
     expect(screen.getByText('AddressEditList')).toBeInTheDocument();
   });
+
   it('Must be rendered', async () => {
     renderEditContactInfo(props);
-    await userEvent.type(document.querySelector('[id="adduser_email"]'), '[email protected]');
-    expect(document.querySelector('[id="adduser_email"]').value).toBe('[email protected]');
+
+    const emailInput = screen.getByRole('textbox', { name: /email/i });
+
+    await userEvent.type(emailInput, '[email protected]');
+    expect(emailInput.value).toBe('[email protected]');
   });
+
   it('should render with disabled fields', () => {
     renderEditContactInfo({ ...props, disabled: true });
-    expect(document.querySelector('[id="adduser_email"]')).toBeDisabled();
-    expect(document.querySelector('[id="adduser_phone"]')).toBeDisabled();
-    expect(document.querySelector('[id="adduser_mobilePhone"]')).toBeDisabled();
+
+    expect(screen.getByRole('textbox', { name: /email/i })).toBeDisabled();
+    expect(screen.getByRole('textbox', { name: /mobilePhone/i })).toBeDisabled();
+    expect(screen.getByLabelText('ui-users.contact.phone')).toBeDisabled();
   });
 });

src/components/EditSections/EditExtendedInfo/DepartmentsNameEdit/DepartmentsNameEdit.test.js

@@ -8,7 +8,6 @@ import {
 import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 import renderWithRouter from 'helpers/renderWithRouter';
 import DepartmentsNameEdit from './DepartmentsNameEdit';
-// import '__mock__/stripesSmartComponent.mock';
 
 jest.unmock('@folio/stripes/components');
 jest.unmock('@folio/stripes/smart-components');
@@ -66,7 +65,7 @@ describe('Given DepartmentsNameEdit', () => {
 });
 
 describe('Given DepartmentsNameEdit with disabled: true', () => {
-  it('should not render add button', async () => {
+  it('should add button to be disabled', async () => {
     renderDepartmentsNameEdit({ ...props, disabled: true });
     expect(screen.getByRole('button')).toBeDisabled();
   });

src/components/EditSections/EditUserInfo/EditUserInfo.test.js

@@ -178,7 +178,8 @@ describe('Render Edit User Information component', () => {
 
   it('should have disabled fields with disabled prop is true', () => {
     renderEditUserInfo({ ...props, disabled: true });
-    expect(document.querySelector('[id="adduser_lastname"]')).toBeDisabled();
-    expect(document.querySelector('[id="adduser_firstname"]')).toBeDisabled();
+
+    expect(screen.getByRole('textbox', { name: /lastName/ })).toBeDisabled();
+    expect(screen.getByRole('textbox', { name: /firstName/ })).toBeDisabled();
   });
 });