LPS-144301 flags-taglib 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/flags/flags-taglib/src/main/resources/META-INF/resources/flags/js/components/FlagsModal.es.js

@@ -44,7 +44,10 @@ const ModalContentForm = ({
 	const {namespace} = useContext(ThemeContext);
 
 	return (
-		<form onSubmit={handleSubmit}>
+		<form
+			aria-label={Liferay.Language.get('report-inappropriate-content')}
+			onSubmit={handleSubmit}
+		>
 			<ClayModal.Body>
 				{error && (
 					<ClayAlert

modules/apps/flags/flags-taglib/test/js/components/Flags.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';
 
@@ -63,8 +58,6 @@ function _renderFlagsComponent({
 }
 
 describe('Flags', () => {
-	afterEach(cleanup);
-
 	it('renders', () => {
 		const {getByRole, getByText} = _renderFlagsComponent();
 
@@ -85,7 +78,7 @@ describe('Flags', () => {
 	});
 
 	it('submits a report successfully with baseData', async () => {
-		const {getByRole} = _renderFlagsComponent({
+		const {findByRole, getByRole} = _renderFlagsComponent({
 			baseData: {
 				testingField: 'testingValue',
 			},
@@ -95,7 +88,7 @@ describe('Flags', () => {
 		await act(async () => {
 			fireEvent.click(getByRole('button'));
 
-			const form = await waitForElement(() => getByRole('form'));
+			const form = await findByRole('form');
 
 			[...form.elements].forEach((element) => {
 				element.value = 'someValue';

modules/apps/flags/flags-taglib/test/js/components/FlagsModal.es.js

@@ -12,7 +12,7 @@
  * details.
  */
 
-import {cleanup, render, waitForElement} from '@testing-library/react';
+import {render} from '@testing-library/react';
 import React from 'react';
 
 import FlagsModal from '../../../src/main/resources/META-INF/resources/flags/js/components/FlagsModal.es';
@@ -63,42 +63,38 @@ function _renderFlagsModalComponent({
 }
 
 describe('FlagsModal', () => {
-	afterEach(cleanup);
-
 	it('renders', async () => {
-		const {getByRole, getByText} = _renderFlagsModalComponent();
+		const {findByRole, findByText} = _renderFlagsModalComponent();
 
-		await waitForElement(() => getByText('report-inappropriate-content'));
-		await waitForElement(() => getByRole('form'));
+		await findByText('report-inappropriate-content');
+		await findByRole('form');
 	});
 
 	it('renders as guess and render email field', async () => {
-		const {getByLabelText} = _renderFlagsModalComponent({
+		const {findByLabelText} = _renderFlagsModalComponent({
 			signedIn: false,
 		});
 
-		await waitForElement(() => getByLabelText('email', {exact: false}));
+		await findByLabelText('email', {exact: false});
 	});
 
 	it('renders error', async () => {
-		const {getByText} = _renderFlagsModalComponent({status: STATUS_ERROR});
+		const {findByText} = _renderFlagsModalComponent({status: STATUS_ERROR});
 
-		await waitForElement(() =>
-			getByText('an-error-occurred', {exact: false})
-		);
+		await findByText('an-error-occurred', {exact: false});
 	});
 
 	it('renders login', async () => {
-		const {getByText} = _renderFlagsModalComponent({status: STATUS_LOGIN});
+		const {findByText} = _renderFlagsModalComponent({status: STATUS_LOGIN});
 
-		await waitForElement(() => getByText('please-sign-in', {exact: false}));
+		await findByText('please-sign-in', {exact: false});
 	});
 
 	it('renders success', async () => {
-		const {getByText} = _renderFlagsModalComponent({
+		const {findByText} = _renderFlagsModalComponent({
 			status: STATUS_SUCCESS,
 		});
 
-		await waitForElement(() => getByText('thank-you', {exact: false}));
+		await findByText('thank-you', {exact: false});
 	});
 });