chore: add e2e (#789)

* chore: move cypress out of demo

* Update package.json

* chore: add ci specific config

* chore: fix testing library support

* chore: fix config file location

* chore: add data-testid for the lists

* chore: change site to stub api request on dev

* chore: add e2e tests

* chore: add locale test

* chore: get back actual call to shows

* chore: fix test

* chore: update snapidoos

* chore: remove unused command

Co-authored-by: Matt Kane <matt.kane@netlify.com>

Co-authored-by: Matt Kane <matt.kane@netlify.com>

Author: Tiffany Le-Nguyen

.eslintrc.js

@@ -34,5 +34,16 @@ module.exports = {
   env: {
     jest: true,
   },
-  overrides: [...overrides],
+  overrides: [
+    ...overrides,
+    {
+      files: ['cypress/**/*.spec.ts'],
+      rules: {
+        'max-nested-callbacks': 0,
+        'promise/prefer-await-to-then': 0,
+        'promise/always-return': 0,
+        'promise/catch-or-return': 0,
+      },
+    },
+  ],
 }

cypress/integration/custom-errors.spec.ts

@@ -0,0 +1,14 @@
+/**
+ * @see {@link https://nextjs.org/docs/advanced-features/custom-error-page}
+ */
+ describe('Custom error pages', () => {
+  it('should show custom 404 page on /404', () => {
+    cy.visit('/404', {failOnStatusCode: false})
+    cy.findByText('Custom 404 - Page Not Found')
+  })
+
+  it('should show custom 500 page on /500', () => {
+    cy.visit('/500', {failOnStatusCode: false})
+    cy.findByText('Custom 500 - Server-side error occurred')
+  })
+})

cypress/integration/default.spec.ts

@@ -0,0 +1,24 @@
+describe('Default site', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('loads home page', () => {
+    cy.findByText('Next Demo!')
+    cy.findByTestId("list-server-side").within(() => {
+      cy.findAllByRole("link").should('have.length', 5)
+    })
+
+    cy.findByTestId("list-dynamic-pages").within(() => {
+      cy.findAllByRole("link").should('have.length', 3)
+    })
+
+    cy.findByTestId("list-catch-all").within(() => {
+      cy.findAllByRole("link").should('have.length', 3)
+    })
+
+    cy.findByTestId("list-static").within(() => {
+      cy.findAllByRole("link").should('have.length', 2)
+    })
+  })
+})

cypress/integration/dynamic-routes.spec.ts

@@ -0,0 +1,7 @@
+describe('Dynamic Routing', () => {
+  it('loads page', () => {
+    cy.visit('/shows/250')
+    cy.findByRole('heading').should('contain', '250')
+    cy.findByText('Kirby Buckets')
+  })
+})

cypress/integration/headers.spec.ts

@@ -0,0 +1,9 @@
+describe('Headers', () => {
+  it('should set headers from the next.config.js', () => {
+    cy.request({
+      url: '/',
+    }).then((response) => {
+      expect(response.headers).to.have.property('x-custom-header', 'my custom header value')
+    })
+  })
+})

cypress/integration/i18n.spec.ts

@@ -0,0 +1,38 @@
+describe('Localization', () => {
+  it('should use sub routing to determine current locale', () => {
+    cy.visit('/');
+
+    cy.findByText('The current locale is en')
+
+    cy.visit('/fr')
+    cy.findByText('The current locale is fr')
+  })
+
+  it('should use the NEXT_LOCALE cookie to determine the default locale', () => {
+    cy.setCookie('NEXT_LOCALE', 'fr')
+    cy.visit('/');
+
+    cy.findByText('The current locale is fr')
+  })
+
+  it('should use the NEXT_LOCALE cookie over Accept-Language header to determine the default locale', () => {
+    // cy.setCookie('NEXT_LOCALE', 'en')
+    cy.visit({
+      url: '/',
+      headers: {
+        'Accept-Language': 'fr;q=0.9'
+      }
+    });
+    cy.findByText('The current locale is fr')
+
+    cy.setCookie('NEXT_LOCALE', 'en')
+    cy.visit({
+      url: '/',
+      headers: {
+        'Accept-Language': 'fr;q=0.9'
+      }
+    });
+
+    cy.findByText('The current locale is en')
+  })
+})

cypress/integration/images.spec.ts

@@ -0,0 +1,20 @@
+/**
+ * @see {@link https://nextjs.org/docs/api-reference/next/image#required-props}
+ */
+describe('next/images', () => {
+  it('should show static image from /public', () => {
+    cy.visit('/')
+    cy.findByRole('img').should('be.visible').and(($img) => {
+      // "naturalWidth" and "naturalHeight" are set when the image loads
+      expect(
+        $img[0].naturalWidth,
+        'image has natural width'
+      ).to.be.greaterThan(0)
+    })
+  })
+
+  it('should show image using next/image', () => {
+    cy.visit('/image')
+    cy.findByRole('img', { name: /shiba inu dog looks through a window/i })
+  })
+})

cypress/integration/preview.spec.ts

@@ -0,0 +1,21 @@
+describe('Preview Mode', () => {
+  it('enters and exits preview mode', () => {
+    // preview mode is off by default
+    cy.visit('/previewTest')
+    cy.findByText('Number: 4')
+
+    // enter preview mode
+    cy.request('/api/enterPreview').then(
+  (response) => {
+    expect(response.body).to.have.property('name', 'preview mode')
+  }
+)
+  cy.visit('/previewTest')
+  cy.findByText('Number: 3')
+
+  // exit preview mode
+  cy.request('/api/exitPreview')
+  cy.visit('/previewTest')
+  cy.findByText('Number: 4')
+  })
+})

cypress/integration/rewrites-redirects.spec.ts

@@ -0,0 +1,21 @@
+describe('Rewrites and Redirects', () => {
+  it('rewrites: points /old to /', () => {
+    // preview mode is off by default
+    cy.visit('/old')
+    cy.findByText('Next Demo!')
+    cy.url().should('eq', `${Cypress.config().baseUrl}/old/`)
+
+    // ensure headers are still set
+    cy.request('/api/enterPreview').then(
+  (response) => {
+    expect(response.body).to.have.property('name', 'preview mode')
+  }
+)
+  })
+
+  it('redirects: redirects /redirectme to /', () => {
+    cy.visit('/redirectme')
+    cy.url().should('eq', `${Cypress.config().baseUrl}/`)
+  }
+  )
+})

cypress/integration/trailing-slash.spec.ts

@@ -0,0 +1,11 @@
+describe('Trailing slash enabled', () => {
+  it('should keep the trailing slash, i.e. points /old/ to /old/', () => {
+    cy.visit('/old/')
+    cy.url().should('eq', `${Cypress.config().baseUrl}/old/`)
+  })
+
+  it('should put a trailing slash when there is none, i.e. points /old to /old/', () => {
+    cy.visit('/old')
+    cy.url().should('eq', `${Cypress.config().baseUrl}/old/`)
+  })
+})