From a049ed7f3a2f9a709e466f60bf2da775312af521 Mon Sep 17 00:00:00 2001 From: Zachary Williams Date: Wed, 13 Jul 2022 14:10:51 -0500 Subject: [PATCH] add unit test and fix types --- npm/webpack-dev-server/src/devServer.ts | 6 ++-- .../src/helpers/nextHandler.ts | 3 +- .../handlers/createReactAppHandler.spec.ts | 6 ++-- .../test/handlers/nextHandler.spec.ts | 29 +++++++++++++++---- .../test/handlers/nuxtHandler.spec.ts | 2 +- .../test/handlers/vueCliHandler.spec.ts | 4 +-- 6 files changed, 36 insertions(+), 14 deletions(-) diff --git a/npm/webpack-dev-server/src/devServer.ts b/npm/webpack-dev-server/src/devServer.ts index 6fd1e7ad8300..2b56a8252d00 100644 --- 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 { +type Optional = Pick, K> & Omit + +async function getPreset (devServerConfig: WebpackDevServerConfig): Promise> { 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 index 54b9e5e541da..bba9fa5f8ea8 100644 --- 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 = [/(? 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 index bcef18318d4d..2fc24719e00d 100644 --- 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 index f5b1c7b9ec9c..206e2c70b85f 100644 --- 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 index edba8b9b5a0c..4048cf05f3c7 100644 --- 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 index 11ebd37c3a96..cc9d2ebdddfb 100644 --- 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/cli-service@4.x 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')) }) })