test: nextjs related simple tests

Author: wanjas

apps/playground/app/api/hello/route.ts

@@ -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/page.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/playground/.eslintrc.json renamed to apps/tester/.eslintrc.json

@@ -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/global.css renamed to apps/tester/app/global.css

@@ -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/app/layout.tsx renamed to apps/tester/app/layout.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/app/page.module.css renamed to apps/tester/app/page.module.css

@@ -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',