e2e: more descriptive tests

.eslintrc.js

@@ -2,6 +2,25 @@
 const fs = require("fs");
 
 module.exports = {
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx", "*.spec.ts"], // Your TypeScript files extension
+
+      // As mentioned in the comments, you should extend TypeScript plugins here,
+      // instead of extending them outside the `overrides`.
+      // If you don't want to extend any rules, you don't need an `extends` attribute.
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+      ],
+
+      parserOptions: {
+        project: ["./tsconfig.json"], // Specify it only for TypeScript files
+      },
+    },
+  ],
   root: true,
   extends: [
     "next",
@@ -18,6 +37,7 @@ module.exports = {
     },
   },
   rules: {
+    "@typescript-eslint/no-floating-promises": "error",
     "testing-library/prefer-screen-queries": "off",
     "@next/next/no-html-link-for-pages": "off",
     "@typescript-eslint/no-unused-vars": [

.github/workflows/dependabot_merge.yml

@@ -1,5 +1,7 @@
 name: Auto Merge Dependabot
 on: [pull_request]
+permissions: 
+  pull-requests: write
 jobs:
   merge:
     runs-on: ubuntu-latest

.github/workflows/playwright.yml

@@ -1,11 +1,24 @@
-name: Playwright Tests
+name: End-to-end tests and smoke tests
 on:
   push:
-  pull_request:
   workflow_dispatch:
 jobs:
-  test:
-    timeout-minutes: 60
+  report-pending:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Report pending status
+      uses: Sibz/github-status-action@v1
+      with: 
+        authToken: ${{secrets.GITHUB_TOKEN}}
+        context: 'test'
+        description: 'Running'
+        state: 'pending'
+  playwright:
+    needs: report-pending
+    strategy:
+        matrix:
+          suite: ["desktop", "mobile", "iphone", "webkit", "brand"]
+    timeout-minutes: 120
     services:
       # Label used to access the service container
       mongo:
@@ -14,6 +27,33 @@ jobs:
         ports:
           - 27017:27017
     runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: echo "node_version=$(cat .github/nodejs.version)" >> $GITHUB_ENV
+      - name: "use node ${{ env.node_version }}"
+        uses: actions/setup-node@v3
+        with:
+          node-version: "${{ env.node_version }}"
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build app
+        run: yarn build
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn e2e:${{ matrix.suite }}
+        env:
+          MONGO_URI: mongodb://127.0.0.1:27017
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report[${{ matrix.suite }}]
+          path: playwright-report/
+          retention-days: 90
+  storybook:
+    needs: report-pending
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - run: echo "node_version=$(cat .github/nodejs.version)" >> $GITHUB_ENV
@@ -39,14 +79,27 @@ jobs:
           name: storybook-static
           path: storybook-static/
           retention-days: 90
-      - name: Run Playwright tests
-        run: yarn playwright test
-        env:
-          MONGO_URI: mongodb://127.0.0.1:27017
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 90
-
+  report-fail:
+    needs: [playwright, storybook]
+    if: ${{ failure() }}
+    runs-on: ubuntu-latest
+    steps:
+    - name: Report failure status
+      uses: Sibz/github-status-action@v1
+      with: 
+        authToken: ${{secrets.GITHUB_TOKEN}}
+        context: 'test'
+        description: 'Failed'
+        state: 'failure'
+  report-success:
+    needs: [playwright, storybook]
+    if: ${{ success() }}
+    runs-on: ubuntu-latest
+    steps:
+    - name: Report success status # You would run your tests before this using the output to set state/desc
+      uses: Sibz/github-status-action@v1
+      with: 
+        authToken: ${{secrets.GITHUB_TOKEN}}
+        context: 'test'
+        description: 'Passed'
+        state: 'success'

app/api/check/route.ts

@@ -86,7 +86,7 @@ export async function POST(request: Request) {
       );
     } catch (e) {
       console.error(e);
-      client.close();
+      await client.close();
       span.addEvent("client closed - error");
       return Response.json({}, { status: 400 });
     } finally {

app/api/image/[img]/get.test.ts

@@ -14,7 +14,7 @@ beforeAll(() => {
 });
 
 describe("/api/image", () => {
-  it("returns image with all correct data", async () => {
+  it("returns image with all correct data", () => {
     const { req } = createMocks({
       method: "GET",
       url: "http://localhost:3000/api/image/image.jpg",
@@ -23,12 +23,12 @@ describe("/api/image", () => {
 
     Date.now = jest.fn(() => 1);
     req.json = jest.fn().mockResolvedValue(req.body);
-    const response = await GET(req as unknown as Request, { params: { img: "image.jpg" } });
+    const response = GET(req as unknown as Request, { params: { img: "image.jpg" } });
 
     expect(response.status).toBe(200);
     expect(response.headers.get("content-type")).toBe("image/jpeg");
   });
-  it("returns abstract bytestream with missing content-type", async () => {
+  it("returns abstract bytestream with missing content-type", () => {
     const { req } = createMocks({
       method: "GET",
       url: "http://localhost:3000/api/image/image.exe",
@@ -37,12 +37,12 @@ describe("/api/image", () => {
 
     Date.now = jest.fn(() => 1);
     req.json = jest.fn().mockResolvedValue(req.body);
-    const response = await GET(req as unknown as Request, { params: { img: "image.exe" } });
+    const response = GET(req as unknown as Request, { params: { img: "image.exe" } });
 
     expect(response.status).toBe(200);
     expect(response.headers.get("content-type")).toBe("application/octet-stream");
   });
-  it("returns 404 with missing file", async () => {
+  it("returns 404 with missing file", () => {
     //@ts-expect-error - we need to set the session cookie globally, it's used in a different file I don't even import, and there ARE no means of communication between them.
     global.session = "652eb26557e45bcc221d51d5";
     const { req } = createMocks({
@@ -53,7 +53,7 @@ describe("/api/image", () => {
 
     Date.now = jest.fn(() => 1);
     req.json = jest.fn().mockResolvedValue(req.body);
-    const response = await GET(req as unknown as Request, { params: { img: "" } });
+    const response = GET(req as unknown as Request, { params: { img: "" } });
 
     expect(response.status).toBe(404);
   });

app/api/image/[img]/route.ts

@@ -2,7 +2,7 @@ import mime from "mime";
 import fs from "fs";
 import path from "path";
 
-export async function GET(_request: Request, { params }: { params: { img: string } }) {
+export function GET(_request: Request, { params }: { params: { img: string } }) {
   if (!params.img) {
     return Response.json({ error: "missing file" }, { status: 404 });
   }

app/api/login/route.ts

@@ -48,14 +48,14 @@ export async function POST(request: Request) {
       const { insertedId } = await coll_sessions.insertOne(session);
       span.addEvent("session inserted");
       span.setAttribute("session", insertedId.toHexString());
-      client.close();
+      await client.close();
       span.addEvent("client closed");
       cookies().set("session", insertedId.toHexString(), { expires: Date.now() + 3600_000 });
 
       return Response.json({ session: insertedId } as responseJSON, { status: 200, statusText: "Logged in" });
     } catch (e) {
       console.error(e);
-      client.close();
+      await client.close();
       span.addEvent("client closed - error");
 
       return Response.json({}, { status: 400 });

app/api/logout/route.test.ts

@@ -15,15 +15,15 @@ beforeAll(() => {
 });
 
 describe("/api/login", () => {
-  it("logs in with correct credentials", async () => {
+  it("logs in with correct credentials", () => {
     const { req } = createMocks({
       method: "GET",
       body: {},
     });
     req.json = jest.fn().mockResolvedValue(req.body);
 
-    await GET();
-    expect(console.info).toBeCalledWith("/");
-    expect(console.warn).toBeCalledWith("session", "");
+    GET();
+    expect(console.info).toHaveBeenCalledWith("/");
+    expect(console.warn).toHaveBeenCalledWith("session", "");
   });
 });

app/api/post/post.test.ts

@@ -13,7 +13,7 @@ beforeAll(() => {
 });
 
 describe("/api/post", () => {
-  it("renders dynamically", async () => {
+  it("renders dynamically", () => {
     expect(dynamic).toBeTruthy();
   });
   it("reacts to no data submitted", async () => {

app/api/register/route.ts

@@ -42,12 +42,12 @@ export async function POST(request: Request) {
       span.setAttribute("id", res.insertedId.toHexString());
       span.setAttribute("data_id", res2.insertedId.toHexString());
 
-      client.close();
+      await client.close();
       span.addEvent("client closed");
       return Response.json({ id: res.insertedId }, { status: 201 });
     } catch (e) {
       console.error(e);
-      client.close();
+      await client.close();
       span.addEvent("client closed - error");
       return Response.json({}, { status: 400 });
     } finally {

app/api/upload/route.ts

@@ -29,7 +29,7 @@ export async function POST(request: NextRequest) {
 
   try {
     const uniqueSuffix = `${Date.now()}-${Math.round(Math.random() * 1e12)}`;
-    const filename = `${uniqueSuffix}.${mime.getExtension(file.type)}`;
+    const filename = `${uniqueSuffix}.${mime.getExtension(file.type) || ""}`;
     await writeFile(`${uploadDir}/${relativeUploadDir}-${filename}`, buffer);
     return NextResponse.json({ fileUrl: `${relativeUploadDir}-${filename}` });
   } catch (e) {

app/in/PostView/index.tsx

@@ -33,16 +33,30 @@ export const PostView = ({
         if (page === pages) {
           setpage(page + 1);
 
-          fetch(`${url}page=${page + 1}`).then((res) => {
-            res.json().then((temp) => {
-              const json = temp as responseJSON;
-              setposts([...posts, ...json.posts]);
-              setpages(pages + 1);
-              if (!json.posts.length) {
-                setend(true);
-              }
-            });
-          });
+          fetch(`${url}page=${page + 1}`).then(
+            (res) => {
+              res.json().then(
+                (temp) => {
+                  const json = temp as responseJSON;
+                  setposts([...posts, ...json.posts]);
+                  setpages(pages + 1);
+                  if (!json.posts.length) {
+                    setend(true);
+                  }
+                },
+                () => {
+                  setTimeout(() => {
+                    el();
+                  }, 1000);
+                }
+              );
+            },
+            () => {
+              setTimeout(() => {
+                el();
+              }, 1000);
+            }
+          );
         }
       }
     };

app/in/user/DescEdit/index.tsx

@@ -48,11 +48,17 @@ export const DescriptionEditor = ({
               </button>
               <button
                 className="rounded-md bg-primary-500 p-2 text-white"
-                onClick={async () => {
+                onClick={() => {
                   if (!value) return;
                   setAlertMessage({ type: "loading", message: "Please wait..." });
-                  await submit(value, session);
-                  window.location.reload();
+                  submit(value, session).then(
+                    () => {
+                      window.location.reload();
+                    },
+                    () => {
+                      setAlertMessage({ type: "error", message: "Something went wrong" });
+                    }
+                  );
                 }}
               >
                 Submit

app/in/user/[id]/page.tsx

@@ -38,8 +38,8 @@ const Page = async ({ params }: { params: { id: string } }) => {
   if (user) {
     try {
       posts = (await (
-        await fetch(`http://${headers().get("host")}/api/post?user=${user.user._id}`, {
-          headers: { Cookie: `session=${sessionID}` },
+        await fetch(`http://${headers().get("host") || ""}/api/post?user=${user.user._id.toString()}`, {
+          headers: { Cookie: `session=${sessionID.toString()}` },
         })
       ).json()) as responseJSON;
       span.setAttribute("posts found", true);
@@ -103,7 +103,7 @@ const Page = async ({ params }: { params: { id: string } }) => {
                       voted={me.data.voted}
                       session={sessionID as unknown as ObjectId}
                       initPosts={posts.posts}
-                      url={`/api/post?user=${user.user._id}&`}
+                      url={`/api/post?user=${user.user._id.toString()}&`}
                     />
                   </div>
                 ) : (

app/in/user/page.tsx

@@ -77,7 +77,7 @@ const Page = async () => {
             uploadedCallback={async (img: string) => {
               "use server";
               console.log("uploading image - " + img);
-              return await submitAddImage(img, sessionID);
+              await submitAddImage(img, sessionID);
             }}
           />
           <div className="m-4 grid w-fit grid-cols-3 gap-4">