add unit test and fix types

cypress-io · Jul 13, 2022 · a049ed7 · a049ed7 · cypress-bot · Jul 13, 2022
1 parent 7f1dc8b
commit a049ed7
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 14 deletions.
diff --git a/npm/webpack-dev-server/src/devServer.ts b/npm/webpack-dev-server/src/devServer.ts
@@ -98,9 +98,11 @@ export function devServer (devServerConfig: WebpackDevServerConfig): Promise<Cyp
   })
 }
 
-export type PresetHandlerResult = { frameworkConfig?: Configuration, sourceWebpackModulesResult: SourceRelativeWebpackResult }
+export type PresetHandlerResult = { frameworkConfig: Configuration, sourceWebpackModulesResult: SourceRelativeWebpackResult }
 
-async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<PresetHandlerResult> {
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<Optional<PresetHandlerResult, 'frameworkConfig'>> {
   switch (devServerConfig.framework) {
     case 'create-react-app':
       return createReactAppHandler(devServerConfig)

diff --git a/npm/webpack-dev-server/src/helpers/nextHandler.ts b/npm/webpack-dev-server/src/helpers/nextHandler.ts
@@ -262,7 +262,8 @@ function watchEntryPoint (webpackConfig: Configuration) {
 
 const globalCssRe = [/(?<!\.module)\.css$/, /(?<!\.module)\.(scss|sass)$/]
 const globalCssModulesRe = [/\.module\.css$/, /\.module\.(scss|sass)$/]
-const allCssTests = [...globalCssRe, ...globalCssModulesRe]
+
+export const allCssTests = [...globalCssRe, ...globalCssModulesRe]
 
 // Next does not allow global styles to be loaded outside of the main <App /> component.
 // We want users to be able to import the global styles into their component support file so we

diff --git a/npm/webpack-dev-server/test/handlers/createReactAppHandler.spec.ts b/npm/webpack-dev-server/test/handlers/createReactAppHandler.spec.ts
@@ -17,7 +17,7 @@ const expectEslintModifications = (webpackConfig: Configuration) => {
 }
 
 const expectModuleSourceInPlaceModifications = (webpackConfig: Configuration, projectRoot: string) => {
-  const moduleSourcePlugin: any = webpackConfig.resolve.plugins.find((plugin) => plugin.constructor.name === 'ModuleScopePlugin')
+  const moduleSourcePlugin: any = webpackConfig.resolve?.plugins?.find((plugin) => plugin.constructor.name === 'ModuleScopePlugin')
 
   if (!moduleSourcePlugin) {
     throw new Error('Expected to find ModuleScopePlugin in webpack config')
@@ -27,7 +27,7 @@ const expectModuleSourceInPlaceModifications = (webpackConfig: Configuration, pr
 }
 
 const expectBabelRuleModifications = (webpackConfig: Configuration, projectRoot: string) => {
-  const babelRule: any = (webpackConfig.module.rules as any).find((rule) => rule.oneOf)?.oneOf.find((oneOf) => oneOf.loader?.includes('babel-loader'))
+  const babelRule: any = (webpackConfig.module?.rules as any)?.find((rule) => rule.oneOf)?.oneOf.find((oneOf) => oneOf.loader?.includes('babel-loader'))
 
   if (!babelRule) {
     throw new Error('Expected to find BabelRule in webpack config')
@@ -37,7 +37,7 @@ const expectBabelRuleModifications = (webpackConfig: Configuration, projectRoot:
 }
 
 const expectReactScriptsFiveModifications = (webpackConfig: Configuration) => {
-  const definePlugin: any = webpackConfig.plugins.find((plugin) => plugin.constructor.name === 'DefinePlugin')
+  const definePlugin: any = webpackConfig.plugins?.find((plugin) => plugin.constructor.name === 'DefinePlugin')
 
   if (!definePlugin) {
     throw new Error('Expected to find DefinePlugin in webpack config')

diff --git a/npm/webpack-dev-server/test/handlers/nextHandler.spec.ts b/npm/webpack-dev-server/test/handlers/nextHandler.spec.ts
@@ -1,27 +1,44 @@
 import { scaffoldMigrationProject } from '../test-helpers/scaffoldProject'
 import { expect } from 'chai'
-import { nextHandler } from '../../src/helpers/nextHandler'
-import type { Configuration } from 'webpack'
+import { nextHandler, allCssTests } from '../../src/helpers/nextHandler'
+import type { Configuration, RuleSetRule } from 'webpack'
 import * as path from 'path'
 import { WebpackDevServerConfig } from '../../src/devServer'
 import '../support'
 
 const expectWatchOverrides = (webpackConfig: Configuration) => {
-  expect(webpackConfig.watchOptions.ignored).to.contain('**/node_modules/!(@cypress/webpack-dev-server/dist/browser.js)**')
+  expect(webpackConfig.watchOptions?.ignored).to.contain('**/node_modules/!(@cypress/webpack-dev-server/dist/browser.js)**')
 }
 
 const expectPagesDir = (webpackConfig: Configuration, projectRoot: string) => {
-  const ReactLoadablePlugin: any = webpackConfig.plugins.find((plugin) => plugin.constructor.name === 'ReactLoadablePlugin')
+  const ReactLoadablePlugin: any = webpackConfig.plugins?.find((plugin) => plugin.constructor.name === 'ReactLoadablePlugin')
 
   expect(ReactLoadablePlugin.pagesDir).eq(path.join(projectRoot, 'pages'))
 }
 
 const expectWebpackSpan = (webpackConfig: Configuration) => {
-  const ProfilingPlugin: any = webpackConfig.plugins.find((plugin) => plugin.constructor.name === 'ProfilingPlugin')
+  const ProfilingPlugin: any = webpackConfig.plugins?.find((plugin) => plugin.constructor.name === 'ProfilingPlugin')
 
   expect(ProfilingPlugin.runWebpackSpan).to.exist
 }
 
+const expectGlobalStyleOverrides = (webpackConfig: Configuration) => {
+  const cssRules: RuleSetRule[] = []
+
+  for (const rule of webpackConfig.module?.rules as RuleSetRule[]) {
+    if (rule.oneOf) {
+      for (const oneOf of rule.oneOf) {
+        if (oneOf.test && allCssTests.some((re) => re.source === (oneOf as any).test?.source)) {
+          cssRules.push(oneOf)
+        }
+      }
+    }
+  }
+
+  expect(cssRules).to.have.length.greaterThan(0)
+  cssRules.forEach((rule) => expect(rule.issuer).to.be.undefined)
+}
+
 describe('nextHandler', function () {
   // can take a while since we install node_modules
   this.timeout(1000 * 60)
@@ -39,6 +56,7 @@ describe('nextHandler', function () {
     expectWatchOverrides(webpackConfig)
     expectPagesDir(webpackConfig, projectRoot)
     expectWebpackSpan(webpackConfig)
+    expectGlobalStyleOverrides(webpackConfig)
   })
 
   it('sources from a next-11 project', async () => {
@@ -54,6 +72,7 @@ describe('nextHandler', function () {
     expectWatchOverrides(webpackConfig)
     expectPagesDir(webpackConfig, projectRoot)
     expectWebpackSpan(webpackConfig)
+    expectGlobalStyleOverrides(webpackConfig)
   })
 
   it('throws if nodeVersion is set to bundled', async () => {

diff --git a/npm/webpack-dev-server/test/handlers/nuxtHandler.spec.ts b/npm/webpack-dev-server/test/handlers/nuxtHandler.spec.ts
@@ -18,7 +18,7 @@ describe('nuxtHandler', function () {
     } as WebpackDevServerConfig)
 
     // Verify it's a Vue-specific webpack config by seeing if VueLoader is present.
-    expect(webpackConfig.plugins.find((plug) => plug.constructor.name === 'VueLoader'))
+    expect(webpackConfig.plugins?.find((plug) => plug.constructor.name === 'VueLoader'))
     expect(webpackConfig.performance).to.be.undefined
   })
 })
diff --git a/npm/webpack-dev-server/test/handlers/vueCliHandler.spec.ts b/npm/webpack-dev-server/test/handlers/vueCliHandler.spec.ts
@@ -18,7 +18,7 @@ describe('vueCliHandler', function () {
     } as WebpackDevServerConfig)
 
     // Verify it's a Vue-specific webpack config by seeing if VueLoader is present.
-    expect(webpackConfig.plugins.find((plug) => plug.constructor.name === 'VueLoader'))
+    expect(webpackConfig.plugins?.find((plug) => plug.constructor.name === 'VueLoader'))
   })
 
   it('sources from a @vue/[email protected] project with Vue 2', async () => {
@@ -31,6 +31,6 @@ describe('vueCliHandler', function () {
     } as WebpackDevServerConfig)
 
     // Verify it's a Vue-specific webpack config by seeing if VueLoader is present.
-    expect(webpackConfig.plugins.find((plug) => plug.constructor.name === 'VueLoader'))
+    expect(webpackConfig.plugins?.find((plug) => plug.constructor.name === 'VueLoader'))
   })
 })