chore: cypress tests

.github/workflows/ci.yml

@@ -55,7 +55,7 @@ jobs:
         uses: bahmutov/npm-install@v1
 
       - name: Test
-        run: npm run test -- --ci --coverage --maxWorkers=2
+        run: npm run test
 
   lint:
     name: Linter
@@ -73,4 +73,4 @@ jobs:
         uses: bahmutov/npm-install@v1
 
       - name: Lint
-        run: npm run lint
+        run: npm run lint

apps/example/@/components/ui/button.tsx

@@ -1,7 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-
+import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(

apps/example/@/components/ui/scroll-area.tsx

@@ -1,6 +1,5 @@
-import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-
+import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const ScrollArea = React.forwardRef<

apps/example/@/components/ui/sheet.tsx

@@ -1,8 +1,7 @@
-import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { cva, type VariantProps } from "class-variance-authority";
-
+import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const Sheet = SheetPrimitive.Root;

apps/example/@/components/ui/tabs.tsx

@@ -1,6 +1,5 @@
-import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-
+import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const Tabs = TabsPrimitive.Root;

apps/example/app/routes/__layout._index.tsx

@@ -1,12 +1,12 @@
 import { ComponentInstanceIcon, CopyIcon } from "@radix-ui/react-icons";
 import { useEffect, useRef, useState } from "react";
-import { Button } from "@/components/ui/button";
 import { LoaderFunctionArgs } from "react-router";
-import * as shiki from "~/shiki.server";
 import { delay, fromEvent, mergeMap, tap } from "rxjs";
-import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
 import { Shikiize } from "~/shiki";
+import * as shiki from "~/shiki.server";
 
 export const code = `
 import {

apps/example/app/routes/__layout/layout.tsx

@@ -1,8 +1,8 @@
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { Link, LinkProps } from "@remix-run/react";
 import { Button } from "@/components/ui/button";
 import { Logo } from "@/components/ui/logo";
 import { cn } from "@/lib/utils";
-import { GitHubLogoIcon } from "@radix-ui/react-icons";
-import { Link, LinkProps } from "@remix-run/react";
 
 const LayoutHeaderLogo = ({
   to = "/",

apps/example/app/routes/__toc.tsx

@@ -1,8 +1,8 @@
+import { HamburgerMenuIcon } from "@radix-ui/react-icons";
+import { NavLink, Outlet } from "@remix-run/react";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { cn } from "@/lib/utils";
-import { HamburgerMenuIcon } from "@radix-ui/react-icons";
-import { NavLink, Outlet } from "@remix-run/react";
 import {
   Layout,
   LayoutFooter,

apps/example/app/shiki.tsx

@@ -1,6 +1,6 @@
 import { useLoaderData } from "@remix-run/react";
-import { shikiize } from "./shiki.server";
 import { cn } from "@/lib/utils";
+import { shikiize } from "./shiki.server";
 
 const Shikiize = ({ id, className }: { id: string; className?: string }) => {
   const { blocks } = useLoaderData<typeof shikiize>();

apps/example/cypress.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents: (on, config) => {
+      const configOverrides: Partial<Cypress.PluginConfigOptions> = {
+        baseUrl: `http://localhost:3000`,
+        screenshotOnRunFailure: !process.env.CI,
+      };
+
+      // To use this:
+      // cy.task('log', whateverYouWantInTheTerminal)
+      on("task", {
+        log: (message) => {
+          console.log(message);
+
+          return null;
+        },
+      });
+
+      return { ...config, ...configOverrides };
+    },
+  },
+});

apps/example/cypress/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: "./tsconfig.json",
+  },
+};

apps/example/cypress/e2e/preview-browser.cy.ts

@@ -0,0 +1,44 @@
+describe("PreviewBrowser", () => {
+  it("should open to no preview selected", () => {
+    cy.visit("/email");
+    cy.findByText("No preview selected.");
+  });
+
+  it("should open preview", () => {
+    cy.visit("/email");
+    cy.get('[aria-label="view loginCode"]').click();
+    cy.location().should((loc) => {
+      expect(loc.search).to.eq("?preview=loginCode");
+    });
+
+    cy.get('[aria-label="view resetPassword"]').click();
+    cy.location().should((loc) => {
+      expect(loc.search).to.eq("?preview=resetPassword");
+    });
+  });
+
+  it("should switch between mobile and desktop view", () => {
+    cy.visit("/email?preview=loginCode");
+    cy.get('[aria-label="view mobile resolution"]').click();
+    cy.location().should((loc) => {
+      expect(loc.search).to.eq("?preview=loginCode&view=mobile");
+    });
+    cy.findByTitle("loginCode preview")
+      .should("have.class", "max-w-[375px]")
+      .should("have.class", "max-h-[667px]");
+    cy.get('[aria-label="view desktop resolution"]').click();
+    cy.location().should((loc) => {
+      expect(loc.search).to.eq("?preview=loginCode&view=desktop");
+    });
+    cy.findByTitle("loginCode preview")
+      .should("not.have.class", "max-w-[375px]")
+      .should("not.have.class", "max-h-[667px]");
+  });
+
+  it("should show a hamburger menu on small resolutions", () => {
+    cy.visit("/email");
+    cy.get('[aria-label="open side navigation"]').should("not.be.visible");
+    cy.viewport("iphone-se2");
+    cy.get('[aria-label="open side navigation"]').should("be.visible");
+  });
+});

apps/example/cypress/support/e2e.ts

@@ -0,0 +1,14 @@
+import "@testing-library/cypress/add-commands";
+
+Cypress.on("uncaught:exception", (err) => {
+  // Cypress and React Hydrating the document don't get along
+  // for some unknown reason. Hopefully we figure out why eventually
+  // so we can remove this.
+  if (
+    /hydrat/i.test(err.message) ||
+    /Minified React error #418/.test(err.message) ||
+    /Minified React error #423/.test(err.message)
+  ) {
+    return false;
+  }
+});

apps/example/cypress/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "exclude": [
+    "../node_modules/@types/jest",
+    "../node_modules/@testing-library/jest-dom"
+  ],
+  "include": [
+    "e2e/**/*",
+    "support/**/*",
+    "../node_modules/cypress",
+    "../node_modules/@testing-library/cypress"
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "noEmit": true,
+    "types": ["node", "cypress", "@testing-library/cypress"],
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "target": "ES2020",
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+
+    "paths": {
+      "~/*": ["../app/*"]
+    }
+  }
+}

apps/example/package.json

@@ -6,10 +6,12 @@
   "scripts": {
     "build": "remix build",
     "dev": "remix dev",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run",
     "format": "prettier --write .",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "start": "remix-serve ./build/index.js",
-    "test": "vitest",
+    "test": "start-server-and-test dev http-get://localhost:3000 cy:run",
     "typecheck": "tsc"
   },
   "prettier": {},
@@ -29,7 +31,6 @@
     "@remix-run/node": "^2.3.0",
     "@remix-run/react": "^2.3.0",
     "@remix-run/serve": "^2.3.0",
-    "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "isbot": "^3.7.0",
@@ -46,25 +47,20 @@
     "@remix-run/dev": "^2.3.0",
     "@testing-library/cypress": "^10.0.1",
     "@testing-library/jest-dom": "^6.1.4",
-    "@types/bcryptjs": "^2.4.5",
     "@types/node": "^18.18.6",
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "@vitejs/plugin-react": "^4.1.0",
     "@vitest/coverage-v8": "^0.34.6",
     "autoprefixer": "^10.4.16",
-    "binode": "^1.0.5",
-    "cookie": "^0.5.0",
-    "cross-env": "^7.0.3",
+    "cypress": "^13.6.0",
     "happy-dom": "^12.9.1",
-    "msw": "^1.3.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "prettier": "3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.6",
     "start-server-and-test": "^2.0.1",
     "tailwindcss": "^3.3.3",
-    "ts-node": "^10.9.1",
     "tsconfig": "*",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.2.2",

apps/example/tsconfig.json

@@ -1,10 +1,6 @@
 {
-  "include": [
-    "remix.env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "app/routes/__toc.docs.mdx"
-  ],
+  "exclude": ["./cypress", "./cypress.config.ts"],
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2020"],
     "types": ["vitest/globals"],