fix(webpack-dev-server): do not encodeUri in loader (#20575)

* fix: do not encodeUri in webpack loader

* add tests

* fix test

* fix: use decodeURI in loader and add tests (#20593)

* add tests for non-unicode and specs with ...

* add more system tests

Co-authored-by: Zachary Williams <[email protected]>

Author: lmiller1990

npm/webpack-dev-server/src/loader.ts

@@ -18,7 +18,7 @@ const makeImport = (file: Cypress.Cypress['spec'], filename: string, chunkName:
   const magicComments = chunkName ? `/* webpackChunkName: "${chunkName}" */` : ''
 
   return `"${filename}": {
-    shouldLoad: () => document.location.pathname.includes("${encodeURI(file.absolute)}"),
+    shouldLoad: () => decodeURI(document.location.pathname).includes("${file.absolute}"),
     load: () => import("${file.absolute}" ${magicComments}),
     chunkName: "${chunkName}",
   }`

npm/webpack-dev-server/test/e2e.spec.ts

@@ -8,12 +8,12 @@ import { webpackDevServerFacts } from '../src/webpackDevServerFacts'
 
 import { defineDevServerConfig, devServer, startDevServer } from '../'
 
-const requestSpecFile = (port: number) => {
+const requestSpecFile = (file: string, port: number) => {
   return new Promise((res) => {
     const opts = {
       host: 'localhost',
       port,
-      path: '/test/fixtures/foo.spec.js',
+      path: encodeURI(file),
     }
 
     const callback = (response: EventEmitter) => {
@@ -41,13 +41,15 @@ const webpackConfig = {
 
 }
 
-const specs: Cypress.Cypress['spec'][] = [
-  {
-    name: `${root}/test/fixtures/foo.spec.js`,
-    relative: `${root}/test/fixtures/foo.spec.js`,
-    absolute: `${root}/test/fixtures/foo.spec.js`,
-  },
-]
+const createSpecs = (name: string): Cypress.Cypress['spec'][] => {
+  return [
+    {
+      name: `${root}/test/fixtures/${name}`,
+      relative: `${root}/test/fixtures/${name}`,
+      absolute: `${root}/test/fixtures/${name}`,
+    },
+  ]
+}
 
 const config = {
   projectRoot: root,
@@ -62,12 +64,12 @@ describe('#startDevServer', () => {
       webpackConfig,
       options: {
         config,
-        specs,
+        specs: createSpecs('foo.spec.js'),
         devServerEvents: new EventEmitter(),
       },
     })
 
-    const response = await requestSpecFile(port as number)
+    const response = await requestSpecFile('/test/fixtures/foo.spec.js', port as number)
 
     expect(response).to.eq('const foo = () => {}\n')
 
@@ -76,13 +78,89 @@ describe('#startDevServer', () => {
     })
   })
 
+  it('serves specs in directory with [] chars via a webpack dev server', async () => {
+    const { port, close } = await startDevServer({
+      webpackConfig,
+      options: {
+        config,
+        specs: createSpecs('[foo]/bar.spec.js'),
+        devServerEvents: new EventEmitter(),
+      },
+    })
+
+    const response = await requestSpecFile('/test/fixtures/[foo]/bar.spec.js', port as number)
+
+    expect(response).to.eq(`it('this is a spec with a path containing []', () => {})\n`)
+
+    return new Promise((res) => {
+      close(() => res())
+    })
+  })
+
+  it('serves specs in directory with non English chars via a webpack dev server', async () => {
+    const { port, close } = await startDevServer({
+      webpackConfig,
+      options: {
+        config,
+        specs: createSpecs('サイプレス.spec.js'),
+        devServerEvents: new EventEmitter(),
+      },
+    })
+
+    const response = await requestSpecFile('/test/fixtures/サイプレス.spec.js', port as number)
+
+    expect(response).to.eq(`it('サイプレス', () => {})\n`)
+
+    return new Promise((res) => {
+      close(() => res())
+    })
+  })
+
+  it('serves specs in directory with ... in the file name via a webpack dev server', async () => {
+    const { port, close } = await startDevServer({
+      webpackConfig,
+      options: {
+        config,
+        specs: createSpecs('[...bar].spec.js'),
+        devServerEvents: new EventEmitter(),
+      },
+    })
+
+    const response = await requestSpecFile('/test/fixtures/[...bar].spec.js', port as number)
+
+    expect(response).to.eq(`it('...bar', () => {})\n`)
+
+    return new Promise((res) => {
+      close(() => res())
+    })
+  })
+
+  it('serves a file with spaces via a webpack dev server', async () => {
+    const { port, close } = await startDevServer({
+      webpackConfig,
+      options: {
+        config,
+        specs: createSpecs('foo bar.spec.js'),
+        devServerEvents: new EventEmitter(),
+      },
+    })
+
+    const response = await requestSpecFile('/test/fixtures/foo bar.spec.js', port as number)
+
+    expect(response).to.eq(`it('this is a spec with a path containing a space', () => {})\n`)
+
+    return new Promise((res) => {
+      close(() => res())
+    })
+  })
+
   it('emits dev-server:compile:success event on successful compilation', async () => {
     const devServerEvents = new EventEmitter()
     const { close } = await startDevServer({
       webpackConfig,
       options: {
         config,
-        specs,
+        specs: createSpecs('foo.spec.js'),
         devServerEvents,
       },
     })
@@ -137,7 +215,7 @@ describe('#startDevServer', () => {
       webpackConfig,
       options: {
         config,
-        specs,
+        specs: createSpecs('foo.spec.js'),
         devServerEvents,
       },
     })
@@ -172,13 +250,13 @@ describe('#startDevServer', () => {
     const { port, close } = await devServer(
       {
         config,
-        specs,
+        specs: createSpecs('foo.spec.js'),
         devServerEvents,
       },
       defineDevServerConfig({ webpackConfig }),
     )
 
-    const response = await requestSpecFile(port as number)
+    const response = await requestSpecFile('/test/fixtures/foo.spec.js', port as number)
 
     expect(response).to.eq('const foo = () => {}\n')
 

npm/webpack-dev-server/test/fixtures/[...bar].spec.js

@@ -0,0 +1 @@
+it('...bar', () => {})

npm/webpack-dev-server/test/fixtures/[foo]/bar.spec.js

@@ -0,0 +1 @@
+it('this is a spec with a path containing []', () => {})

npm/webpack-dev-server/test/fixtures/foo bar.spec.js

@@ -0,0 +1 @@
+it('this is a spec with a path containing a space', () => {})

npm/webpack-dev-server/test/fixtures/サイプレス.spec.js

@@ -0,0 +1 @@
+it('サイプレス', () => {})

packages/server/lib/controllers/iframes.ts

@@ -45,7 +45,7 @@ export const iframesController = {
     // attach header data for webservers
     // to properly intercept and serve assets from the correct src root
     // TODO: define a contract for dev-server plugins to configure this behavior
-    req.headers.__cypress_spec_path = req.params[0]
+    req.headers.__cypress_spec_path = encodeURI(req.params[0])
     req.url = `${config.devServerPublicPathRoute}/index.html`
 
     // user the node proxy here instead of the network proxy

system-tests/projects/webpack-dev-server/cypress.json

@@ -0,0 +1 @@
+{}

system-tests/projects/webpack-dev-server/cypress/component/[...bar].spec.js

@@ -0,0 +1 @@
+it('...bar', () => {})

system-tests/projects/webpack-dev-server/cypress/component/[foo]/bar.spec.js

@@ -0,0 +1,5 @@
+describe('this test is in a directory with [] in the path', () => {
+  it('works great!', () => {
+    expect(1).to.eq(1)
+  })
+})

system-tests/projects/webpack-dev-server/cypress/component/foo bar.spec.js

@@ -0,0 +1,5 @@
+describe('this test is in a file with space in the path', () => {
+  it('works great!', () => {
+    expect(1).to.eq(1)
+  })
+})

system-tests/projects/webpack-dev-server/cypress/component/サイプレス.spec.js

@@ -0,0 +1 @@
+it('サイプレス', () => {})

system-tests/projects/webpack-dev-server/cypress/plugins/index.js

@@ -0,0 +1,10 @@
+const { startDevServer } = require('@cypress/webpack-dev-server')
+
+module.exports = (on, config) => {
+  on('dev-server:start', (options) => {
+    return startDevServer({
+      options,
+      webpackConfig: {},
+    })
+  })
+}

system-tests/projects/webpack-dev-server/cypress/support/component.js

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "webpack": "^4"
+  }
+}