feat(server/client): made progress option available to API (#1961)

* feat(server/client): made progress option available to API
* test(client): switched snapshot test to single line confirmation
* refactor(server): removed this.profile
* test(client): fixed progress test css path
* test(client): remove jest timeout
* test(e2e): change how use of progress on client checked
* test(e2e): moved css unlink into afterAll
* test(e2e): use port assigner
* test(client): add full progress snapshot
* test(client): reg exp progress test
* test(client): check end of progress updates in console
* test(client): more generalized test reg exp
* test(client): test to isolate ci problem
* test(client): made custom progress plugin to test
* test(client): new progress plugin multi handler test
* test(client): more testing to identify progress problem
* test(client): test with 1 progress plugin
* test(client): new console.log to test sending of data
* feat(server): re-add two progress plugins
* test(client): revert to original changes
* test(progress): added progress and profile option tests
* fix(test): fix profile test port map

Author: knagaitsev

bin/options.js

@@ -37,6 +37,10 @@ const options = {
 describe:
 'Inline mode (set to false to disable including client scripts like livereload)',
 },
+profile: {
+type: 'boolean',
+describe: 'Print compilation profile data for progress steps',
+},
 progress: {
 type: 'boolean',
 describe: 'Print compilation progress in percentage',

bin/webpack-dev-server.js

@@ -97,12 +97,6 @@ function startDevServer(config, options) {
 throwerr;
 }
 
-if(options.progress){
-newwebpack.ProgressPlugin({
-profile: argv.profile,
-}).apply(compiler);
-}
-
 try{
 server=newServer(compiler,options,log);
 }catch(err){

lib/Server.js

@@ -154,23 +154,25 @@ class Server {
 }
 
 setupProgressPlugin(){
-constprogressPlugin=newwebpack.ProgressPlugin(
-(percent,msg,addInfo)=>{
-percent=Math.floor(percent*100);
+// for CLI output
+newwebpack.ProgressPlugin({
+profile: !!this.options.profile,
+}).apply(this.compiler);
 
-if(percent===100){
-msg='Compilation completed';
-}
+// for browser console output
+newwebpack.ProgressPlugin((percent,msg,addInfo)=>{
+percent=Math.floor(percent*100);
 
-if(addInfo){
-msg=`${msg} (${addInfo})`;
-}
+if(percent===100){
+msg='Compilation completed';
+}
 
-this.sockWrite(this.sockets,'progress-update',{ percent, msg });
+if(addInfo){
+msg=`${msg} (${addInfo})`;
 }
-);
 
-progressPlugin.apply(this.compiler);
+this.sockWrite(this.sockets,'progress-update',{ percent, msg });
+}).apply(this.compiler);
 }
 
 setupApp(){

lib/options.json

@@ -258,6 +258,9 @@
  }
  ]
  },
+"profile": {
+"type": "boolean"
+ },
 "progress": {
 "type": "boolean"
  },
@@ -426,6 +429,7 @@
 "pfx": "should be {String|Buffer} (https://webpack.js.org/configuration/dev-server/#devserverpfx)",
 "pfxPassphrase": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserverpfxpassphrase)",
 "port": "should be {Number|String|Null} (https://webpack.js.org/configuration/dev-server/#devserverport)",
+"profile": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverprofile)",
 "progress": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverprogress---cli-only)",
 "proxy": "should be {Object|Array} (https://webpack.js.org/configuration/dev-server/#devserverproxy)",
 "public": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserverpublic)",

lib/utils/createConfig.js

@@ -47,6 +47,10 @@ function createConfig(config, argv, { port }) {
 options.liveReload=false;
 }
 
+if(argv.profile){
+options.profile=argv.profile;
+}
+
 if(argv.progress){
 options.progress=argv.progress;
 }

test/cli/cli.test.js

@@ -20,6 +20,23 @@ describe('CLI', () => {
 .then((output)=>{
 expect(output.code).toEqual(0);
 expect(output.stderr.includes('0% compiling')).toBe(true);
+// should not profile
+expect(
+output.stderr.includes('ms after chunk modules optimization')
+).toBe(false);
+done();
+})
+.catch(done);
+});
+
+it('--progress --profile',(done)=>{
+testBin('--progress --profile')
+.then((output)=>{
+expect(output.code).toEqual(0);
+// should profile
+expect(
+output.stderr.includes('ms after chunk modules optimization')
+).toBe(true);
 done();
 })
 .catch(done);

test/e2e/Progress.test.js

@@ -0,0 +1,71 @@
+'use strict';
+
+/* eslint-disable
+ no-undef
+*/
+constfs=require('fs');
+const{ resolve }=require('path');
+consttestServer=require('../helpers/test-server');
+constreloadConfig=require('../fixtures/reload-config/webpack.config');
+construnBrowser=require('../helpers/run-browser');
+constport=require('../ports-map').Progress;
+
+constcssFilePath=resolve(__dirname,'../fixtures/reload-config/main.css');
+
+describe('client progress',()=>{
+describe('using hot',()=>{
+beforeAll((done)=>{
+fs.writeFileSync(
+cssFilePath,
+'body { background-color: rgb(0, 0, 255); }'
+);
+constoptions={
+ port,
+host: '0.0.0.0',
+inline: true,
+hot: true,
+progress: true,
+watchOptions: {
+poll: 500,
+},
+};
+testServer.startAwaitingCompilation(reloadConfig,options,done);
+});
+
+afterAll((done)=>{
+fs.unlinkSync(cssFilePath);
+testServer.close(done);
+});
+
+describe('on browser client',()=>{
+it('should console.log progress',(done)=>{
+runBrowser().then(({ page, browser })=>{
+constres=[];
+page.waitForNavigation({waitUntil: 'load'}).then(()=>{
+fs.writeFileSync(
+cssFilePath,
+'body { background-color: rgb(255, 0, 0); }'
+);
+page.waitFor(10000).then(()=>{
+browser.close().then(()=>{
+// check that there is some percentage progress output
+constregExp=/^\[WDS\][0-9]{1,3}%-/;
+constmatch=res.find((line)=>{
+returnregExp.test(line);
+});
+// eslint-disable-next-line no-undefined
+expect(match).not.toEqual(undefined);
+done();
+});
+});
+});
+
+page.goto(`http://localhost:${port}/main`);
+page.on('console',(data)=>{
+res.push(data.text());
+});
+});
+});
+});
+});
+});

test/options.test.js

@@ -309,6 +309,10 @@ describe('options', () => {
 success: ['',0,null],
 failure: [false],
 },
+profile: {
+success: [false],
+failure: [''],
+},
 progress: {
 success: [false],
 failure: [''],

test/ports-map.js

@@ -40,6 +40,9 @@ const portsList = {
 WebsocketServer: 1,
 ClientMode: 1,
 'clientMode-option': 1,
+Progress: 1,
+'progress-option': 1,
+'profile-option': 1,
 };
 
 letstartPort=8079;

test/server/profile-option.test.js

@@ -0,0 +1,53 @@
+'use strict';
+
+constwebpack=require('webpack');
+constServer=require('../../lib/Server');
+constconfig=require('../fixtures/simple-config/webpack.config');
+constport=require('../ports-map')['profile-option'];
+
+describe('profile',()=>{
+describe('output',()=>{
+letmockStderr;
+
+beforeAll(()=>{
+mockStderr=jest
+.spyOn(process.stderr,'write')
+.mockImplementation(()=>{});
+});
+
+it('should show percentage progress with profile data',(done)=>{
+constcompiler=webpack(config);
+constserver=newServer(compiler,{
+ port,
+// profile will only have an effect when progress is enabled
+progress: true,
+profile: true,
+});
+
+compiler.hooks.done.tap('webpack-dev-server',()=>{
+constcalls=mockStderr.mock.calls;
+mockStderr.mockRestore();
+letfoundProgress=false;
+letfoundProfile=false;
+calls.forEach((call)=>{
+if(call[0].includes('0% compiling')){
+foundProgress=true;
+}
+
+// this is an indicator that the profile option is enabled,
+// so we should expect to find it in stderr since profile is enabled
+if(call[0].includes('ms after chunk modules optimization')){
+foundProfile=true;
+}
+});
+expect(foundProgress).toBeTruthy();
+expect(foundProfile).toBeTruthy();
+
+server.close(done);
+});
+
+compiler.run(()=>{});
+server.listen(port,'localhost');
+});
+});
+});