@squiz/component-cli-lib 1.2.1-alpha.107 → 1.2.1-alpha.18

package/src/component-dev.spec.ts

@@ -1,59 +0,0 @@
-import { routeTests, TestHelpers } from '@squiz/render-runtime-lib';
-import { startDevelopmentRender } from './component-dev';
-import supertest from 'supertest';
-import { Server } from 'http';
-
-jest.setTimeout(20_000);
-
-describe('component-dev', () => {
-  describe('accessing local dev routes', () => {
-    let server: Server;
-    let request: supertest.SuperTest<supertest.Test>;
-    beforeAll(async () => {
-      server = startDevelopmentRender(TestHelpers.getTestComponentFolder(), { port: 0 });
-      request = supertest(server);
-    });
-
-    afterAll(async () => {
-      server.close();
-    });
-
-    it('should fail validation when requesting a function with a missing entry file', async () => {
-      const response = await request.get(
-        '/r/set/unit-test-components/test-component/1.0.3/non-existent-entry-file?something=not-used',
-      );
-
-      expect(response.body).toEqual({
-        message: '"main\'s" entry file "missing-entry-file.js" is inaccessible',
-      });
-      expect(response.statusCode).toEqual(500);
-    });
-
-    describe('definition routes', () => {
-      const server = startDevelopmentRender(TestHelpers.getTestComponentFolder(), { port: 0 });
-      const request = () => supertest(server);
-      routeTests.definition(request, 'http://localhost:0');
-      afterAll(() => {
-        server.close();
-      });
-    });
-
-    describe('static routes', () => {
-      const server = startDevelopmentRender(TestHelpers.getTestComponentFolder(), { port: 0 });
-      const request = () => supertest(server);
-      routeTests.static(request);
-      afterAll(() => {
-        server.close();
-      });
-    });
-
-    describe('render routes', () => {
-      const server = startDevelopmentRender(TestHelpers.getTestComponentFolder(), { port: 0 });
-      const request = () => supertest(server);
-      routeTests.render(request, 'http://localhost:0');
-      afterAll(() => {
-        server.close();
-      });
-    });
-  });
-});

package/src/component-dev.ts

@@ -1,60 +0,0 @@
-import {
-  ComponentPreviewService,
-  ComponentRunnerServiceWithWorkers,
-  setupRenderRuntimeServer,
-} from '@squiz/render-runtime-lib';
-import { getLogger, LoggerOptions } from '@squiz/dx-logger-lib';
-import path from 'path';
-import { ComponentFunctionService, ComponentSetServiceForLocalDev, ManifestServiceForDev } from '@squiz/component-lib';
-
-/**
- * startDevelopmentRender starts a dev-mode render stack for any
- * local directory. This should start an express server on a random unused port
- * which can be accessed for viewing the component in development.
- *
- * @param {string} componentPath - The directory with the component to be rendered
- * @param {object} options - Additional configuration for the dev stack
- * @returns a function to stop the render stack
- */
-export function startDevelopmentRender(
-  componentPath: string,
-  options: { port: number; previewFile?: string; loggingFormat?: LoggerOptions['format'] },
-) {
-  const logger = getLogger({ name: 'component-dev', format: options.loggingFormat || 'human' });
-  const rootUrl = `http://localhost:${options.port}`;
-  const dataMountPoint = path.resolve(process.cwd(), componentPath);
-
-  const componentRunnerService = new ComponentRunnerServiceWithWorkers(
-    {
-      dataMountPoint,
-      shouldCacheResponses: false,
-      workerTimeout: 5_000,
-    },
-    logger,
-  );
-  const webServer = setupRenderRuntimeServer(
-    {
-      logger,
-      componentRunnerService,
-      componentSetService: new ComponentSetServiceForLocalDev(logger),
-      componentFunctionService: new ComponentFunctionService(rootUrl),
-      componentPreviewService: new ComponentPreviewService(options.previewFile),
-      manifestService: new ManifestServiceForDev(dataMountPoint, logger),
-    },
-    { rootUrl },
-  );
-
-  const server = webServer.listen(options.port, () => {
-    logger.info(`Component development webserver started on port ${options.port}`);
-  });
-
-  server.on('close', async () => {
-    await componentRunnerService.stop();
-  });
-
-  process.on('SIGINT', () => {
-    server.close();
-  });
-
-  return server;
-}

package/src/integration-tests/__components__/big-package/manifest.json

@@ -1,36 +0,0 @@
-{
-  "$schema": "http://localhost:3000/schemas/v1.json#",
-
-  "name": "big-package",
-  "version": "1.0.2",
-  "main-function": "render-json",
-  "namespace": "smoke-test-components",
-  "display-name": "some-display-name",
-  "description": "some-description",
-  "functions": [
-    {
-      "name": "render-json",
-      "entry": "render-json.js",
-      "input": {
-        "type": "object",
-        "properties": {
-          "something": {
-            "type": "string"
-          }
-        },
-        "required": ["something"]
-      },
-      "output": {
-        "response-type": "json",
-        "definition": {
-          "properties": {
-            "my-prop": {
-              "type": "string"
-            }
-          },
-          "required": ["my-prop"]
-        }
-      }
-    }
-  ]
-}

package/src/integration-tests/__components__/big-package/render-json.js

@@ -1,5 +0,0 @@
-module.exports = async function () {
-  return {
-    'my-prop': 'test value for my-prop',
-  };
-};

package/src/integration-tests/__components__/cmp-static-file-test/main.js

@@ -1,10 +0,0 @@
-/**
- * @param {object} input
- * @param {ComponentInfo} info
- */
-module.exports = async function (input, info) {
-  return (
-    `<div>Input: ${input.something}</div>` +
-    `<div>${info.ctx.componentName} ${info.ctx.version} ${info.ctx.getStaticResourceUrl('birthday-cake.png')}</div>`
-  );
-};

package/src/integration-tests/__components__/cmp-static-file-test/manifest.json

@@ -1,42 +0,0 @@
-{
-  "$schema": "http://localhost:3000/schemas/v1.json#",
-
-  "name": "cmp-static-file-test",
-  "version": "1.0.0",
-  "main-function": "main",
-  "namespace": "smoke-test-components",
-  "display-name": "some-display-name",
-  "description": "some-description",
-  "functions": [
-    {
-      "entry": "main.js",
-      "name": "main",
-      "input": {
-        "type": "object",
-        "properties": {
-          "something": {
-            "type": "string"
-          }
-        },
-        "required": ["something"]
-      },
-      "output": {
-        "response-type": "html",
-
-        "static-files": [
-          {
-            "location": "header",
-            "file": {
-              "filepath": "static-library-file.js",
-              "type": "js"
-            }
-          }
-        ]
-      }
-    }
-  ],
-
-  "static-files": {
-    "location-root": "public"
-  }
-}

package/src/integration-tests/__components__/cmp-static-file-test/public/static-library-file.js

@@ -1 +0,0 @@
-const name = 'foo';

package/src/integration-tests/__components__/invalid-manifest/main.js

@@ -1,7 +0,0 @@
-/**
- * @param {object} input
- * @param {ComponentInfo} info
- */
-module.exports = async function (input, info) {
-  return '<div>test</div>';
-};

package/src/integration-tests/__components__/invalid-manifest/manifest.json

@@ -1,29 +0,0 @@
-{
-  "$schema": "http://localhost:3000/schemas/v1.json#",
-
-  "name": "invalid-manifes@t",
-  "version": "1.0.0",
-  "main-function": "main",
-  "namespace": "smoke-test-components",
-  "display-name": "some-display-name",
-  "description": "some-description",
-
-  "functions": [
-    {
-      "entry": "main.js",
-      "name": "main",
-      "input": {
-        "type": "object",
-        "properties": {
-          "something": {
-            "type": "string"
-          }
-        },
-        "required": ["something"]
-      },
-      "output": {
-        "response-type": "html"
-      }
-    }
-  ]
-}

package/src/integration-tests/__components__/invalid-upload/main.js

@@ -1,7 +0,0 @@
-/**
- * @param {object} input
- * @param {ComponentInfo} info
- */
-module.exports = async function (input, info) {
-  return '<div>test</div>';
-};

package/src/integration-tests/helper.ts

@@ -1,79 +0,0 @@
-import axios from 'axios';
-import fs from 'fs';
-import path from 'path';
-
-import fsp from 'fs/promises';
-import { randomBytes } from 'crypto';
-import { ComponentSetWebModel } from '@squiz/component-lib';
-import { parseEnvVarForVar } from '@squiz/dx-common-lib';
-import { config } from 'dotenv';
-
-config();
-
-interface Config {
-  managementServiceUrl: string;
-  renderServiceUrl: string;
-  ci_buildVersion: string;
-  ci_buildBranch: string;
-}
-
-const configObj: Config = {
-  managementServiceUrl: parseEnvVarForVar('COMPONENT_MANAGEMENT_SERVICE_URL').replace(/\/+$/, ''),
-  renderServiceUrl: parseEnvVarForVar('COMPONENT_RENDER_SERVICE_URL').replace(/\/+$/, ''),
-  ci_buildVersion: parseEnvVarForVar('CI_COMMIT_SHORT_SHA'),
-  ci_buildBranch: parseEnvVarForVar('CI_COMMIT_REF_NAME'),
-};
-
-export default configObj;
-
-export const managementService = axios.create({
-  baseURL: configObj.managementServiceUrl + '/v1',
-});
-
-export const managementServiceRoot = axios.create({
-  baseURL: configObj.managementServiceUrl,
-});
-
-export const renderService = axios.create({
-  baseURL: configObj.renderServiceUrl,
-});
-
-export const ci_buildVersion = configObj.ci_buildVersion;
-export const ci_buildBranch = configObj.ci_buildBranch;
-
-export function getTestComponents(): string[] {
-  const componets = [];
-  const componentsDir = path.join(__dirname, '/__components__/');
-  const files = fs.readdirSync(componentsDir);
-  for (const file of files) {
-    const stat = fs.statSync(path.join(componentsDir, file));
-    if (stat.isDirectory() && file.substring(0, 4) === 'cmp-') {
-      componets.push(file);
-    }
-  }
-  return componets;
-}
-export async function createFile(filePath: string, sizeInMB: number) {
-  const content = randomBytes(sizeInMB * 1000000);
-  await fsp.writeFile(`${filePath}`, content);
-}
-
-export function removeFile(filePath: string) {
-  fsp.unlink(filePath);
-}
-
-export async function deleteComponentSet(webPath: string) {
-  try {
-    await managementService.delete(`/component-set/${webPath}`);
-  } catch (error) {
-    // no ops
-  }
-}
-
-export async function addComponentSet(componentSet: ComponentSetWebModel) {
-  try {
-    await managementService.post(`/component-set`, componentSet);
-  } catch (error) {
-    //no ops
-  }
-}

package/src/integration-tests/service-deployment.spec.ts

@@ -1,45 +0,0 @@
-import { renderService, managementService, managementServiceRoot, ci_buildVersion, ci_buildBranch } from './helper';
-
-interface HealthInfo {
-  status: string;
-  buildVersion: string;
-  buildBranch: string;
-}
-
-describe('Verify latest services deployments', () => {
-  it('Should have latest Management API service', async () => {
-    const response: HealthInfo = (await managementServiceRoot.get('/health')).data;
-    expect(response.buildVersion).toBe(ci_buildVersion);
-    expect(response.buildBranch).toBe(ci_buildBranch);
-  });
-
-  it('Should return 200 for Management API docs', async () => {
-    const req = await managementService.get('/docs');
-    expect(req.status).toBe(200);
-    expect(req.headers['content-type']).toEqual('text/html; charset=utf-8');
-  });
-
-  it('Should return 200 for Management API docs.json', async () => {
-    const req = await managementService.get('/docs.json');
-    expect(req.status).toBe(200);
-    expect(req.headers['content-type']).toEqual('application/json; charset=UTF-8');
-  });
-
-  it('Should have latest Render Runtime service', async () => {
-    const response: HealthInfo = (await renderService.get('/health')).data;
-    expect(response.buildVersion).toBe(ci_buildVersion);
-    expect(response.buildBranch).toBe(ci_buildBranch);
-  });
-
-  it('Should return 200 for Render Runtime API docs', async () => {
-    const req = await renderService.get('/docs');
-    expect(req.status).toBe(200);
-    expect(req.headers['content-type']).toEqual('text/html; charset=utf-8');
-  });
-
-  it('Should return 200 for Render Runtime API docs.json', async () => {
-    const req = await renderService.get('/docs.json');
-    expect(req.status).toBe(200);
-    expect(req.headers['content-type']).toEqual('application/json; charset=UTF-8');
-  });
-});

package/src/integration-tests/test-setup.ts

@@ -1 +0,0 @@
-jest.setTimeout(60_000);

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

@@ -1,173 +0,0 @@
-import { uploadComponentFolder } from '../index';
-import configObj, {
-  renderService,
-  managementService,
-  getTestComponents,
-  createFile,
-  removeFile,
-  addComponentSet,
-  deleteComponentSet,
-} from './helper';
-import color from 'cli-color';
-import path from 'path';
-import supertest from 'supertest';
-import { logger } from '../upload-component-folder';
-import { ComponentSetWebModel } from '@squiz/component-lib';
-import fsp from 'fs/promises';
-
-const mockConsoleError = jest.fn();
-const mockConsoleLog = jest.fn();
-
-const orgConsoleError = console.error;
-const webPath = 'set';
-const testFilesDir = path.resolve(__dirname, 'test-files');
-
-beforeAll(async () => {
-  await fsp.rm(testFilesDir, { force: true, recursive: true });
-  await fsp.mkdir(testFilesDir);
-});
-
-afterAll(async () => {
-  // clean up the component added by the test
-  await deleteComponentSet(webPath);
-
-  for (const componentName of getTestComponents()) {
-    try {
-      await managementService.delete(`/component/smoke-test-components/${componentName}`);
-    } catch {
-      // no op
-    }
-  }
-
-  // clean up the test componnet files
-  await fsp.rm(testFilesDir, { force: true, recursive: true });
-});
-
-describe('Test isolated test cases', () => {
-  beforeEach(() => {
-    jest.spyOn(logger, 'error').mockImplementation(mockConsoleError);
-    jest.spyOn(logger, 'info').mockImplementation(mockConsoleLog);
-  });
-
-  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,
-    );
-    expect(mockConsoleError.mock.calls[0][0]).toEqual(color.red('manifest could not be found'));
-  });
-
-  it('Should fail uploading a component that has invalid manifest.json', async () => {
-    mockConsoleError.mockClear();
-    const componentPath = path.join(__dirname, '/__components__/invalid-manifest');
-    await uploadComponentFolder(
-      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_\\-]+$"'),
-    );
-  });
-
-  it('Should fail uploading the component that has size more than 100MB', async () => {
-    mockConsoleError.mockClear();
-    const componentPath = path.join(__dirname, '/__components__/big-package');
-    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(
-      componentPath,
-      configObj.managementServiceUrl + '/v1',
-      configObj.renderServiceUrl,
-      testFilesDir,
-    );
-    expect(mockConsoleError.mock.calls[0][0]).toEqual(
-      color.red(['File size exceeds the maximum limit of 100MB'].join('')),
-    );
-    removeFile(filePath);
-  });
-});
-
-describe('Deploy basic component having a static file', () => {
-  // component to deploy for this test
-  const componentPath = path.join(__dirname, '/__components__/cmp-static-file-test');
-
-  beforeAll(async () => {
-    await deleteComponentSet(webPath);
-    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 () => {
-    await uploadComponentFolder(
-      componentPath,
-      configObj.managementServiceUrl + '/v1',
-      configObj.renderServiceUrl,
-      testFilesDir,
-    );
-
-    const uploadedComponent = '<a href="/r/set/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);
-  });
-
-  it('Should fail upload the component with same version', async () => {
-    mockConsoleError.mockClear();
-    await uploadComponentFolder(
-      componentPath,
-      configObj.managementServiceUrl + '/v1',
-      configObj.renderServiceUrl,
-      testFilesDir,
-    );
-    expect(mockConsoleError.mock.calls[0][0]).toEqual(
-      color.red('Cannot upload component version, smoke-test-components/cmp-static-file-test 1.0.0 already exists'),
-    );
-  });
-
-  it('Should render component', async () => {
-    const componentSet: ComponentSetWebModel = {
-      webPath,
-      displayName: 'Set',
-      description: 'Set description',
-      headers: {},
-      envVars: {},
-      components: {
-        'smoke-test-components/cmp-static-file-test': [{ envVars: {}, version: '1.0.0' }],
-      },
-    };
-
-    await addComponentSet(componentSet);
-
-    const response = await renderService.get(
-      '/r/set/smoke-test-components/cmp-static-file-test/1.0.0/?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/smoke-test-components/cmp-static-file-test/1.0.0/birthday-cake.png</div>`,
-      ].join(''),
-    );
-  });
-});