Skip to content

feat: serve HTML static pages by default #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 9, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
node_modules/
cypress/screenshots
**/cypress/screenshots
**/cypress/videos
build

# Local Netlify folder
.netlify
.netlify
23 changes: 23 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,24 @@ If you are testing the site before building it, you probably want to skip testin

Running tests in parallel **is not supported** because Netlify plugin system runs on a single machine. Thus you can record the tests on Cypress Dashboard, but not run tests in parallel. If Netlify expands its build offering by allowing multiple build machines, we could take advantage of it and run tests in parallel.

### HTML files

When serving the built folder, we automatically serve `.html` files. For example, if your folder has the following structure:

```
public/
index.html
pages/
about.html
```

The `public` folder is served automatically and the following test successfully visits both the root and the `about.html` pages:

```js
cy.visit('/')
cy.visit('/pages/about') // visits the about.html
```

## Example repos

Name | Description
Expand Down Expand Up @@ -307,6 +325,11 @@ Set environment variable `DEBUG=netlify-plugin-cypress` to see the debug logs. T
Cypress run, add an environment variable <code>TERM = xterm</code>.
</details>

<details>
<summary>Electron browser crashes while running tests</summary>
Switch to using Chromium browser that seems to be a bit more reliable. Use <code>browser = "chromium"</code> setting.
</details>

## License

This project is licensed under the terms of the [MIT license](LICENSE.md).
Expand Down
17 changes: 17 additions & 0 deletions circle.yml
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,19 @@ jobs:
environment:
DEBUG: netlify-plugin-cypress

'html-pages':
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/html-pages
environment:
DEBUG: netlify-plugin-cypress

routing:
executor: cypress/base-12-14-0
steps:
Expand All @@ -137,6 +150,9 @@ workflows:
- 'basic test':
requires:
- cypress/install
- 'html-pages':
requires:
- cypress/install
- 'recommended test':
requires:
- cypress/install
Expand All @@ -162,6 +178,7 @@ workflows:
requires:
- build
- 'basic test'
- 'html-pages'
- 'recommended test'
- 'recording test'
- 'test-twice'
Expand Down
38 changes: 1 addition & 37 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,46 +1,10 @@
// @ts-check
const LocalWebServer = require('local-web-server')
const debug = require('debug')('netlify-plugin-cypress')
const debugVerbose = require('debug')('netlify-plugin-cypress:verbose')
const { ping, getBrowserPath } = require('./utils')
const fs = require('fs')
const { ping, getBrowserPath, serveFolder } = require('./utils')

const DEFAULT_BROWSER = 'electron'

function serveFolder(directory, port, spa) {
if (typeof spa === 'boolean') {
if (spa) {
// spa parameter should be the name of the
// fallback file in the directory to serve
// typically it is "index.html"
spa = 'index.html'
} else {
// do not use fallback mechanism for routing
spa = undefined
}
}
debug(
'serving local folder %o from working directory %s',
{
directory,
port,
spa,
},
process.cwd(),
)

if (!fs.existsSync(directory)) {
throw new Error(`Cannot find folder "${directory}" to serve`)
}

return LocalWebServer.create({
// @ts-ignore
directory,
port,
spa,
}).server
}

function startServerMaybe(run, options = {}) {
const startCommand = options.start
if (!startCommand) {
Expand Down
4 changes: 4 additions & 0 deletions src/serve-cli.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
// a little utility to debug our static file server
const { serveFolder } = require('./utils')

serveFolder('./public', '8080', false)
47 changes: 47 additions & 0 deletions src/utils.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
// @ts-check
const puppeteer = require('puppeteer')
const debug = require('debug')('netlify-plugin-cypress')
const LocalWebServer = require('local-web-server')
const fs = require('fs')
const { ping } = require('./ping')

const getBrowserPath = async () => {
Expand All @@ -15,7 +17,52 @@ const getBrowserPath = async () => {
return info.executablePath
}

/**
* Servers local folder
* @see https://github.com/lwsjs/local-web-server
* @param {string} directory
* @param {number} port
* @param {boolean|'index.html'} spa
*/
function serveFolder(directory, port, spa) {
if (typeof spa === 'boolean') {
if (spa) {
// spa parameter should be the name of the
// fallback file in the directory to serve
// typically it is "index.html"
spa = 'index.html'
} else {
// do not use fallback mechanism for routing
spa = undefined
}
}
debug(
'serving local folder %o from working directory %s',
{
directory,
port,
spa,
},
process.cwd(),
)

if (!fs.existsSync(directory)) {
throw new Error(`Cannot find folder "${directory}" to serve`)
}

return LocalWebServer.create({
// @ts-ignore
directory,
port,
spa,
// to debug use
// DEBUG=koa-send
staticExtensions: ['html'],
}).server
}

module.exports = {
ping,
getBrowserPath,
serveFolder,
}
11 changes: 11 additions & 0 deletions tests/html-pages/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# HTML pages

See [#116](https://github.com/cypress-io/netlify-plugin-cypress/issues/116)

In this example the public folder has both `index.html` and pages like `public/commands/about.html` which we want to visit using `cy.visit('/commands/about')` without using `.html` extension

Test locally with

```
$ DEBUG=netlify-plugin-cypress ../../node_modules/.bin/netlify build
```
5 changes: 5 additions & 0 deletions tests/html-pages/cypress.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"pluginsFile": false,
"supportFile": false,
"fixturesFolder": false
}
12 changes: 12 additions & 0 deletions tests/html-pages/cypress/integration/spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/// <reference types="cypress" />
describe('html-pages', () => {
it('loads the index page', () => {
cy.visit('/')
cy.contains('Index page')
})

it('loads the about page', () => {
cy.visit('/commands/about')
cy.contains('About')
})
})
8 changes: 8 additions & 0 deletions tests/html-pages/netlify.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
[build]
command = "echo 'Netlify build command ...'"
publish = "public"

[[plugins]]
# local Cypress plugin will test our site after it is built
# in production, please use: package = "netlify-plugin-cypress"
package = "../../"
1 change: 1 addition & 0 deletions tests/html-pages/public/commands/about.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<h1>About</h1>
1 change: 1 addition & 0 deletions tests/html-pages/public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<h1>Index page</h1>