Add e2e tests for articles and fix homepage test (#690)

* Add e2e tests for articles and fix homepage test

.github/workflows/playwright.yml

@@ -24,6 +24,8 @@ jobs:
         if: ${{ env.DATABASE_URL == '' }}
         run: echo "The secret \"DATABASE_URL\" has not been made; echo please go to \"settings \> secrets \> actions\" to create it
       - name: Run Playwright tests
+        env:
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}
         run: npx playwright test
       - uses: actions/upload-artifact@v3
         if: always()

.gitignore

@@ -60,4 +60,12 @@ ssmSetup.zsh
 .sentryclirc
 
 # Generated files
-.swc
+.swc
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/articles.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from "playwright/test";
+
+test.describe("Articles", () => {
+  test("Should load more articles when scrolling to the end of the page", async ({
+    page,
+  }) => {
+    await page.goto("http://localhost:3000/articles");
+    // Waits for articles to be loaded
+    await page.waitForSelector("article");
+
+    const initialArticleCount = await page.$$eval(
+      "article",
+      (articles) => articles.length,
+    );
+
+    await page.evaluate(() => {
+      window.scrollTo(0, document.body.scrollHeight);
+    });
+
+    await expect(page.locator(".animate-pulse")).toBeVisible();
+    await expect(page.locator(".animate-pulse")).not.toBeVisible();
+
+    const finalArticleCount = await page.$$eval(
+      "article",
+      (articles) => articles.length,
+    );
+
+    expect(finalArticleCount).toBeGreaterThan(initialArticleCount);
+  });
+});

e2e/home.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from "@playwright/test";
 
 test.describe("Confirm homepage content", () => {
   test("Shared content", async ({ page }) => {
-    await page.goto("/");
+    await page.goto("http://localhost:3000/");
     // Check headers
 
     await expect(page.locator("h1")).toContainText("A space for coders");
@@ -18,7 +18,7 @@ test.describe("Confirm homepage content", () => {
   });
 
   test("Different devices", async ({ page, isMobile }) => {
-    await page.goto("/");
+    await page.goto("http://localhost:3000/");
 
     const elementVisible = await page
       .locator('text="Recommended topics"')

playwright.config.ts

@@ -1,79 +1,77 @@
-import { type PlaywrightTestConfig, devices } from "@playwright/test";
-import path from "path";
+import { defineConfig, devices } from "@playwright/test";
 
-// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
-const baseURL =
-  process.env.BASE_URL || `http://localhost:${process.env.PORT || 3000}`;
-
-// Reference: https://playwright.dev/docs/test-configuration
-const config: PlaywrightTestConfig = {
-  // Timeout per test
-  timeout: 30 * 1000,
-  // Test directory
-  testDir: path.join(__dirname, "e2e"),
-  // If a test fails, retry it additional 2 times
-  retries: 2,
-  // Artifacts folder where screenshots, videos, and traces are stored.
-  outputDir: "e2e-results/",
-
-  // Run your local dev server before starting the tests:
-  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
-  webServer: {
-    command: "npm run dev",
-    url: baseURL,
-    timeout: 120 * 1000,
-    reuseExistingServer: !!process.env.CI,
-  },
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
 
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./e2e",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-    // Use baseURL so to make navigations relative.
-    // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
-    baseURL,
-
-    headless: true,
-
-    // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
-    // More information: https://playwright.dev/docs/trace-viewer
-    trace: "retry-with-trace",
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
 
-    // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
-    // contextOptions: {
-    //   ignoreHTTPSErrors: true,
-    // },
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
   },
 
+  /* Configure projects for major browsers */
   projects: [
     {
-      name: "Desktop Chrome",
-      use: {
-        ...devices["Desktop Chrome"],
-      },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
     },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+
+    /* Test against mobile viewports. */
     // {
-    //   name: 'Desktop Firefox',
-    //   use: {
-    //     ...devices['Desktop Firefox'],
-    //   },
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
     // },
     // {
-    //   name: 'Desktop Safari',
-    //   use: {
-    //     ...devices['Desktop Safari'],
-    //   },
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
     // },
-    // Test against mobile viewports.
-    {
-      name: "Mobile Chrome",
-      use: {
-        ...devices["Pixel 5"],
-      },
-    },
+
+    /* Test against branded browsers. */
     // {
-    //   name: 'Mobile Safari',
-    //   use: devices['iPhone 12'],
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
     // },
   ],
 
-  reporter: [["html", { outputFolder: "e2e-report" }]],
-};
-export default config;
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm run dev",
+    url: "http://127.0.0.1:3000",
+    reuseExistingServer: !process.env.CI,
+  },
+});