Merge branch 'develop' into fix/vite-only-rerun-on-spec-change

cypress-io · Apr 28, 2021 · 88a090c · 88a090c
2 parents c15bc13 + e5ab805
commit 88a090c
Show file tree

Hide file tree

Showing 21 changed files with 345 additions and 33 deletions.
diff --git a/DEPLOY.md b/DEPLOY.md
@@ -137,7 +137,8 @@ In the following instructions, "X.Y.Z" is used to denote the version of Cypress
         ```
     - Ensure the changelog is up-to-date and has the correct date.
     - Merge any release-specific documentation changes into the main release PR.
-    - Merging this PR into `develop` will deploy to `docs-staging` and then a PR will be automatically created against `master`. It will be automatically merged after it passes and will deploy to production.
+    - You can view the doc's [branch deploy preview](https://github.com/cypress-io/cypress-documentation/blob/master/CONTRIBUTING.md#pull-requests) by clicking 'Details' on the PR's `netlify-cypress-docs/deploy-preview` GitHub status check.
+    - Merge this PR into `master` to deploy it to production.
 
 9.  Make the new npm version the "latest" version by updating the dist-tag `latest` to point to the new version:
     ```shell

diff --git a/npm/react/examples/nextjs/next.config.js b/npm/react/examples/nextjs/next.config.js
@@ -1,4 +1,3 @@
 const withMDX = require('@next/mdx')()
-const withSass = require('@zeit/next-sass')
 
-module.exports = withSass(withMDX())
+module.exports = withMDX()
diff --git a/npm/react/examples/nextjs/pages/index.js b/npm/react/examples/nextjs/pages/index.js
@@ -1,11 +1,12 @@
 import * as React from 'react'
 import { Search } from '../components/Search'
 import HelloWorld from '../components/HelloWorld.mdx'
+import styles from '../styles/Home.module.css'
 
 function IndexPage ({ asyncProp }) {
   return (
     <main>
-      <h1>Welcome to Next.js</h1>
+      <h1 className={styles.welcome}>Welcome to Next.js</h1>
 
       {asyncProp && (
         <p data-testid="server-result">

diff --git a/npm/react/examples/nextjs/styles/Home.module.css b/npm/react/examples/nextjs/styles/Home.module.css
@@ -0,0 +1,3 @@
+.welcome {
+  color: blue;
+}
diff --git a/npm/react/plugins/next/index-template.html b/npm/react/plugins/next/index-template.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+    <div id="__next_css__DO_NOT_USE__"></div>
+  </head>
+  <body>
+    <div id="__cy_root"></div>
+  </body>
+</html>
diff --git a/npm/react/plugins/next/index.js b/npm/react/plugins/next/index.js
@@ -1,4 +1,5 @@
 const findNextWebpackConfig = require('./findNextWebpackConfig')
+const path = require('path')
 
 module.exports = (on, config) => {
   on('dev-server:start', async (options) => {
@@ -7,7 +8,11 @@ module.exports = (on, config) => {
     // require('webpack') now points to nextjs bundled version
     const { startDevServer } = require('@cypress/webpack-dev-server')
 
-    return startDevServer({ options, webpackConfig })
+    return startDevServer({
+      options,
+      webpackConfig,
+      template: path.resolve(__dirname, 'index-template.html'),
+    })
   })
 
   config.env.reactDevtools = true

diff --git a/npm/vite-dev-server/CHANGELOG.md b/npm/vite-dev-server/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [@cypress/vite-dev-server-v1.2.5](https://github.com/cypress-io/cypress/compare/@cypress/vite-dev-server-v1.2.4...@cypress/vite-dev-server-v1.2.5) (2021-04-27)
+
+
+### Bug Fixes
+
+* **vite-dev-server:** fix url to the client on win ([#16220](https://github.com/cypress-io/cypress/issues/16220)) ([c809d19](https://github.com/cypress-io/cypress/commit/c809d19cc139200232a4292529b3bac60d68e995))
+
 # [@cypress/vite-dev-server-v1.2.4](https://github.com/cypress-io/cypress/compare/@cypress/vite-dev-server-v1.2.3...@cypress/vite-dev-server-v1.2.4) (2021-04-26)
 
 

diff --git a/npm/vue/examples/nuxt/README.md b/npm/vue/examples/nuxt/README.md
@@ -1,5 +1,32 @@
 # cypress-ct-example-nuxt
 
+Example of usage of Cypress component testing within Nuxt
+
+## Disclaimer
+
+This package is meant to run within the cypress monorepo.
+If you copy this project out of the Cypress monorepo, It will work.
+Do not forget to replace the cypress commands in the `package.json` scripts:
+
+- Open `package.json`
+- find the `test` and `cy:open` scripts
+- In those scripts, replace `node ../../../../scripts/cypress` by only `cypress`
+
+You should obtain 
+
+```diff
+{
+  "scripts":{
+-    "cy:open": "node ../../../../scripts/cypress open-ct",
++    "cy:open": "cypress open-ct",
+-    "test": "node ../../../../scripts/cypress run-ct"
++    "test": "cypress run-ct"
+  }
+}
+```
+
+
+
 ## Build Setup
 
 ```bash
@@ -15,6 +42,90 @@ $ yarn start
 
 # generate static project
 $ yarn generate
+
+# start Cypress component testing
+$ yarn cy:open
+
+# run all component tests at once for example on CI
+$ yarn test
 ```
 
-For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
+## Installing Cypress component testing
+
+In a project created using nuxt-create-app, install Cypress component testing by following these steps:
+
+### Install dependencies
+
+TLDR:
+
+```bash
+yarn add -D cypress @cypress/webpack-dev-server @cypress/vue
+```
+
+We need to install:
+- `cypress` as it contains all the tools for finding items, clicking on buttons and do what we would do in the tests.
+- `@cypress/webpack-dev-server` to see the tested components in an environment similar to your app, where they will be used,. We do this to enable importing css files, importing typescript libraries, allow custom webpack aliases. This will enable for example the use of `~` `require('~/assets/styles.css')`.
+- `@cypress/vue` will offer a simple and standard function to mount the components in our test window so that we can use cypress to check if they behave as we expect.
+
+
+### Configure Cypress
+
+To setup any Cypress runner, the standard way is to create a `cypress.json` file at the root of your project. Checkout [the docs](https://docs.cypress.io/guides/references/configuration) to know the extend of your options.
+
+Here is the `cypress.json` file at work in this project:
+
+```js
+// cypress.json
+{
+  // Set this porperty to false to avoid cypress creating 
+  // example `fixture` and `support` folders for fixtures and support files
+  // Remove the 2 lines if you are
+  "fixturesFolder": false,
+  "supportFile": false,
+  // Tell Cypress how to recognize spec files  
+  "testFiles": "**/*spec.ts",
+  // All the component test files are 
+  // located in this directory and its sub-directory
+  "componentFolder": "components"
+}
+```
+
+### Setup Cypress plugins
+
+For the last step of the install process, create a `cypress/plugin/index.js` file.
+This file will let Cypress know how to start the testing server with your Nuxt configuration.
+
+Since Nuxt is using webpack under the hood to build your app, it contains awebpack config.
+We can ask to see this webpack config using the `getWebpackConfig()` function.
+
+```js
+/// <reference types="cypress" />
+const { startDevServer } = require('@cypress/webpack-dev-server')
+const { getWebpackConfig } = require('nuxt')
+
+/**
+ * @type Cypress.PluginConfig
+ */
+module.exports = (on, config) => {
+  on('dev-server:start', async (options) => {
+    // This function asks Nuxt to build its webpack config,
+    // but insteak of launching a Nuxt Server, it returns the config 
+    // object fo us to do as we please
+    let webpackConfig = await getWebpackConfig('modern', 'dev')
+
+    // We can then start the server with the created config
+    return startDevServer({
+      options,
+      webpackConfig,
+    })
+  })
+
+  return config
+}
+```
+
+> NOTE: both the `on` handler function and the PluginConfig return something. Don't forget those returns.
+
+
+
+
diff --git a/npm/vue/examples/nuxt/cypress/plugins.js → ...ue/examples/nuxt/cypress/plugins/index.js b/npm/vue/examples/nuxt/cypress/plugins.js → ...ue/examples/nuxt/cypress/plugins/index.js
@@ -7,13 +7,9 @@ const { getWebpackConfig } = require('nuxt')
  */
 module.exports = (on, config) => {
   on('dev-server:start', async (options) => {
-    let webpackConfig = await getWebpackConfig('client', {
-      for: 'dev',
-    })
-
-    // cleanup the webpack config from everything we do not need for testing components
-    delete webpackConfig.output
-    webpackConfig.plugins = webpackConfig.plugins.filter((a) => a.constructor.name !== 'HtmlWebpackPlugin')
+    // Use the modern configuration of webpack since we
+    // will never use it with Internet Explorer within cypress
+    let webpackConfig = await getWebpackConfig('modern', 'dev')
 
     return startDevServer({
       options,

diff --git a/npm/vue/examples/vue-cli/README.md b/npm/vue/examples/vue-cli/README.md
@@ -0,0 +1,89 @@
+# cypress-ct-example-vue-cli
+
+An Example of how to use Cypress component testing within the Vue CLI
+
+## Install Cypress component testing in Vue CLI
+
+When using, `vue create` to scaffold a new vue project, we can use these steps to setup component testing.
+
+### Install dependencies
+
+TLDR:
+
+```bash
+yarn add -D cypress @cypress/webpack-dev-server @cypress/vue
+```
+
+We need to install:
+- `cypress` as it contains all the tools for finding items, clicking on buttons and do what we would do in the tests.
+- `@cypress/webpack-dev-server` to see the tested components in an environment similar to your app, where they will be used,. We do this to enable importing css files, importing typescript libraries, allow custom webpack aliases. This will enable for example the use of `~` `require('~/assets/styles.css')`.
+- `@cypress/vue` will offer a simple and standard function to mount the components in our test window so that we can use cypress to check if they behave as we expect.
+
+
+### Configure Cypress
+
+To setup any Cypress runner, the standard way is to create a `cypress.json` file at the root of your project. Checkout [the docs](https://docs.cypress.io/guides/references/configuration) to know the extend of your options.
+
+Here is the `cypress.json` file at work in this project:
+
+```js
+// cypress.json
+{
+  // Set this porperty to false to avoid cypress creating 
+  // example `fixture` and `support` folders for fixtures and support files
+  // Remove the 2 lines if you are
+  "fixturesFolder": false,
+  "supportFile": false,
+  // Tell Cypress how to recognize spec files  
+  "testFiles": "**/*spec.js",
+  // All the component test files are 
+  // located in this directory and its sub-directory
+  "componentFolder": "src"
+}
+```
+
+### Setup Cypress plugins
+
+For the last step of the install process, create a `cypress/plugin/index.js` file.
+This file will let Cypress know how to start the testing server with your Nuxt configuration.
+
+Since Vue CLI uses webpack under the hood to build your app, it can export a webpack config object.
+Ask Vue CLi to return this config this webpack config using the `@vue/cli-service/webpack.config` import.
+
+```js
+/// <reference types="cypress" />
+const { startDevServer } = require('@cypress/webpack-dev-server')
+const webpackConfig = require('@vue/cli-service/webpack.config')
+
+/**
+ * @type Cypress.PluginConfig
+ */
+module.exports = (on, config) => {
+  on('dev-server:start', (options) => {
+    return startDevServer({
+      options,
+      webpackConfig: modifiedWebpackConfig,
+    })
+  })
+
+  return config
+}
+
+```
+
+> NOTE: both the `on` handler function and the PluginConfig return something. Don't forget those returns.
+
+
+### PWA Plugin compatibility
+
+The PWA plugin for vue cli uses an unsupported version of HTMLWebpackPlugin: version 3
+To avoid Cypress failing to mount, you can remove the faulty webpack plugin by doing this in your `on('dev-start')` handler:
+
+```js
+const modifiedWebpackConfig = {
+    ...webpackConfig,
+    plugins: (webpackConfig.plugins || []).filter((x) => {
+        return x.constructor.name !== 'HtmlPwaPlugin'
+    }),
+}
+```
diff --git a/npm/vue/examples/vue-cli/cypress/plugins.js → ...examples/vue-cli/cypress/plugins/index.js b/npm/vue/examples/vue-cli/cypress/plugins.js → ...examples/vue-cli/cypress/plugins/index.js
diff --git a/npm/webpack-dev-server/README.md b/npm/webpack-dev-server/README.md
@@ -58,6 +58,16 @@ Webpack-dev-server fulfills his reponsibilities by
     - picks the spec that should be run
     - runs the `AUT-Runner.ts` to load and launch the support file and the current spec
 
+## API
+
+`startDevServer` takes an object of options.
+
+- `options` (required): this contains various internal configuration. It's provided as the first argument to the `dev-server:start` event. Just make sure you pass it.
+- `webpackConfig` (optional): the webpack config used by your application. We provide some [presets](https://github.com/cypress-io/cypress/tree/develop/npm/react/plugins), but you can pass the `webpackConfig` manually, too.
+- `template` (optional): by default [this index.html](https://github.com/cypress-io/cypress/blob/develop/npm/webpack-dev-server/index-template.html) is used. You can provide your own using this option. This is useful if you'd like to include some CDN links, or in some way customize the default html. If you are passing this option, ensure your `index.html` contains the same content as [the default template](https://github.com/cypress-io/cypress/blob/develop/npm/webpack-dev-server/index-template.html). Some of our presets include a custom `index.html`, such as [Next](https://github.com/cypress-io/cypress/tree/develop/npm/react/plugins/next). 
+
+See [npm/react/plugins/next](https://github.com/cypress-io/cypress/blob/develop/npm/react/plugins/next/index.js) for a full example using all the options.
+
 ## Performance tests 
 
 In order to get webpack performance statistics run `yarn cypress open-ct` or `yarn cypress run-ct` with `WEBPACK_PERF_MEASURE` env variable:

diff --git a/npm/webpack-dev-server/src/makeWebpackConfig.ts b/npm/webpack-dev-server/src/makeWebpackConfig.ts
@@ -2,7 +2,7 @@ import { debug as debugFn } from 'debug'
 import * as path from 'path'
 import * as webpack from 'webpack'
 import { merge } from 'webpack-merge'
-import defaultWebpackConfig from './webpack.config'
+import makeDefaultWebpackConfig from './webpack.config'
 import CypressCTOptionsPlugin, { CypressCTOptionsPluginOptions } from './plugin'
 
 const debug = debugFn('cypress:webpack-dev-server:makeWebpackConfig')
@@ -20,13 +20,14 @@ export interface UserWebpackDevServerOptions {
 interface MakeWebpackConfigOptions extends CypressCTOptionsPluginOptions, UserWebpackDevServerOptions {
   devServerPublicPathRoute: string
   isOpenMode: boolean
+  template?: string
 }
 
 const OsSeparatorRE = RegExp(`\\${path.sep}`, 'g')
 const posixSeparator = '/'
 
 export async function makeWebpackConfig (userWebpackConfig: webpack.Configuration, options: MakeWebpackConfigOptions): Promise<webpack.Configuration> {
-  const { projectRoot, devServerPublicPathRoute, files, supportFile, devServerEvents } = options
+  const { projectRoot, devServerPublicPathRoute, files, supportFile, devServerEvents, template } = options
 
   debug(`User passed in webpack config with values %o`, userWebpackConfig)
 
@@ -79,7 +80,7 @@ export async function makeWebpackConfig (userWebpackConfig: webpack.Configuratio
 
   const mergedConfig = merge<webpack.Configuration>(
     userWebpackConfig,
-    defaultWebpackConfig,
+    makeDefaultWebpackConfig(template),
     dynamicWebpackConfig,
   )
 

diff --git a/npm/webpack-dev-server/src/startServer.ts b/npm/webpack-dev-server/src/startServer.ts
@@ -8,11 +8,13 @@ export interface StartDevServer extends UserWebpackDevServerOptions {
   options: Cypress.DevServerOptions
   /* support passing a path to the user's webpack config */
   webpackConfig?: Record<string, any>
+  /* base html template to render in AUT */
+  template?: string
 }
 
 const debug = Debug('cypress:webpack-dev-server:start')
 
-export async function start ({ webpackConfig: userWebpackConfig, options, ...userOptions }: StartDevServer, exitProcess = process.exit): Promise<WebpackDevServer> {
+export async function start ({ webpackConfig: userWebpackConfig, template, options, ...userOptions }: StartDevServer, exitProcess = process.exit): Promise<WebpackDevServer> {
   if (!userWebpackConfig) {
     debug('User did not pass in any webpack configuration')
   }
@@ -22,6 +24,7 @@ export async function start ({ webpackConfig: userWebpackConfig, options, ...use
 
   const webpackConfig = await makeWebpackConfig(userWebpackConfig || {}, {
     files: options.specs,
+    template,
     projectRoot,
     devServerPublicPathRoute,
     devServerEvents: options.devServerEvents,