feat: simplify vite server (#15416)

cypress-io · Mar 31, 2021 · adc2fc8 · adc2fc8 · cypress-bot · Mar 31, 2021
1 parent 651df1b
commit adc2fc8
Showing 37 changed files with 615 additions and 246 deletions.
diff --git a/circle.yml b/circle.yml
@@ -1164,7 +1164,13 @@ jobs:
           at: ~/
       - run:
           name: Run tests
-          command: yarn workspace @cypress/vite-dev-server test
+          command: yarn test --reporter cypress-circleci-reporter --reporter-options resultsDir=./test_results
+          working_directory: npm/vite-dev-server
+      - store_test_results:
+          path: npm/vite-dev-server/test_results
+      - store_artifacts:
+          path: npm/vite-dev-server/cypress/videos
+      - store-npm-logs
 
   npm-rollup-dev-server:
     <<: *defaults

diff --git a/npm/design-system/cypress.json b/npm/design-system/cypress.json
@@ -12,6 +12,5 @@
     "**/__image_snapshots__/*"
   ],
   "componentFolder": "src",
-  "experimentalFetchPolyfill": true,
   "fixturesFolder": false
 }
diff --git a/npm/design-system/cypress/plugins/index.js b/npm/design-system/cypress/plugins/index.js
@@ -1,72 +1,11 @@
 // @ts-check
-const { startDevServer } = require('@cypress/webpack-dev-server')
-const path = require('path')
-const babelConfig = require('../../babel.config.js')
-
-/** @type import("webpack").Configuration */
-const webpackConfig = {
-  resolve: {
-    extensions: ['.js', '.ts', '.jsx', '.tsx', '.scss', '.css'],
-  },
-  mode: 'development',
-  devtool: false,
-  output: {
-    publicPath: '/',
-    chunkFilename: '[name].bundle.js',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx|mjs|ts|tsx)$/,
-        loader: 'babel-loader',
-        options: { ...babelConfig, cacheDirectory: path.resolve(__dirname, '..', '..', '.babel-cache') },
-      },
-      {
-        test: /\.modules?\.s[ac]ss$/i,
-        exclude: [/node_modules/],
-        use: [
-          'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              modules: true,
-            },
-          },
-          'sass-loader',
-        ],
-      },
-      {
-        test: /\.s[ac]ss$/i,
-        exclude: [/node_modules/, /\.modules?\.s[ac]ss$/i],
-        use: ['style-loader', 'css-loader', 'sass-loader'],
-      },
-      {
-        // some of our examples import SVG
-        test: /\.svg$/,
-        loader: 'svg-url-loader',
-      },
-      {
-        // some of our examples import SVG
-        test: /\.svg$/,
-        loader: 'svg-url-loader',
-      },
-      {
-        test: /\.(png|jpg)$/,
-        use: ['file-loader'],
-      },
-      {
-        test: /\.(svg|eot|woff|woff2|ttf)$/,
-        use: ['file-loader'],
-      },
-    ],
-  },
-}
+const { startDevServer } = require('@cypress/vite-dev-server')
 
 /**
  * @type Cypress.PluginConfig
  */
 module.exports = (on, config) => {
-  on('dev-server:start', (options) => startDevServer({ options, webpackConfig, disableLazyCompilation: false }))
+  on('dev-server:start', (options) => startDevServer({ options }))
 
   return config
 }
diff --git a/npm/design-system/index.html b/npm/design-system/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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>AUT Frame</title>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/npm/design-system/package.json b/npm/design-system/package.json
@@ -31,7 +31,7 @@
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "7.10.4",
     "@cypress/react": "0.0.0-development",
-    "@cypress/webpack-dev-server": "0.0.0-development",
+    "@cypress/vite-dev-server": "0.0.0-development",
     "@percy/cypress": "2.3.2",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-image": "2.0.6",
@@ -53,11 +53,8 @@
     "rollup-plugin-postcss-modules": "2.0.2",
     "rollup-plugin-typescript2": "^0.29.0",
     "sass": "1.32.8",
-    "sass-loader": "10.1.1",
-    "style-loader": "0.23.1",
-    "svg-url-loader": "3.0.3",
     "typescript": "4.0.3",
-    "webpack": "4.44.1"
+    "vite": "2.1.3"
   },
   "peerDependencies": {
     "react": "^=16.x || ^=17.x",

diff --git a/npm/rollup-dev-server/index-template.html b/npm/rollup-dev-server/index-template.html
@@ -21,13 +21,34 @@
       return node
     }
 
+    /**
+     * Format the requested spec file.
+     * Nollup writes everything to a single directory (eg /dist)
+     * All outputted files are *.js.
+     * RunnerCt requests specs using the original filename including extension.
+     *
+     * Example usage:
+     * formatSpecName('/cypress/component/foo.spec.tsx') //=> 'foo.spec.js'
+     */
+    function formatSpecName (filename) {
+      const split = filename.split('/')
+      const name = split[split.length - 1]
+      const pos = name.lastIndexOf('.')
+      const newName = `${name.substr(0, pos < 0 ? name.length : pos)}.js`
+
+      return `/${newName}`
+    }
+
     const Cypress = window.Cypress = parent.Cypress
 
+    const specPath = `/__cypress/src/${formatSpecName(window.location.pathname)}`
+
     const importsToLoad = [
-      () => import('{{{specPath}}}'),
       () => {
         {{{supportFile}}}
-      }
+      },
+      () => import(specPath),
+
     ]
 
     Cypress.onSpecWindow(window, importsToLoad)

diff --git a/npm/rollup-dev-server/package.json b/npm/rollup-dev-server/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "tsc",
     "build-prod": "tsc",
-    "cy:open": "node ../../scripts/start.js --component-testing --project ${PWD}",
+    "cy:open": "node ../../scripts/cypress.js open-ct --project ${PWD}",
     "cy:run": "node ../../scripts/cypress.js run-ct --project ${PWD}",
     "test": "yarn cy:run",
     "watch": "tsc -w"

diff --git a/npm/rollup-dev-server/src/makeHtmlPlugin.ts b/npm/rollup-dev-server/src/makeHtmlPlugin.ts
@@ -6,33 +6,11 @@ import { Express } from 'express'
 const indexHtmlPath = resolve(__dirname, '../index-template.html')
 const readIndexHtml = () => readFileSync(indexHtmlPath).toString()
 
-/**
- * Rormat the requested spec file.
- * Nollup writes everything to a single directory (eg /dist)
- * All outputted files are *.js.
- * RunnerCt requests specs using the original filename including extension.
- *
- * Example usage:
- * formatSpecName('/cypress/component/foo.spec.tsx') //=> 'foo.spec.js'
- */
-function formatSpecName (publicPath: string, filename: string) {
-  const split = filename.split('/')
-  const name = split[split.length - 1]
-  const pos = name.lastIndexOf('.')
-  const newName = `${name.substr(0, pos < 0 ? name.length : pos)}.js`
-
-  return `${publicPath}/${newName}`
-}
-
-function handleIndex (indexHtml: string, publicPath: string, supportFilePath: string, cypressSpecPath: string) {
-  const specPath = `/${cypressSpecPath}`
-
-  console.log(supportFilePath)
+function handleIndex (indexHtml: string, projectRoot: string, supportFilePath: string) {
   const supportFile = readFileSync(supportFilePath).toString()
 
   return render(indexHtml, {
     supportFile,
-    specPath: formatSpecName(publicPath, specPath),
   })
 }
 
@@ -47,9 +25,8 @@ export const makeHtmlPlugin = (
   server.use(`${publicPath}/index.html`, (req, res) => {
     const html = handleIndex(
       indexHtml,
-      publicPath,
+      projectRoot,
       supportFilePath,
-      req.headers.__cypress_spec_path as string,
     )
 
     res.end(html)

diff --git a/npm/vite-dev-server/client/initCypressTests.js b/npm/vite-dev-server/client/initCypressTests.js
@@ -0,0 +1,48 @@
+// This file is merged in a <script type=module> into index.html
+// it will be used to load and kick start the selected spec
+
+const supportPath = import.meta.env.__cypress_supportPath
+const originAutUrl = import.meta.env.__cypress_originAutUrl
+
+const specPath = window.location.pathname.replace(originAutUrl, '')
+
+const importsToLoad = [() => import(/* @vite-ignore */ specPath)]
+
+if (supportPath) {
+  importsToLoad.unshift(() => import(/* @vite-ignore */ supportPath))
+}
+
+const CypressInstance = window.Cypress = parent.Cypress
+
+if (!CypressInstance) {
+  throw new Error('Tests cannot run without a reference to Cypress!')
+}
+
+// load the support and spec
+CypressInstance.onSpecWindow(window, importsToLoad)
+
+// then start the test process
+CypressInstance.action('app:window:before:load', window)
+
+// Before all tests we are mounting the root element,
+// Cleaning up platform between tests is the responsibility of the specific adapter
+// because unmounting react/vue component should be done using specific framework API
+// (for devtools and to get rid of global event listeners from previous tests.)
+CypressInstance.on('test:before:run', () => {
+  // leave the error overlay alone if it exists
+  if (document.body.querySelectorAll('vite-error-overlay').length) {
+    // make the error more readable by giving it more space
+    Cypress.action('cy:viewport:changed', { viewportWidth: 1000, viewportHeight: 500 })
+
+    return
+  }
+
+  // reset the viewport to default when in normal mode
+  Cypress.action('cy:viewport:changed', {
+    viewportWidth: Cypress.config('viewportWidth'),
+    viewportHeight: Cypress.config('viewportHeight'),
+  })
+})
+
+// Make usage of node test plugins possible
+window.global = window
diff --git a/npm/vite-dev-server/cypress/components/Foo.tsx b/npm/vite-dev-server/cypress/components/Foo.tsx
diff --git a/npm/vite-dev-server/cypress/components/react/Foo.tsx b/npm/vite-dev-server/cypress/components/react/Foo.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import './foo.css'
+import logo from './logo.png'
+
+export const Foo: React.FC = () => {
+  return (<>
+    <div>Hello world!!!!</div>
+    <img src={logo} />
+  </>)
+}
diff --git a/npm/vite-dev-server/cypress/components/react/foo.css b/npm/vite-dev-server/cypress/components/react/foo.css
@@ -0,0 +1,10 @@
+div{
+    color: white;
+    background: hotpink;
+    padding: 20px;
+    text-align: center;
+}
+
+img{
+    width:50%;
+}
diff --git a/npm/vite-dev-server/cypress/components/react/logo.png b/npm/vite-dev-server/cypress/components/react/logo.png
diff --git a/.../cypress/components/react-no-jsx.spec.jsx → ...ss/components/react/react-no-jsx.spec.jsx b/.../cypress/components/react-no-jsx.spec.jsx → ...ss/components/react/react-no-jsx.spec.jsx
diff --git a/...r/cypress/components/react-no-jsx.spec.ts → ...ess/components/react/react-no-jsx.spec.ts b/...r/cypress/components/react-no-jsx.spec.ts → ...ess/components/react/react-no-jsx.spec.ts
diff --git a/.../cypress/components/react-no-jsx.spec.tsx → ...ss/components/react/react-no-jsx.spec.tsx b/.../cypress/components/react-no-jsx.spec.tsx → ...ss/components/react/react-no-jsx.spec.tsx
@@ -13,10 +13,12 @@ describe('React', () => {
     cy.get('div').contains('Hello world')
   })
 
-  it('renders a react component #3', () => {
-    mount(<Foo />)
-    cy.get('div').contains('Hello world')
-  })
+  it('renders a react component with a different viewport',
+    { viewportWidth: 200, viewportHeight: 170 },
+    () => {
+      mount(<Foo />)
+      cy.get('div').contains('Hello world')
+    })
 
   it('renders a react component #4', () => {
     mount(<Foo />)

diff --git a/npm/vite-dev-server/cypress/components/vue/Card/Card.spec.js b/npm/vite-dev-server/cypress/components/vue/Card/Card.spec.js
@@ -0,0 +1,41 @@
+// In this test file we demo how to test a component with slots and a scoped slot.
+
+// Usage is the same as Vue Test Utils, since slots and scopedSlots
+// in the render options are directly passed through to the Utils mount().
+
+/// <reference types="cypress" />
+import { mount } from '@cypress/vue'
+
+import Card from './Card.vue'
+
+describe('Card', () => {
+  it('skipped slots', () => {
+    mount(Card)
+    cy.contains('Nothing used the Scoped content!').should('be.visible')
+  })
+
+  it('renders slots', () => {
+    mount(Card, {
+      slots: {
+        header: '<h1>HEADER</h1>',
+        footer: '<div>FOOTER</div>',
+      },
+    })
+
+    cy.contains('h1', 'HEADER')
+    cy.contains('div', 'FOOTER')
+  })
+
+  it('renders scopedSlots', () => {
+    mount(Card, {
+      slots: {
+        default: `<template #default="props">
+          <p>Yay! {{props.content}}</p>
+        </template>`,
+      },
+    })
+
+    cy.contains('Yay! Scoped content!').should('be.visible')
+    cy.contains('Nothing used the Scoped content!').should('not.exist')
+  })
+})
diff --git a/npm/vite-dev-server/cypress/components/vue/Card/Card.vue b/npm/vite-dev-server/cypress/components/vue/Card/Card.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="card">
+    <img src="./logo.png" />
+    <slot name="header" />
+    <slot :content="content">
+      <!-- Fallback content if no default slot is given -->
+      <p>Nothing used the {{ content }}</p>
+    </slot>
+    <slot name="footer" />
+  </div>
+</template>
+
+<script>
+// example from https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/components/Card.vue
+// For the sake of demoing scopedSlots, this Card component
+// passes a simple string down to its default slot.
+export default {
+  data() {
+    return {
+      content: "Scoped content!",
+    };
+  },
+};
+</script>
diff --git a/npm/vite-dev-server/cypress/components/vue/Card/logo.png b/npm/vite-dev-server/cypress/components/vue/Card/logo.png