add nextjs ap to tests on CI

Author: GoodDayForSurf

packages/devextreme-cli/src/templates/nextjs/application/src/components/change-password-form/ChangePasswordForm.scss

@@ -25,6 +25,7 @@ module.exports = function(commandName, args = [], customConfig = {}) {
         });
 
         if(config.detached) {
+            proc.unref();
             resolve({ proc });
         }
     });

packages/devextreme-cli/src/utility/run-command.js

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

packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-material-xsmall-change-password-snap.png

@@ -1,7 +1,6 @@
 const { nextjsJs } = require('../env.nextjs');
 const testAppTemplate = require('../app-template.test.shared.js');
 testAppTemplate(nextjsJs, {
-    port: 3000,
     urls: {
         profile: 'pages/profile',
         tasks: 'pages/tasks',

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

@@ -1,17 +1,15 @@
 const path = require('path');
 const waitOn = require('wait-on');
 const ip = require('ip');
-const getBrowser = require('./utils/puppeteer').getBrowser;
 
+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 = 8080, urls = {} } = {}) => {
     const diffSnapshotsDir = path.join('testing/__tests__/__diff_snapshots__', env.engine);
-
     const pageUrls = {
         profile: 'profile',
         tasks: 'tasks',
@@ -20,31 +18,25 @@ module.exports = (env, { port, urls } = { port: '8080', urls: {} }) => {
         ...urls,
     };
 
-    const getPageURL = (name) => `${appUrl}${(env.engine.indexOf('nextjs') !== 0 ? '#/' : '')}${pageUrls[name]}`;
-
     describe(`${env.engine} app-template`, () => {
-        let browser;
-        let page;
-
-        beforeAll(async() => {
-            browser = await getBrowser();
-            page = await browser.newPage();
-        });
-
-        afterAll(async() => {
-            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 devServer = new DevServer(env);
+                        let browser;
+                        let page;
+                        let devServer;
+                        let appUrl;
+                        const getPageURL = (name) => `${appUrl}${(env.engine.indexOf('nextjs') !== 0 ? '#/' : '')}${pageUrls[name]}`;
 
                         beforeAll(async() => {
+                            browser = await getBrowser();
+                            page = await browser.newPage();
+                            appUrl = `http://${ip.address()}:${port}/`;
+                            devServer = new DevServer(env, { port });
+
                             try {
                                 await devServer.setLayout(layout);
                                 await devServer.setTheme(theme);
@@ -63,13 +55,7 @@ module.exports = (env, { port, urls } = { port: '8080', urls: {} }) => {
 
                         afterAll(async() => {
                             await devServer.stop();
-                            await waitOn({
-                                resources: [appUrl],
-                                reverse: true,
-                                timeout: 10000,
-                                interval: 100,
-                                validateStatus: false
-                            });
+                            await (Boolean(process.env.LAUNCH_BROWSER) ? browser : page).close();
                         });
 
                         Object.keys(viewports).forEach((viewportName) => {
@@ -333,7 +319,7 @@ module.exports = (env, { port, urls } = { port: '8080', urls: {} }) => {
                                         `const a = document.createElement("a");a.href="${getPageURL('change-password')}";a.click()`
                                     );
                                     await page.waitForSelector('form');
-
+                                    await page.mouse.move(0, 0);
                                     await hideScroll();
                                     await page.waitForTimeout(3000);
 

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

@@ -11,10 +11,10 @@ module.exports = class DevServer {
         return this.env.engine.indexOf('nextjs') === 0;
     }
 
-    constructor(env) {
+    constructor(env, { port }) {
         this.env = env;
         this.server = this.isNextJs()
-            ? new NextJsServer(this.env)
+            ? new NextJsServer(this.env, { port })
             : new WebServer();
     }
 
@@ -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/app-template.test.shared.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,

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

@@ -1,21 +1,24 @@
 const runCommand = require('../src/utility/run-command');
 
 module.exports = class NextJsServer {
-    constructor(env) {
+    constructor(env, { port } = { port: 8080 }) {
         this.proc = null;
         this.env = env;
+        this.port = port;
     }
 
     async start() {
-        ({ proc: this.proc } = await runCommand('npm', ['run', 'start'], {
+        ({ proc: this.proc } = await runCommand('npx', ['next', 'start', `-p ${this.port}`], {
             cwd: this.env.appPath,
-            detached: true
+            detached: true,
+            shell: false,
+            stdio: 'ignore',
         }));
     }
 
-    stop() {
+    async stop() {
         if(this.proc) {
-            this.proc.kill('SIGTERM');
+            process.kill(-this.proc.pid, 'SIGKILL');
         }
     }
 };