chore: add e2e tests and demos (#1172)

* chore: recommit as one

* chore: fix eslint

* chore: fix eslint

* chore: fix order and typo

* chore: add middleware test

* chore: redo lock

* chore: update snapidoos

* chore: snapidoos please

* chore: update to node version 16

* chore: update to npm 8

* chore: swc please

* chore: snapidoodidoo

* chore: snapidoodidoodoo

* chore: manual snap

* chore: manual snap 2

* Apply suggestions from code review

Author: Tiffany Le-Nguyen

.vscode/feat-test.code-snippets

@@ -0,0 +1,30 @@
+{
+	// Place your netlify-plugin-nextjs workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	// Example:
+	"Create Next Test Feature": {
+		"scope": "javascriptreact,typescriptreact",
+		"prefix": "ft",
+		"body": [
+			"import Link from 'next/link'",
+			"",
+			"function $1() {",
+			"\treturn (",
+			"\t\t<div>",
+			"\t\t<h1>$1</h1>",
+			"\t\t<Link href=\"\"><a>Read Docs</a></Link>",
+			"\t\t<p>Description of feature</p>",
+			"\t\t<p>Example/test of feature</p>",
+			"\t\t</div>",
+			"\t)",
+			"}",
+			"",
+			"export default $1"
+		],
+		"description": "Log output to console"
+	}
+}

cypress/integration/default/css.spec.ts

@@ -0,0 +1,13 @@
+describe('CSS handling', () => {
+  beforeEach(() => {
+    cy.visit('/css')
+  })
+
+  it('should properly handle css', () => {
+    // Sass variable loaded
+    cy.findByText(/✅ Sass variable imported, color: #64FF00/i)
+
+    // CSS-in-JS loaded
+    cy.findByTestId('css-in-js').should('have.css', 'background', 'rgb(255, 165, 0) none repeat scroll 0% 0% / auto padding-box border-box')
+  })
+})

cypress/integration/default/env.spec.ts

@@ -0,0 +1,10 @@
+describe('Environment Varialbes', () => {
+  beforeEach(() => {
+    cy.visit('/env')
+  })
+
+  it('should show a public environment token and not show private ones', () => {
+    cy.findByText('Greetings Vi')
+    cy.findByText('Everything worked')
+  })
+})

cypress/integration/default/layouts.spec.ts

@@ -0,0 +1,10 @@
+describe('Layouts', () => {
+  beforeEach(() => {
+    cy.visit('/layouts')
+  })
+
+  it('should properly have a layout and title change', () => {
+    cy.findByText(/Test layout wrapper/i)
+    cy.title().should('eq', 'Per Page Layout test title')
+  })
+})

cypress/integration/default/middleware.spec.ts

@@ -0,0 +1,16 @@
+describe('Middleware', () => {
+  beforeEach(() => {
+    cy.request('/middle')
+  })
+
+  it('should properly load custom headers', () => {
+    cy.request({
+      url: '/',
+    }).then((response) => {
+      expect(response.headers).to.have.property('x-custom-1', 'value-1')
+      expect(response.headers).to.have.property('x-custom-2', 'value-2')
+      expect(response.headers).to.have.property('x-custom-3', 'value-3')
+      expect(response.headers).to.have.property('x-custom-4', 'value-4')
+    })
+  })
+})

cypress/integration/default/script.spec.ts

@@ -0,0 +1,10 @@
+describe('Environment Varialbes', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX').as('test-gtm')
+    cy.visit('https://61f2c7c9fad2c70ee2737a81--netlify-plugin-nextjs-demo.netlify.app/script/')
+  })
+
+  it('should load a script after interactive', () => {
+    cy.wait('@test-gtm')
+  })
+})

demos/default/.env.production

@@ -1 +1,8 @@
-HELLO_WORLD="Hello Production"
+HELLO_WORLD="Hello Production"
+
+TEST_ENV_VAR="This test shouldn't show up on the page. If it does, something is wrong"
+
+# In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_. 
+
+NEXT_PUBLIC_NAME="Vi"
+NEXT_PUBLIC_GREETINGS="Greetings $NEXT_PUBLIC_NAME"

demos/default/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

demos/default/next.config.js

@@ -1,3 +1,5 @@
+const path = require('path')
+
 module.exports = {
   // Configurable site features we support:
   // distDir: 'build',
@@ -49,4 +51,12 @@ module.exports = {
       },
     ]
   },
+  // https://nextjs.org/docs/basic-features/image-optimization#domains
+  images: {
+    domains: ['raw.githubusercontent.com'],
+  },
+  // https://nextjs.org/docs/basic-features/built-in-css-support#customizing-sass-options
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles-sass-test')],
+  },
 }

demos/default/pages/_app.js demos/default/pages/_app.tsxdemos/default/pages/_app.js renamed to demos/default/pages/_app.tsx

@@ -1,9 +1,11 @@
 import '../styles/globals.css'
 
 function MyApp({ Component, pageProps }) {
+  const getLayout = Component.getLayout || ((page) => page)
+
   return (
     <div className='prose ml-14 mt-10 mb-20'>
-      <Component {...pageProps} />
+      {getLayout(<Component {...pageProps} />)}
     </div>
   )
 }