Delete comment test

.gitignore

@@ -5,4 +5,7 @@ node_modules
 /public/build
 .env
 
-db.sqlite3*
+db*.sqlite3*
+
+/cypress/videos
+/cypress/screenshots

README.md

@@ -12,6 +12,11 @@ There is a sequence of commands you need to run:
 4. `npm run migrate` to set up the database tables.
 5. `npm run dev` to run both the server and frontend.
 
+And if you want to run the E2E tests:
+
+6. Make a copy of the `db.sqlite3` file created by migration and name it `db-cypress.sqlite3`.
+7. `npm run dev:cypress` and `npm run cy:open` can be used to run the E2E tests.
+
 ## Project structure
 
 ```

app/components/FormWithConfirm.tsx

@@ -33,7 +33,12 @@ export function FormWithConfirm({
         <div className="stack md">
           <h2 className="text-sm">{dialogHeading}</h2>
           <div className="stack vertical md justify-center">
-            <Button form={id} variant="destructive" type="submit">
+            <Button
+              form={id}
+              variant="destructive"
+              type="submit"
+              data-cy="confirm-button"
+            >
               Delete
             </Button>
             <Button variant="outlined" onClick={closeDialog}>

app/db/models/plusSuggestions.server.ts

@@ -80,7 +80,8 @@ export interface FindVisibleForUser {
 
 export function findVisibleForUser(
   args: MonthYear & Pick<User, "plusTier">
-): FindVisibleForUser {
+): FindVisibleForUser | undefined {
+  if (!args.plusTier) return;
   return sortNewestPlayersToBeSuggestedFirst(
     mapFindVisibleForUserRowsToResult(findVisibleForUserStm.all(args))
   );

app/db/sql.ts

@@ -1,6 +1,8 @@
 import Database from "better-sqlite3";
 
-export const sql = new Database("db.sqlite3");
+export const sql = new Database(
+  process.env.NODE_ENV === "test" ? "db-cypress.sqlite3" : "db.sqlite3"
+);
 
 sql.pragma("journal_mode = WAL");
 sql.pragma("foreign_keys = ON");

app/routes/plus/suggestions.tsx

@@ -57,10 +57,12 @@ export const action: ActionFunction = async ({ request }) => {
     plusTier: user.plusTier,
   });
 
-  const targetSuggestion = Object.values(suggestions)
-    ?.flat()
-    .flatMap((u) => u.suggestions)
-    .find((s) => s.id === data.suggestionId);
+  const targetSuggestion = suggestions
+    ? Object.values(suggestions)
+        ?.flat()
+        .flatMap((u) => u.suggestions)
+        .find((s) => s.id === data.suggestionId)
+    : undefined;
 
   validate(targetSuggestion);
   validate(canDeleteComment({ user, author: targetSuggestion.author }));
@@ -222,7 +224,10 @@ function SuggestedUser({
         ) : null}
       </div>
       <details>
-        <summary className="plus__view-comments-action">
+        <summary
+          className="plus__view-comments-action"
+          data-cy="comments-summary"
+        >
           Comments ({suggested.suggestions.length})
         </summary>
         <div className="stack sm mt-2">
@@ -246,6 +251,7 @@ function SuggestedUser({
                       icon={<TrashIcon />}
                       variant="minimal-destructive"
                       aria-label="Delete comment"
+                      data-cy="delete-comment-button"
                     />
                   </FormWithConfirm>
                 ) : null}

cypress.json

@@ -1,5 +1,5 @@
 {
-  "baseUrl": "http://localhost:5800",
+  "baseUrl": "http://localhost:4455",
   "pluginsFile": false,
   "fixturesFolder": false
 }

cypress/integration/plus.spec.ts

@@ -13,7 +13,7 @@ describe("Plus suggestions page", () => {
     cy.contains("You are suggested");
   });
 
-  it("adds a comment", () => {
+  it.only("adds a comment and deletes one", () => {
     cy.auth();
     cy.visit(PLUS_SUGGESTIONS_PAGE);
     cy.getCy("plus2-radio").click();
@@ -24,5 +24,10 @@ describe("Plus suggestions page", () => {
     cy.getCy("submit-button").click();
 
     cy.contains("Cracked!");
+
+    cy.getCy("comments-summary").first().click();
+    cy.getCy("delete-comment-button").first().click();
+    cy.getCy("confirm-button").click();
+    cy.contains("Cracked!").should("not.exist");
   });
 });

cypress/support/index.ts

@@ -17,7 +17,7 @@ Cypress.Commands.add("getCy", (id) => {
 
 // TODO: make this a request instead... probably faster?
 Cypress.Commands.add("seed", () => {
-  cy.exec("npm run seed");
+  cy.exec("npm run seed:cypress");
 });
 
 Cypress.Commands.add("auth", (id = 1) => {

package-lock.json

@@ -33,6 +33,7 @@
         "@types/react-dom": "^18.0.5",
         "@typescript-eslint/eslint-plugin": "^5.26.0",
         "@typescript-eslint/parser": "^5.26.0",
+        "cross-env": "^7.0.3",
         "cypress": "^9.7.0",
         "eslint": "^8.16.0",
         "eslint-plugin-react": "^7.30.0",
@@ -3984,6 +3985,24 @@
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
       "dev": true
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -17071,6 +17090,15 @@
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
       "dev": true
     },
+    "cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.1"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",

package.json

@@ -5,11 +5,13 @@
   "scripts": {
     "build": "remix build",
     "deploy": "fly deploy --remote-only",
-    "dev": "remix dev",
+    "dev": "cross-env NODE_ENV=dev remix dev",
+    "dev:cypress": "cross-env NODE_ENV=test PORT=4455 remix dev",
     "start": "remix-serve build",
     "migrate": "node ./migrations/index.mjs",
     "migrate:reset": "node scripts/delete-db-files.mjs && npm run migrate",
     "seed": "node --experimental-specifier-resolution=node --loader ts-node/esm -r tsconfig-paths/register scripts/seed.ts",
+    "seed:cypress": "cross-env NODE_ENV=test npm run seed",
     "lint:ts": "eslint . --ext .ts,.tsx",
     "lint:styles": "stylelint \"app/styles/**/*.css\"",
     "lf": "npm run typecheck && npm run lint:styles -- --fix && npm run lint:ts -- --fix && npm run prettier:write",
@@ -18,6 +20,7 @@
     "typecheck": "tsc --noEmit",
     "test:unit": "uvu -r tsm -r tsconfig-paths/register -i cypress",
     "cy:open": "cypress open",
+    "cy:run": "cypress run",
     "checks": "npm run lint:styles && npm run lint:ts && npm run prettier:check && npm run typecheck"
   },
   "dependencies": {
@@ -48,6 +51,7 @@
     "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^5.26.0",
     "@typescript-eslint/parser": "^5.26.0",
+    "cross-env": "^7.0.3",
     "cypress": "^9.7.0",
     "eslint": "^8.16.0",
     "eslint-plugin-react": "^7.30.0",