test: nextjs related simple tests

apps/playground/.eslintrc.json → apps/tester/.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": [
+    "plugin:cypress/recommended",
     "plugin:@nx/react-typescript",
     "next",
     "next/core-web-vitals",
@@ -16,7 +17,7 @@
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@next/next/no-html-link-for-pages": ["error", "apps/playground/pages"]
+        "@next/next/no-html-link-for-pages": ["error", "apps/tester/pages"]
       }
     },
     {
@@ -32,6 +33,10 @@
       "env": {
         "jest": true
       }
+    },
+    {
+      "files": ["*.cy.{ts,js,tsx,jsx}", "cypress/**/*.{ts,js,tsx,jsx}"],
+      "rules": {}
     }
   ]
 }

apps/playground/app/layout.tsx → apps/tester/app/layout.tsx

@@ -1,7 +1,7 @@
 import './global.css';
 
 export const metadata = {
-  title: 'Welcome to playground',
+  title: 'Welcome to tester',
   description: 'Generated by create-nx-workspace',
 };
 

apps/tester/app/page.tsx

@@ -0,0 +1,23 @@
+import styles from './page.module.css';
+
+export default async function Index() {
+  /*
+   * Replace the elements below with your own.
+   *
+   * Note: The corresponding styles are in the ./index.css file.
+   */
+  return (
+    <div className={styles.page}>
+      <div className="wrapper">
+        <div className="container">
+          <div id="welcome">
+            <h1>
+              <span> Hello there, </span>
+              Welcome tester 👋
+            </h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/playground/app/state/page.tsx → apps/tester/app/state/page.tsx

@@ -3,7 +3,7 @@ import { StateChanger } from '../../components/StateChanger';
 export default async function Index() {
   return (
     <div>
-      <h1>Welcome to playground!</h1>
+      <h1>Welcome to tester!</h1>
 
       <StateChanger />
     </div>

apps/playground/components/Button.tsx → apps/tester/components/Button.tsx

@@ -1,10 +1,10 @@
-import { ButtonHTMLAttributes } from 'react';
-
-export type ButtonProps = React.ComponentPropsWithoutRef<"button">;
-
-export function Button(props: ButtonProps) {
-  return <button
-    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-    {...props}
-  />;
-}
+import { ButtonHTMLAttributes } from 'react';
+
+export type ButtonProps = React.ComponentPropsWithoutRef<"button">;
+
+export function Button(props: ButtonProps) {
+  return <button
+    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+    {...props}
+  />;
+}

apps/playground/components/StateChanger.tsx → apps/tester/components/StateChanger.tsx

@@ -19,38 +19,35 @@ export function StateChanger() {
       .passthrough(),
   );
 
-  const [age, setAge] = useState(11);
-
   const router = useRouter();
 
   return (
     <div className="max-w-6xl mx-auto">
       <div className="flex gap-4">
         <Button
+          id="set-age-10"
           onClick={() => {
             setValue('age', 10);
           }}
         >
           setValue('age', 10)
         </Button>
         <Button
+          id="set-birth-date"
           onClick={() => {
-            setValue('age', age);
-            setAge(age + 1);
-          }}
-        >
-          setValue('age', setAge)
-        </Button>
-        <Button
-          onClick={() => {
-            setValue('birthDate', new Date());
+            setValue('birthDate', new Date('2021-01-01T10:00:00.000Z'));
           }}
         >
           setValue('birthDate', new Date());
         </Button>
         <Button
+          id="set-everything"
           onClick={() => {
-            setState({ name: 'test', age: 10, birthDate: new Date() });
+            setState({
+              name: 'test',
+              age: 10,
+              birthDate: new Date('2021-01-01T10:00:00.000Z'),
+            });
           }}
         >
           {`setState({ name: 'test', age: 10, birthDate: new Date() })`}
@@ -64,6 +61,7 @@ export function StateChanger() {
 
       <div>
         <Button
+          id="router-push"
           onClick={() => {
             router.push(
               `?${new URLSearchParams({
@@ -77,6 +75,7 @@ export function StateChanger() {
       </div>
       <div>
         <Link
+          id="next-link"
           href={`?${new URLSearchParams({
             name: 'link/test',
             age: '77',

apps/tester/cypress.config.ts

@@ -0,0 +1,7 @@
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: { ...nxE2EPreset(__filename, { cypressDir: 'cypress' }) },
+});

apps/tester/cypress/e2e/app.cy.ts

@@ -0,0 +1,21 @@
+describe('tester', () => {
+  beforeEach(() => cy.visit('/state'));
+
+  it('should set everything', () => {
+    cy.get('#set-everything').click();
+
+    cy.location('search').should('contain', 'name=test');
+
+    cy.location('search').should('contain', 'age=10');
+    cy.location('search').should(
+      'contain',
+      'birthDate=2021-01-01T10%3A00%3A00.000Z',
+    );
+  });
+
+  it('should react to url change', () => {
+    cy.get('#next-link').click();
+
+    cy.location('search').should('contain', 'name=link%2Ftest');
+  });
+});

apps/tester/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

apps/tester/cypress/support/app.po.ts

@@ -0,0 +1 @@
+export const getGreeting = () => cy.get('h1');

apps/tester/cypress/support/commands.ts

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

apps/tester/cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+import './commands';

apps/tester/cypress/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["cypress", "node"],
+    "sourceMap": false,
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "../cypress.config.ts",
+    "../**/*.cy.ts",
+    "../**/*.cy.tsx",
+    "../**/*.cy.js",
+    "../**/*.cy.jsx",
+    "../**/*.d.ts",
+  ],
+}

apps/playground/jest.config.ts → apps/tester/jest.config.ts

@@ -1,11 +1,11 @@
 /* eslint-disable */
 export default {
-  displayName: 'playground',
+  displayName: 'tester',
   preset: '../../jest.preset.js',
   transform: {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
     '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/apps/playground',
+  coverageDirectory: '../../coverage/apps/tester',
 };

apps/playground/project.json → apps/tester/project.json

@@ -1,19 +1,19 @@
 {
-  "name": "playground",
+  "name": "tester",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "apps/playground",
+  "sourceRoot": "apps/tester",
   "projectType": "application",
   "targets": {
     "build": {
       "executor": "@nx/next:build",
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
-        "outputPath": "dist/apps/playground"
+        "outputPath": "dist/apps/tester"
       },
       "configurations": {
         "development": {
-          "outputPath": "apps/playground"
+          "outputPath": "apps/tester"
         },
         "production": {}
       }
@@ -22,36 +22,49 @@
       "executor": "@nx/next:server",
       "defaultConfiguration": "development",
       "options": {
-        "buildTarget": "playground:build",
+        "buildTarget": "tester:build",
         "dev": true
       },
       "configurations": {
         "development": {
-          "buildTarget": "playground:build:development",
+          "buildTarget": "tester:build:development",
           "dev": true
         },
         "production": {
-          "buildTarget": "playground:build:production",
+          "buildTarget": "tester:build:production",
           "dev": false
         }
       }
     },
     "export": {
       "executor": "@nx/next:export",
       "options": {
-        "buildTarget": "playground:build:production"
+        "buildTarget": "tester:build:production"
       }
     },
     "test": {
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "apps/playground/jest.config.ts"
+        "jestConfig": "apps/tester/jest.config.ts"
       }
     },
     "lint": {
       "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"]
+    },
+    "e2e": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/tester/cypress.config.ts",
+        "testingType": "e2e",
+        "devServerTarget": "tester:serve"
+      },
+      "configurations": {
+        "production": {
+          "devServerTarget": "tester:serve:production"
+        }
+      }
     }
   },
   "tags": []

apps/playground/tsconfig.json → apps/tester/tsconfig.json

@@ -16,16 +16,20 @@
         "name": "next"
       }
     ],
-    "types": ["jest", "node"]
+    "types": [
+      "jest",
+      "node"
+    ]
   },
   "include": [
     "**/*.ts",
     "**/*.tsx",
     "**/*.js",
     "**/*.jsx",
-    "../../apps/playground/.next/types/**/*.ts",
-    "../../dist/apps/playground/.next/types/**/*.ts",
-    "next-env.d.ts"
+    "../../apps/tester/.next/types/**/*.ts",
+    "../../dist/apps/tester/.next/types/**/*.ts",
+    "next-env.d.ts",
+    ".next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules",

package.json

@@ -39,7 +39,7 @@
     "@typescript-eslint/eslint-plugin": "6.11.0",
     "@typescript-eslint/parser": "6.11.0",
     "babel-jest": "^29.4.1",
-    "cypress": "^13.0.0",
+    "cypress": "13.6.3",
     "esbuild": "^0.19.2",
     "eslint": "8.48.0",
     "eslint-config-next": "14.1.0",