@squiz/component-cli-lib 1.21.1-alpha.35 → 1.21.1-alpha.39

package/lib/integration-tests/helper.d.ts

@@ -1,4 +1,4 @@
-import { ComponentSetWebModelForCreate } from '@squiz/component-lib';
+import { ComponentSetWebModelForCreate, Manifest } from '@squiz/component-lib';
 import { ContentApi } from '@squiz/component-web-api-lib';
 interface Config {
     managementServiceUrl: string;
@@ -23,3 +23,5 @@ export declare function deleteComponentSet(webPath: string): Promise<void>;
 export declare function addComponentSet(componentSet: ComponentSetWebModelForCreate): Promise<void>;
 export declare function addContentItem(contentItem: ContentApi.ContentItemWebModel): Promise<void>;
 export declare function deleteContentItem(contentItemId: string): Promise<void>;
+export declare function deleteComponent(manifest: Manifest): Promise<void>;
+export declare function deleteComponents(manifests: Manifest[]): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/component-cli-lib",
-  "version": "1.21.1-alpha.35",
+  "version": "1.21.1-alpha.39",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -13,12 +13,12 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@squiz/component-lib": "1.21.1-alpha.35",
-    "@squiz/component-web-api-lib": "1.21.1-alpha.35",
-    "@squiz/dx-common-lib": "1.21.1-alpha.35",
-    "@squiz/dx-json-schema-lib": "1.21.1-alpha.35",
-    "@squiz/dx-logger-lib": "1.21.1-alpha.35",
-    "@squiz/virus-scanner-lib": "1.21.1-alpha.35",
+    "@squiz/component-lib": "1.21.1-alpha.39",
+    "@squiz/component-web-api-lib": "1.21.1-alpha.39",
+    "@squiz/dx-common-lib": "1.21.1-alpha.39",
+    "@squiz/dx-json-schema-lib": "1.21.1-alpha.39",
+    "@squiz/dx-logger-lib": "1.21.1-alpha.39",
+    "@squiz/virus-scanner-lib": "1.21.1-alpha.39",
     "@types/cli-color": "2.0.2",
     "@types/express": "4.17.17",
     "@types/jest": "28.1.8",
@@ -32,12 +32,12 @@
     "typescript": "4.9.4"
   },
   "dependencies": {
-    "@squiz/render-runtime-lib": "1.21.1-alpha.35",
+    "@squiz/render-runtime-lib": "1.21.1-alpha.39",
     "archiver": "5.3.1",
     "axios": "1.3.2",
     "cli-color": "^2.0.2",
     "open": "^8.4.0",
     "supertest": "^6.2.3"
   },
-  "gitHead": "615376e3d0d55f8398129643c3e22a7b2b1d7664"
+  "gitHead": "52f09f966b5eaa35149786dd1f2c55bf9ad8bde5"
 }

package/src/integration-tests/__components__/cmp-property-order/main.js

@@ -0,0 +1,6 @@
+/**
+ * @param {object} input
+ */
+module.exports = async function (input) {
+  return `<div>Input: ${JSON.stringify(input)}</div>`;
+};

package/src/integration-tests/__components__/cmp-property-order/manifest.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "http://localhost:3000/schemas/v1.json#",
+
+  "name": "cmp-property-order",
+  "version": "1.0.0",
+  "mainFunction": "main",
+  "displayName": "some-display-name",
+  "namespace": "smoke-test-components",
+  "description": "some-description",
+  "functions": [
+    {
+      "name": "main",
+      "entry": "main.js",
+      "input": {
+        "type": "object",
+        "properties": {
+          "input1": {
+            "type": "string"
+          },
+          "333": {
+            "type": "string"
+          },
+          "input333": {
+            "type": "string"
+          },
+          "\"": {
+            "type": "string"
+          },
+          "~": {
+            "type": "string"
+          },
+          "": {
+            "type": "string"
+          },
+          "$": {
+            "type": "string"
+          },
+          "111": {
+            "type": "string"
+          },
+          "input22": {
+            "type": "string"
+          },
+          "222": {
+            "type": "string"
+          },
+          "*": {
+            "type": "string"
+          },
+          "null": {
+            "type": "null",
+            "default": null
+          }
+        },
+        "required": []
+      },
+      "output": { "responseType": "html" }
+    }
+  ]
+}

package/src/integration-tests/helper.ts

@@ -1,9 +1,9 @@
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 import path from 'path';
 
 import fsp from 'fs/promises';
 import { randomBytes } from 'crypto';
-import { ComponentSetWebModelForCreate, ManifestServiceForDev } from '@squiz/component-lib';
+import { ComponentSetWebModelForCreate, Manifest, ManifestServiceForDev } from '@squiz/component-lib';
 import { parseEnvVarForVar } from '@squiz/dx-common-lib';
 import { ContentApi } from '@squiz/component-web-api-lib';
 import { config } from 'dotenv';
@@ -154,3 +154,20 @@ export async function deleteContentItem(contentItemId: string) {
     //no ops
   }
 }
+
+export async function deleteComponent(manifest: Manifest) {
+  try {
+    await managementService.delete(`/component/${manifest.getName()}`);
+    await contentService.delete(
+      `/content-schema/${manifest.getName()}/${manifest.getVersion()}/${manifest.getComponentFunctionByName().name}`,
+    );
+  } catch (error) {
+    if ((error as AxiosError).response?.status !== 404) {
+      throw error;
+    }
+  }
+}
+
+export async function deleteComponents(manifests: Manifest[]) {
+  await Promise.all(manifests.map((manifest) => deleteComponent(manifest)));
+}

package/src/integration-tests/upload-and-render-component.integration.spec.ts

@@ -1,16 +1,16 @@
 import { uploadComponentFolder } from '../index';
 import configObj, {
-  renderService,
   managementService,
+  renderService,
   getTestComponents,
   createFile,
+  deleteComponents,
   removeFile,
   addComponentSet,
   deleteComponentSet,
   addContentItem,
   deleteContentItem,
   managementServiceRoot,
-  contentService,
 } from './helper';
 
 import path from 'path';
@@ -19,7 +19,6 @@ import { logger } from '../upload-component-folder';
 import { ComponentSetWebModelForCreate } from '@squiz/component-lib';
 import fsp from 'fs/promises';
 import { randomUUID } from 'crypto';
-import { AxiosError } from 'axios';
 
 const webPath = 'set-' + randomUUID();
 const contentItemId = randomUUID();
@@ -36,18 +35,8 @@ describe('uploading a component', () => {
     // clean up the component added by the test
     await deleteComponentSet(webPath);
     await deleteContentItem(contentItemId);
-
-    for (const manifest of await getTestComponents()) {
-      await managementService.delete(`/component/${manifest.getName()}`).catch(() => null);
-      await contentService
-        .delete(
-          `/content-schema/${manifest.getName()}/${manifest.getVersion()}/${
-            manifest.getComponentFunctionByName().name
-          }`,
-        )
-        .catch(() => null);
-    }
-    // clean up the test componnet files
+    await deleteComponents(await getTestComponents());
+    // clean up the test component files
     await fsp.rm(testFilesDir, { force: true, recursive: true });
     logger.silent = false;
   });
@@ -102,22 +91,9 @@ describe('uploading a component', () => {
 
   describe('Deploy a basic component having a input with multiline format', () => {
     beforeAll(async () => {
-      try {
-        await deleteComponentSet(webPath);
-        await deleteContentItem(contentItemId);
-        for (const manifest of await getTestComponents()) {
-          await managementService.delete(`/component/${manifest.getName()}`);
-          await contentService.delete(
-            `/content-schema/${manifest.getName()}/${manifest.getVersion()}/${
-              manifest.getComponentFunctionByName().name
-            }`,
-          );
-        }
-      } catch (error: unknown) {
-        if ((error as AxiosError).response?.status !== 404) {
-          throw error;
-        }
-      }
+      await deleteComponentSet(webPath);
+      await deleteContentItem(contentItemId);
+      await deleteComponents(await getTestComponents());
     });
 
     it('Should upload the component and return a valid url to preview', async () => {
@@ -178,22 +154,9 @@ describe('uploading a component', () => {
 
   describe('Deploy a basic component with input format matrix-asset-uri', () => {
     beforeAll(async () => {
-      try {
-        await deleteComponentSet(webPath);
-        await deleteContentItem(contentItemId);
-        for (const manifest of await getTestComponents()) {
-          await managementService.delete(`/component/${manifest.getName()}`);
-          await contentService.delete(
-            `/content-schema/${manifest.getName()}/${manifest.getVersion()}/${
-              manifest.getComponentFunctionByName().name
-            }`,
-          );
-        }
-      } catch (error) {
-        if ((error as AxiosError).response?.status !== 404) {
-          throw error;
-        }
-      }
+      await deleteComponentSet(webPath);
+      await deleteContentItem(contentItemId);
+      await deleteComponents(await getTestComponents());
     });
     it('Should upload the component and return a valid url to preview', async () => {
       const componentPath = path.join(__dirname, '/__components__/matrix-asset-uri');
@@ -245,22 +208,9 @@ describe('uploading a component', () => {
     const componentPath = path.join(__dirname, '/__components__/cmp-static-file-test');
 
     beforeAll(async () => {
-      try {
-        await deleteComponentSet(webPath);
-        await deleteContentItem(contentItemId);
-        for (const manifest of await getTestComponents()) {
-          await managementService.delete(`/component/${manifest.getName()}`);
-          await contentService.delete(
-            `/content-schema/${manifest.getName()}/${manifest.getVersion()}/${
-              manifest.getComponentFunctionByName().name
-            }`,
-          );
-        }
-      } catch (error) {
-        if ((error as AxiosError).response?.status !== 404) {
-          throw error;
-        }
-      }
+      await deleteComponentSet(webPath);
+      await deleteContentItem(contentItemId);
+      await deleteComponents(await getTestComponents());
     });
 
     it('Should upload the component and return a valid url to preview', async () => {
@@ -371,22 +321,9 @@ describe('uploading a component', () => {
     const componentPath = path.join(__dirname, '/__components__/cmp-no-api-key');
 
     beforeAll(async () => {
-      try {
-        await deleteComponentSet(webPath);
-        await deleteContentItem(contentItemId);
-        for (const manifest of await getTestComponents()) {
-          await managementService.delete(`/component/${manifest.getName()}`);
-          await contentService.delete(
-            `/content-schema/${manifest.getName()}/${manifest.getVersion()}/${
-              manifest.getComponentFunctionByName().name
-            }`,
-          );
-        }
-      } catch (error) {
-        if ((error as AxiosError).response?.status !== 404) {
-          throw error;
-        }
-      }
+      await deleteComponentSet(webPath);
+      await deleteContentItem(contentItemId);
+      await deleteComponents(await getTestComponents());
     });
 
     it('Should upload the component and return a valid url', async () => {
@@ -432,4 +369,55 @@ describe('uploading a component', () => {
       expect(response.data).toEqual(false);
     });
   });
+
+  describe('Deploy component with properties defined in a specific order', () => {
+    // component to deploy for this test
+    const componentPath = path.join(__dirname, '/__components__/cmp-property-order');
+
+    beforeAll(async () => {
+      await deleteComponentSet(webPath);
+      await deleteContentItem(contentItemId);
+      await deleteComponents(await getTestComponents());
+
+      await uploadComponentFolder(managementServiceRoot, configObj.managementServiceUrl, componentPath, testFilesDir);
+    });
+
+    it('Should preserve input field order when uploading schema to content store', async () => {
+      const response = await supertest(configObj.contentServiceUrl).get(
+        '/content-schema/smoke-test-components/cmp-property-order/1.0.0/main',
+      );
+
+      // Relates to DEVX-891, property order is preserved so that we can reliably draw a UI from it.
+      //
+      // The sequence here is important and should follow the rules defined here:
+      //  * https://tc39.es/ecma262/#sec-ordinaryownpropertykeys
+      //  * https://stackoverflow.com/a/38218582
+      //
+      // Per EMCA-262 numeric keys appear first in ascending order but all other keys should appear
+      // in the order they were originally defined, they should not be affected by them being stored in
+      // a JSONB DB column or anything else.
+      //
+      // Asserting on the encoded contents of the response to avoid any decoding in the test having
+      // a potential influence on the outcome.
+      const expectedProperties =
+        '"111":{"type":"string"},' +
+        '"222":{"type":"string"},' +
+        '"333":{"type":"string"},' +
+        '"input1":{"type":"string"},' +
+        '"input333":{"type":"string"},' +
+        '"\\"":{"type":"string"},' +
+        '"~":{"type":"string"},' +
+        '"":{"type":"string"},' +
+        '"$":{"type":"string"},' +
+        '"input22":{"type":"string"},' +
+        '"*":{"type":"string"},' +
+        '"null":{"type":"null","default":null}';
+
+      expect(response.status).toEqual(200);
+      expect(response.text).toEqual(
+        `{"name":"smoke-test-components/cmp-property-order/1.0.0/main",` +
+          `"schema":{"type":"object","properties":{${expectedProperties}},"required":[]},"contentSchemaType":"component"}`,
+      );
+    });
+  });
 });