test(e2e): add player tests

stephane-r · Dec 8, 2023 · 1cf58bd · 1cf58bd
1 parent fb2a27d
commit 1cf58bd
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 49 deletions.
diff --git a/e2e/player.spec.ts b/e2e/player.spec.ts
@@ -0,0 +1,33 @@
+import { expect, test } from "@playwright/test";
+
+import { search, selectedInstance } from "./utils";
+
+test.describe.serial("player", () => {
+  test.skip("play video", async ({ page }) => {
+    await page.goto("localhost:3000");
+
+    await selectedInstance(page, "invidious.fdn.fr");
+
+    await page.reload();
+
+    await search(page, "Eminem lyric");
+
+    await page
+      .getByRole("list", { name: "Search result list Eminem lyric" })
+      .getByRole("listitem")
+      .first()
+      .click();
+
+    await expect(page.getByRole("dialog", { name: "Player" })).toBeVisible({
+      timeout: 15000,
+    });
+
+    // Ne fonctionne pas
+
+    await expect(
+      page.getByRole("status", { name: "Player loading" }),
+    ).toBeVisible({
+      timeout: 15000,
+    });
+  });
+});
diff --git a/e2e/playlists.spec.ts b/e2e/playlists.spec.ts
@@ -1,7 +1,11 @@
 import { expect, test } from "@playwright/test";
 
-import { search, selectSearchType } from "./search.spec";
-import { checkNotification, navigateTo } from "./utils";
+import {
+  checkNotification,
+  navigateTo,
+  search,
+  selectSearchType,
+} from "./utils";
 
 const createPlaylist = async (page, title: string) => {
   await navigateTo(page, "Playlists", "Playlists");

diff --git a/e2e/search.spec.ts b/e2e/search.spec.ts
@@ -1,46 +1,6 @@
-import { Page, expect, test } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 
-export const search = async (page: Page, value: string) => {
-  // Check search bar visibility
-  await expect(
-    page.getByRole("form", { name: "Search bar form" }),
-  ).toBeVisible();
-  await page.getByPlaceholder("What do you want hear today?").fill(value);
-  await page.getByPlaceholder("What do you want hear today?").press("Enter");
-  await listVisibility(page, value);
-};
-
-export const selectSearchType = async (
-  page: Page,
-  type: string,
-  currentType: string = "Videos",
-) => {
-  await page.getByRole("button", { name: "Open search filters" }).click();
-  await expect(
-    page.getByRole("menu", { name: "Search filters" }),
-  ).toBeVisible();
-  await page
-    .getByRole("menu", { name: "Search filters" })
-    .getByRole("textbox", { name: "Type filter" })
-    .click();
-  await expect(page.getByRole("listbox")).toBeVisible();
-  await expect(
-    page.getByRole("listbox").getByRole("option", { selected: true }),
-  ).toContainText(currentType);
-  await page.getByRole("listbox").getByRole("option", { name: type }).click();
-};
-
-const listVisibility = async (page: Page, label: string) => {
-  await expect(
-    page.getByRole("heading", { name: `Search results : ${label}` }),
-  ).toBeVisible();
-  await expect(
-    page.getByRole("list", { name: `Search result list ${label}` }),
-  ).toBeVisible();
-  await expect(
-    page.getByRole("list", { name: `Search result list ${label}` }),
-  ).not.toBeEmpty();
-};
+import { search } from "./utils";
 
 test.describe.serial("search", () => {
   test("search an artist", async ({ page }) => {

diff --git a/e2e/utils.ts b/e2e/utils.ts
@@ -22,3 +22,63 @@ export const checkNotification = async (page: Page, value: RegExp) => {
   await page.getByRole("alert").getByRole("button").click();
   await expect(page.getByRole("alert")).not.toBeVisible();
 };
+
+export const search = async (page: Page, value: string) => {
+  // Check search bar visibility
+  await expect(
+    page.getByRole("form", { name: "Search bar form" }),
+  ).toBeVisible();
+  await page.getByPlaceholder("What do you want hear today?").fill(value);
+  await page.getByPlaceholder("What do you want hear today?").press("Enter");
+  await listVisibility(page, value);
+};
+
+export const selectSearchType = async (
+  page: Page,
+  type: string,
+  currentType: string = "Videos",
+) => {
+  await page.getByRole("button", { name: "Open search filters" }).click();
+  await expect(
+    page.getByRole("menu", { name: "Search filters" }),
+  ).toBeVisible();
+  await page
+    .getByRole("menu", { name: "Search filters" })
+    .getByRole("textbox", { name: "Type filter" })
+    .click();
+  await expect(page.getByRole("listbox")).toBeVisible();
+  await expect(
+    page.getByRole("listbox").getByRole("option", { selected: true }),
+  ).toContainText(currentType);
+  await page.getByRole("listbox").getByRole("option", { name: type }).click();
+};
+
+const listVisibility = async (page: Page, label: string) => {
+  await expect(
+    page.getByRole("heading", { name: `Search results : ${label}` }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("list", { name: `Search result list ${label}` }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("list", { name: `Search result list ${label}` }),
+  ).not.toBeEmpty();
+};
+
+export const selectedInstance = async (page: Page, instanceUri: string) => {
+  await navigateTo(page, "Settings", "Settings");
+  await page.getByRole("button", { name: /General/ }).click();
+  await expect(
+    page.getByRole("list", { name: "Invidious instances list" }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("listitem", { name: "invidious.fdn.fr" }),
+  ).toBeVisible();
+  await page
+    .getByRole("listitem", { name: "invidious.fdn.fr" })
+    .getByTestId("use")
+    .click();
+  await expect(
+    page.getByRole("listitem", { name: "invidious.fdn.fr" }),
+  ).toHaveAttribute("aria-current", "true");
+};
diff --git a/src/components/Player.tsx b/src/components/Player.tsx
@@ -45,6 +45,8 @@ export const Player = memo(() => {
 
   return (
     <Box
+      role="dialog"
+      aria-label="Player"
       className={classes.container}
       data-visible={showPlayerBar}
     >

diff --git a/src/components/PlayerLoadingOverlay.tsx b/src/components/PlayerLoadingOverlay.tsx
@@ -8,9 +8,13 @@ export const PlayerLoadingOverlay = memo(() => {
   const playerState = usePlayerState();
   const playerMode = usePlayerMode();
 
-  if (playerMode === "video") {
+  if (playerMode === "video" || !playerState.loading) {
     return null;
   }
 
-  return <LoadingOverlay visible={playerState.loading} />;
+  return (
+    <div aria-label="Player loading" role="status">
+      <LoadingOverlay aria-label="Player loading" visible />
+    </div>
+  );
 });
diff --git a/src/components/SelectInvidiousInstance.tsx b/src/components/SelectInvidiousInstance.tsx
@@ -19,7 +19,7 @@ export const SelectInvidiousInstance = memo(() => {
     settings.customInstances && settings.customInstances.length > 0;
 
   return (
-    <Table highlightOnHover>
+    <Table role="list" aria-label="Invidious instances list" highlightOnHover>
       <Table.Thead>
         <Table.Tr>
           <Table.Th>
@@ -89,7 +89,11 @@ const TableRow = memo(
     };
 
     return (
-      <Table.Tr>
+      <Table.Tr
+        role="listitem"
+        aria-label={instance.domain}
+        aria-current={isCurrent}
+      >
         <Table.Td>
           {instance.flag} {instance.domain}
           {isCurrent ? (
@@ -109,9 +113,10 @@ const TableRow = memo(
           ) : null}
         </Table.Td>
         <Table.Td>{instance.type}</Table.Td>
-        <Table.Td>
+        <Table.Td data-testid="use">
           <Switch
             checked={isCurrent}
+            aria-label={t("invidious.use")}
             label={t("invidious.use")}
             onChange={() => handleInstanceChange("currentInstance", instance)}
           />