Add example test

Author: delbaoliveira

examples/with-cypress/cypress/integration/app.spec.js

@@ -0,0 +1,15 @@
+describe('Navigation', () => {
+  it('should navigate to the about page', () => {
+    // Start from the index page
+    cy.visit('http://localhost:3000/')
+
+    // Find a link with an href attribute containing "about" and click it
+    cy.get('a[href*="about"]').click()
+
+    // The new url should include "/about"
+    cy.url().should('include', '/about')
+
+    // The new page should contain an h1 with "About page"
+    cy.get('h1').contains('About Page')
+  })
+})

examples/with-cypress/pages/about.js

@@ -0,0 +1,17 @@
+import styles from '../styles/Home.module.css'
+import Link from 'next/link'
+
+export default function About() {
+  return (
+    <div className={styles.container}>
+      <main className={styles.main}>
+        <h1>About Page</h1>
+        <p className={styles.description}>
+          <Link href="/">
+            <a>&larr; Go Back</a>
+          </Link>
+        </p>
+      </main>
+    </div>
+  )
+}

examples/with-cypress/pages/index.js

@@ -1,5 +1,6 @@
 import Head from 'next/head'
 import Image from 'next/image'
+import Link from 'next/link'
 import styles from '../styles/Home.module.css'
 
 export default function Home() {
@@ -22,6 +23,13 @@ export default function Home() {
         </p>
 
         <div className={styles.grid}>
+          <Link href="/about">
+            <a className={styles.card}>
+              <h2>About Page &rarr;</h2>
+              <p>Cypress will test if this link is working.</p>
+            </a>
+          </Link>
+
           <a href="https://nextjs.org/docs" className={styles.card}>
             <h2>Documentation &rarr;</h2>
             <p>Find in-depth information about Next.js features and API.</p>