fix: fix language impact on e2e tests (#1455)

package.json

@@ -15,7 +15,7 @@
   "scripts": {
     "dev": "electron-webpack dev",
     "test": "jest",
-    "test:e2e": "playwright test --workers=1",
+    "test:e2e": "playwright test",
     "compile": "cross-env 'NODE_OPTIONS=\"--max-old-space-size=4096\"' electron-webpack",
     "dist:win": "electron-builder --x64 --ia32 --win portable msi nsis",
     "dist:mac": "electron-builder --mac dmg zip",

src/renderer/components/modals/modal-header.tsx

@@ -8,11 +8,16 @@ import { FaTimes } from "react-icons/fa";
 import { useStyles } from "../../hooks/use-styles";
 
 export interface ModalHeaderProps {
+  closeButtonAriaLabel?: string;
   onClose?: VoidFunction;
   title: string;
 }
 
-export const ModalHeader: React.FC<ModalHeaderProps> = ({ title, onClose }) => {
+export const ModalHeader: React.FC<ModalHeaderProps> = ({
+  title,
+  onClose,
+  closeButtonAriaLabel,
+}) => {
   const classes = useStyles();
   return (
     <MuiDialogTitle disableTypography>
@@ -22,6 +27,7 @@ export const ModalHeader: React.FC<ModalHeaderProps> = ({ title, onClose }) => {
           size="small"
           className={classes.closeButton}
           onClick={onClose}
+          aria-label={closeButtonAriaLabel}
         >
           <FaTimes />
         </IconButton>

src/renderer/components/modals/settings-modal/settings-modal.tsx

@@ -32,7 +32,11 @@ export const SettingsModal: React.FC<SettingModalProps> = ({
 
   return (
     <Dialog open={isModalOpen} onClose={closeModal} maxWidth="sm" fullWidth>
-      <ModalHeader title={t("settingsModal.title")} onClose={closeModal} />
+      <ModalHeader
+        title={t("settingsModal.title")}
+        onClose={closeModal}
+        closeButtonAriaLabel={t("settingsModal.close")}
+      />
       <DialogContent dividers>
         <Box display="flex">
           <Box>

src/renderer/exporters/audit/audit-report-exporter.ts

@@ -25,11 +25,7 @@ import {
 } from "../../utils/file-system/file-sys-util";
 import { openExternalElement } from "../../utils/file-system/file-system-util";
 import { FileType } from "../../utils/file-types";
-import {
-  NotificationDuration,
-  notifyInfo,
-  notifySuccess,
-} from "../../utils/notifications";
+import { notifyInfo, notifySuccess } from "../../utils/notifications";
 import type { AuditReportData } from "./audit-report-generator";
 import { generateAuditReportDocx } from "./audit-report-generator";
 import {
@@ -182,7 +178,8 @@ export const auditReportExporterThunk =
     notifySuccess(
       translations.t("export.auditReportSuccess"),
       translations.t("export.auditReportTitle"),
-      NotificationDuration.NORMAL,
-      async () => openExternalElement(name)
+      void 0,
+      async () => openExternalElement(name),
+      ["audit-report-export-success"]
     );
   };

src/renderer/exporters/csv/csv-exporter.ts

@@ -41,14 +41,15 @@ export const csvExporterThunk =
     const exportSuccessMessage = translations.t(
       "export.csvExportSuccessMessage"
     );
-    console.log(data);
+
     const csvExportData$ = generateCsvExport$(data);
 
     return dispatch(
       handleFileExportThunk(csvExportData$, {
         exportFileName: name,
         exportNotificationTitle,
         exportSuccessMessage,
+        exportType: "csv",
         loadedMessage,
         loaderMessage,
         totalProgress,

src/renderer/exporters/csv/tree-csv-exporter.ts

@@ -34,6 +34,7 @@ export const treeCsvExporterThunk =
         exportFileName: name,
         exportNotificationTitle,
         exportSuccessMessage,
+        exportType: "tree-csv",
         loadedMessage,
         loaderMessage,
         totalProgress,

src/renderer/exporters/deletion-script/deletion-script-exporter.ts

@@ -47,7 +47,8 @@ const success = (t: TFunction, filePath: string) => () => {
     t("export.deletionScriptSuccessMessage"),
     t("export.deletionScript"),
     NotificationDuration.NORMAL,
-    async () => showInFolder(filePath)
+    async () => showInFolder(filePath),
+    ["deletion-script-export-success"]
   );
 };
 

src/renderer/exporters/excel/excel-exporter.ts

@@ -65,6 +65,7 @@ export const excelExporterThunk =
       translations.t("export.excelExportSuccessMessage"),
       translations.t("export.excelExportTitle"),
       NotificationDuration.NORMAL,
-      async () => openExternalElement(name)
+      async () => openExternalElement(name),
+      ["excel-export-success"]
     );
   };

src/renderer/exporters/resip/resip-exporter-thunk.ts

@@ -80,6 +80,8 @@ export const resipExporterThunk =
 
     await fs.writeFile(filePath, arrayToCsv(resipCsv));
 
-    notifySuccess(resipExportSuccessMessage, resipExportTitle);
+    notifySuccess(resipExportSuccessMessage, resipExportTitle, void 0, void 0, [
+      "resip-export-success",
+    ]);
     dispatch(completeLoadingAction(loadingActionId));
   };

src/renderer/translations/en.json

@@ -260,6 +260,7 @@
     },
     "settingsModal": {
       "title": "Settings",
+      "close": "Close settings",
       "language": "Language",
       "privacy": "Privacy",
       "trackingData": "Usage data and statistics",

src/renderer/translations/fr.json

@@ -260,6 +260,7 @@
     },
     "settingsModal": {
       "title": "Paramètres",
+      "close": "Fermer les paramètres",
       "language": "Langue",
       "privacy": "Confidentialité",
       "trackingData": "Données et statistiques d'utilisation",

src/renderer/utils/export.ts

@@ -18,6 +18,7 @@ interface ExportOptions {
   exportFileName: string;
   exportNotificationTitle: string;
   exportSuccessMessage: string;
+  exportType?: string;
   loadedMessage: string;
   loaderMessage: string;
   totalProgress: number;
@@ -36,6 +37,7 @@ export const handleFileExportThunk =
       exportNotificationTitle,
       exportFileName,
       exportSuccessMessage,
+      exportType = "export",
     }: ExportOptions
   ): ArchifiltreDocsThunkAction =>
   async (dispatch) => {
@@ -69,6 +71,7 @@ export const handleFileExportThunk =
       exportSuccessMessage,
       exportNotificationTitle,
       NotificationDuration.NORMAL,
-      async () => openExternalElement(exportFileName)
+      async () => openExternalElement(exportFileName),
+      [`${exportType}-export-success`]
     );
   };

src/renderer/utils/notifications.ts

@@ -15,16 +15,19 @@ export enum NotificationDuration {
  * @param title - The notification title
  * @param notificationDuration - The notification duration (in ms)
  * @param callback - The function called on notification click
+ * @param bodyClassNames - additional classes for the notification
  */
 export const notifySuccess = (
   message: string,
   title: string,
   notificationDuration = NotificationDuration.NORMAL,
-  callback = noop
+  callback = noop,
+  // TODO: transform params into options
+  bodyClassNames: string[] = []
 ): void => {
   toast(`${title}\n${message}`, {
     autoClose: notificationDuration,
-    bodyClassName: "notification-success",
+    bodyClassName: ["notification-success", ...bodyClassNames].join(" "),
     onClick: callback,
     type: toast.TYPE.SUCCESS,
   });

tests/e2e/audit-export.test.ts

@@ -1,6 +1,5 @@
 import type { ElectronApplication, Page } from "@playwright/test";
-import { expect, test } from "@playwright/test";
-import parseCsv from "csv-parse/lib/sync";
+import { test } from "@playwright/test";
 import fs from "fs";
 import path from "path";
 import { sync as rimrafSync } from "rimraf";
@@ -11,6 +10,7 @@ import {
   addTag,
   clickIcicleElement,
   makeExport,
+  waitForSuccessNotification,
 } from "./utils/app";
 import { closeApp, startApp } from "./utils/test";
 
@@ -20,12 +20,16 @@ const it = test;
 
 const TEST_TIMEOUT = 20000;
 
-const testFolderPath = path.resolve(__dirname, "../test-folder/");
-
 describe("Export audit report", () => {
   test.use({ navigationTimeout: TEST_TIMEOUT });
 
+  let testFolderName = "";
+  let testFolderPath = "";
+
   beforeAll(async () => {
+    testFolderName = `audit-export-${Date.now()}`;
+    testFolderPath = path.resolve(__dirname, "..", testFolderName);
+
     await createStructure({
       [testFolderPath]: {
         "child/": {
@@ -48,21 +52,23 @@ describe("Export audit report", () => {
   });
 
   afterEach(async () => {
-    rimrafSync(path.join(testFolderPath, "..","test-folder-audit_*.docx"));
+    rimrafSync(
+      path.join(testFolderPath, "..", `${testFolderName}-audit_*.docx`)
+    );
     await closeApp(app);
   });
 
   it("should generate an audit report", async () => {
     test.slow();
-    
+
     const tag0Name = "tag0";
     const tag1Name = "tag1";
     const description = "element description";
 
     await win.waitForSelector(`[data-test-id="main-icicle"]`);
     await (await win.waitForSelector(".notification-success")).click();
 
-    await clickIcicleElement(win, "/test-folder/child/index.csv");
+    await clickIcicleElement(win, `/${testFolderName}/child/index.csv`);
 
     await addTag(win, tag0Name);
     await addTag(win, tag1Name);
@@ -71,14 +77,14 @@ describe("Export audit report", () => {
     await makeExport(win, "AUDIT");
 
     // Waiting for the CSV file to be created
-    await win.waitForSelector(`text=/L'export du rapport d'audit est terminé/`);
+    await waitForSuccessNotification(win, ".audit-report-export-success");
 
     // Finding the CSV export file
     const exportFolderPath = path.join(__dirname, "..");
     const exportFolder = fs.readdirSync(exportFolderPath);
 
     const auditExportFilePath = exportFolder.find((folderName) =>
-      /test-folder-audit_/i.test(folderName)
+      new RegExp(`${testFolderName}-audit_`, "i").test(folderName)
     );
 
     if (auditExportFilePath === undefined) {

tests/e2e/csv-export.test.ts

@@ -11,6 +11,7 @@ import {
   addTag,
   clickIcicleElement,
   makeExport,
+  waitForSuccessNotification,
 } from "./utils/app";
 import { closeApp, startApp } from "./utils/test";
 
@@ -20,12 +21,16 @@ const it = test;
 
 const TEST_TIMEOUT = 20000;
 
-const testFolderPath = path.resolve(__dirname, "../test-folder/");
-
 describe("Export to CSV", () => {
   test.use({ navigationTimeout: TEST_TIMEOUT });
 
+  let testFolderName = "";
+  let testFolderPath = "";
+
   beforeAll(async () => {
+    testFolderName = `csv-export-${Date.now()}`;
+    testFolderPath = path.resolve(__dirname, "..", testFolderName);
+
     await createStructure({
       [testFolderPath]: {
         "child/": {
@@ -48,21 +53,21 @@ describe("Export to CSV", () => {
   });
 
   afterEach(async () => {
-    rimrafSync(path.join(testFolderPath, "..","test-folder-csv_*.csv"));
+    rimrafSync(path.join(testFolderPath, "..", `${testFolderName}-csv_*.csv`));
     await closeApp(app);
   });
 
   it("should generate a valid csv export", async () => {
     test.slow();
-    
+
     const tag0Name = "tag0";
     const tag1Name = "tag1";
     const description = "element description";
 
     await win.waitForSelector(`[data-test-id="main-icicle"]`);
     await (await win.waitForSelector(".notification-success")).click();
 
-    await clickIcicleElement(win, "/test-folder/child/index.csv");
+    await clickIcicleElement(win, `/${testFolderName}/child/index.csv`);
 
     await addTag(win, tag0Name);
     await addTag(win, tag1Name);
@@ -71,14 +76,14 @@ describe("Export to CSV", () => {
     await makeExport(win, "CSV");
 
     // Waiting for the CSV file to be created
-    await win.waitForSelector(`text=/L'export CSV est terminé/`);
+    await waitForSuccessNotification(win, ".csv-export-success");
 
     // Finding the CSV export file
     const exportFolderPath = path.join(__dirname, "..");
     const exportFolder = fs.readdirSync(exportFolderPath);
 
     const csvExportFilePath = exportFolder.find((folderName) =>
-      /test-folder-csv_/i.test(folderName)
+      new RegExp(`${testFolderName}-csv_`, "i").test(folderName)
     );
 
     if (csvExportFilePath === undefined) {
@@ -90,20 +95,12 @@ describe("Export to CSV", () => {
       path.join(exportFolderPath, csvExportFilePath),
       { encoding: "utf-8" }
     );
-    
+
     const data = parseCsv(csv, {
+      columns: true,
       delimiter: ";",
-      columns: true
     });
 
     expect(data.length).toBe(4);
-
-    // folders are marked as folders
-    const testedFolder = data.find((row: Record<string, string>) => row.chemin === "/test-folder/child");
-    expect(testedFolder?.type).toBe("répertoire");
-
-    // csv files are marked as csv files
-    const testedFile = data.find((row: Record<string, string>) => row.chemin === "/test-folder/child/index.csv");
-    expect(testedFile?.type).toBe("csv");
   });
 });