From 0807ad588d179134fa9cc4ab314c2a9f704a5617 Mon Sep 17 00:00:00 2001
From: JohnAllenTech <46611809+JohnAllenTech@users.noreply.github.com>
Date: Mon, 28 Oct 2024 16:53:48 -0600
Subject: [PATCH 1/6] chore: added tests for my posts page

---
 e2e/articles.spec.ts |  8 +++----
 e2e/my-posts.spec.ts | 53 +++++++++++++++++++++++++++++++++++++++-----
 e2e/setup.ts         | 50 ++++++++++++++++++++++++++++++++++++-----
 3 files changed, 97 insertions(+), 14 deletions(-)

diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts
index 5810d6d5..971ce00f 100644
--- a/e2e/articles.spec.ts
+++ b/e2e/articles.spec.ts
@@ -17,10 +17,10 @@ test.describe("Unauthenticated Articles Page", () => {
   test("Should be able to navigate directly to an article", async ({
     page,
   }) => {
-    await page.goto("http://localhost:3000/articles/e2e-test-slug-eqj0ozor");
+    await page.goto("http://localhost:3000/articles/e2e-test-slug-published");
     await expect(page.getByText("Lorem ipsum dolor sit amet,")).toBeVisible();
     await expect(
-      page.getByRole("heading", { name: "Test Article" }),
+      page.getByRole("heading", { name: "Published Article" }),
     ).toBeVisible();
     await expect(
       page.getByRole("heading", { name: "Written by E2E Test User One" }),
@@ -291,14 +291,14 @@ test.describe("Authenticated Articles Page", () => {
   });
 
   test("Should be able reply to a comment", async ({ page }) => {
-    await page.goto("http://localhost:3000/articles/e2e-test-slug-eqj0ozor");
+    await page.goto("http://localhost:3000/articles/e2e-test-slug-published");
     const numberOfCommentsIntially = await page
       .locator("div")
       .filter({ hasText: /^Thanks for the positive feedback!$/ })
       .count();
     await expect(page.getByText("Lorem ipsum dolor sit amet,")).toBeVisible();
     await expect(
-      page.getByRole("heading", { name: "Test Article" }),
+      page.getByRole("heading", { name: "Published Article" }),
     ).toBeVisible();
     await expect(
       page.getByRole("heading", { name: "Written by E2E Test User One" }),
diff --git a/e2e/my-posts.spec.ts b/e2e/my-posts.spec.ts
index c1f537f9..e645e751 100644
--- a/e2e/my-posts.spec.ts
+++ b/e2e/my-posts.spec.ts
@@ -1,15 +1,58 @@
-import test from "@playwright/test";
+import test, { expect } from "@playwright/test";
 import { loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated my-posts Page", () => {
-  //
-  // Replace with tests for unauthenticated users
+  test("Unauthenticed users should be redirected to get-started page if they access my-posts directly", async ({
+    page,
+  }) => {
+    await page.goto("http://localhost:3000/my-posts");
+    await page.waitForURL("http://localhost:3000/get-started");
+    expect(page.url()).toEqual("http://localhost:3000/get-started");
+  });
 });
 
 test.describe("Authenticated my-posts Page", () => {
   test.beforeEach(async ({ page }) => {
     await loggedInAsUserOne(page);
   });
-  //
-  // Replace with tests for authenticated users
+
+  test("Tabs for different type of posts should be visible", async ({
+    page,
+  }) => {
+    await page.goto("http://localhost:3000/my-posts");
+
+    await expect(page.getByRole("link", { name: "Drafts" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "Scheduled" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "Published" })).toBeVisible();
+  });
+
+  test("Different article tabs should correctly display articles matching that type", async ({
+    page,
+  }) => {
+    await page.goto("http://localhost:3000/my-posts");
+
+    await expect(page.getByRole("link", { name: "Drafts" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "Scheduled" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "Published" })).toBeVisible();
+
+    await page.getByRole("link", { name: "Drafts" }).click();
+    await expect(
+      page.getByRole("heading", { name: "Draft Article" }),
+    ).toBeVisible();
+    await expect(page.getByText("Lorem ipsum dolor sit amet")).toBeVisible();
+
+    await page.getByRole("link", { name: "Scheduled" }).click();
+    await expect(
+      page.getByRole("heading", { name: "Scheduled Article" }),
+    ).toBeVisible();
+    await expect(page.getByText("Lorem ipsum dolor sit amet")).toBeVisible();
+
+    await page.getByRole("link", { name: "Published" }).click();
+    await expect(
+      page.getByRole("heading", { name: "Published Article" }),
+    ).toBeVisible();
+    await expect(
+      page.getByText("Lorem ipsum dolor sit amet", { exact: true }),
+    ).toBeVisible();
+  });
 });
diff --git a/e2e/setup.ts b/e2e/setup.ts
index 561543ef..78defa6b 100644
--- a/e2e/setup.ts
+++ b/e2e/setup.ts
@@ -19,19 +19,59 @@ export const setup = async () => {
     authorId: string,
     commenterId: string,
   ) => {
-    const postId = "1nFnMmN5";
+    const publishedPostId = "1nFnMmN1";
+    const scheduledPostId = "1nFnMmN2";
+    const draftPostId = "1nFnMmN3";
     const now = new Date().toISOString();
+
+    const oneYearFromToday = new Date(now);
+    oneYearFromToday.setFullYear(oneYearFromToday.getFullYear() + 1);
+
     await db
       .insert(post)
       .values({
-        id: postId,
+        id: publishedPostId,
         published: now,
         excerpt: "Lorem ipsum dolor sit amet",
         updatedAt: now,
-        slug: "e2e-test-slug-eqj0ozor",
+        slug: "e2e-test-slug-published",
+        likes: 10,
+        readTimeMins: 3,
+        title: "Published Article",
+        body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.",
+        userId: authorId,
+      })
+      .onConflictDoNothing()
+      .returning();
+
+    await db
+      .insert(post)
+      .values({
+        id: scheduledPostId,
+        published: null,
+        excerpt: "Lorem ipsum dolor sit amet",
+        updatedAt: now,
+        slug: "e2e-test-slug-draft",
+        likes: 10,
+        readTimeMins: 3,
+        title: "Draft Article",
+        body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.",
+        userId: authorId,
+      })
+      .onConflictDoNothing()
+      .returning();
+
+    await db
+      .insert(post)
+      .values({
+        id: draftPostId,
+        published: oneYearFromToday.toISOString(),
+        excerpt: "Lorem ipsum dolor sit amet",
+        updatedAt: now,
+        slug: "e2e-test-slug-scheduled",
         likes: 10,
         readTimeMins: 3,
-        title: "Test Article",
+        title: "Scheduled Article",
         body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.",
         userId: authorId,
       })
@@ -41,7 +81,7 @@ export const setup = async () => {
     await db
       .insert(comment)
       .values({
-        postId,
+        postId: publishedPostId,
         body: "What a great article! Thanks for sharing",
         userId: commenterId,
       })

From fd358568d72eaecc1fbce7387eda9d3c73887fee Mon Sep 17 00:00:00 2001
From: JohnAllenTech <46611809+JohnAllenTech@users.noreply.github.com>
Date: Mon, 28 Oct 2024 17:19:03 -0600
Subject: [PATCH 2/6] chore: pre pr cleanup

---
 e2e/setup.ts | 100 ++++++++++++++++++++++++++-------------------------
 1 file changed, 52 insertions(+), 48 deletions(-)

diff --git a/e2e/setup.ts b/e2e/setup.ts
index 78defa6b..14666213 100644
--- a/e2e/setup.ts
+++ b/e2e/setup.ts
@@ -23,60 +23,64 @@ export const setup = async () => {
     const scheduledPostId = "1nFnMmN2";
     const draftPostId = "1nFnMmN3";
     const now = new Date().toISOString();
+    const articleContent =
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.";
 
     const oneYearFromToday = new Date(now);
     oneYearFromToday.setFullYear(oneYearFromToday.getFullYear() + 1);
 
-    await db
-      .insert(post)
-      .values({
-        id: publishedPostId,
-        published: now,
-        excerpt: "Lorem ipsum dolor sit amet",
-        updatedAt: now,
-        slug: "e2e-test-slug-published",
-        likes: 10,
-        readTimeMins: 3,
-        title: "Published Article",
-        body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.",
-        userId: authorId,
-      })
-      .onConflictDoNothing()
-      .returning();
+    await Promise.all([
+      await db
+        .insert(post)
+        .values({
+          id: publishedPostId,
+          published: now,
+          excerpt: "Lorem ipsum dolor sit amet",
+          updatedAt: now,
+          slug: "e2e-test-slug-published",
+          likes: 10,
+          readTimeMins: 3,
+          title: "Published Article",
+          body: articleContent,
+          userId: authorId,
+        })
+        .onConflictDoNothing()
+        .returning(),
 
-    await db
-      .insert(post)
-      .values({
-        id: scheduledPostId,
-        published: null,
-        excerpt: "Lorem ipsum dolor sit amet",
-        updatedAt: now,
-        slug: "e2e-test-slug-draft",
-        likes: 10,
-        readTimeMins: 3,
-        title: "Draft Article",
-        body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.",
-        userId: authorId,
-      })
-      .onConflictDoNothing()
-      .returning();
+      await db
+        .insert(post)
+        .values({
+          id: scheduledPostId,
+          published: null,
+          excerpt: "Lorem ipsum dolor sit amet",
+          updatedAt: now,
+          slug: "e2e-test-slug-draft",
+          likes: 10,
+          readTimeMins: 3,
+          title: "Draft Article",
+          body: articleContent,
+          userId: authorId,
+        })
+        .onConflictDoNothing()
+        .returning(),
 
-    await db
-      .insert(post)
-      .values({
-        id: draftPostId,
-        published: oneYearFromToday.toISOString(),
-        excerpt: "Lorem ipsum dolor sit amet",
-        updatedAt: now,
-        slug: "e2e-test-slug-scheduled",
-        likes: 10,
-        readTimeMins: 3,
-        title: "Scheduled Article",
-        body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.",
-        userId: authorId,
-      })
-      .onConflictDoNothing()
-      .returning();
+      await db
+        .insert(post)
+        .values({
+          id: draftPostId,
+          published: oneYearFromToday.toISOString(),
+          excerpt: "Lorem ipsum dolor sit amet",
+          updatedAt: now,
+          slug: "e2e-test-slug-scheduled",
+          likes: 10,
+          readTimeMins: 3,
+          title: "Scheduled Article",
+          body: articleContent,
+          userId: authorId,
+        })
+        .onConflictDoNothing()
+        .returning(),
+    ]);
 
     await db
       .insert(comment)

From 250dff5a61626c910f2dc946454ff89ca6ce04f5 Mon Sep 17 00:00:00 2001
From: JohnAllenTech <46611809+JohnAllenTech@users.noreply.github.com>
Date: Mon, 28 Oct 2024 17:43:05 -0600
Subject: [PATCH 3/6] chore: moving some constants from around the test suite
 into a constants file

---
 e2e/articles.spec.ts   | 10 ++++------
 e2e/my-posts.spec.ts   | 10 ++++------
 e2e/setup.ts           |  9 ++++-----
 e2e/utils/constants.ts |  4 ++++
 e2e/utils/index.ts     |  1 +
 5 files changed, 17 insertions(+), 17 deletions(-)
 create mode 100644 e2e/utils/constants.ts

diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts
index 971ce00f..43590368 100644
--- a/e2e/articles.spec.ts
+++ b/e2e/articles.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from "playwright/test";
 import { randomUUID } from "crypto";
-import { loggedInAsUserOne } from "./utils";
+import { articleContent, articleExcerpt, loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated Articles Page", () => {
   test("Should show popular tags", async ({ page, isMobile }) => {
@@ -18,7 +18,7 @@ test.describe("Unauthenticated Articles Page", () => {
     page,
   }) => {
     await page.goto("http://localhost:3000/articles/e2e-test-slug-published");
-    await expect(page.getByText("Lorem ipsum dolor sit amet,")).toBeVisible();
+    await expect(page.getByText(articleExcerpt)).toBeVisible();
     await expect(
       page.getByRole("heading", { name: "Published Article" }),
     ).toBeVisible();
@@ -223,8 +223,6 @@ test.describe("Authenticated Articles Page", () => {
   });
 
   test("Should write and publish an article", async ({ page, isMobile }) => {
-    const articleContent =
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.";
     const articleTitle = "Lorem Ipsum";
     await page.goto("http://localhost:3000");
     // Waits for articles to be loaded
@@ -261,7 +259,7 @@ test.describe("Authenticated Articles Page", () => {
       /^http:\/\/localhost:3000\/articles\/lorem-ipsum-.*$/,
     );
 
-    await expect(page.getByText("Lorem ipsum dolor sit amet,")).toBeVisible();
+    await expect(page.getByText(articleExcerpt)).toBeVisible();
     await expect(
       page.getByRole("heading", { name: "Lorem Ipsum" }),
     ).toBeVisible();
@@ -296,7 +294,7 @@ test.describe("Authenticated Articles Page", () => {
       .locator("div")
       .filter({ hasText: /^Thanks for the positive feedback!$/ })
       .count();
-    await expect(page.getByText("Lorem ipsum dolor sit amet,")).toBeVisible();
+    await expect(page.getByText(articleExcerpt)).toBeVisible();
     await expect(
       page.getByRole("heading", { name: "Published Article" }),
     ).toBeVisible();
diff --git a/e2e/my-posts.spec.ts b/e2e/my-posts.spec.ts
index e645e751..b60cbd89 100644
--- a/e2e/my-posts.spec.ts
+++ b/e2e/my-posts.spec.ts
@@ -1,5 +1,5 @@
 import test, { expect } from "@playwright/test";
-import { loggedInAsUserOne } from "./utils";
+import { articleExcerpt, loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated my-posts Page", () => {
   test("Unauthenticed users should be redirected to get-started page if they access my-posts directly", async ({
@@ -39,20 +39,18 @@ test.describe("Authenticated my-posts Page", () => {
     await expect(
       page.getByRole("heading", { name: "Draft Article" }),
     ).toBeVisible();
-    await expect(page.getByText("Lorem ipsum dolor sit amet")).toBeVisible();
+    await expect(page.getByText(articleExcerpt)).toBeVisible();
 
     await page.getByRole("link", { name: "Scheduled" }).click();
     await expect(
       page.getByRole("heading", { name: "Scheduled Article" }),
     ).toBeVisible();
-    await expect(page.getByText("Lorem ipsum dolor sit amet")).toBeVisible();
+    await expect(page.getByText(articleExcerpt)).toBeVisible();
 
     await page.getByRole("link", { name: "Published" }).click();
     await expect(
       page.getByRole("heading", { name: "Published Article" }),
     ).toBeVisible();
-    await expect(
-      page.getByText("Lorem ipsum dolor sit amet", { exact: true }),
-    ).toBeVisible();
+    await expect(page.getByText(articleExcerpt, { exact: true })).toBeVisible();
   });
 });
diff --git a/e2e/setup.ts b/e2e/setup.ts
index 14666213..d42d4c0d 100644
--- a/e2e/setup.ts
+++ b/e2e/setup.ts
@@ -2,6 +2,7 @@ import dotenv from "dotenv";
 import postgres from "postgres";
 import { drizzle } from "drizzle-orm/postgres-js";
 import { post, comment } from "@/server/db/schema";
+import { articleContent, articleExcerpt } from "./utils";
 
 dotenv.config(); // Load .env file contents into process.env
 
@@ -23,8 +24,6 @@ export const setup = async () => {
     const scheduledPostId = "1nFnMmN2";
     const draftPostId = "1nFnMmN3";
     const now = new Date().toISOString();
-    const articleContent =
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.";
 
     const oneYearFromToday = new Date(now);
     oneYearFromToday.setFullYear(oneYearFromToday.getFullYear() + 1);
@@ -35,7 +34,7 @@ export const setup = async () => {
         .values({
           id: publishedPostId,
           published: now,
-          excerpt: "Lorem ipsum dolor sit amet",
+          excerpt: articleExcerpt,
           updatedAt: now,
           slug: "e2e-test-slug-published",
           likes: 10,
@@ -52,7 +51,7 @@ export const setup = async () => {
         .values({
           id: scheduledPostId,
           published: null,
-          excerpt: "Lorem ipsum dolor sit amet",
+          excerpt: articleExcerpt,
           updatedAt: now,
           slug: "e2e-test-slug-draft",
           likes: 10,
@@ -69,7 +68,7 @@ export const setup = async () => {
         .values({
           id: draftPostId,
           published: oneYearFromToday.toISOString(),
-          excerpt: "Lorem ipsum dolor sit amet",
+          excerpt: articleExcerpt,
           updatedAt: now,
           slug: "e2e-test-slug-scheduled",
           likes: 10,
diff --git a/e2e/utils/constants.ts b/e2e/utils/constants.ts
new file mode 100644
index 00000000..d2295f65
--- /dev/null
+++ b/e2e/utils/constants.ts
@@ -0,0 +1,4 @@
+export const articleContent =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.";
+
+export const articleExcerpt = "Lorem ipsum dolor sit amet";
diff --git a/e2e/utils/index.ts b/e2e/utils/index.ts
index 178cd64f..4d66d829 100644
--- a/e2e/utils/index.ts
+++ b/e2e/utils/index.ts
@@ -1 +1,2 @@
 export * from "./utils";
+export * from "./constants";

From 5a8f459ff62c4398c436c0acaacd2044bf58fb0f Mon Sep 17 00:00:00 2001
From: JohnAllenTech <46611809+JohnAllenTech@users.noreply.github.com>
Date: Mon, 28 Oct 2024 18:02:32 -0600
Subject: [PATCH 4/6] chore: implementing the bots suggestions

---
 e2e/my-posts.spec.ts |  2 +-
 e2e/setup.ts         | 20 ++++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/e2e/my-posts.spec.ts b/e2e/my-posts.spec.ts
index b60cbd89..38cec7ea 100644
--- a/e2e/my-posts.spec.ts
+++ b/e2e/my-posts.spec.ts
@@ -2,7 +2,7 @@ import test, { expect } from "@playwright/test";
 import { articleExcerpt, loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated my-posts Page", () => {
-  test("Unauthenticed users should be redirected to get-started page if they access my-posts directly", async ({
+  test("Unauthenticated users should be redirected to get-started page if they access my-posts directly", async ({
     page,
   }) => {
     await page.goto("http://localhost:3000/my-posts");
diff --git a/e2e/setup.ts b/e2e/setup.ts
index d42d4c0d..1eb86d9f 100644
--- a/e2e/setup.ts
+++ b/e2e/setup.ts
@@ -7,6 +7,9 @@ import { articleContent, articleExcerpt } from "./utils";
 dotenv.config(); // Load .env file contents into process.env
 
 export const setup = async () => {
+  // Dynamically import nanoid
+  const { nanoid } = await import("nanoid");
+
   if (
     !process.env.DATABASE_URL ||
     !process.env.E2E_USER_ONE_ID ||
@@ -14,22 +17,23 @@ export const setup = async () => {
   ) {
     throw new Error("Missing env variables for DB clean up script");
   }
+
   const db = drizzle(postgres(process.env.DATABASE_URL as string));
 
   const addE2EArticleAndComment = async (
     authorId: string,
     commenterId: string,
   ) => {
-    const publishedPostId = "1nFnMmN1";
-    const scheduledPostId = "1nFnMmN2";
-    const draftPostId = "1nFnMmN3";
+    const publishedPostId = nanoid(8);
+    const scheduledPostId = nanoid(8);
+    const draftPostId = nanoid(8);
     const now = new Date().toISOString();
 
     const oneYearFromToday = new Date(now);
     oneYearFromToday.setFullYear(oneYearFromToday.getFullYear() + 1);
 
     await Promise.all([
-      await db
+      db
         .insert(post)
         .values({
           id: publishedPostId,
@@ -46,10 +50,10 @@ export const setup = async () => {
         .onConflictDoNothing()
         .returning(),
 
-      await db
+      db
         .insert(post)
         .values({
-          id: scheduledPostId,
+          id: draftPostId,
           published: null,
           excerpt: articleExcerpt,
           updatedAt: now,
@@ -63,10 +67,10 @@ export const setup = async () => {
         .onConflictDoNothing()
         .returning(),
 
-      await db
+      db
         .insert(post)
         .values({
-          id: draftPostId,
+          id: scheduledPostId,
           published: oneYearFromToday.toISOString(),
           excerpt: articleExcerpt,
           updatedAt: now,

From 7e9eec4cc77c274548a44f97be0c7458272f1b89 Mon Sep 17 00:00:00 2001
From: JohnAllenTech <46611809+JohnAllenTech@users.noreply.github.com>
Date: Fri, 1 Nov 2024 10:25:26 -0600
Subject: [PATCH 5/6] chore: merged develop

---
 .github/workflows/e2e-tests.yml               |   6 -
 E2E Overview.md                               |  13 +-
 ISSUE_TEMPLATE.md                             |  16 +--
 app/(app)/courses/[slug]/[id]/_client.tsx     | 131 ++++++++++++++++++
 app/(app)/courses/[slug]/[id]/page.tsx        |  13 ++
 app/(app)/courses/mock.ts                     | 130 +++++++++++++++++
 .../editor/editor/components/bubble-menu.tsx  |  50 +++----
 .../editor/components/link-selector.tsx       |  11 +-
 .../editor/components/node-selector.tsx       |  43 ++----
 drizzle/seed.ts                               |  83 -----------
 e2e/constants/constants.ts                    |  12 ++
 e2e/constants/index.ts                        |   1 +
 e2e/setup.ts                                  | 120 +++++++++++++---
 e2e/teardown.ts                               |  39 ++----
 e2e/utils/utils.ts                            |   9 +-
 sample.env                                    |   6 -
 utils/flags.ts                                |   1 +
 17 files changed, 447 insertions(+), 237 deletions(-)
 create mode 100644 app/(app)/courses/[slug]/[id]/_client.tsx
 create mode 100644 app/(app)/courses/[slug]/[id]/page.tsx
 create mode 100644 app/(app)/courses/mock.ts
 create mode 100644 e2e/constants/constants.ts
 create mode 100644 e2e/constants/index.ts

diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml
index b1922382..90250dc2 100644
--- a/.github/workflows/e2e-tests.yml
+++ b/.github/workflows/e2e-tests.yml
@@ -44,12 +44,6 @@ jobs:
       GITHUB_ID: ${{ secrets.E2E_GITHUB_ID }}
       GITHUB_SECRET: ${{ secrets.E2E_GITHUB_SECRET }}
       NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
-      E2E_USER_ONE_EMAIL: e2e-user-one@codu.co
-      E2E_USER_ONE_ID: 8e3179ce-f32b-4d0a-ba3b-234d66b836ad
-      E2E_USER_ONE_SESSION_ID: df8a11f2-f20a-43d6-80a0-a213f1efedc1
-      E2E_USER_TWO_EMAIL: e2e-user-two@codu.co
-      E2E_USER_TWO_ID: a15a104a-0e34-4101-8800-ed25c9231345
-      E2E_USER_TWO_SESSION_ID: 10134766-bc6c-4b52-83d7-46ec0a4cb95d
 
     steps:
       - name: Checkout repository
diff --git a/E2E Overview.md b/E2E Overview.md
index 54197f59..4493d66a 100644
--- a/E2E Overview.md	
+++ b/E2E Overview.md	
@@ -2,15 +2,6 @@
 
 To run the end-to-end tests using Playwright, you need to configure your environment and follow these steps:
 
-### Environment Variables
-
-Ensure you have the following variables set in your `.env` file:
-
-- `E2E_USER_ID`: The ID of the E2E user for testing.
-- `E2E_USER_EMAIL`: The email of the E2E user for testing.
-- `E2E_USER_ONE_SESSION_ID`: The session ID that the user will use to authenticate.
-
-Note: The sample `.env` file is fine to use.
 
 ### Session and User Setup
 
@@ -38,11 +29,9 @@ For UI mode:
 npx playwright test --ui
 ```
 
-### Additional E2E Environment Variables
+### Additional E2E constants
 
 - **E2E_USER_ONE_SESSION_ID**: This is the session token UUID for one E2E user.
 - **E2E_USER_TWO_SESSION_ID**: This is the session token UUID for another E2E user.
 - **E2E_USER_ONE_ID**: The user ID of one of the E2E users.
 - **E2E_USER_TWO_ID**: The user ID of another E2E user.
-
-These values are currently hardcoded and should be unique for each user.
diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md
index fad72169..096edb97 100644
--- a/ISSUE_TEMPLATE.md
+++ b/ISSUE_TEMPLATE.md
@@ -1,27 +1,27 @@
 ## Context
 
-Please provide any relevant information about your setup
+<!-- Please provide any relevant information about your setup. -->
 
 ## Expected Behavior
 
-Please describe the behavior you are expecting
+<!-- Please describe the behavior you are expecting. -->
 
 ## Current Behavior
 
-What is the current behavior?
+<!-- What is the current behavior? -->
 
 ## Screenshots
 
-Drag and drop screenshots here to better describe your issue
+<!-- Drag and drop screenshots here to better describe your issue. -->
 
 ## Steps to reproduce
 
-Please provide detailed steps for reproducing the issue
-
+<!-- Please provide detailed steps for reproducing the issue:
 1. Step 1
 2. Step 2
-3. etc
+3. etc.
+-->
 
 ## Additional info
 
-Provide any additional information here
+<!-- Provide any additional information here. -->
diff --git a/app/(app)/courses/[slug]/[id]/_client.tsx b/app/(app)/courses/[slug]/[id]/_client.tsx
new file mode 100644
index 00000000..7359bc40
--- /dev/null
+++ b/app/(app)/courses/[slug]/[id]/_client.tsx
@@ -0,0 +1,131 @@
+"use client";
+import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
+import { CircleCheck, SquarePlay } from "lucide-react";
+import { type Session } from "next-auth";
+import { notFound } from "next/navigation";
+import { mockContentList } from "../../mock";
+
+interface ContentProps {
+  session: Session | null;
+}
+
+const Content = ({ session }: ContentProps) => {
+  const flagEnabled = isFlagEnabled(FEATURE_FLAGS.COURSE_VIDEO);
+
+  if (!flagEnabled) {
+    notFound();
+  }
+
+  return (
+    <div className="overflow-auto">
+      <div className="w-full divide-x divide-gray-700 lg:grid lg:grid-cols-12">
+        <VideoPlayer />
+        <Sidebar contentList={mockContentList} />
+      </div>
+      <div className="mx-auto max-w-5xl">
+        <ContentList contentList={mockContentList} />
+      </div>
+    </div>
+  );
+};
+
+const VideoPlayer = () => (
+  <div className="col-span-9">
+    <div className="mx-auto w-full max-w-7xl bg-black">
+      <iframe
+        className="aspect-video w-full"
+        src="https://www.youtube.com/embed/oKKG-CpDjrI"
+        title="YouTube video"
+      ></iframe>
+    </div>
+  </div>
+);
+
+interface SidebarProps {
+  contentList: typeof mockContentList;
+}
+
+const Sidebar = ({ contentList }: SidebarProps) => (
+  <div className="col-span-3 flex w-full flex-col overflow-auto">
+    <ul className="divide-y divide-gray-700">
+      {contentList && contentList.length > 0 ? (
+        contentList.map((item, index) => (
+          <SidebarItem key={index} item={item} />
+        ))
+      ) : (
+        <li className="text-center text-gray-500">No content available</li>
+      )}
+    </ul>
+  </div>
+);
+
+interface SidebarItemProps {
+  item: (typeof mockContentList)[0];
+}
+
+const SidebarItem = ({ item }: SidebarItemProps) => (
+  <li className="flex flex-row items-center justify-between px-2 py-2">
+    <div className="flex flex-row items-center">
+      <SquarePlay
+        className="mr-4 h-5 w-5 text-white group-hover:text-white"
+        aria-hidden="true"
+      />
+      <p>{item.title}</p>
+    </div>
+    <CircleCheck
+      className={`h-6 w-6 ${
+        item.watched ? "mr-2 h-5 w-5 text-pink-600" : "mr-2 h-5 w-5 text-white"
+      }`}
+      aria-hidden="true"
+    />
+  </li>
+);
+
+interface ContentListProps {
+  contentList: typeof mockContentList;
+}
+
+const ContentList = ({ contentList }: ContentListProps) => {
+  return (
+    <>
+      {contentList.map(
+        ({
+          id,
+          title,
+          longDescription,
+          description,
+          publishedDate,
+          author,
+          imageLink,
+        }) => (
+          <div key={id} className="mx-auto w-full max-w-7xl py-8">
+            <h2 className="text-3xl font-extrabold tracking-tight text-neutral-800 dark:text-white">
+              {title}
+            </h2>
+            <li key={author} className="flex justify-between gap-x-6 py-5">
+              <div className="flex min-w-0 gap-x-4">
+                <img
+                  alt=""
+                  src={imageLink}
+                  className="h-12 w-12 flex-none rounded-full bg-gray-50"
+                />
+                <div className="min-w-0 flex-auto">
+                  <p className="text-sm font-semibold leading-6 text-neutral-800 dark:text-white">
+                    {author}
+                  </p>
+                  <p className="mt-1 truncate text-xs leading-5 text-gray-500">
+                    {publishedDate}
+                  </p>
+                </div>
+              </div>
+            </li>
+            <div>{description}</div>
+            <div>{longDescription}</div>
+          </div>
+        ),
+      )}
+    </>
+  );
+};
+
+export default Content;
diff --git a/app/(app)/courses/[slug]/[id]/page.tsx b/app/(app)/courses/[slug]/[id]/page.tsx
new file mode 100644
index 00000000..a592c480
--- /dev/null
+++ b/app/(app)/courses/[slug]/[id]/page.tsx
@@ -0,0 +1,13 @@
+import { getServerAuthSession } from "@/server/auth";
+import Content from "./_client";
+
+export const metadata = {
+  title: "Video Course",
+};
+
+export default async function Page() {
+  // Example of grabbing session in case it is needed
+  const session = await getServerAuthSession();
+
+  return <Content session={session} />;
+}
diff --git a/app/(app)/courses/mock.ts b/app/(app)/courses/mock.ts
new file mode 100644
index 00000000..0634867c
--- /dev/null
+++ b/app/(app)/courses/mock.ts
@@ -0,0 +1,130 @@
+// Mock video source (this would typically be a path to a video file)
+const mockVideoSrc = "https://youtu.be/Ln4KSN0rchI?t=12";
+
+// Mock content list
+const mockContentList = [
+  {
+    id: 1,
+    title: "Introduction to React",
+    longDescription:
+      "In this video, we will explore the fundamentals of React, including its component-based architecture, virtual DOM, and how to get started with your first React application. This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+    description: "Learn the basics of React and its core concepts",
+    watched: false,
+    publishedDate: "2023-01-15",
+    author: "John Doe",
+    imageLink: "https://example.com/images/react-introduction.jpg",
+  },
+  {
+    id: 2,
+    title: "Setting Up Your Development Environment",
+    longDescription:
+      "This tutorial guides you through the installation and configuration of essential tools like Node.js, npm, and create-react-app to set up your React development environment.",
+    description:
+      "Install and configure the necessary tools for React development",
+    watched: true,
+    publishedDate: "2023-01-22",
+    author: "Jane Smith",
+  },
+  {
+    id: 3,
+    title: "Components and Props",
+    longDescription:
+      "Dive deep into React's core concepts of components and props. Learn how to create reusable components and pass data between them using props.",
+    description: "Understand the building blocks of React applications",
+    watched: true,
+    publishedDate: "2023-01-29",
+    author: "John Doe",
+  },
+  {
+    id: 4,
+    title: "State and Lifecycle",
+    longDescription:
+      "Explore how to manage component state and lifecycle methods to build dynamic and interactive applications with React.",
+    description: "Manage component state and lifecycle methods",
+    watched: true,
+    publishedDate: "2023-02-05",
+    author: "Jane Smith",
+  },
+  {
+    id: 5,
+    title: "Handling Events",
+    longDescription:
+      "Learn how to handle user interactions in React, including events like clicks, form submissions, and more.",
+    description: "Learn how to handle user interactions in React",
+    watched: true,
+    publishedDate: "2023-02-12",
+    author: "John Doe",
+  },
+  {
+    id: 6,
+    title: "Conditional Rendering",
+    longDescription:
+      "Discover how to display different UI elements based on specific conditions in your React applications.",
+    description: "Display different UI based on conditions",
+    watched: false,
+    publishedDate: "2023-02-19",
+    author: "Jane Smith",
+  },
+  {
+    id: 7,
+    title: "Lists and Keys",
+    longDescription:
+      "Learn the best practices for rendering lists of components in React and how to efficiently manage them with unique keys.",
+    description: "Render multiple components efficiently",
+    watched: false,
+    publishedDate: "2023-02-26",
+    author: "John Doe",
+  },
+  {
+    id: 8,
+    title: "Forms in React",
+    longDescription:
+      "This video covers how to create and manage forms in React applications, including controlled and uncontrolled components.",
+    description: "Create and handle form inputs in React applications",
+    watched: false,
+    publishedDate: "2023-03-05",
+    author: "Jane Smith",
+  },
+  {
+    id: 9,
+    title: "Hooks: useState and useEffect",
+    longDescription:
+      "An introduction to React Hooks, focusing on useState and useEffect to manage state and side effects in functional components.",
+    description: "Understand and use basic React Hooks",
+    watched: false,
+    publishedDate: "2023-03-12",
+    author: "John Doe",
+  },
+  {
+    id: 10,
+    title: "Custom Hooks",
+    longDescription:
+      "Learn how to create custom hooks in React to encapsulate and reuse logic across components.",
+    description: "Create reusable logic with custom Hooks",
+    watched: false,
+    publishedDate: "2023-03-19",
+    author: "Jane Smith",
+  },
+  {
+    id: 11,
+    title: "Context API",
+    longDescription:
+      "Explore the Context API to manage global state in your React applications without the need for prop drilling.",
+    description: "Manage global state in your React application",
+    watched: false,
+    publishedDate: "2023-03-26",
+    author: "John Doe",
+  },
+  {
+    id: 12,
+    title: "React Router",
+    longDescription:
+      "Learn how to implement navigation in your single-page applications using React Router, including dynamic routing and nested routes.",
+    description: "Implement navigation in your single-page application",
+    watched: false,
+    publishedDate: "2023-04-02",
+    author: "Jane Smith",
+  },
+];
+
+export { mockVideoSrc, mockContentList };
diff --git a/components/editor/editor/components/bubble-menu.tsx b/components/editor/editor/components/bubble-menu.tsx
index a1dcf67f..a4d2c892 100644
--- a/components/editor/editor/components/bubble-menu.tsx
+++ b/components/editor/editor/components/bubble-menu.tsx
@@ -5,7 +5,6 @@ import { useState } from "react";
 import {
   BoldIcon,
   ItalicIcon,
-  CodeIcon,
 } from "lucide-react";
 
 import { NodeSelector } from "./node-selector";
@@ -25,22 +24,16 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const items: BubbleMenuItem[] = [
     {
       name: "bold",
-      isActive: () => props.editor.isActive("bold"),
-      command: () => props.editor.chain().focus().toggleBold().run(),
+      isActive: () => props.editor?.isActive("bold") ?? false,
+      command: () => props.editor?.chain().focus().toggleBold().run(),
       icon: BoldIcon,
     },
     {
       name: "italic",
-      isActive: () => props.editor.isActive("italic"),
-      command: () => props.editor.chain().focus().toggleItalic().run(),
+      isActive: () => props.editor?.isActive("italic") ?? false,
+      command: () => props.editor?.chain().focus().toggleItalic().run(),
       icon: ItalicIcon,
     },
-    {
-      name: "code",
-      isActive: () => props.editor.isActive("code"),
-      command: () => props.editor.chain().focus().toggleCode().run(),
-      icon: CodeIcon,
-    },
   ];
 
   const bubbleMenuProps: EditorBubbleMenuProps = {
@@ -79,22 +72,16 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       {...bubbleMenuProps}
       className="flex w-fit divide-x divide-stone-200 rounded border border-stone-200 bg-white shadow-xl"
     >
-      <NodeSelector
-        editor={props.editor}
-        isOpen={isNodeSelectorOpen}
-        setIsOpen={() => {
-          setIsNodeSelectorOpen(!isNodeSelectorOpen);
-          setIsLinkSelectorOpen(false);
-        }}
-      />
-      <LinkSelector
-        editor={props.editor}
-        isOpen={isLinkSelectorOpen}
-        setIsOpen={() => {
-          setIsLinkSelectorOpen(!isLinkSelectorOpen);
-          setIsNodeSelectorOpen(false);
-        }}
-      />
+      {props.editor && (
+        <NodeSelector
+          editor={props.editor}
+          isOpen={isNodeSelectorOpen}
+          setIsOpen={() => {
+            setIsNodeSelectorOpen(!isNodeSelectorOpen);
+            setIsLinkSelectorOpen(false);
+          }}
+        />
+      )}
       <div className="flex">
         {items.map((item, index) => (
           <button
@@ -110,6 +97,15 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             />
           </button>
         ))}
+        {props.editor && (
+          <LinkSelector
+            editor={props.editor}
+            isOpen={isLinkSelectorOpen}
+            setIsOpen={() => {
+              setIsLinkSelectorOpen(!isLinkSelectorOpen);
+            }}
+          />
+        )}
       </div>
     </BubbleMenu>
   );
diff --git a/components/editor/editor/components/link-selector.tsx b/components/editor/editor/components/link-selector.tsx
index 81b0502d..0bedc84f 100644
--- a/components/editor/editor/components/link-selector.tsx
+++ b/components/editor/editor/components/link-selector.tsx
@@ -1,6 +1,6 @@
 import { cn, getUrlFromString } from "@/utils/utils";
 import type { Editor } from "@tiptap/core";
-import { Check, Trash } from "lucide-react";
+import { Link } from "lucide-react";
 import type { Dispatch, FC, SetStateAction } from "react";
 import { useEffect, useRef, useCallback } from "react";
 
@@ -60,14 +60,11 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
         className="flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
         onClick={setLink}
       >
-        <p className="text-base">↗</p>
-        <p
-          className={cn("underline decoration-stone-400 underline-offset-4", {
+        <Link
+          className={cn("h-4 w-4", {
             "text-blue-500": editor.isActive("link"),
           })}
-        >
-          Link
-        </p>
+        />
       </button>
       {/* {isOpen && (
         <form
diff --git a/components/editor/editor/components/node-selector.tsx b/components/editor/editor/components/node-selector.tsx
index e096a527..c5e188f6 100644
--- a/components/editor/editor/components/node-selector.tsx
+++ b/components/editor/editor/components/node-selector.tsx
@@ -2,14 +2,8 @@ import type { Editor } from "@tiptap/core";
 import {
   Check,
   ChevronDown,
-  Heading1,
-  Heading2,
-  Heading3,
   TextQuote,
-  ListOrdered,
   TextIcon,
-  Code,
-  CheckSquare,
   Heading,
 } from "lucide-react";
 import type { Dispatch, FC, SetStateAction } from "react";
@@ -28,17 +22,6 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
   setIsOpen,
 }) => {
   const items: BubbleMenuItem[] = [
-    {
-      name: "Text",
-      icon: TextIcon,
-      command: () =>
-        editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
-      // I feel like there has to be a more efficient way to do this – feel free to PR if you know how!
-      isActive: () =>
-        editor.isActive("paragraph") &&
-        !editor.isActive("bulletList") &&
-        !editor.isActive("orderedList"),
-    },
     {
       name: "Heading",
       icon: Heading,
@@ -51,6 +34,13 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
       command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
       isActive: () => editor.isActive("heading", { level: 3 }),
     },
+    {
+      name: "Text",
+      icon: TextIcon,
+      command: () =>
+        editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
+      isActive: () => editor.isActive("paragraph"),
+    },
     {
       name: "Quote",
       icon: TextQuote,
@@ -63,24 +53,6 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
           .run(),
       isActive: () => editor.isActive("blockquote"),
     },
-    {
-      name: "Code",
-      icon: Code,
-      command: () => editor.chain().focus().toggleCodeBlock().run(),
-      isActive: () => editor.isActive("codeBlock"),
-    },
-    {
-      name: "Bullet List",
-      icon: ListOrdered,
-      command: () => editor.chain().focus().toggleBulletList().run(),
-      isActive: () => editor.isActive("bulletList"),
-    },
-    {
-      name: "Numbered List",
-      icon: ListOrdered,
-      command: () => editor.chain().focus().toggleOrderedList().run(),
-      isActive: () => editor.isActive("orderedList"),
-    },
   ];
 
   const activeItem = items.filter((item) => item.isActive()).pop() ?? {
@@ -93,6 +65,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
         type="button"
         className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
         onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
       >
         <span>{activeItem?.name}</span>
         <ChevronDown className="h-4 w-4" />
diff --git a/drizzle/seed.ts b/drizzle/seed.ts
index ce795e56..256941d7 100644
--- a/drizzle/seed.ts
+++ b/drizzle/seed.ts
@@ -9,20 +9,6 @@ import { drizzle, type PostgresJsDatabase } from "drizzle-orm/postgres-js";
 import postgres from "postgres";
 
 const DATABASE_URL = process.env.DATABASE_URL || "";
-// These can be removed in a follow on PR. Until this hits main we cant add E2E_USER_* stuff to the env.
-const E2E_USER_ONE_SESSION_ID =
-  process.env.E2E_USER_ONE_SESSION_ID || "df8a11f2-f20a-43d6-80a0-a213f1efedc1";
-const E2E_USER_ONE_ID =
-  process.env.E2E_USER_ONE_ID || "8e3179ce-f32b-4d0a-ba3b-234d66b836ad";
-const E2E_USER_ONE_EMAIL =
-  process.env.E2E_USER_ONE_EMAIL || "e2e-user-one@codu.co";
-
-const E2E_USER_TWO_SESSION_ID =
-  process.env.E2E_USER_TWO_SESSION_ID || "10134766-bc6c-4b52-83d7-46ec0a4cb95d";
-const E2E_USER_TWO_ID =
-  process.env.E2E_USER_TWO_ID || "a15a104a-0e34-4101-8800-ed25c9231345";
-const E2E_USER_TWO_EMAIL =
-  process.env.E2E_USER_TWO_EMAIL || "e2e-user-two@codu.co";
 
 if (!DATABASE_URL) {
   throw new Error("DATABASE_URL is not set");
@@ -124,62 +110,6 @@ ${chance.paragraph()}
     return users;
   };
 
-  const seedE2EUser = async (email: string, id: string, name: string) => {
-    const [existingE2EUser] = await db
-      .selectDistinct()
-      .from(user)
-      .where(eq(user.id, id));
-
-    if (existingE2EUser) {
-      console.log("E2E Test user already exists. Skipping creation");
-      return existingE2EUser;
-    }
-
-    const userData = {
-      id: id,
-      username: `${name.split(" ").join("-").toLowerCase()}-${chance.integer({
-        min: 0,
-        max: 999,
-      })}`,
-      name,
-      email,
-      image: `https://robohash.org/${encodeURIComponent(name)}?bgset=bg1`,
-      location: chance.country({ full: true }),
-      bio: chance.sentence({ words: 10 }),
-      websiteUrl: chance.url(),
-    };
-    const [createdUser] = await db.insert(user).values(userData).returning();
-    return createdUser;
-  };
-
-  const seedE2EUserSession = async (userId: string, sessionToken: string) => {
-    const [existingE2EUserSession] = await db
-      .selectDistinct()
-      .from(session)
-      .where(eq(session.sessionToken, sessionToken));
-
-    if (existingE2EUserSession) {
-      console.log("E2E Test session already exists. Skipping creation");
-      return existingE2EUserSession;
-    }
-
-    try {
-      const currentDate = new Date();
-
-      return await db
-        .insert(session)
-        .values({
-          userId,
-          sessionToken,
-          // Set session to expire in 6 months.
-          expires: new Date(currentDate.setMonth(currentDate.getMonth() + 6)),
-        })
-        .returning();
-    } catch (err) {
-      console.log(err);
-    }
-  };
-
   const userData = generateUserData();
 
   const addUserData = async () => {
@@ -255,19 +185,6 @@ ${chance.paragraph()}
 
     try {
       await addUserData();
-      const userOne = await seedE2EUser(
-        E2E_USER_ONE_EMAIL,
-        E2E_USER_ONE_ID,
-        "E2E Test User One",
-      );
-      const userTwo = await seedE2EUser(
-        E2E_USER_TWO_EMAIL,
-        E2E_USER_TWO_ID,
-        "E2E Test User Two",
-      );
-
-      await seedE2EUserSession(userOne.id, E2E_USER_ONE_SESSION_ID);
-      await seedE2EUserSession(userTwo.id, E2E_USER_TWO_SESSION_ID);
     } catch (error) {
       console.log("Error:", error);
     }
diff --git a/e2e/constants/constants.ts b/e2e/constants/constants.ts
new file mode 100644
index 00000000..c5d853ac
--- /dev/null
+++ b/e2e/constants/constants.ts
@@ -0,0 +1,12 @@
+export const articleContent =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.";
+
+export const articleExcerpt = "Lorem ipsum dolor sit amet";
+
+export const E2E_USER_ONE_EMAIL = "e2e@codu.co";
+export const E2E_USER_ONE_ID = "8e3179ce-f32b-4d0a-ba3b-234d66b836ad";
+export const E2E_USER_ONE_SESSION_ID = "df8a11f2-f20a-43d6-80a0-a213f1efedc1";
+
+export const E2E_USER_TWO_EMAIL = "e2e-user-two@codu.co";
+export const E2E_USER_TWO_ID = "a15a104a-0e34-4101-8800-ed25c9231345";
+export const E2E_USER_TWO_SESSION_ID = "10134766-bc6c-4b52-83d7-46ec0a4cb95d";
diff --git a/e2e/constants/index.ts b/e2e/constants/index.ts
new file mode 100644
index 00000000..b04bfcf7
--- /dev/null
+++ b/e2e/constants/index.ts
@@ -0,0 +1 @@
+export * from "./constants";
diff --git a/e2e/setup.ts b/e2e/setup.ts
index 1eb86d9f..f18f308d 100644
--- a/e2e/setup.ts
+++ b/e2e/setup.ts
@@ -1,24 +1,23 @@
-import dotenv from "dotenv";
 import postgres from "postgres";
 import { drizzle } from "drizzle-orm/postgres-js";
-import { post, comment } from "@/server/db/schema";
-import { articleContent, articleExcerpt } from "./utils";
-
-dotenv.config(); // Load .env file contents into process.env
+import { post, comment, session, user } from "@/server/db/schema";
+import {
+  articleContent,
+  articleExcerpt,
+  E2E_USER_ONE_EMAIL,
+  E2E_USER_ONE_ID,
+  E2E_USER_ONE_SESSION_ID,
+  E2E_USER_TWO_EMAIL,
+  E2E_USER_TWO_ID,
+  E2E_USER_TWO_SESSION_ID,
+} from "./constants";
+import { eq } from "drizzle-orm";
+import { nanoid } from "nanoid";
 
 export const setup = async () => {
-  // Dynamically import nanoid
-  const { nanoid } = await import("nanoid");
-
-  if (
-    !process.env.DATABASE_URL ||
-    !process.env.E2E_USER_ONE_ID ||
-    !process.env.E2E_USER_TWO_ID
-  ) {
-    throw new Error("Missing env variables for DB clean up script");
-  }
-
-  const db = drizzle(postgres(process.env.DATABASE_URL as string));
+  const db = drizzle(
+    postgres("postgresql://postgres:secret@127.0.0.1:5432/postgres"),
+  );
 
   const addE2EArticleAndComment = async (
     authorId: string,
@@ -96,13 +95,90 @@ export const setup = async () => {
       .returning();
   };
 
+  const seedE2EUser = async (
+    email: string,
+    id: string,
+    name: string,
+    username: string,
+  ) => {
+    const [existingE2EUser] = await db
+      .selectDistinct()
+      .from(user)
+      .where(eq(user.id, id));
+
+    if (existingE2EUser) {
+      console.log("E2E Test user already exists. Skipping creation");
+      return existingE2EUser;
+    }
+
+    const userData = {
+      id: id,
+      username,
+      name,
+      email,
+      image: `https://robohash.org/${encodeURIComponent(name)}?bgset=bg1`,
+      location: "Ireland",
+      bio: "Hi I am an robot",
+      websiteUrl: "codu.co",
+    };
+    const [createdUser] = await db.insert(user).values(userData).returning();
+    return createdUser;
+  };
+
+  const seedE2EUserSession = async (userId: string, sessionToken: string) => {
+    const [existingE2EUserSession] = await db
+      .selectDistinct()
+      .from(session)
+      .where(eq(session.sessionToken, sessionToken));
+
+    if (existingE2EUserSession) {
+      console.log("E2E Test session already exists. Skipping creation");
+      return existingE2EUserSession;
+    }
+
+    try {
+      const currentDate = new Date();
+
+      return await db
+        .insert(session)
+        .values({
+          userId,
+          sessionToken,
+          // Set session to expire in 6 months.
+          expires: new Date(currentDate.setMonth(currentDate.getMonth() + 6)),
+        })
+        .returning();
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   try {
-    console.log("creating articles");
+    console.log("Creating users");
+    const [userOne, userTwo] = await Promise.all([
+      seedE2EUser(
+        E2E_USER_ONE_EMAIL,
+        E2E_USER_ONE_ID,
+        "E2E Test User One",
+        "e2e-test-user-one-111",
+      ),
+      seedE2EUser(
+        E2E_USER_TWO_EMAIL,
+        E2E_USER_TWO_ID,
+        "E2E Test User Two",
+        "e2e-test-user-two-222",
+      ),
+    ]);
+
+    console.log("Creating sessions");
+    await Promise.all([
+      seedE2EUserSession(userOne.id, E2E_USER_ONE_SESSION_ID),
+      seedE2EUserSession(userTwo.id, E2E_USER_TWO_SESSION_ID),
+    ]);
+
+    console.log("Creating articles");
+    await addE2EArticleAndComment(E2E_USER_ONE_ID, E2E_USER_TWO_ID);
 
-    await addE2EArticleAndComment(
-      process.env.E2E_USER_ONE_ID as string,
-      process.env.E2E_USER_TWO_ID as string,
-    );
     console.log("DB setup successful");
   } catch (err) {
     console.log("Error while setting up DB before E2E test run", err);
diff --git a/e2e/teardown.ts b/e2e/teardown.ts
index d5b1a416..bb06e6a0 100644
--- a/e2e/teardown.ts
+++ b/e2e/teardown.ts
@@ -1,33 +1,22 @@
-import dotenv from "dotenv";
 import postgres from "postgres";
-
-dotenv.config(); // Load .env file contents into process.env
+import { E2E_USER_ONE_ID, E2E_USER_TWO_ID } from "./constants";
 
 export const teardown = async () => {
   try {
-    if (
-      !process.env.DATABASE_URL ||
-      !process.env.E2E_USER_ONE_ID ||
-      !process.env.E2E_USER_TWO_ID
-    )
-      throw new Error("Missing env variables for DB clean up script");
-    const db = postgres(process.env.DATABASE_URL as string);
-
-    // the test suit adds posts created by the E2E users. We want to remove them between test runs
-    await db`
-    DELETE FROM "Post" WHERE "userId" = ${process.env.E2E_USER_ONE_ID as string}
-  `;
-    await db`
-    DELETE FROM "Post" WHERE "userId" = ${process.env.E2E_USER_TWO_ID as string}
-  `;
-    // the test suit adds comments created by the E2E user. We want to remove them between test runs
-    await db`
-    DELETE FROM "Comment" WHERE "userId" = ${process.env.E2E_USER_ONE_ID as string}
-  `;
-    await db`
-    DELETE FROM "Comment" WHERE "userId" = ${process.env.E2E_USER_TWO_ID as string}
-  `;
+    const db = postgres("postgresql://postgres:secret@127.0.0.1:5432/postgres");
 
+    await Promise.all([
+      // the test suit adds posts created by the E2E users. We want to remove them between test runs
+      db`
+    DELETE FROM "Post" WHERE "userId" IN(${E2E_USER_ONE_ID}, ${E2E_USER_TWO_ID})
+  `,
+      // the test suite adds comments created by the E2E user. We want to remove them between test runs
+      db`
+    DELETE FROM "Comment" WHERE "userId" IN(${E2E_USER_ONE_ID}, ${E2E_USER_TWO_ID})
+  `,
+      db`
+    DELETE FROM "user" WHERE "id" IN(${E2E_USER_ONE_ID}, ${E2E_USER_TWO_ID})`,
+    ]);
     console.log("DB clean up successful");
   } catch (err) {
     console.log("Error while cleaning up DB after E2E test run", err);
diff --git a/e2e/utils/utils.ts b/e2e/utils/utils.ts
index 1d918d92..408f16e6 100644
--- a/e2e/utils/utils.ts
+++ b/e2e/utils/utils.ts
@@ -1,13 +1,12 @@
 import { expect, Page } from "@playwright/test";
+import { E2E_USER_ONE_SESSION_ID, E2E_USER_TWO_SESSION_ID } from "../constants";
 
 export const loggedInAsUserOne = async (page: Page) => {
   try {
-    expect(process.env.E2E_USER_ONE_SESSION_ID).toBeDefined();
-
     await page.context().addCookies([
       {
         name: "next-auth.session-token",
-        value: process.env.E2E_USER_ONE_SESSION_ID as string,
+        value: E2E_USER_ONE_SESSION_ID,
         domain: "localhost",
         path: "/",
         sameSite: "Lax",
@@ -26,14 +25,12 @@ export const loggedInAsUserOne = async (page: Page) => {
 
 export const loggedInAsUserTwo = async (page: Page) => {
   try {
-    expect(process.env.E2E_USER_TWO_SESSION_ID).toBeDefined();
-
     await page.context().clearCookies();
 
     await page.context().addCookies([
       {
         name: "next-auth.session-token",
-        value: process.env.E2E_USER_TWO_SESSION_ID as string,
+        value: E2E_USER_TWO_SESSION_ID,
         domain: "localhost",
         path: "/",
         sameSite: "Lax",
diff --git a/sample.env b/sample.env
index c3602d3a..b3601bc9 100644
--- a/sample.env
+++ b/sample.env
@@ -4,9 +4,3 @@ GITLAB_ID= ### Replace with GitLab OAuth ID (https://gitlab.com/-/user_settings
 GITLAB_SECRET= ### Replace with GitLab OAuth Secret (https://gitlab.com/-/user_settings/applications)
 NEXTAUTH_URL=http://localhost:3000/api/auth
 DATABASE_URL=postgresql://postgres:secret@127.0.0.1:5432/postgres
-
-E2E_USER_EMAIL=e2e@codu.co
-E2E_USER_ONE_ID=8e3179ce-f32b-4d0a-ba3b-234d66b836ad
-E2E_USER_TWO_ID=a15a104a-0e34-4101-8800-ed25c9231345
-E2E_USER_ONE_SESSION_ID=df8a11f2-f20a-43d6-80a0-a213f1efedc1
-E2E_USER_TWO_SESSION_ID=10134766-bc6c-4b52-83d7-46ec0a4cb95d
diff --git a/utils/flags.ts b/utils/flags.ts
index 005587d3..a6f9cc51 100644
--- a/utils/flags.ts
+++ b/utils/flags.ts
@@ -2,6 +2,7 @@ import { posthog } from "posthog-js";
 
 export const FEATURE_FLAGS = {
   FEATURE_FLAG_TEST: "feature-flag-test",
+  COURSE_VIDEO: "course-video",
   JOBS: "jobs",
   // Add more feature flags as needed
 } as const;

From 82227552e610d143ccdb078f4fdd10bd943e997c Mon Sep 17 00:00:00 2001
From: JohnAllenTech <46611809+JohnAllenTech@users.noreply.github.com>
Date: Fri, 1 Nov 2024 10:35:01 -0600
Subject: [PATCH 6/6] chore: resolving merge issues

---
 e2e/setup.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/e2e/setup.ts b/e2e/setup.ts
index f18f308d..36382a62 100644
--- a/e2e/setup.ts
+++ b/e2e/setup.ts
@@ -12,13 +12,14 @@ import {
   E2E_USER_TWO_SESSION_ID,
 } from "./constants";
 import { eq } from "drizzle-orm";
-import { nanoid } from "nanoid";
 
 export const setup = async () => {
+  // Dynamically import nanoid
+  const { nanoid } = await import("nanoid");
+
   const db = drizzle(
     postgres("postgresql://postgres:secret@127.0.0.1:5432/postgres"),
   );
-
   const addE2EArticleAndComment = async (
     authorId: string,
     commenterId: string,