Merge pull request #1050 from PintoGideon/Setup-Tests

Adding a Test for File Uploads

playwright.config.ts

@@ -73,5 +73,6 @@ export default defineConfig({
   webServer: {
     command: "npm run dev:public",
     url: "http://localhost:25173",
+    reuseExistingServer:true
   },
 });

src/components/CreateFeed/HelperComponent.tsx

@@ -78,7 +78,7 @@ export const LocalFileList = ({
           <span className="file-icon">
             {isFolder ? <FolderIcon /> : <FileIcon />}
           </span>
-          {fileName}
+          <div className="file-name-text">{fileName}</div>
         </FlexItem>
       </Flex>
 

tests/fixtures/loggedIn.ts

@@ -3,12 +3,14 @@ import fs from "fs";
 import path from "path";
 import { faker } from "@faker-js/faker";
 import createAccountHelper from "../helpers/createAccount";
-
 export * from "@playwright/test";
 
 // create new user account for each worker
 // https://playwright.dev/docs/auth#moderate-one-account-per-parallel-worker
-export const test = baseTest.extend<{}, { workerStorageState: string }>({
+export const test = baseTest.extend<
+  Record<string, unknown>,
+  { workerStorageState: string }
+>({
   // Use the same storage state for all tests in this worker.
   storageState: ({ workerStorageState }, use) => use(workerStorageState),
 
@@ -34,7 +36,7 @@ export const test = baseTest.extend<{}, { workerStorageState: string }>({
       // create a new user account
       const username = faker.internet.userName();
       const email = faker.internet.email();
-      const password = `testuser1234`;
+      const password = "testuser1234";
       const baseURL = test.info().project.use.baseURL as string;
       await createAccountHelper(baseURL, page, username, email, password);
 

tests/library.spec.ts

@@ -0,0 +1,75 @@
+import { test, expect } from "./fixtures/loggedIn.ts";
+import path from "path";
+
+test("Tests File Uploads", async ({ page }) => {
+  //Avoids timeouts.
+  test.slow();
+  await page.goto("library");
+
+  const modalSelector = "[role='dialog']";
+
+  // Click on the button to trigger the modal
+  await page.getByRole("button", { name: /upload/i }).click();
+
+  // Wait for the modal to appear
+  await page.waitForSelector(modalSelector);
+
+  // Get a handle to the modal element
+  const modalElementHandle = await page.$(modalSelector);
+
+  // Now you can interact with the modal as needed
+  // Example: assert that modal content is visible
+
+  if (modalElementHandle) {
+    const isModalVisible = await modalElementHandle.isVisible();
+    expect(isModalVisible).toBeTruthy();
+
+    const fileChooserPromise = page.waitForEvent("filechooser");
+    await page.getByRole("button", { name: /upload files/i }).click();
+    const fileChooser = await fileChooserPromise;
+
+    const SOME_FILE = path.join(__dirname, "..", "package-lock.json");
+    await fileChooser.setFiles(SOME_FILE);
+
+    await page.waitForSelector("input[name='horizontal-form-name']");
+
+    // Extract the file name from the file-name div
+    const fileName = await page.$eval(
+      ".file-name-text",
+      (element: HTMLDivElement) => element.innerText,
+    );
+
+    // Check if the file name is 'package-lock.json'
+    expect(fileName).toBe("package-lock.json");
+
+    // Correct the selector for the "Push to File Storage" button
+    await page
+      .getByRole("button", {
+        name: /push to file storage/i,
+      })
+      .click();
+
+    const username = await page.$eval(
+      ".pf-v5-c-menu-toggle__text",
+      (element) => element.textContent,
+    );
+
+    const directoryNameValue = await page.$eval(
+      "input[name='horizontal-form-name']",
+      (element: HTMLInputElement) => element.value,
+    );
+    const expectedURL = `/library/${username}/uploads/${directoryNameValue}`;
+
+    // Start waiting for the progress measure to be 100%
+    await page.waitForFunction(() => {
+      const progressMeasure = document.querySelector(
+        ".pf-v5-c-progress__measure",
+      );
+      return progressMeasure && progressMeasure.textContent === "100%";
+    });
+
+    // Click the close button to close the modal
+    await page.click("[aria-label='Close']");
+    expect(page.url()).toContain(expectedURL);
+  }
+});