@squiz/component-cli-lib 1.2.11 → 1.2.13-alpha.0

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

@@ -9,6 +9,7 @@ import configObj, {
   deleteComponentSet,
   addContentItem,
   deleteContentItem,
+  managementServiceRoot,
 } from './helper';
 import color from 'cli-color';
 import path from 'path';
@@ -58,12 +59,7 @@ describe('uploading a component', () => {
     it('Should fail uploading a component without manifest.json', async () => {
       mockConsoleError.mockClear();
       const componentPath = path.join(__dirname, '/__components__/invalid-upload');
-      await uploadComponentFolder(
-        componentPath,
-        configObj.managementServiceUrl + '/v1',
-        configObj.renderServiceUrl,
-        testFilesDir,
-      );
+      await uploadComponentFolder(managementServiceRoot, configObj.managementServiceUrl, componentPath, testFilesDir);
       expect(mockConsoleError.mock.calls[0][0]).toEqual(color.red('manifest could not be found'));
     });
 
@@ -71,13 +67,14 @@ describe('uploading a component', () => {
       mockConsoleError.mockClear();
       const componentPath = path.join(__dirname, '/__components__/invalid-manifest');
       await uploadComponentFolder(
+        managementServiceRoot,
+        configObj.managementServiceUrl,
         componentPath,
-        configObj.managementServiceUrl + '/v1',
-        configObj.renderServiceUrl,
+
         testFilesDir,
       );
       expect(mockConsoleError.mock.calls[0][0]).toEqual(
-        color.red('failed validation: /name pattern must match pattern "^[a-zA-Z0-9_\\-]+$"'),
+        color.red('failed validation: /name: pattern must match pattern "^[a-zA-Z0-9_\\-]+$"'),
       );
     });
 
@@ -87,9 +84,10 @@ describe('uploading a component', () => {
       const filePath = `${componentPath}/105mb-file`;
       await createFile(filePath, 105); // Higher limit has been used because compression reduces the size if you use closer to 100MB
       await uploadComponentFolder(
+        managementServiceRoot,
+        configObj.managementServiceUrl,
         componentPath,
-        configObj.managementServiceUrl + '/v1',
-        configObj.renderServiceUrl,
+
         testFilesDir,
       );
       expect(mockConsoleError.mock.calls[0][0]).toEqual(
@@ -99,6 +97,65 @@ describe('uploading a component', () => {
     });
   });
 
+  describe('Deploy a basic component having a input with multiline format', () => {
+    beforeAll(async () => {
+      await deleteComponentSet(webPath);
+      await deleteContentItem(contentItemId);
+      for (const componentName of getTestComponents()) {
+        try {
+          await managementService.delete(`/component/${componentName}`);
+        } catch {
+          // no op
+        }
+      }
+    });
+
+    beforeEach(() => {
+      console.error = mockConsoleError;
+      console.log = mockConsoleLog;
+    });
+
+    afterEach(() => {
+      console.error = orgConsoleError;
+    });
+
+    it('Should upload the component and return a valid url to preview', async () => {
+      const componentPath = path.join(__dirname, '/__components__/cmp-format-string');
+      await uploadComponentFolder(managementServiceRoot, configObj.managementServiceUrl, componentPath, testFilesDir);
+      const uploadedComponent = '<a href="/r/fixtures/cmp-format-string/1.0.0?_previewKey=test-preview">1.0.0</a>';
+      const get = await supertest(configObj.renderServiceUrl).get('/');
+      expect(get.status).toEqual(200);
+      expect((get as any)?.res?.text).toContain(uploadedComponent);
+    });
+
+    it('Should render a component with multi-line format string input', async () => {
+      const componentSet: ComponentSetWebModelForCreate = {
+        webPath,
+        displayName: 'some-display-name',
+        description: 'Set description',
+        headers: {},
+        environmentVariables: {},
+        components: {
+          'fixtures/cmp-format-string': [{ environmentVariables: {}, version: '1.0.0' }],
+        },
+        componentVersionRules: {},
+      };
+      await addComponentSet(componentSet);
+      await addContentItem({
+        id: contentItemId,
+        schemaName: 'fixtures/cmp-format-string/1.0.0/main',
+        content: {
+          text: 'from-content-item-service',
+        },
+      });
+      const response = await renderService.get(
+        `/r/fixtures/cmp-format-string/1.0.0/?_contentItemId=${contentItemId}&_componentSet=${webPath}`,
+      );
+      expect(response.status).toEqual(200);
+      expect(response.data).toEqual(`<div>Input: from-content-item-service</div>`);
+    });
+  });
+
   describe('Deploy basic component having a static file', () => {
     // component to deploy for this test
     const componentPath = path.join(__dirname, '/__components__/cmp-static-file-test');
@@ -126,13 +183,14 @@ describe('uploading a component', () => {
 
     it('Should upload the component and return a valid url to preview', async () => {
       await uploadComponentFolder(
+        managementServiceRoot,
+        configObj.managementServiceUrl,
         componentPath,
-        configObj.managementServiceUrl + '/v1',
-        configObj.renderServiceUrl,
+
         testFilesDir,
       );
 
-      const uploadedComponent = '<a href="/preview/smoke-test-components/cmp-static-file-test/1.0.0">1.0.0</a>';
+      const uploadedComponent = '<a href="/r/smoke-test-components/cmp-static-file-test/1.0.0">1.0.0</a>';
       const get = await supertest(configObj.renderServiceUrl).get('/');
       expect(get.status).toEqual(200);
       expect((get as any)?.res?.text).toContain(uploadedComponent);
@@ -141,9 +199,10 @@ describe('uploading a component', () => {
     it('Should fail upload the component with same version', async () => {
       mockConsoleError.mockClear();
       await uploadComponentFolder(
+        managementServiceRoot,
+        configObj.managementServiceUrl,
         componentPath,
-        configObj.managementServiceUrl + '/v1',
-        configObj.renderServiceUrl,
+
         testFilesDir,
       );
       expect(mockConsoleError.mock.calls[0][0]).toEqual(
@@ -172,14 +231,14 @@ describe('uploading a component', () => {
       await addComponentSet(componentSet);
 
       const response = await renderService.get(
-        `/r/${webPath}/smoke-test-components/cmp-static-file-test/1.0.0/?something=hello`,
+        `/r/smoke-test-components/cmp-static-file-test/1.0.0/?_componentSet=${webPath}&something=hello`,
       );
       expect(response.status).toEqual(200);
       expect(response.data).toEqual(
         [
           '<div>Input: hello</div>',
           '<div>smoke-test-components/cmp-static-file-test 1.0.0 ',
-          `${configObj.renderServiceUrl}/s/${webPath}/smoke-test-components/cmp-static-file-test/1.0.0/birthday-cake.png</div>`,
+          `${configObj.renderServiceUrl}/s/smoke-test-components/cmp-static-file-test/1.0.0/birthday-cake.png?_componentSet=${webPath}</div>`,
         ].join(''),
       );
     });
@@ -207,17 +266,19 @@ describe('uploading a component', () => {
         },
       });
 
-      console.log(`/r/${webPath}/smoke-test-components/cmp-static-file-test/1.0.0/?_contentItemId=` + contentItemId);
+      console.log(
+        `/r/smoke-test-components/cmp-static-file-test/1.0.0/?_componentSet=${webPath}&_contentItemId=${contentItemId}`,
+      );
 
       const response = await renderService.get(
-        `/r/${webPath}/smoke-test-components/cmp-static-file-test/1.0.0/?_contentItemId=` + contentItemId,
+        `/r/smoke-test-components/cmp-static-file-test/1.0.0/?_componentSet=${webPath}&_contentItemId=${contentItemId}`,
       );
       expect(response.status).toEqual(200);
       expect(response.data).toEqual(
         [
           '<div>Input: from-content-item-service</div>',
           '<div>smoke-test-components/cmp-static-file-test 1.0.0 ',
-          `${configObj.renderServiceUrl}/s/${webPath}/smoke-test-components/cmp-static-file-test/1.0.0/birthday-cake.png</div>`,
+          `${configObj.renderServiceUrl}/s/smoke-test-components/cmp-static-file-test/1.0.0/birthday-cake.png?_componentSet=${webPath}</div>`,
         ].join(''),
       );
     });

package/src/upload-component-folder.ts

@@ -4,41 +4,39 @@ import { zipDirectory } from '@squiz/dx-common-lib';
 import { Manifest, ManifestServiceForDev } from '@squiz/component-lib';
 import fsp from 'fs/promises';
 import path from 'path';
-import axios, { AxiosResponse, AxiosError, AxiosInstance } from 'axios';
+import { AxiosResponse, AxiosError, AxiosInstance } from 'axios';
 import color from 'cli-color';
 import { getLogger, Logger } from '@squiz/dx-logger-lib';
+import { JsonValidationService } from '@squiz/dx-json-schema-lib';
 
 export const logger: Logger = getLogger({ name: 'upload-component', format: 'human' });
 
 export async function uploadComponentFolder(
-  folderPath: string,
+  apiClient: AxiosInstance,
   componentServiceManagementUrl: string,
-  componentRenderServiceUrl: string,
+  folderPath: string,
   baseTempDir: string = '',
 ): Promise<void> {
   const tmpDir = await fsp.mkdtemp(path.resolve(baseTempDir, 'cmp-upload'));
 
   try {
-    const axiosInstance = axios.create({
-      baseURL: componentServiceManagementUrl,
-      headers: {
-        'content-type': 'application/json',
-      },
-    });
-
-    await preUploadChecks(folderPath, componentRenderServiceUrl);
+    await preUploadChecks(apiClient, componentServiceManagementUrl, folderPath);
     logger.info('Initial scanning');
     const zip = await zipDirectory(folderPath, tmpDir);
 
-    const initialUpload = await handleResponse<any>(axiosInstance.post('upload-component'));
+    const initialUpload = await handleResponse<any>(
+      apiClient.post('/v1/upload-component', {}, { baseURL: componentServiceManagementUrl }),
+    );
 
     logger.info(`deployment id: ${initialUpload.id} status: transferring`);
     await uploadFile(initialUpload, zip);
 
-    await watchAndWaitForUploadAndScanComplete(initialUpload.id, axiosInstance);
+    await watchAndWaitForUploadAndScanComplete(apiClient, componentServiceManagementUrl, initialUpload.id);
 
     logger.info(`deployment id: ${initialUpload.id} status: deploying component folder`);
-    const result = await handleResponse<any>(axiosInstance.post(`upload-component/next/${initialUpload.id}`));
+    const result = await handleResponse<any>(
+      apiClient.post(`/v1/upload-component/next/${initialUpload.id}`, {}, { baseURL: componentServiceManagementUrl }),
+    );
 
     await fsp.rm(tmpDir, { force: true, recursive: true });
 
@@ -59,44 +57,38 @@ export async function uploadComponentFolder(
   }
 }
 
-async function preUploadChecks(folderPath: string, renderService: string) {
-  const service = new ManifestServiceForDev(folderPath, logger);
+async function preUploadChecks(apiClient: AxiosInstance, managementURL: string, folderPath: string) {
+  const service = new ManifestServiceForDev(folderPath, logger, new JsonValidationService());
   const manifestPath = path.join(folderPath, `manifest.json`);
 
   const result = await service.readManifest(manifestPath);
   await service.assertManifestIsValid(manifestPath, result.getModel());
 
-  if (await checkIfVersionExists(result, renderService)) {
+  if (await checkIfVersionExists(apiClient, managementURL, result)) {
     throw new Error(`Cannot upload component version, ${result.getName()} ${result.getVersion()} already exists`);
   }
 }
 
-async function checkIfVersionExists(inputManifest: Manifest, renderService: string) {
-  const axiosInstance = axios.create({
-    baseURL: renderService,
+async function checkIfVersionExists(apiClient: AxiosInstance, managementURL: string, inputManifest: Manifest) {
+  const response = await apiClient.get(`/v1/component/${inputManifest.getName()}/${inputManifest.getVersion()}`, {
+    validateStatus: null,
+    baseURL: managementURL,
   });
-
-  try {
-    const response = await axiosInstance.get(
-      `d/${inputManifest.getName()}/${inputManifest.getVersion()}/manifest.json`,
-    );
-    if (response.status === 200) {
-      return true;
-    }
-    throw new Error(`Unexpected response code ${response.status}`);
-  } catch (error) {
-    if (isAxiosError(error)) {
-      const { response } = error;
-      if (response?.status === 404) {
-        return false;
-      }
-    }
-    throw error;
+  if (response.status === 200) {
+    return true;
+  } else if (response.status === 404) {
+    return false;
   }
+  throw new Error(`Unexpected response code ${response.status}`);
 }
 
-async function watchAndWaitForUploadAndScanComplete(id: string, axiosInstance: AxiosInstance): Promise<void> {
-  const poll = () => handleResponse<ScanStatus>(axiosInstance.get('upload-component/status/' + id));
+async function watchAndWaitForUploadAndScanComplete(
+  apiClient: AxiosInstance,
+  managementURL: string,
+  id: string,
+): Promise<void> {
+  const poll = () =>
+    handleResponse<ScanStatus>(apiClient.get('/v1/upload-component/status/' + id, { baseURL: managementURL }));
 
   return new Promise((resolve, reject) => {
     const recurse = () =>

package/tsconfig.json

@@ -11,9 +11,10 @@
 
   "references": [
     { "path": "../virus-scanner-lib" },
-    { "path": "../component-lib" },
     { "path": "../render-runtime-lib" },
-    { "path": "../dx-logger-lib" }
+    { "path": "../component-lib" },
+    { "path": "../dx-logger-lib" },
+    { "path": "../dx-json-schema-lib" }
   ],
 
   "include": ["src/**/*.ts", "src/**/*.json"],