For testing: use different servers with different ports for nextjs app

Author: GoodDayForSurf

packages/devextreme-cli/testing/__tests__/nextjs-ts.test.js

@@ -2,6 +2,7 @@ const { nextjsTs } = require('../env.nextjs');
 const testAppTemplate = require('../app-template.test.shared.js');
 testAppTemplate(nextjsTs, {
     port: 3001,
+    useDifferentPorts: true,
     urls: {
         profile: 'pages/profile',
         tasks: 'pages/tasks',

packages/devextreme-cli/testing/app-template.test.shared.js

@@ -2,52 +2,56 @@ const path = require('path');
 const waitOn = require('wait-on');
 const ip = require('ip');
 const getBrowser = require('./utils/puppeteer').getBrowser;
-
 const { viewports, themes, layouts } = require('./constants');
 const DevServer = require('./dev-server');
 
 const defaultLayout = 'side-nav-outer-toolbar';
 
-module.exports = (env, { port, urls } = { port: '8080', urls: {} }) => {
-    const appUrl = `http://${ip.address()}:${port}/`;
+module.exports = (env, { port, urls, useDifferentPorts } = { port: '8080', urls: {}, useDifferentPorts: false }) => {
     const diffSnapshotsDir = path.join('testing/__tests__/__diff_snapshots__', env.engine);
-
     const pageUrls = {
         profile: 'profile',
         tasks: 'tasks',
         page: `${(env.engine === 'angular' ? 'pages/' : '')}new-page`,
         'change-password': 'change-password/123',
         ...urls,
     };
-
-    const getPageURL = (name) => `${appUrl}${(env.engine.indexOf('nextjs') !== 0 ? '#/' : '')}${pageUrls[name]}`;
-    const devServer = new DevServer(env, { port });
+    let currentPort = port;
 
     describe(`${env.engine} app-template`, () => {
         let browser;
         let page;
 
-        beforeAll(async() => {
+        /* beforeAll(async() => {
             browser = await getBrowser();
             page = await browser.newPage();
         });
 
         afterAll(async() => {
+            console.log('-----afterAll---CLOSE-->', Boolean(process.env.LAUNCH_BROWSER));
             await (Boolean(process.env.LAUNCH_BROWSER) ? browser : page).close();
-        });
+        }); */
 
         Object.keys(themes).forEach((theme) => {
-
             describe(theme, () => {
                 layouts.forEach((layout) => {
                     const isDefaultLayout = layout === defaultLayout;
 
                     describe(layout, () => {
-
+                        const getPageURL = (name) => `${appUrl}${(env.engine.indexOf('nextjs') !== 0 ? '#/' : '')}${pageUrls[name]}`;
+                        console.log('----currentPort------>', currentPort);
+                        let devServer;
+                        let appUrl;
 
                         beforeAll(async() => {
+                            appUrl = `http://${ip.address()}:${currentPort}/`;
+                            devServer = new DevServer(env, { port: currentPort });
+
+                            browser = await getBrowser();
+                            page = await browser.newPage();
+
                             try {
-                                console.log('----beforeAll---->');
+                                console.log('----beforeAll--wait-->', currentPort);
                                 await waitOn({
                                     reverse: true,
                                     resources: [appUrl],
@@ -63,6 +67,7 @@ module.exports = (env, { port, urls } = { port: '8080', urls: {} }) => {
                                     timeout: 30000,
                                     interval: 100
                                 });
+                                console.log('-----SERVER READY----->');
                             } catch(e) {
                                 // NOTE jest@27 will fail test, but jest@26 - not
                                 console.log('-----ERROR----->', e);
@@ -74,20 +79,26 @@ module.exports = (env, { port, urls } = { port: '8080', urls: {} }) => {
                             console.log('----afterAll---before stop--->');
                             await devServer.stop();
                             console.log('----afterAll---after stop--->');
-
+                            if(useDifferentPorts) {
+                                currentPort++;
+                            }
+                            await (Boolean(process.env.LAUNCH_BROWSER) ? browser : page).close();
                         });
 
                         Object.keys(viewports).forEach((viewportName) => {
                             const viewport = viewports[viewportName];
 
                             async function openPage(url, options) {
-                                await new Promise((resolve) => setTimeout(resolve, 500));
+                                console.log('----openPage------>');
                                 await page.goto('about:blank');
+                                console.log('----openPage----setViewport-->');
                                 await page.setViewport(viewport);
+                                console.log('----openPage----goto-->', url);
                                 await page.goto(url, {
                                     waitUntil: 'networkidle0',
                                     ...options
                                 });
+                                console.log('----openPage----waitForSelector(\'.with-footer\')-->');
                                 await page.waitForSelector('.with-footer');
                                 await page.waitForTimeout(3000);
                             }

packages/devextreme-cli/testing/dev-server.js

@@ -28,6 +28,7 @@ module.exports = class DevServer {
 
     async build() {
         try {
+            fs.rmSync(this.env.deployPath, { recursive: true, force: true });
             fs.mkdirSync(this.env.deployPath, { recursive: true });
 
             await runCommand('npm', this.env.npmArgs, {

packages/devextreme-cli/testing/env.nextjs.js

@@ -11,7 +11,7 @@ function getConfig({ engine, template, fileExtension, templateExtension, transpi
     const appName = 'my-app';
     const sandboxPath = path.join(process.cwd(), `./testing/sandbox/${engine}`);
     const appPath = path.join(sandboxPath, appName);
-    const appLayoutPath = path.join(sandboxPath, appName, `src/app/layout.${templateExtension}`);
+    const appLayoutPath = path.join(sandboxPath, appName, `src/app/pages/layout.${templateExtension}`);
 
     const config = {
         engine: engine,
@@ -52,6 +52,7 @@ function getConfig({ engine, template, fileExtension, templateExtension, transpi
     };
 
     config.setLayout = (layoutName) => {
+        console.log('------setLayout---->', layoutName);
         const regexToFind = /SideNav\w+Toolbar as SideNavBarLayout/g;
         const newSubStr = `${classify(layoutName)} as SideNavBarLayout`;
         const data = fs.readFileSync(appLayoutPath, 'utf8');

packages/devextreme-cli/testing/nextjs-server.js

@@ -25,8 +25,7 @@ module.exports = class NextJsServer {
     }
 
     async start() {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-        console.log('----RUN START SERVER CMD------>');
+        console.log('----RUN START SERVER CMD----port-->', this.port);
         ({ proc: this.proc } = await runCommand('npx', ['next', 'start', `-p ${this.port}`], {
             cwd: this.env.appPath,
             detached: true,
@@ -53,7 +52,7 @@ module.exports = class NextJsServer {
 
         let pid;
         while(pid = getPidByPort(this.port)) {
-            console.log(`-----NEXTJS SERVER-start() kill for port ${this.port} ---->`, pid);
+            console.log(`-----NEXTJS SERVER-stop() kill for port ${this.port} ---->`, pid);
             killProcByPid(pid);
             await new Promise((resolve) => setTimeout(resolve, 5000));
         }