add note about Netlify CLI and an example (#112)

bahmutov · web-flow · commit de493532eeab · 2021-02-08T18:25:38.000-05:00
diff --git a/README.md b/README.md
@@ -232,6 +232,25 @@ Parameters you can place into `preBuild` inputs: `start`, `wait-on`, `wait-on-ti
 
 See [netlify-plugin-prebuild-example](https://github.com/cypress-io/netlify-plugin-prebuild-example) repo
 
+### using Netlify CLI
+
+Even better when testing the prebuilt site is to run the [Netlify CLI](https://cli.netlify.com/) to make sure the local API redirects and Netlify functions work in addition to the web site. Add `netlify-cli` as a dev dependency and start it during testing.
+
+```shell
+$ npm i -D netlify-cli
+```
+
+```toml
+[[plugins]]
+  package = "netlify-plugin-cypress"
+  # start Netlify server
+  [plugins.inputs.preBuild]
+    start = 'npx netlify dev'
+    wait-on = 'http://localhost:8888'
+```
+
+For more, see [tests/test-netlify-dev](./tests/test-netlify-dev) example and read [Testing Netlify Function](https://glebbahmutov.com/blog/test-netlify/#testing-netlify-functions) section.
+
 ### skipping tests
 
 If you are testing the site before building it, you probably want to skip testing it after the build. See [tests/test-prebuild-only](./tests/test-prebuild-only/netlify.toml):
diff --git a/circle.yml b/circle.yml
@@ -102,6 +102,19 @@ jobs:
           environment:
             DEBUG: netlify-plugin-cypress
 
+  'test-netlify-dev':
+    executor: cypress/base-12-14-0
+    steps:
+      # all dependencies were installed in previous job
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Netlify Build 🏗
+          command: npx netlify build
+          working_directory: tests/test-netlify-dev
+          environment:
+            DEBUG: netlify-plugin-cypress
+
   routing:
     executor: cypress/base-12-14-0
     steps:
@@ -139,6 +152,9 @@ workflows:
       - test-using-chromium:
           requires:
             - cypress/install
+      - test-netlify-dev:
+          requires:
+            - cypress/install
       - routing:
           requires:
             - cypress/install
@@ -151,6 +167,7 @@ workflows:
             - 'test-twice'
             - 'test-prebuild-only'
             - test-using-chromium
+            - test-netlify-dev
             - 'routing'
           filters:
             branches:
diff --git a/tests/test-netlify-dev/cypress.json b/tests/test-netlify-dev/cypress.json
@@ -0,0 +1,6 @@
+{
+  "pluginsFile": false,
+  "supportFile": false,
+  "fixturesFolder": false,
+  "baseUrl": "http://localhost:8888"
+}
diff --git a/tests/test-netlify-dev/cypress/integration/spec.js b/tests/test-netlify-dev/cypress/integration/spec.js
@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+it('loads page', () => {
+  cy.visit('/')
+  cy.contains('Placeholder').should('be.visible')
+})
+
+it('greets me', () => {
+  cy.visit('/')
+  cy.request('/api/hello')
+    .its('body')
+    .should('equal', 'Hello from a serverless function!')
+})
diff --git a/tests/test-netlify-dev/netlify.toml b/tests/test-netlify-dev/netlify.toml
@@ -0,0 +1,40 @@
+# this Netlify project uses both functions
+# and API redirects
+
+[build]
+command = "echo 'Netlify build command ...'"
+publish = "public"
+functions = "src/functions"
+
+[build.environment]
+# cache Cypress binary in local "node_modules" folder
+# so Netlify caches it
+CYPRESS_CACHE_FOLDER = "./node_modules/CypressBinary"
+# set TERM variable for terminal output
+TERM = "xterm"
+
+[dev]
+  command = "npx serve public"
+  targetPort = 5000
+  framework = "#custom"
+
+[[redirects]]
+  from = "/api/*"
+  to = "/.netlify/functions/:splat"
+  status = 200
+
+[[plugins]]
+  # local Cypress plugin will test our site after it is built
+  # in production, please use: package = "netlify-plugin-cypress"
+  package = "../../"
+
+  # the local site uses Netlify API redirects
+  # and Netlify functions
+  # let's run tests against Netlify Dev server
+  [plugins.inputs.preBuild]
+    start = 'npx netlify dev'
+    wait-on = 'http://localhost:8888'
+
+  # and skip tests after building it
+  [plugins.inputs]
+    skip = true
diff --git a/tests/test-netlify-dev/public/index.html b/tests/test-netlify-dev/public/index.html
@@ -0,0 +1 @@
+<body>Placeholder</body>
diff --git a/tests/test-netlify-dev/src/functions/hello.js b/tests/test-netlify-dev/src/functions/hello.js
@@ -0,0 +1,8 @@
+// Netlify function
+exports.handler = async (event, context) => {
+  try {
+    return { statusCode: 200, body: `Hello from a serverless function!` }
+  } catch (err) {
+    return { statusCode: 500, body: err.toString() }
+  }
+}
