@modern-js/server 1.3.2 → 1.4.2

package/tests/dev.test.ts

@@ -1,5 +1,19 @@
 import http from 'http';
+import path from 'path';
+import { webpack } from 'webpack';
+import { fs, LAUNCH_EDITOR_ENDPOINT } from '@modern-js/utils';
 import SocketServer from '../src/dev-tools/socket-server';
+import DevServerPlugin from '../src/dev-tools/dev-server-plugin';
+import Watcher, { getWatchedFiles } from '../src/dev-tools/watcher';
+import { StatsCache } from '../src/dev-tools/watcher/stats-cache';
+import { createMockHandler } from '../src/dev-tools/mock';
+import getMockData, { getMatched } from '../src/dev-tools/mock/getMockData';
+import { createLaunchEditorHandler } from '../src/dev-tools/launch-editor';
+import { genHttpsOptions } from '../src/dev-tools/https';
+
+const noop = () => {
+  // empty
+};
 
 function getRandomPort() {
   return Math.floor(Math.random() * (8000 - 1024)) + 1024;
@@ -23,11 +37,9 @@ describe('test dev tools', () => {
       hot: true,
       liveReload: true,
     });
-    const app = http
-      .createServer((req, res) => {
-        res.end();
-      })
-      .listen(port);
+    const app = http.createServer((req, res) => {
+      res.end();
+    });
 
     socketServer.prepare(app);
     expect(socketServer.app).toBe(app);
@@ -39,6 +51,305 @@ describe('test dev tools', () => {
     socketServer.updateStats(mockStats);
     expect(socketServer.stats).toBe(mockStats);
 
+    const socket = {
+      state: 1,
+      readyState: 1,
+      data: '',
+      close() {
+        socket.state = 0;
+      },
+      send(data: string) {
+        socket.data = data;
+      },
+      on() {
+        // empty
+      },
+    };
+
+    socketServer.onConnect(socket);
+
+    socketServer.sockets = [socket];
+    socketServer.sockWrite('test');
+    expect(socket.data).toBe(JSON.stringify({ type: 'test' }));
+
+    socketServer.singleWrite(socket, 'single');
+    expect(socket.data).toBe(JSON.stringify({ type: 'single' }));
+
+    socketServer.close();
+    expect(socket.state).toBe(0);
     app.close();
   });
+
+  test('should dev server plugin work correctly', () => {
+    const compiler = webpack({});
+    new DevServerPlugin({
+      client: {
+        port: '8080',
+        overlay: false,
+        logging: 'error',
+        path: '/',
+        host: '127.0.0.1',
+      },
+      dev: {
+        writeToDisk: false,
+      },
+      watch: true,
+      hot: true,
+      liveReload: true,
+    }).apply(compiler);
+
+    // expect(compiler.options.entry)
+    const entryPluginHook = compiler.hooks.compilation.taps.filter(
+      tap => tap.name === 'EntryPlugin',
+    );
+    const hotPluginHook = compiler.hooks.compilation.taps.filter(
+      tap => tap.name === 'HotModuleReplacementPlugin',
+    );
+    expect(entryPluginHook.length).toBe(3);
+    expect(hotPluginHook.length).toBe(1);
+  });
+
+  describe('test watcher', () => {
+    let watcher: any;
+    const baseDir = path.join(__dirname, 'fixtures');
+    const watchDir = path.join(baseDir, 'watch/**');
+    const filepath = path.join(baseDir, 'watch', 'index.ts');
+    const filepatha = path.join(baseDir, 'watch', 'a.ts');
+    const txt = path.join(baseDir, 'watch', 'stats.txt');
+
+    afterEach(() => {
+      if (watcher) {
+        watcher.close();
+      }
+      fs.writeFileSync(txt, '1');
+    });
+
+    it('should create watcher instance correctly', resolve => {
+      watcher = new Watcher();
+      expect(watcher.dependencyTree).toBeNull();
+      watcher.createDepTree();
+      expect(watcher.dependencyTree).not.toBeNull();
+
+      expect(watcher.watcher).toBeUndefined();
+      watcher.listen([watchDir], {}, () => {
+        // empty
+      });
+
+      expect(watcher.watcher).toBeDefined();
+      require(filepath);
+      expect(watcher.dependencyTree.getNode(filepath)).toBeUndefined();
+      watcher.updateDepTree();
+      expect(watcher.dependencyTree.getNode(filepath)).toBeDefined();
+      watcher.cleanDepCache(filepath);
+      expect(watcher.dependencyTree.getNode(filepath)).toBeDefined();
+
+      jest.resetModules();
+      watcher.updateDepTree();
+      expect(watcher.dependencyTree.getNode(filepath)).toBeUndefined();
+
+      setTimeout(() => {
+        const fl = getWatchedFiles(watcher.watcher);
+        expect(fl.includes(filepatha)).toBeTruthy();
+        expect(fl.includes(filepath)).toBeTruthy();
+        expect(fl.includes(txt)).toBeTruthy();
+        resolve();
+      }, 1000);
+    });
+
+    it('should stats cache instance work correctly', () => {
+      const statsCache = new StatsCache();
+
+      // should not exist false before add
+      expect(statsCache.has(txt)).toBeFalsy();
+
+      // should exist true after add
+      statsCache.add([txt]);
+      expect(statsCache.has(txt)).toBeTruthy();
+
+      // should diff correctly
+      fs.writeFileSync(txt, 'foo');
+      expect(statsCache.isDiff(txt)).toBeTruthy();
+
+      // should not diff if not refresh
+      fs.writeFileSync(txt, '1');
+      expect(statsCache.isDiff(txt)).toBeFalsy();
+
+      // should diff after refresh
+      fs.writeFileSync(txt, 'foo');
+      statsCache.refresh(txt);
+      fs.writeFileSync(txt, '1');
+      expect(statsCache.isDiff(txt)).toBeTruthy();
+
+      // should diff when content change
+      statsCache.refresh(txt);
+      fs.writeFileSync(txt, '2');
+      expect(statsCache.isDiff(txt)).toBeTruthy();
+
+      // should not exist after del
+      statsCache.del(txt);
+      expect(statsCache.has(txt)).toBeFalsy();
+    });
+  });
+
+  describe('should mock middleware work correctly', () => {
+    const pwd = path.join(__dirname, './fixtures/mock');
+
+    it('should return null if no config mock dir', () => {
+      expect(createMockHandler({ pwd: path.join(pwd, 'empty') })).toBeNull();
+    });
+
+    it('should return null if no api dir', () => {
+      expect(createMockHandler({ pwd: path.join(pwd, 'zero') })).toBeNull();
+    });
+
+    it('should return middleware if mock api exist', async () => {
+      const middleware = createMockHandler({ pwd: path.join(pwd, 'exist') });
+
+      expect(middleware).not.toBeNull();
+
+      let response: any;
+      const context: any = {
+        path: '/api/getInfo',
+        method: 'get',
+        res: {
+          setHeader: noop,
+          end: (data: any) => {
+            response = JSON.parse(data);
+          },
+        },
+      };
+      await middleware?.(context, noop);
+      expect(response).toEqual({
+        data: [1, 2, 3, 4],
+      });
+    });
+
+    it('should get api list correctly', () => {
+      const apiList = getMockData(path.join(pwd, 'exist/config/mock/index.ts'));
+      expect(apiList.length).toBe(3);
+
+      const pathList = apiList.map(api => api.path);
+      expect(pathList).toEqual([
+        '/api/getInfo',
+        '/api/getExample',
+        '/api/addInfo',
+      ]);
+
+      let response: any;
+      const context: any = {
+        res: {
+          setHeader: noop,
+          end: (data: any) => {
+            response = JSON.parse(data);
+          },
+        },
+      };
+
+      apiList[0].handler(context, noop as any);
+      expect(response).toEqual({
+        data: [1, 2, 3, 4],
+      });
+      apiList[1].handler(context, noop as any);
+      expect(response).toEqual({ id: 1 });
+    });
+
+    it('should match api correctly', () => {
+      const apiList = [
+        {
+          method: 'get',
+          path: '/api/getInfo',
+          handler: noop,
+        },
+        {
+          method: 'get',
+          path: '/api/getExample',
+          handler: noop,
+        },
+        {
+          method: 'get',
+          path: '/api/addInfo',
+          handler: noop,
+        },
+      ];
+      const matched = getMatched(
+        { path: '/api/getInfo', method: 'get' } as any,
+        apiList,
+      );
+      expect(matched).toBe(apiList[0]);
+
+      const missMethod = getMatched(
+        { path: '/api/getModern', method: 'post' } as any,
+        apiList,
+      );
+      expect(missMethod).toBeUndefined();
+    });
+  });
+
+  describe('should createLaunchEditorHandler work correctly', () => {
+    const middleware = createLaunchEditorHandler();
+
+    it('should return 200 if filename exist', () => {
+      let response: any;
+      const context: any = {
+        url: LAUNCH_EDITOR_ENDPOINT,
+        query: {
+          filename: 'test.ts',
+        },
+        res: {
+          end: (data: any) => {
+            response = data;
+          },
+        },
+      };
+      middleware(context, noop);
+      expect(context.status).toBe(200);
+      expect(response).toBeUndefined();
+    });
+
+    it('should return 500 if filename not exist', () => {
+      let response: any;
+      const context: any = {
+        url: LAUNCH_EDITOR_ENDPOINT,
+        query: {
+          filename: '',
+        },
+        res: {
+          end: (data: any) => {
+            response = data;
+          },
+        },
+      };
+      middleware(context, noop);
+      expect(context.status).toBe(500);
+      expect(typeof response === 'string').toBeTruthy();
+    });
+
+    it('should invoke next if not launch editor url', () => {
+      let response: any;
+      const context: any = {
+        url: '',
+        res: {
+          end: (data: any) => {
+            response = data;
+          },
+        },
+      };
+      middleware(context, noop);
+      expect(context.status).toBeUndefined();
+      expect(response).toBeUndefined();
+    });
+  });
+
+  test('should get http cert correctly', async () => {
+    // const options = await genHttpsOptions(true);
+    // expect(options.key).toBeDefined();
+    // expect(options.cert).toBeDefined();
+
+    const useOpt = await genHttpsOptions({
+      key: 'foo',
+      cert: 'baz',
+    });
+    expect(useOpt.key).toBe('foo');
+    expect(useOpt.cert).toBe('baz');
+  });
 });

package/tests/fixtures/mock/exist/config/mock/index.ts

@@ -0,0 +1,11 @@
+export default {
+  'GET /api/getInfo': { data: [1, 2, 3, 4] },
+
+  '/api/getExample': { id: 1 },
+
+  'GET /api/addInfo': (req: any, res: any) => {
+    setTimeout(() => {
+      res.end('delay 2000ms');
+    }, 2000);
+  },
+};

package/tests/fixtures/mock/zero/config/mock/index.ts

@@ -0,0 +1 @@
+export default {};

package/tests/fixtures/reader/index.ts

@@ -0,0 +1,3 @@
+export default {
+  name: 'modern',
+};

package/tests/fixtures/route-spec/dynamic.json

@@ -0,0 +1,13 @@
+{
+  "routes": [
+    {
+      "urlPath": "/entry/:id",
+      "entryName": "entry",
+      "entryPath": "html/entry/index.html",
+      "isSPA": true,
+      "isSSR": true,
+      "enableModernMode": false,
+      "bundle": "bundles/entry.js"
+    }
+  ]
+}

package/tests/fixtures/ssr/bundle.js

@@ -0,0 +1,5 @@
+const { SERVER_RENDER_FUNCTION_NAME } = require('@modern-js/utils');
+
+module.exports = {
+  [SERVER_RENDER_FUNCTION_NAME]: () => '<div>Modern.js</div>',
+};

package/tests/fixtures/static-dir/bar.html

@@ -0,0 +1,11 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>bar</title>
+</head>
+<body>
+
+</body>
+</html>

package/tests/fixtures/static-dir/baz/index.html

@@ -0,0 +1,11 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>baz</title>
+</head>
+<body>
+
+</body>
+</html>

package/tests/fixtures/static-dir/foo/index.html

@@ -0,0 +1,11 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>foo</title>
+</head>
+<body>
+
+</body>
+</html>

package/tests/fixtures/watch/a.ts

@@ -0,0 +1,3 @@
+export default {
+  name: 'a',
+};

package/tests/fixtures/watch/index.ts

@@ -0,0 +1,5 @@
+import a from './a';
+
+export default {
+  a,
+};

package/tests/fixtures/watch/stats.txt

@@ -0,0 +1 @@
+1

package/tests/hook.test.ts

@@ -10,7 +10,7 @@ describe('test hook api', () => {
     manager.reset(spec.routes);
     const matcher = manager.match('/home');
 
-    const routeAPI = createRouteAPI(matcher!, manager);
+    const routeAPI = createRouteAPI(matcher!, manager, '');
     expect(routeAPI.cur().entryName).toBe('home');
     expect(routeAPI.get('entry')?.entryPath).toBe('html/entry/index.html');
 

package/tests/render.test.ts

@@ -0,0 +1,102 @@
+import path from 'path';
+import { render } from '../src/libs/render/ssr';
+import { handleDirectory } from '../src/libs/render/static';
+import { LruReader } from '../src/libs/render/reader';
+
+describe('test render function', () => {
+  test('should return content correctly ', async () => {
+    const renderResult = await render(
+      {
+        params: {},
+        pathname: '/foo',
+        host: 'localhost:8080',
+        query: {},
+        url: 'localhost:8080/foo',
+        cookieMap: {},
+        headers: {},
+      } as any,
+      {
+        urlPath: '/foo',
+        bundle: 'bundle.js',
+        distDir: path.join(__dirname, 'fixtures', 'ssr'),
+        template: 'tpl.html',
+        entryName: 'foo',
+        staticGenerate: false,
+      } as any,
+      {
+        extendSSRContext: () => {
+          // empty
+        },
+      } as any,
+    );
+
+    expect(renderResult.content).toMatch('Modern.js');
+    expect(renderResult.contentType).toMatch('text/html; charset=utf-8');
+  });
+
+  test('should handle directory for .html correctly', async () => {
+    const entryPath = path.join(__dirname, 'fixtures', 'static-dir');
+
+    const res1 = await handleDirectory(
+      {
+        path: '/modern/bar',
+      } as any,
+      entryPath,
+      '/modern',
+    );
+
+    expect(res1?.content.toString()).toMatch('bar');
+  });
+
+  test('should handle directory for index.html correctly', async () => {
+    const entryPath = path.join(__dirname, 'fixtures', 'static-dir');
+
+    const res1 = await handleDirectory(
+      {
+        path: '/modern/foo',
+      } as any,
+      entryPath,
+      '/modern',
+    );
+
+    expect(res1?.content.toString()).toMatch('foo');
+  });
+
+  test('should handle directory for /index.html correctly', async () => {
+    const entryPath = path.join(__dirname, 'fixtures', 'static-dir');
+
+    const res1 = await handleDirectory(
+      {
+        path: '/modern/baz/',
+      } as any,
+      entryPath,
+      '/modern',
+    );
+
+    expect(res1?.content.toString()).toMatch('baz');
+  });
+
+  test('should reader work correctly', async () => {
+    const reader = new LruReader();
+    const dir = path.join(__dirname, 'fixtures', 'reader');
+
+    const nullRes = await reader.read(path.join(dir, 'foo.ts'));
+    expect(nullRes).toBeNull();
+
+    const dirRes = await reader.read(path.join(dir, 'test-dir'));
+    expect(dirRes).toBeNull();
+
+    const res = await reader.read(path.join(dir, 'index.ts'));
+    expect(res).not.toBeNull();
+    expect(res?.content.toString()).toMatch('modern');
+
+    const res1 = await reader.read(path.join(dir, 'index.ts'));
+    expect(res1).not.toBeNull();
+    expect(res1?.content.toString()).toMatch('modern');
+
+    reader.update();
+    const res2 = await reader.read(path.join(dir, 'index.ts'));
+    expect(res2).not.toBeNull();
+    expect(res2?.content.toString()).toMatch('modern');
+  });
+});

package/tests/route.test.ts

@@ -1,5 +1,6 @@
 import { RouteMatchManager, RouteMatcher } from '../src/libs/route';
 import spec from './fixtures/route-spec/index.json';
+import dynamic from './fixtures/route-spec/dynamic.json';
 
 describe('test route', () => {
   describe('test route matcher', () => {
@@ -12,7 +13,7 @@ describe('test route', () => {
       expect(matcher.urlMatcher).toBeUndefined();
 
       const { isSSR, isApi, isSPA, urlPath, entryName, entryPath } =
-        matcher.generate();
+        matcher.generate('');
 
       expect(isSSR).toBeTruthy();
       expect(isApi).toBeFalsy();
@@ -38,11 +39,11 @@ describe('test route', () => {
 
       const matchedByEntry = manager.matchEntry('home');
       expect(matchedByEntry).toBeDefined();
-      expect(matchedByEntry?.generate().entryName).toBe('home');
+      expect(matchedByEntry?.generate('').entryName).toBe('home');
 
       const matchedByUrl = manager.match('/entry');
       expect(matchedByUrl).toBeDefined();
-      expect(matchedByUrl?.generate().entryName).toBe('entry');
+      expect(matchedByUrl?.generate('').entryName).toBe('entry');
 
       const SSRUrlBundles = manager.getBundles();
       expect(SSRUrlBundles).toEqual(['bundles/entry.js', 'bundles/home.js']);
@@ -50,5 +51,27 @@ describe('test route', () => {
       manager.reset([]);
       expect(manager.matchers.length).toBe(0);
     });
+
+    test('should manager work correctly with dynamic spec', async () => {
+      const manager = new RouteMatchManager();
+      expect(manager.matchers.length).toBe(0);
+      manager.reset(dynamic.routes);
+      expect(manager.matchers.length).toBe(1);
+
+      const matched = manager.match('/entry/001');
+      expect(matched).toBeDefined();
+      const route = matched?.generate('/entry/001');
+      expect(route?.entryName).toBe('entry');
+      expect(route?.params).toEqual({ id: '001' });
+
+      const matchedWithTrail = manager.match('/entry/001/a');
+      expect(matchedWithTrail).toBeDefined();
+      const routeWithTrail = matchedWithTrail?.generate('/entry/001/a');
+      expect(routeWithTrail?.entryName).toBe('entry');
+      expect(routeWithTrail?.params).toEqual({ id: '001' });
+
+      const miss = manager.match('/entry');
+      expect(miss).toBeUndefined();
+    });
   });
 });

package/tests/utils.test.ts

@@ -1,9 +1,11 @@
+import { compile } from 'path-to-regexp';
 import {
   noop,
   mergeExtension,
   toMessage,
   createErrorDocument,
   createMiddlewareCollecter,
+  getStaticReg,
 } from '../src/utils';
 
 describe('test server utils', () => {
@@ -68,4 +70,37 @@ describe('test server utils', () => {
       expect(after.api).toEqual([middleware]);
     });
   });
+
+  test('should return full path', () => {
+    const fn = compile('/home/:id', { encode: encodeURIComponent });
+    expect(fn({ id: 2 })).toBe('/home/2');
+  });
+
+  describe('test create static reg', () => {
+    test('should test static path correctly', () => {
+      const reg = getStaticReg();
+      expect(reg.test('/static')).toBeTruthy();
+      expect(reg.test('/upload')).toBeTruthy();
+    });
+
+    test('should test custom static path correctly', () => {
+      const reg = getStaticReg({
+        cssPath: 'static-css',
+      });
+      expect(reg.test('/static-css')).toBeTruthy();
+    });
+
+    test('should test favicon path correctly', () => {
+      const reg = getStaticReg({
+        favicon: 'index.icon',
+        faviconByEntries: {
+          foo: 'foo.icon',
+          baz: 'baz.icon',
+        },
+      });
+      expect(reg.test('/index.icon')).toBeTruthy();
+      expect(reg.test('/foo.icon')).toBeTruthy();
+      expect(reg.test('/baz.icon')).toBeTruthy();
+    });
+  });
 });