Merge pull request #146 from boscop-fr/fix-ci-e2e-tests

Fixed e2e tests

Author: felixgirault

.github/workflows/test-e2e.yml

@@ -8,7 +8,6 @@ on:
 
 jobs:
   test:
-    timeout-minutes: 5
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

e2e/OrejimePage.ts

@@ -37,67 +37,67 @@ export class OrejimePage {
 	}
 
 	get banner() {
-		return this.locator('.orejime-Banner');
+		return this.page.getByTestId('orejime-banner');
 	}
 
 	get learnMoreBannerButton() {
-		return this.locator('.orejime-Banner-learnMoreButton');
+		return this.page.getByTestId('orejime-banner-configure');
 	}
 
 	get firstFocusableElementFromBanner() {
-		return this.locator('.orejime-Banner :is(a, button)').first();
+		return this.banner.locator(':is(a, button)').first();
 	}
 
 	get modal() {
-		return this.locator('.orejime-Modal');
+		return this.page.getByTestId('orejime-modal');
 	}
 
 	get closeModalButton() {
-		return this.locator('.orejime-Modal-closeButton');
+		return this.page.getByTestId('orejime-modal-close');
 	}
 
 	get contextualNotice() {
-		return this.locator('.orejime-ContextualNotice');
+		return this.page.getByTestId('orejime-contextual-notice');
 	}
 
 	get contextualNoticePlaceholder() {
-		return this.locator('.orejime-ContextualNotice-placeholder');
+		return this.page.getByTestId('orejime-contextual-notice-placeholder');
 	}
 
 	locator(selector: string) {
 		return this.page.locator(selector);
 	}
 
 	purposeCheckbox(purposeId: string) {
-		return this.locator(`#orejime-purpose-${purposeId}`);
+		return this.page.getByTestId(`orejime-purpose-${purposeId}`);
 	}
 
 	async acceptAllFromBanner() {
-		await this.locator('.orejime-Banner-saveButton').click();
+		await this.page.getByTestId('orejime-banner-accept').click();
 	}
 
 	async declineAllFromBanner() {
-		await this.locator('.orejime-Banner-declineButton').click();
+		await this.page.getByTestId('orejime-banner-decline').click();
 	}
 
 	async openModalFromBanner() {
 		await this.learnMoreBannerButton.click();
 	}
 
 	async enableAllFromModal() {
-		await this.locator('.orejime-PurposeToggles-enableAll').click();
+		await this.page.getByTestId('orejime-modal-enable-all').click();
 	}
 
 	async disableAllFromModal() {
-		await this.locator('.orejime-PurposeToggles-disableAll').click();
+		await this.page.getByTestId('orejime-modal-disable-all').click();
 	}
 
 	async saveFromModal() {
-		await this.locator('.orejime-Modal-saveButton').click();
+		await this.page.getByTestId('orejime-modal-save').click();
 	}
 
 	async closeModalByClickingButton() {
-		await this.locator('.orejime-Modal-closeButton').click();
+		await this.closeModalButton.click();
 	}
 
 	async closeDialogByClickingOutside() {
@@ -116,7 +116,7 @@ export class OrejimePage {
 	}
 
 	async acceptContextualNotice() {
-		await this.locator('.orejime-ContextualNotice-button').click();
+		await this.page.getByTestId('orejime-contextual-notice-accept').click();
 	}
 
 	async expectConsents(consents: Record<string, unknown>) {

playwright.config.ts

@@ -4,7 +4,10 @@ export default defineConfig({
 	testDir: './e2e',
 	fullyParallel: true,
 	forbidOnly: !!process.env.CI,
-	retries: process.env.CI ? 2 : 0,
+	timeout: 5_000,
+	expect: {
+		timeout: 1_000
+	},
 	workers: process.env.CI ? 1 : undefined,
 	reporter: 'list',
 	use: {

rspack.config.js

@@ -21,6 +21,9 @@ module.exports = {
 		compress: true,
 		static: {
 			directory: fullPath('dist')
+		},
+		client: {
+			overlay: false
 		}
 	},
 	entry: {

src/ui/components/ContextualNoticeContainer.tsx

@@ -66,6 +66,7 @@ const ContextualNoticeContainer = ({
 					onFocusOut={() => {
 						setIsBeingDisabled(false);
 					}}
+					data-testid="orejime-contextual-notice-placeholder"
 				/>
 			) : null}
 		</div>

src/ui/components/PurposeContainer.tsx

@@ -2,8 +2,10 @@ import {useConsent, useTheme} from '../utils/hooks';
 import {ConsentState} from './types/ConsentState';
 import {PurposeProps} from './types/Purpose';
 
-export interface PurposeContainerProps
-	extends Omit<PurposeProps, 'consent' | 'onChange'> {}
+export interface PurposeContainerProps extends Omit<
+	PurposeProps,
+	'consent' | 'onChange'
+> {}
 
 const PurposeContainer = (props: PurposeContainerProps) => {
 	const [consent, setConsent] = useConsent(props.id);

src/ui/themes/standard/Banner.tsx

@@ -20,7 +20,12 @@ const Banner: BannerComponent = ({
 	useNonObscuringElement(ref);
 
 	return (
-		<div aria-hidden={isHidden} className="orejime-Banner" ref={ref}>
+		<div
+			aria-hidden={isHidden}
+			className="orejime-Banner"
+			ref={ref}
+			data-testid="orejime-banner"
+		>
 			<div className="orejime-Banner-body">
 				{logo && (
 					<div className="orejime-Banner-logoContainer">
@@ -75,6 +80,7 @@ const Banner: BannerComponent = ({
 							type="button"
 							title={t.banner.acceptTitle}
 							onClick={onSaveRequest}
+							data-testid="orejime-banner-accept"
 						>
 							{t.banner.accept}
 						</button>
@@ -85,6 +91,7 @@ const Banner: BannerComponent = ({
 							type="button"
 							title={t.banner.declineTitle}
 							onClick={onDeclineRequest}
+							data-testid="orejime-banner-decline"
 						>
 							{t.banner.decline}
 						</button>
@@ -95,6 +102,7 @@ const Banner: BannerComponent = ({
 							className="orejime-Button orejime-Button--info orejime-Banner-learnMoreButton"
 							title={t.banner.configureTitle}
 							onClick={onConfigRequest}
+							data-testid="orejime-banner-configure"
 						>
 							{t.banner.configure}
 						</button>

src/ui/themes/standard/ContextualNotice.tsx

@@ -25,7 +25,10 @@ const ContextualNotice: ContextualNoticeComponent = ({
 	};
 
 	return (
-		<div className="orejime-ContextualNotice">
+		<div
+			className="orejime-ContextualNotice"
+			data-testid="orejime-contextual-notice"
+		>
 			<TitleTag className="orejime-ContextualNotice-title">
 				{template(t.contextual.title, templateProps)}
 			</TitleTag>
@@ -42,6 +45,7 @@ const ContextualNotice: ContextualNoticeComponent = ({
 						: null
 				}
 				onClick={onAccept}
+				data-testid="orejime-contextual-notice-accept"
 			>
 				{template(t.contextual.accept, templateProps)}
 			</button>

src/ui/themes/standard/GlobalConsent.tsx

@@ -16,6 +16,7 @@ const GlobalConsent: GlobalConsentComponent = ({
 				className="orejime-Button orejime-Button--info orejime-PurposeToggles-button orejime-PurposeToggles-enableAll"
 				aria-disabled={isEnabled}
 				onClick={acceptAll}
+				data-testid="orejime-modal-enable-all"
 			>
 				{t.modal.acceptAll}
 			</button>
@@ -25,6 +26,7 @@ const GlobalConsent: GlobalConsentComponent = ({
 				className="orejime-Button orejime-Button--info orejime-PurposeToggles-button orejime-PurposeToggles-disableAll"
 				aria-disabled={isDisabled}
 				onClick={declineAll}
+				data-testid="orejime-modal-disable-all"
 			>
 				{t.modal.declineAll}
 			</button>

src/ui/themes/standard/Modal.tsx

@@ -23,14 +23,15 @@ const Modal: ModalComponent = ({
 			className="orejime-ModalWrapper"
 			onRequestClose={onClose}
 		>
-			<div className="orejime-Modal">
+			<div className="orejime-Modal" data-testid="orejime-modal">
 				<div className="orejime-Modal-header">
 					{isForced ? null : (
 						<button
 							title={t.modal.closeTitle}
 							className="orejime-Modal-closeButton"
 							type="button"
 							onClick={onClose}
+							data-testid="orejime-modal-close"
 						>
 							<Close title={t.modal.close} />
 						</button>
@@ -89,6 +90,7 @@ const Modal: ModalComponent = ({
 						<button
 							className="orejime-Button orejime-Button--save orejime-Modal-saveButton"
 							title={t.modal.saveTitle}
+							data-testid="orejime-modal-save"
 						>
 							{t.modal.save}
 						</button>