From 7a5071bc637944d25711b7734dd6e6f741a6c6a5 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Fri, 20 Dec 2024 16:55:48 +0300 Subject: [PATCH] test: fix --- .../__snapshots__/init.test.js.snap.webpack5 | 60 +++++++++++++++---- test/create-webpack-app/init/init.test.js | 36 +++++------ 2 files changed, 64 insertions(+), 32 deletions(-) diff --git a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 index d4374a8be83..59cc6e322b1 100644 --- a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 +++ b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 @@ -619,6 +619,7 @@ exports[`create-webpack-app cli should generate react template with state and ro "babel-loader": "x.x.x", "css-loader": "x.x.x", "html-webpack-plugin": "x.x.x", + "mini-css-extract-plugin": "x.x.x", "postcss": "x.x.x", "postcss-loader": "x.x.x", "react": "x.x.x", @@ -646,12 +647,13 @@ exports[`create-webpack-app cli should generate react template with state and ro const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); const isProduction = process.env.NODE_ENV === 'production'; -const stylesHandler = 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; @@ -709,6 +711,8 @@ module.exports = () => { if (isProduction) { config.mode = 'production'; + config.plugins.push(new MiniCssExtractPlugin()); + config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); @@ -848,6 +852,7 @@ exports[`create-webpack-app cli should generate svelte template with prompt answ "babel-loader": "x.x.x", "css-loader": "x.x.x", "html-webpack-plugin": "x.x.x", + "mini-css-extract-plugin": "x.x.x", "postcss": "x.x.x", "postcss-loader": "x.x.x", "style-loader": "x.x.x", @@ -874,12 +879,13 @@ exports[`create-webpack-app cli should generate svelte template with prompt answ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); const isProduction = process.env.NODE_ENV === 'production'; -const stylesHandler = 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; @@ -948,6 +954,8 @@ module.exports = () => { if (isProduction) { config.mode = 'production'; + config.plugins.push(new MiniCssExtractPlugin()); + config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); @@ -1157,6 +1165,7 @@ exports[`create-webpack-app cli should generate vue template with store and rout "babel-loader": "x.x.x", "css-loader": "x.x.x", "html-webpack-plugin": "x.x.x", + "mini-css-extract-plugin": "x.x.x", "pinia": "x.x.x", "postcss": "x.x.x", "postcss-loader": "x.x.x", @@ -1187,12 +1196,13 @@ exports[`create-webpack-app cli should generate vue template with store and rout const path = require('path'); const { VueLoaderPlugin } = require('vue-loader'); const HtmlWebpackPlugin = require('html-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); const isProduction = process.env.NODE_ENV === 'production'; -const stylesHandler = 'vue-style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader'; @@ -1254,6 +1264,8 @@ module.exports = () => { if (isProduction) { config.mode = 'production'; + config.plugins.push(new MiniCssExtractPlugin()); + config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); @@ -1272,6 +1284,7 @@ exports[`create-webpack-app cli should use less in project when selected 1`] = ` "css-loader": "x.x.x", "less": "x.x.x", "less-loader": "x.x.x", + "mini-css-extract-plugin": "x.x.x", "style-loader": "x.x.x", "webpack": "x.x.x", "webpack-cli": "x.x.x", @@ -1290,11 +1303,12 @@ exports[`create-webpack-app cli should use less in project when selected 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const isProduction = process.env.NODE_ENV === 'production'; -const stylesHandler = 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; @@ -1329,6 +1343,8 @@ module.exports = () => { if (isProduction) { config.mode = 'production'; + config.plugins.push(new MiniCssExtractPlugin()); + } else { config.mode = 'development'; @@ -1343,6 +1359,7 @@ exports[`create-webpack-app cli should use mini-css-extract-plugin when selected "description": "My webpack project", "devDependencies": { "css-loader": "x.x.x", + "mini-css-extract-plugin": "x.x.x", "sass": "x.x.x", "sass-loader": "x.x.x", "style-loader": "x.x.x", @@ -1363,11 +1380,12 @@ exports[`create-webpack-app cli should use mini-css-extract-plugin when selected "// Generated using webpack-cli https://github.com/webpack/webpack-cli const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const isProduction = process.env.NODE_ENV === 'production'; -const stylesHandler = 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; @@ -1402,6 +1420,8 @@ module.exports = () => { if (isProduction) { config.mode = 'production'; + config.plugins.push(new MiniCssExtractPlugin()); + } else { config.mode = 'development'; @@ -1417,6 +1437,7 @@ exports[`create-webpack-app cli should use postcss in project when selected 1`] "devDependencies": { "autoprefixer": "x.x.x", "css-loader": "x.x.x", + "mini-css-extract-plugin": "x.x.x", "postcss": "x.x.x", "postcss-loader": "x.x.x", "style-loader": "x.x.x", @@ -1437,11 +1458,12 @@ exports[`create-webpack-app cli should use postcss in project when selected 2`] "// Generated using webpack-cli https://github.com/webpack/webpack-cli const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const isProduction = process.env.NODE_ENV === 'production'; -const stylesHandler = 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; @@ -1476,6 +1498,8 @@ module.exports = () => { if (isProduction) { config.mode = 'production'; + config.plugins.push(new MiniCssExtractPlugin()); + } else { config.mode = 'development'; @@ -1491,6 +1515,7 @@ exports[`create-webpack-app cli should use sass and css with postcss in project "devDependencies": { "autoprefixer": "x.x.x", "css-loader": "x.x.x", + "mini-css-extract-plugin": "x.x.x", "postcss": "x.x.x", "postcss-loader": "x.x.x", "sass": "x.x.x", @@ -1513,11 +1538,12 @@ exports[`create-webpack-app cli should use sass and css with postcss in project "// Generated using webpack-cli https://github.com/webpack/webpack-cli const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const isProduction = process.env.NODE_ENV === 'production'; -const stylesHandler = 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; @@ -1556,6 +1582,8 @@ module.exports = () => { if (isProduction) { config.mode = 'production'; + config.plugins.push(new MiniCssExtractPlugin()); + } else { config.mode = 'development'; @@ -1570,6 +1598,7 @@ exports[`create-webpack-app cli should use sass in project when selected 1`] = ` "description": "My webpack project", "devDependencies": { "css-loader": "x.x.x", + "mini-css-extract-plugin": "x.x.x", "sass": "x.x.x", "sass-loader": "x.x.x", "style-loader": "x.x.x", @@ -1590,11 +1619,12 @@ exports[`create-webpack-app cli should use sass in project when selected 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const isProduction = process.env.NODE_ENV === 'production'; -const stylesHandler = 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; @@ -1629,6 +1659,8 @@ module.exports = () => { if (isProduction) { config.mode = 'production'; + config.plugins.push(new MiniCssExtractPlugin()); + } else { config.mode = 'development'; @@ -1644,6 +1676,7 @@ exports[`create-webpack-app cli should use sass with postcss in project when sel "devDependencies": { "autoprefixer": "x.x.x", "css-loader": "x.x.x", + "mini-css-extract-plugin": "x.x.x", "postcss": "x.x.x", "postcss-loader": "x.x.x", "sass": "x.x.x", @@ -1666,11 +1699,12 @@ exports[`create-webpack-app cli should use sass with postcss in project when sel "// Generated using webpack-cli https://github.com/webpack/webpack-cli const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const isProduction = process.env.NODE_ENV === 'production'; -const stylesHandler = 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; @@ -1705,6 +1739,8 @@ module.exports = () => { if (isProduction) { config.mode = 'production'; + config.plugins.push(new MiniCssExtractPlugin()); + } else { config.mode = 'development'; @@ -1719,6 +1755,7 @@ exports[`create-webpack-app cli should use stylus in project when selected 1`] = "description": "My webpack project", "devDependencies": { "css-loader": "x.x.x", + "mini-css-extract-plugin": "x.x.x", "style-loader": "x.x.x", "stylus": "x.x.x", "stylus-loader": "x.x.x", @@ -1739,11 +1776,12 @@ exports[`create-webpack-app cli should use stylus in project when selected 2`] = "// Generated using webpack-cli https://github.com/webpack/webpack-cli const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const isProduction = process.env.NODE_ENV === 'production'; -const stylesHandler = 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; @@ -1778,6 +1816,8 @@ module.exports = () => { if (isProduction) { config.mode = 'production'; + config.plugins.push(new MiniCssExtractPlugin()); + } else { config.mode = 'development'; diff --git a/test/create-webpack-app/init/init.test.js b/test/create-webpack-app/init/init.test.js index 9f232a19eb9..9ca5504f69f 100644 --- a/test/create-webpack-app/init/init.test.js +++ b/test/create-webpack-app/init/init.test.js @@ -9,6 +9,7 @@ jest.setTimeout(480000); const { run, runPromptWithAnswers } = createPathDependentUtils("create-webpack-app"); const ENTER = "\x0D"; +const UP = "\x1B\x5B\x41"; const DOWN = "\x1B\x5B\x42"; const defaultTemplateFiles = [ @@ -152,7 +153,7 @@ describe("create-webpack-app cli", () => { const { stdout } = await runPromptWithAnswers( assetsPath, ["init", "."], - [`${DOWN}${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, ENTER, ENTER], + [`${DOWN}${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${UP}${ENTER}`, ENTER], ); expect(stdout).toContain("Project has been initialised with webpack!"); @@ -182,7 +183,7 @@ describe("create-webpack-app cli", () => { const { stdout } = await runPromptWithAnswers( assetsPath, ["init", "."], - [`${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, ENTER, ENTER], + [`${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${UP}${ENTER}`, ENTER], ); expect(stdout).toContain("Project has been initialised with webpack!"); @@ -213,7 +214,7 @@ describe("create-webpack-app cli", () => { `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, - `${DOWN}${DOWN}${ENTER}`, + `${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, @@ -246,7 +247,7 @@ describe("create-webpack-app cli", () => { `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, - `${DOWN}${DOWN}${ENTER}`, + `${DOWN}${ENTER}`, `n${ENTER}`, `y${ENTER}`, `n${ENTER}`, @@ -281,7 +282,7 @@ describe("create-webpack-app cli", () => { `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, - `${DOWN}${DOWN}${ENTER}`, + `${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, `y${ENTER}`, @@ -314,7 +315,7 @@ describe("create-webpack-app cli", () => { `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, - `${DOWN}${DOWN}${ENTER}`, + `${DOWN}${ENTER}`, `y${ENTER}`, `y${ENTER}`, `n${ENTER}`, @@ -349,7 +350,7 @@ describe("create-webpack-app cli", () => { `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, - `${DOWN}${DOWN}${DOWN}${ENTER}`, + `${DOWN}${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, @@ -382,7 +383,7 @@ describe("create-webpack-app cli", () => { `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, - `${DOWN}${DOWN}${DOWN}${DOWN}${ENTER}`, + `${DOWN}${DOWN}${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, @@ -410,7 +411,7 @@ describe("create-webpack-app cli", () => { const { stdout } = await runPromptWithAnswers( assetsPath, ["init", "."], - [ENTER, ENTER, `n${ENTER}`, `n${ENTER}`, ENTER, ENTER], + [ENTER, ENTER, `n${ENTER}`, `n${ENTER}`, `${UP}${ENTER}`, ENTER], ); expect(stdout).toContain("Would you like to use Webpack Dev server?"); @@ -434,16 +435,7 @@ describe("create-webpack-app cli", () => { const { stdout } = await runPromptWithAnswers( assetsPath, ["init", "."], - [ - `${ENTER}`, - `n${ENTER}`, - `n${ENTER}`, - `n${ENTER}`, - `${DOWN}${ENTER}`, - ENTER, - `n${ENTER}`, - ENTER, - ], + [`${ENTER}`, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, ENTER, ENTER, ENTER, ENTER], ); expect(stdout).toContain("Project has been initialised with webpack!"); @@ -468,7 +460,7 @@ describe("create-webpack-app cli", () => { const { stdout } = await runPromptWithAnswers( assetsPath, ["init", "."], - [ENTER, `n${ENTER}`, ENTER, `n${ENTER}`, ENTER, ENTER], + [ENTER, `n${ENTER}`, ENTER, `n${ENTER}`, `${UP}${ENTER}`, ENTER], ); expect(stdout).toContain("Do you want to simplify the creation of HTML files for your bundle?"); @@ -492,7 +484,7 @@ describe("create-webpack-app cli", () => { const { stdout } = await runPromptWithAnswers( assetsPath, ["init", "."], - [ENTER, `n${ENTER}`, ENTER, ENTER, ENTER, ENTER], + [ENTER, `n${ENTER}`, ENTER, ENTER, `${UP}${ENTER}`, ENTER], ); expect(stdout).toContain("Do you want to add PWA support?"); @@ -628,7 +620,7 @@ describe("create-webpack-app cli", () => { const { stdout } = await runPromptWithAnswers( assetsPath, ["init", "."], - [ENTER, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, ENTER, `${DOWN}${ENTER}`], + [ENTER, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${UP}${ENTER}`, `${DOWN}${ENTER}`], ); expect(stdout).toContain("Project has been initialised with webpack!");