add unit test, fix lint errors and warnings for xarc/subapp (#1826)

packages/xarc-subapp/.eslintrc.js

@@ -1,4 +1,10 @@
 const { eslintRcNodeTypeScript } = require("@xarc/module-dev");
 module.exports = {
-  extends: eslintRcNodeTypeScript
+  extends: eslintRcNodeTypeScript,
+  plugins: ["jsdoc"],
+  rules: {
+    // disable the rule for all files
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "jsdoc/require-param-type": "off"
+  }
 };

packages/xarc-subapp/package.json

@@ -49,6 +49,7 @@
     "@babel/cli": "^7.12.1",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
     "@types/chai": "^4.2.14",
+    "@types/chai-as-promised": "^7.1.3",
     "@types/mocha": "^8.2.0",
     "@types/node": "^14.14.16",
     "@types/sinon": "^9.0.10",
@@ -60,10 +61,13 @@
     "babel-plugin-transform-remove-strict-mode": "^0.0.2",
     "babel-preset-minify": "^0.5.1",
     "chai": "^4.2.0",
+    "chai-as-promised": "^7.1.1",
     "eslint": "^7.16.0",
     "eslint-config-walmart": "^2.2.1",
     "eslint-plugin-filenames": "^1.1.0",
-    "eslint-plugin-jsdoc": "^30.7.9",
+    "eslint-plugin-jsdoc": "^32.0.2",
+    "jsdom": "^16.4.0",
+    "jsdom-global": "^3.0.2",
     "mocha": "^8.2.1",
     "nyc": "^15.1.0",
     "sinon": "^9.2.2",

packages/xarc-subapp/src/browser/client-render-pipeline.ts

@@ -1,7 +1,7 @@
 //
 //
 
-import { SubAppCSRData, SubAppFeatureResult } from "../subapp/types";
+import { SubAppCSRData, SubAppDef, SubAppFeatureResult } from "../subapp/types";
 import { envHooks } from "../subapp/envhooks";
 import { SubAppRenderPipeline } from "../subapp/subapp-render-pipeline";
 import { ClientFrameworkLib } from "../subapp/client-framework-lib";
@@ -20,7 +20,8 @@ export class ClientRenderPipeline implements Partial<SubAppRenderPipeline> {
     this.csrData = csrData;
     this.framework = this._getSubApp()._frameworkFactory() as ClientFrameworkLib;
   }
-
+  //  TODO: '_reload' is defined but never used
+  //  eslint-disable-next-line
   async start(_reload?: boolean): Promise<any> {
     this.startPrepare();
     await this.waitForPrepare();
@@ -54,15 +55,18 @@ export class ClientRenderPipeline implements Partial<SubAppRenderPipeline> {
     this.framework.startSubAppSync(this.csrData, this);
   }
 
-  _getSubApp() {
+  _getSubApp(): SubAppDef {
     const container = envHooks.getContainer();
     const subapp = container.get(this.subAppName);
     return subapp;
   }
 
+  //  eslint-disable-next-line
   _mount(_: any): any {
     //
   }
+
+  //  eslint-disable-next-line
   _unmount(_: any): any {
     //
   }

packages/xarc-subapp/src/browser/xarc-subapp-v2.ts

@@ -72,9 +72,11 @@ export function xarcV2Client(
     //
     // empty place holders for CDN mapping
     //
+    //  eslint-disable-next-line
     cdnInit(_: any) {
       //
     },
+    //  eslint-disable-next-line
     cdnUpdate(_: any) {
       //
     },

packages/xarc-subapp/src/node/index.ts

@@ -39,6 +39,10 @@ export function getContainer(): SubAppContainer {
   return CONTAINER;
 }
 
+export function _clearContainer(): void {
+  CONTAINER = undefined;
+}
+
 export function _setupEnvHooks() {
   if (!envHooks.getContainer) {
     envHooks.getContainer = getContainer;
@@ -56,7 +60,8 @@ const serverOverrideMethods: Partial<SubAppDef> = {
 
   /**
    * Server side render pipeline factory
-   * @param params
+   * @param params pipeline factory params
+   * @returns subapp sever render pipeline object
    */
   _pipelineFactory(params: PipelineFactoryParams) {
     const { ssrData } = params;

packages/xarc-subapp/src/node/init-v2.ts

@@ -143,7 +143,7 @@ function initializeStaticAssets(props: InitProps) {
     runtimeJsScripts,
     mainJsScripts,
     allCssLinks,
-    randomId: Crypto.randomBytes(8).toString("base64")
+    randomId: Crypto.randomBytes(8).toString("base64") //  eslint-disable-line
   };
 }
 

packages/xarc-subapp/src/node/load-v2.ts

@@ -21,6 +21,7 @@ import { getContainer } from "./index";
  * @param _setupContext setup context
  * @param param1 props object
  */
+//  eslint-disable-next-line
 export function loadSubApp(_setupContext: any, { props: setupProps }): any {
   // name="Header"
   // async=true

packages/xarc-subapp/src/node/render-page.ts

@@ -85,7 +85,7 @@ ${body.end}
 
   /**
    * Render index.html with subapps
-   *
+   * @params RenderOptions
    * @returns Promise<RenderContext>
    */
   async render(options: RenderOptions): Promise<RenderContext> {

packages/xarc-subapp/src/node/server-render-pipeline.ts

@@ -48,6 +48,7 @@ export class SubAppServerRenderPipeline implements SubAppRenderPipeline {
     this.framework = data.subapp._frameworkFactory();
   }
 
+  //  eslint-disable-next-line
   async start(_reload?: boolean): Promise<any> {
     throw new Error("SubAppServerRenderPipeline doesn't handle start");
   }

packages/xarc-subapp/src/node/start-v2.ts

@@ -1,6 +1,10 @@
 import { SSR_PIPELINES } from "./utils";
 import { SubAppRenderPipeline } from "../subapp";
 
+/** To get start subapp object
+ *
+ * @returns an object with process method which can start subapp process
+ */
 export function startSubApp(): any {
   return {
     process(context): string {

packages/xarc-subapp/src/node/utils.ts

@@ -10,6 +10,7 @@ const NONCE_SIZE = 16;
  * Load CDN map
  *
  * @param cdnMap CDN map
+ * @returns cdn Map, if not found, return undefined
  */
 export function loadCdnMap(cdnMap: string): any {
   const fullPath = Path.isAbsolute(cdnMap)
@@ -23,6 +24,13 @@ export function loadCdnMap(cdnMap: string): any {
   }
 }
 
+/**
+ * get
+ *
+ * @param file - string to wrap
+ * @param data - string go before fragment
+ * @returns if found, return request's path name, if not, return false
+ */
 export function mapCdn(file: string, data: Record<string, string>): string | boolean {
   if (data) {
     const reqBase = Path.posix.basename(file);
@@ -52,13 +60,22 @@ export function wrapStringFragment(fragment: string, prefix = "", postfix = ""):
   return "";
 }
 
+//  eslint-disable-next-line
 export function nonceGenerator(_?: string): string {
   const token = Crypto.randomBytes(NONCE_SIZE).toString("base64");
   // drop "==" at the end
-  // eslint-disable no-magic-numbers
+  //  eslint-disable-next-line
   return token.substr(0, token.length - 2);
 }
 
+/**
+ * generate nonce token
+ *
+ * @param token init props
+ * @param fallback nonce fallback
+ * @param tag nonce token tag or nonce generator tag
+ * @returns an object with generated string token and nonce info
+ */
 export function generateNonce(
   token: Partial<{ props: InitProps }>,
   fallback: NonceInfo = null,
@@ -115,6 +132,7 @@ export const SSR_PIPELINES = Symbol("subapp-ssr-pipelines");
  * Stringify a JSON object and replace some tags to avoid XSS:
  *  - `<script>` => `&lt;script>`
  *  - `</script>` => `&lt;/script>`
+ *
  * @param obj - object to stringify
  * @returns JSON string of object
  */

packages/xarc-subapp/src/node/webpack-stats.ts

@@ -17,7 +17,7 @@ export class WebpackStats {
    * - `WEBPACK_ENV` defined - load from `.etmp` dir
    * - otherwise - load from `dist/server` dir
    *
-   * @remarks will look for the data under dir by env `XARC_CWD` or `process.cwd()`
+   * '@remarks' will look for the data under dir by env `XARC_CWD` or `process.cwd()`
    *
    */
   load() {
@@ -26,12 +26,18 @@ export class WebpackStats {
     this._stats = JSON.parse(Fs.readFileSync(statsFile).toString());
   }
 
-  /** names of all chunks */
+  /** names of all chunks
+   *
+   * @returns an array of chuck names of assets
+   */
   get allChunkNames() {
     return Object.keys(this._stats.assetsByChunkName);
   }
 
-  /** The raw stats data as loaded */
+  /** The raw stats data as loaded
+   *
+   * @returns webpack status object
+   */
   get stats() {
     return this._stats;
   }

packages/xarc-subapp/test/spec/browser/index.spec.ts

@@ -0,0 +1,72 @@
+import "jsdom-global/register";
+import {
+  declareSubApp,
+  getContainer,
+  _setupEnvHooks,
+  IS_BROWSER
+} from "../../../src/browser/index";
+import { envHooks } from "../../../src/subapp/index";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+
+describe("browser index", () => {
+  afterEach(() => {
+    (window as any)._subapps = undefined;
+  });
+
+  describe("getContainer", () => {
+    it("should getContainer create a new subapp container at first time", () => {
+      const container = getContainer();
+      expect(container).is.an("object");
+
+      const container2 = getContainer();
+      expect(container).equal(container2);
+    });
+  });
+
+  describe("_setupEnvHooks", () => {
+    it("should _setupEnvHooks set getContainer to envHooks", () => {
+      _setupEnvHooks();
+      expect(envHooks.getContainer).equal(getContainer);
+
+      const getCon = envHooks.getContainer;
+      _setupEnvHooks();
+      expect(envHooks.getContainer).equal(getCon);
+    });
+  });
+
+  describe("declareSubApp", () => {
+    it("should add the subapp into container", async () => {
+      const container = getContainer();
+
+      const subapp = declareSubApp({
+        name: "test",
+        getModule: () => import("../../blah")
+      });
+      expect(container.getNames()).contains("test");
+      expect(container.get("test")).to.equal(subapp);
+      expect(subapp._module).to.equal(undefined);
+
+      const mod = await subapp._getModule();
+
+      expect(subapp._module).to.equal(mod);
+      expect(mod.subapp.Component()).to.equal("hello"); // eslint-disable-line
+    });
+  });
+
+  describe("IS_BROWSER", () => {
+    it("should IS_BROWSER be true", () => {
+      expect(IS_BROWSER).true; //  eslint-disable-line
+    });
+  });
+
+  it("serverOverrideMethods exist", () => {
+    getContainer();
+    const subapp = declareSubApp({
+      name: "test",
+      getModule: () => import("../../blah")
+    });
+
+    expect(subapp._start).to.be.a("function");
+  });
+});

packages/xarc-subapp/test/spec/browser/webpack4-jsonp.spec.ts

@@ -0,0 +1,31 @@
+import { webpack4JsonP } from "../../../src/browser/webpack4-jsonp";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+
+const mockWindow: any = {};
+describe("webpack4JsonP", () => {
+  it("should webpack4JsonP set __webpack_get_script_src__ method on window", () => {
+    webpack4JsonP(mockWindow);
+    expect(mockWindow.__webpack_get_script_src__).to.be.a("function");
+  });
+
+  it("should __webpack_get_script_src__ return original src when CDN is enabled", () => {
+    mockWindow.xarcV2 = {
+      cdnMap: src => "cdnMap" + src
+    };
+
+    expect(mockWindow.__webpack_get_script_src__("chunkId", "publicPath", "/test/src")).equal(
+      "cdnMap/test/src"
+    );
+  });
+
+  it("should __webpack_get_script_src__ return original src when CDN is disabled", () => {
+    mockWindow.xarcV2 = {
+      cdnMap: str => undefined //  eslint-disable-line
+    };
+
+    expect(mockWindow.__webpack_get_script_src__("chunkId", "publicPath", "/test/src")).equal(
+      "/test/src"
+    );
+  });
+});

packages/xarc-subapp/test/spec/browser/xarc-cdn-map.spec.ts

@@ -0,0 +1,28 @@
+import { xarcCdnMap } from "../../../src/browser/xarc-cdn-map";
+import { xarcV2Client } from "../../../src/browser/xarc-subapp-v2";
+
+import { describe, it } from "mocha";
+import { expect } from "chai";
+require("jsdom-global")("", { url: "https://localhost/" }); //  eslint-disable-line
+
+const mockWindow = Object.assign({}, window);
+describe("xarcCdnMap", () => {
+  it("should xarcCdnMap return undefined when window not having xarcV2 attribute", () => {
+    expect(xarcCdnMap(mockWindow)).undefined; //  eslint-disable-line
+  });
+
+  it("should xarcCdnMap add subapp2 global attribute and method on window object", () => {
+    xarcV2Client(mockWindow);
+    xarcCdnMap(mockWindow);
+    const xarcV2 = (mockWindow as any).xarcV2;
+    expect(xarcV2).to.be.an("object");
+    expect(xarcV2.cdnInit).to.be.a("function");
+    expect(xarcV2.cdnUpdate).to.be.a("function");
+    expect(xarcV2.cdnMap).to.be.a("function");
+    expect((mockWindow as any)._wml.cdn.map).equal(xarcV2.cdnMap);
+    expect((mockWindow as any)._wml.cdn.update).equal(xarcV2.cdnUpdate);
+    expect((mockWindow as any)._wml.cdn.md)
+      .equal(xarcV2.rt.md)
+      .eql({});
+  });
+});