From 125a7fc492a043792a3cc54cd8809da21c4e08a7 Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Mon, 8 Feb 2021 18:10:22 -0500 Subject: [PATCH 1/3] add note about Netlify CLI --- README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/README.md b/README.md index 6000bdc..7449c28 100644 --- 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, 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): From ad69ff3712af24ad41509c6897c65de0a32dd22e Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Mon, 8 Feb 2021 18:19:40 -0500 Subject: [PATCH 2/3] add web and function test --- tests/test-netlify-dev/cypress.json | 6 +++ .../cypress/integration/spec.js | 12 ++++++ tests/test-netlify-dev/netlify.toml | 40 +++++++++++++++++++ tests/test-netlify-dev/public/index.html | 1 + tests/test-netlify-dev/src/functions/hello.js | 8 ++++ 5 files changed, 67 insertions(+) create mode 100644 tests/test-netlify-dev/cypress.json create mode 100644 tests/test-netlify-dev/cypress/integration/spec.js create mode 100644 tests/test-netlify-dev/netlify.toml create mode 100644 tests/test-netlify-dev/public/index.html create mode 100644 tests/test-netlify-dev/src/functions/hello.js diff --git a/tests/test-netlify-dev/cypress.json b/tests/test-netlify-dev/cypress.json new file mode 100644 index 0000000..faa3f13 --- /dev/null +++ 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 new file mode 100644 index 0000000..1df9c65 --- /dev/null +++ b/tests/test-netlify-dev/cypress/integration/spec.js @@ -0,0 +1,12 @@ +/// +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 new file mode 100644 index 0000000..7ec4fbf --- /dev/null +++ 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 new file mode 100644 index 0000000..f0b9112 --- /dev/null +++ b/tests/test-netlify-dev/public/index.html @@ -0,0 +1 @@ +Placeholder diff --git a/tests/test-netlify-dev/src/functions/hello.js b/tests/test-netlify-dev/src/functions/hello.js new file mode 100644 index 0000000..01a8aad --- /dev/null +++ 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() } + } +} From f0c76480f2cdb486c4f063dc27cfa49b0a718652 Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Mon, 8 Feb 2021 18:21:05 -0500 Subject: [PATCH 3/3] add e2e test --- README.md | 2 +- circle.yml | 17 +++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7449c28..890b62e 100644 --- a/README.md +++ b/README.md @@ -249,7 +249,7 @@ $ npm i -D netlify-cli wait-on = 'http://localhost:8888' ``` -For more, read [Testing Netlify Function](https://glebbahmutov.com/blog/test-netlify/#testing-netlify-functions) section +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 diff --git a/circle.yml b/circle.yml index 763d0aa..f4d3ad1 100644 --- 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: