adjusting playwright.yml tests

.gitignore

@@ -35,3 +35,4 @@ dist
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+notes.md

playwright.config.ts

@@ -23,11 +23,13 @@ export default defineConfig({
   reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   expect: {
-    timeout: 10 * 1000,
+    timeout: 15 * 1000,
   },
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: "http://localhost:5173/",
+    baseURL: process.env.CI
+      ? "http://localhost:4173/"
+      : "http://localhost:5173/",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
@@ -72,9 +74,11 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: process.env.CI
+      ? "npm run build && npm run preview"
+      : "npm run dev",
+    url: process.env.CI ? "http://localhost:4173/" : "http://localhost:5173/",
+    reuseExistingServer: !process.env.CI,
+  },
 });

tests/example.spec.ts → tests/dot.spec.ts

@@ -24,46 +24,38 @@ test("Listing on home page navigates to proper playlist", async ({page}) => {
   const playlistListing = page.getByRole("link", {name: "benin"});
   await playlistListing.click();
   expect(page.url().includes("benin"));
-  // const listItems = playlistListing.getByRole("listitem");
-  // listItems.
-  // const alphabetizedKeys = Object.keys(
-  //   brightCovePlaylistConfig
-  // ).sort() as unknown as Array<keyof typeof brightCovePlaylistConfig>;
-
-  // await expect(listItems).toHaveCount(alphabetizedKeys.length);
 });
 test("No horizontal scroll", async ({page}) => {
   // Navigate to the provided URL
   await page.goto("/benin");
   // Use page.evaluate to run custom JavaScript code on the page
-  await page.waitForLoadState("networkidle");
+
   const doesNotHaveHorizontalScroll = await page.evaluate(
     () => document.body.scrollWidth <= window.innerWidth
   );
   expect(doesNotHaveHorizontalScroll).toBe(true);
 });
 test("New Testament renders 27 books", async ({page}) => {
   await page.goto("/benin");
-  // await page.waitForLoadState("networkidle");
-  const playlistListing = await page
-    .getByTestId("booksAvailable")
-    .locator("li");
-  await expect(playlistListing).toHaveCount(27);
+  const playlistListing = page.getByTestId("booksAvailable");
+  await playlistListing.waitFor();
+  const books = playlistListing.locator("li");
+  await expect(books).toHaveCount(27);
 });
 test("Matthew Renders 28 chapter buttons", async ({page}) => {
   await page.goto("/benin");
-  // await page.waitForLoadState("networkidle");
-  const playlistListing = await page
-    .getByTestId("chapterSelector")
-    .locator("li");
 
-  await expect(playlistListing).toHaveCount(28);
+  const playlistListing = page.getByTestId("chapterSelector");
+  await playlistListing.waitFor();
+  const chapters = playlistListing.locator("li");
+
+  await expect(chapters).toHaveCount(28);
 });
 test("state data attributes for chapter / vid are correct", async ({page}) => {
   await page.goto("/benin");
 
-  await page.waitForLoadState("networkidle");
-  const stateChecker = await page.getByTestId("stateChecker");
+  const stateChecker = page.getByTestId("stateChecker");
+  await stateChecker.waitFor();
   const dataCurBook = await stateChecker.getAttribute("data-currentbook");
   const isMatthew = dataCurBook === "MAT";
   const dataCur = await stateChecker.getAttribute("data-currentchap");
@@ -76,8 +68,7 @@ test("state data attributes for chapter / vid are correct", async ({page}) => {
 test("chapter changes on click", async ({page}) => {
   await page.goto("/benin");
 
-  await page.waitForLoadState("networkidle");
-  const chap2Btn = await page
+  const chap2Btn = page
     .getByTestId("chapterSelector")
     .getByText("2", {exact: true});
 
@@ -95,11 +86,8 @@ test("chapter changes on click", async ({page}) => {
 test("book changes on click", async ({page}) => {
   await page.goto("/benin");
 
-  await page.waitForLoadState("networkidle");
-  // const chap2Btn = await page
-  //   .getByTestId("chapterSelector")
-  //   .getByText("2", {exact: true});
   const bookPicked = page.getByTestId("bookPicked");
+
   const judeBtn = page
     .getByTestId("booksAvailable")
     .locator("li")
@@ -112,3 +100,6 @@ test("book changes on click", async ({page}) => {
   expect(isJude).toBeTruthy();
   await expect(bookPicked).toHaveText("Jude");
 });
+
+// testing vido
+// How can i e2e test the player to ensure that it's playing once someone downloads somethign? Green check marks. But i'd like to actually test the player.