test: test case for devServer (#4042)

* fix: test case

* feat: dev test

test/basic-custom-app-store.test.ts

@@ -10,9 +10,13 @@ buildFixture(example);
 test('open /', async () => {
   const res = await setupBrowser({ example });
   page = res.page;
-  browser = res.page;
+  browser = res.browser;
   expect(await page.$$text('h2')).toStrictEqual(['Header', 'HOME']);
   expect(await page.$$text('div>span')).toStrictEqual(['0']);
   await page.click('button');
   expect(await page.$$text('div>span')).toStrictEqual(['1']);
-})
+});
+
+afterAll(async () => {
+  await browser.close();
+});

test/basic-mpa.test.ts

@@ -11,20 +11,24 @@ buildFixture(example);
 test('open /dashboard', async () => {
   const res = await setupBrowser({ example, defaultHtml: 'dashboard.html' });
   page = res.page;
-  browser = res.page;
+  browser = res.browser;
   expect(await page.$$text('h2')).toStrictEqual(['Dashboard Page...']);
+  await browser.close();
 });
 
 test('open /detail', async () => {
   const res = await setupBrowser({ example, defaultHtml: 'detail.html' });
   page = res.page;
-  browser = res.page;
+  browser = res.browser;
   expect(await page.$$text('h2')).toStrictEqual(['Detail Page']);
+  await browser.close();
 });
 
 test('open /home', async () => {
   const res = await setupBrowser({ example, defaultHtml: 'home.html' });
   page = res.page;
-  browser = res.page;
+  browser = res.browser;
   expect(await page.$$text('h2')).toStrictEqual(['Home Page']);
+  await browser.close();
 });
+

test/basic-nested-store.test.ts

@@ -10,7 +10,7 @@ buildFixture(example);
 test('open /', async () => {
   const res = await setupBrowser({ example });
   page = res.page;
-  browser = res.page;
+  browser = res.browser;
   expect(await page.$$text('h2')).toStrictEqual(['Header', 'Index Page...']);
   expect(await page.$$text('a')).toStrictEqual(['About']);
 })
@@ -40,3 +40,7 @@ test('open /about', async () => {
   expect(await page.html()).toContain('taobao');
   expect(await page.html()).toContain('123');
 })
+
+afterAll(async () => {
+  await browser.close();
+});

test/basic-spa.test.ts

@@ -1,28 +1,49 @@
 import { buildFixture, setupBrowser } from './utils/build';
+import { startFixture, setupStartBrowser } from './utils/start';
 import { IPage } from './utils/browser';
 
 const example = 'basic-spa';
-let page: IPage = null;
-let browser = null;
 
-buildFixture(example);
+describe(`build ${example}`, () => {
+  let page: IPage = null;
+  let browser = null;
 
-test('open /', async () => {
+  buildFixture(example);
-  const res = await setupBrowser({ example });
+
-  page = res.page;
+  test('open /', async () => {
-  browser = res.page;
+    const res = await setupBrowser({ example });
-  expect(await page.$$text('h2')).toStrictEqual(['SPA', 'Home Page...1']);
+    page = res.page;
+    browser = res.browser;
+    expect(await page.$$text('h2')).toStrictEqual(['SPA', 'Home Page...1']);
+  });
+
+  test('open /dashboard', async () => {
+    await page.push('#/dashboard');
+    // lazy load
+    expect(await page.html()).toContain('加载中...');
+    // wait for render
+    await page.waitForFunction(`document.getElementsByTagName('h2').length > 1`);
+    expect(await page.$$text('h2')).toStrictEqual(['SPA', 'Dashboard Page...']);
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
 });
 
-test('open /dashboard', async () => {
+describe(`start ${example}`, () => {
-  await page.push('#/dashboard');
+  let page: IPage = null;
-  // lazy load
+  let browser = null;
-  expect(await page.html()).toContain('加载中...');
-  // wait for render
-  await page.waitForFunction(`document.getElementsByTagName('h2').length > 1`);
-  expect(await page.$$text('h2')).toStrictEqual(['SPA', 'Dashboard Page...']);
-});
 
-afterAll(async () => {
+  test('setup devServer', async () => {
-  await browser.close();
+    const { devServer, port } = await startFixture(example);
+    const res = await setupStartBrowser({ server: devServer, port });
+    page = res.page;
+    browser = res.browser;
+    expect(await page.$$text('h2')).toStrictEqual(['SPA', 'Home Page...1']);
+  }, 120000);
+
+  afterAll(async () => {
+    await browser.close();
+  });
 });

test/basic-store.test.ts

@@ -10,7 +10,7 @@ buildFixture(example);
 test('open /', async () => {
   const res = await setupBrowser({ example });
   page = res.page;
-  browser = res.page;
+  browser = res.browser;
   expect(await page.$$text('h2')).toStrictEqual(['Header', 'basic store', 'Home Page']);
   expect(await page.$$text('div>span')).toStrictEqual(['0']);
   await page.click('button');

test/utils/browser.ts

@@ -13,13 +13,25 @@ export interface IPage extends puppeteer.Page {
   push?: (url: string, options?: puppeteer.DirectNavigationOptions) => Promise<puppeteer.Response>;
 }
 
+interface IBrowserOptions {
+  cwd?: string;
+  port?: number;
+  server?: http.Server;
+}
+
 export default class Browser {
   private server: http.Server;
   private browser: puppeteer.Browser;
   private baseUrl: string;
 
-  constructor (cwd: string, port: number) {
+  constructor (options: IBrowserOptions) {
-    this.server = this.createServer(cwd, port);
+    const { server } = options;
+    if (server) {
+      this.server = server;
+    } else {
+      const { cwd, port } = options;
+      this.server = this.createServer(cwd, port);
+    }
   }
 
   createServer(cwd: string, port: number) {

test/utils/build.ts

@@ -40,7 +40,7 @@ export const setupBrowser: ISetupBrowser = async (options) => {
   const { example, outputDir = 'build', defaultHtml = 'index.html' } = options;
   const rootDir = path.join(__dirname, `../../examples/${example}`);
   const port = await getPort();
-  const browser = new Browser(path.join(rootDir, outputDir), port);
+  const browser = new Browser({ cwd: path.join(rootDir, outputDir), port });
   await browser.start();
   const page = await browser.page(`http://127.0.0.1:${port}/${defaultHtml}`);
   return {

test/utils/start.ts

@@ -0,0 +1,49 @@
+import * as path from 'path';
+import { start } from '@alib/build-scripts';
+import * as getPort from 'get-port';
+import Browser, { IPage } from './browser';
+import { Server } from 'http';
+import getBuiltInPlugins = require('../../packages/icejs/src/getBuiltInPlugins');
+
+interface ISetupBrowser {
+  (options: { port: number; defaultPath?: string; server: Server; }): Promise<IReturn>;
+}
+
+interface IReturn {
+  page: IPage;
+  browser: Browser;
+}
+
+// get builtIn plugins
+export const startFixture = async function (example: string) {
+  const port = await getPort();
+  const rootDir = path.join(__dirname, `../../examples/${example}`);
+  const processCwdSpy = jest.spyOn(process, 'cwd');
+  processCwdSpy.mockReturnValue(rootDir);
+  const devServer: Server = await start({
+    args: {
+      config: path.join(rootDir, 'build.json'),
+      port,
+      disableOpen: true
+    },
+    rootDir,
+    getBuiltInPlugins: (userConfig) => {
+      return getBuiltInPlugins(userConfig).concat(require.resolve('./test-plugin'));
+    },
+  });
+  return {
+    port,
+    devServer
+  };
+};
+
+export const setupStartBrowser: ISetupBrowser = async (options) => {
+  const { port, server, defaultPath = '' } = options;
+  const browser = new Browser({ server });
+  await browser.start();
+  const page = await browser.page(`http://127.0.0.1:${port}/${defaultPath}`);
+  return {
+    browser,
+    page,
+  };
+};

test/utils/test-plugin.ts

@@ -1,4 +1,6 @@
 export default ({ modifyUserConfig }) => {
   // disable minify to speed-up fixture builds
   modifyUserConfig('minify', false);
+  // disable sourceMap to speed-up fixture start
+  modifyUserConfig('sourceMap', false);
 }

test/without-react-router.test.ts

@@ -10,6 +10,10 @@ buildFixture(example);
 test('open /', async () => {
   const res = await setupBrowser({ example, defaultHtml: 'home.html' });
   page = res.page;
-  browser = res.page;
+  browser = res.browser;
   expect(await page.$text('h2')).toStrictEqual('Home Page');
 });
+
+afterAll(async () => {
+  await browser.close();
+});