Fix/e2e tests

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

e2e/articles.spec.ts

@@ -13,6 +13,7 @@ test.describe("Articles", () => {
       (articles) => articles.length,
     );
 
+    await page.getByText("Code Of Conduct").scrollIntoViewIfNeeded();
     await page.evaluate(() => {
       window.scrollTo(0, document.body.scrollHeight);
     });

e2e/home.spec.ts

@@ -21,7 +21,7 @@ test.describe("Confirm homepage content", () => {
     await page.goto("http://localhost:3000/");
 
     const elementVisible = await page
-      .locator('text="Recommended topics"')
+      .locator('text="Popular topics"')
       .isVisible();
 
     if (isMobile) {

e2e/login.spec.ts

@@ -1,18 +1,8 @@
 import { test, expect } from "playwright/test";
 
-test.afterEach(async ({ page }) => {
-  // Sign out the user after all tests are done
-  await page.goto("http://localhost:3000/api/auth/signout");
-  await page.getByRole("button", { name: "Sign out" }).click();
-  await expect(page.locator("#submitButton")).toBeHidden();
-});
-
-test.beforeEach(async ({ page }) => {
-  await page.goto("http://localhost:3000/get-started");
-});
-
 test.describe("Login Page", () => {
   test("should display the login button", async ({ page }) => {
+    await page.goto("http://localhost:3000/get-started");
     const loginButton = page.getByRole("button", {
       name: "Login with GitHub",
     });
@@ -22,8 +12,10 @@ test.describe("Login Page", () => {
   test("should navigate to GitHub login page when clicking the login button", async ({
     page,
   }) => {
+    await page.goto("http://localhost:3000/get-started");
+
     const button = page.getByRole("button", {
-      name: "Login with GitHub",
+      name: "Continue with GitHub",
     });
 
     await button.click();

package.json

@@ -73,7 +73,7 @@
     "atropos": "^2.0.2",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
-    "drizzle-orm": "^0.31.2",
+    "drizzle-orm": "^0.33.0",
     "fathom-client": "^3.7.2",
     "framer-motion": "^10.18.0",
     "highlight.js": "^11.10.0",
@@ -107,7 +107,7 @@
   },
   "devDependencies": {
     "@axe-core/react": "^4.9.0",
-    "@playwright/test": "^1.43.1",
+    "@playwright/test": "^1.47.2",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/chance": "^1.1.6",

playwright.config.ts

@@ -51,7 +51,7 @@ export default defineConfig({
     /* Test against mobile viewports. */
     {
       name: "Mobile Chrome",
-      use: { ...devices["Pixel 5"] },
+      use: { ...devices["iPhone 15"] },
     },
     // {
     //   name: 'Mobile Safari',

server/api/router/post.ts

@@ -351,7 +351,17 @@ export const postRouter = createTRPCRouter({
             cursor ? paginationMapping[sort].cursor : undefined,
           ),
         )
-        .groupBy(post.id, bookmarked.id, user.id)
+        .groupBy(
+          post.id,
+          post.slug,
+          post.title,
+          post.excerpt,
+          post.published,
+          post.readTimeMins,
+          post.likes,
+          bookmarked.id,
+          user.id,
+        )
         .limit(limit + 1)
         .orderBy(paginationMapping[sort].orderBy);