LPS-144301 document-library-web Upgrade to testing library 12

- cleanup is done automatically after each test
- only forms with an accessible name have the role "form"
   Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937
- waitForElement has been removed, now we can use find* variants, which return a promise, or waitFor

modules/apps/document-library/document-library-web/src/main/resources/META-INF/resources/document_library/js/checkin/CheckinModal.es.js

@@ -48,7 +48,10 @@ const CheckinModal = ({
 				{Liferay.Language.get('describe-your-changes')}
 			</ClayModal.Header>
 
-			<form onSubmit={handleSubmit}>
+			<form
+				aria-label={Liferay.Language.get('increment-version')}
+				onSubmit={handleSubmit}
+			>
 				<ClayModal.Body>
 					<fieldset className="fieldset">
 						<div className="h5">

modules/apps/document-library/document-library-web/test/document_library/js/checkin/Checkin.es.js

@@ -13,12 +13,7 @@
  */
 
 import '@testing-library/jest-dom/extend-expect';
-import {
-	cleanup,
-	fireEvent,
-	render,
-	waitForElement,
-} from '@testing-library/react';
+import {fireEvent, render} from '@testing-library/react';
 import React from 'react';
 import {act} from 'react-dom/test-utils';
 
@@ -50,7 +45,6 @@ describe('Checkin', () => {
 		components[id] = component;
 	};
 	Liferay.componentReady = (id) => Promise.resolve(components[id]);
-	afterEach(cleanup);
 
 	describe('when the file is checked out', () => {
 		describe('and the component is rendered', () => {
@@ -74,17 +68,15 @@ describe('Checkin', () => {
 				});
 
 				it('renders the form', async () => {
-					const form = await waitForElement(() =>
-						result.getByRole('form')
-					);
+					const form = await result.findByRole('form');
+
 					expect(form).toBeTruthy();
 				});
 
 				describe('and the form is submitted', () => {
 					beforeEach(async () => {
-						const form = await waitForElement(() =>
-							result.getByRole('form')
-						);
+						const form = await result.findByRole('form');
+
 						act(() => {
 							fireEvent.submit(form);
 						});
@@ -100,14 +92,14 @@ describe('Checkin', () => {
 
 				describe('and the save button is cliked with changes in version and changeLog', () => {
 					beforeEach(async () => {
-						const saveButton = await waitForElement(() =>
-							result.getByText('save')
-						);
-						const changeLogField = await waitForElement(() =>
-							result.getByLabelText('version-notes')
+						const saveButton = await result.findByText('save');
+
+						const changeLogField = await result.findByLabelText(
+							'version-notes'
 						);
-						const minorVersionRadio = await waitForElement(() =>
-							result.getByLabelText('minor-version')
+
+						const minorVersionRadio = await result.findByLabelText(
+							'minor-version'
 						);
 
 						act(() => {
@@ -153,17 +145,14 @@ describe('Checkin', () => {
 				});
 
 				it('renders the form', async () => {
-					const form = await waitForElement(() =>
-						result.getByRole('form')
-					);
+					const form = await result.findByRole('form');
 					expect(form).toBeTruthy();
 				});
 
 				describe('and the form is submitted', () => {
 					beforeEach(async () => {
-						const form = await waitForElement(() =>
-							result.getByRole('form')
-						);
+						const form = await result.findByRole('form');
+
 						act(() => {
 							fireEvent.submit(form);
 						});