@squiz/component-cli-lib 1.39.1-alpha.3 → 1.39.1-alpha.30

package/lib/templates/advanced/package.json

@@ -4,8 +4,8 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.13",
-    "esbuild": "^0.17.6",
-    "esbuild-sass-plugin": "^2.4.5",
+    "esbuild": "^0.18.10",
+    "esbuild-sass-plugin": "^2.10.0",
     "postcss": "^8.4.21"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/component-cli-lib",
-  "version": "1.39.1-alpha.3",
+  "version": "1.39.1-alpha.30",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -13,12 +13,12 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@squiz/component-lib": "1.39.1-alpha.3",
-    "@squiz/component-web-api-lib": "1.39.1-alpha.3",
-    "@squiz/dx-common-lib": "1.39.1-alpha.3",
-    "@squiz/dx-json-schema-lib": "1.39.1-alpha.3",
-    "@squiz/dx-logger-lib": "1.39.1-alpha.3",
-    "@squiz/virus-scanner-lib": "1.39.1-alpha.3",
+    "@squiz/component-lib": "1.39.1-alpha.30",
+    "@squiz/component-web-api-lib": "1.39.1-alpha.30",
+    "@squiz/dx-common-lib": "1.39.1-alpha.30",
+    "@squiz/dx-json-schema-lib": "1.39.1-alpha.30",
+    "@squiz/dx-logger-lib": "1.39.1-alpha.30",
+    "@squiz/virus-scanner-lib": "1.39.1-alpha.30",
     "@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.39.1-alpha.3",
+    "@squiz/render-runtime-lib": "1.39.1-alpha.30",
     "archiver": "5.3.1",
     "axios": "1.3.2",
     "cli-color": "^2.0.2",
     "open": "^8.4.0",
     "supertest": "^6.2.3"
   },
-  "gitHead": "5be5e45cfe2e31be51e8a09e2a1a934900ff29fe"
+  "gitHead": "f8c533a2f8e98ea5ff08c6b0206c4f292f47c4e8"
 }

package/src/component-init.spec.ts

@@ -10,8 +10,11 @@ jest.mock('path', () => {
   };
 });
 
+const fsMocked = jest.mocked(fs);
+
 beforeEach(() => {
   jest.resetAllMocks();
+  fsMocked.readJSON.mockResolvedValue({});
 
   // Reset our process.env.NODE_ENV variable
   process.env.NODE_ENV = 'test';
@@ -200,4 +203,56 @@ describe('componentInit', () => {
       '/Users/username/Projects/squiz/new-component',
     );
   });
+
+  describe('prompts', () => {
+    it('should default when no prompts provided', async () => {
+      await componentInit({ componentType: 'basic', destination: '' });
+
+      expect(fsMocked.writeJSON).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          name: 'default',
+          namespace: 'default-namespace',
+          displayName: 'Default',
+        }),
+        expect.objectContaining({ spaces: 2 }),
+      );
+    });
+
+    it('should overwrite default values with provided values', async () => {
+      await componentInit({
+        componentType: 'basic',
+        destination: '',
+        prompts: {
+          name: 'my-component',
+          namespace: 'my-namespace',
+          displayName: 'My Component',
+        },
+      });
+
+      expect(fsMocked.writeJSON).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          name: 'my-component',
+          namespace: 'my-namespace',
+          displayName: 'My Component',
+        }),
+        expect.objectContaining({ spaces: 2 }),
+      );
+    });
+
+    it('should read and write the destination manifest file', async () => {
+      await componentInit({
+        componentType: 'basic',
+        destination: '/Users/username/Projects/squiz/new-component',
+      });
+
+      expect(fsMocked.readJSON).toHaveBeenCalledWith('/Users/username/Projects/squiz/new-component/manifest.json');
+      expect(fsMocked.writeJSON).toHaveBeenCalledWith(
+        '/Users/username/Projects/squiz/new-component/manifest.json',
+        expect.any(Object),
+        expect.objectContaining({ spaces: 2 }),
+      );
+    });
+  });
 });

package/src/component-init.ts

@@ -2,17 +2,34 @@ import fse from 'fs-extra';
 import path from 'path';
 import { getLogger, LoggerOptions } from '@squiz/dx-logger-lib';
 
+export interface InitPrompts {
+  name: string;
+  displayName: string;
+  description: string;
+  namespace: string;
+}
+
+const DEFAULT_PROMPTS: InitPrompts = {
+  name: 'default',
+  displayName: 'Default',
+  description: 'Default component',
+  namespace: 'default-namespace',
+};
+
+interface InitOptions {
+  componentType: 'basic' | 'advanced';
+  destination: string;
+  loggingFormat?: LoggerOptions['format'];
+  prompts?: Partial<InitPrompts>;
+}
+
 /**
  * componentInit initializes a new component
  * @param {object} options - The options object
  * @param {string} options.componentType - The type of component to initialize
  * @returns {void}
  */
-export default async function componentInit(options: {
-  componentType: 'basic' | 'advanced';
-  destination: string;
-  loggingFormat?: LoggerOptions['format'];
-}) {
+export default async function componentInit(options: InitOptions) {
   const logger = getLogger({
     name: 'component-dev',
     format: options.loggingFormat || 'human',
@@ -43,6 +60,22 @@ export default async function componentInit(options: {
 
   // Copy the contents of the source folder to the destination folder
   await fse.copy(sourceFolder, destination);
+  await writeManifestVariables({ destination, prompts: Object.assign({}, DEFAULT_PROMPTS, options.prompts) });
 
   logger.info('Component initialized!');
 }
+
+async function writeManifestVariables(options: { destination: string; prompts: InitPrompts }) {
+  const { destination, prompts } = options;
+
+  const manifestPath = path.resolve(destination, 'manifest.json');
+
+  const manifest = await fse.readJSON(manifestPath);
+
+  manifest.name = prompts.name;
+  manifest.displayName = prompts.displayName;
+  manifest.description = prompts.description;
+  manifest.namespace = prompts.namespace;
+
+  await fse.writeJSON(manifestPath, manifest, { spaces: 2 });
+}

package/src/index.ts

@@ -1,4 +1,4 @@
 export { uploadComponentFolder } from './upload-component-folder';
 export { startDevelopmentRender } from './component-dev';
-export { default as componentInit } from './component-init';
+export { default as componentInit, InitPrompts } from './component-init';
 export { uploadJobFolder } from './upload-job';

package/src/integration-tests/__components__/test-page-render/main.js

@@ -0,0 +1,3 @@
+module.exports = async function (input, info) {
+  return `<div>component-html</div>`;
+};

package/src/integration-tests/__components__/test-page-render/manifest.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "http://localhost:3000/schemas/v1.json#",
+  "name": "test-page-render",
+  "version": "1.0.0",
+  "mainFunction": "main",
+  "displayName": "some-display-name",
+  "namespace": "unit-test-components",
+  "description": "some-description",
+  "functions": [
+    {
+      "name": "main",
+      "entry": "main.js",
+      "input": {
+        "type": "object",
+        "properties": {
+          "text ": {
+            "type": "string"
+          }
+        },
+        "required": []
+      },
+      "output": {
+        "responseType": "html"
+      }
+    }
+  ]
+}

package/src/integration-tests/helper.ts

@@ -9,12 +9,15 @@ import { ContentApi } from '@squiz/component-web-api-lib';
 import { config } from 'dotenv';
 import { execSync } from 'child_process';
 import { getLogger } from '@squiz/dx-logger-lib';
+import { uploadComponentFolder } from '../upload-component-folder';
+import { buildDevelopmentJwt, DxpServiceId } from '@squiz/dxp-auth-lib';
 
 config();
 
 interface Config {
   managementServiceUrl: string;
   renderServiceUrl: string;
+  pageRenderServiceUrl: string;
   contentServiceUrl: string;
   tenantId: string;
   jobServiceUrl: string;
@@ -24,6 +27,7 @@ interface Config {
 
 const configObj: Config = {
   managementServiceUrl: parseEnvVarForVar('COMPONENT_MANAGEMENT_SERVICE_URL').replace(/\/+$/, ''),
+  pageRenderServiceUrl: parseEnvVarForVar('PAGE_RENDER_SERVICE_URL').replace(/\/+$/, ''),
   renderServiceUrl: parseEnvVarForVar('COMPONENT_RENDER_SERVICE_URL').replace(/\/+$/, ''),
   contentServiceUrl: parseEnvVarForVar('CONTENT_API_URL').replace(/\/+$/, ''),
   tenantId: parseEnvVarForVar('TENANT_ID'),
@@ -42,46 +46,37 @@ if (!configObj.ci_buildBranch) {
 
 export default configObj;
 
-const DXP_COMPONENTS_SERVICE_NAME = 'dxpComponents';
-const DXP_CONTENT_STORE_SERVICE_NAME = 'dxpContentStore';
-
-const validToken = {
-  organisationId: 'aa',
-  permission: '',
-  tenant: configObj.tenantId,
-  tenantId: 'zz',
-  userId: 'zz',
-
-  service: {
-    [DXP_COMPONENTS_SERVICE_NAME]: {
-      privileges: [
-        'COMPONENT_DEPLOY',
-        'COMPONENT_DELETE',
-        'COMPONENT_READ',
-        'COMPONENT_SET_RULES_READ',
-        'COMPONENT_SET_RULES_WRITE',
-
-        'COMPONENT_SET_READ',
-        'COMPONENT_SET_WRITE',
-
-        'COMPONENT_SET_ENVIRONMENT_READ',
-        'COMPONENT_SET_ENVIRONMENT_WRITE',
-      ],
+const authToken =
+  'Bearer ' +
+  buildDevelopmentJwt({
+    service: {
+      [DxpServiceId.contentStore]: {
+        privileges: [
+          'CONTENT_SCHEMA_READ',
+          'CONTENT_SCHEMA_WRITE',
+          'CONTENT_ITEM_READ',
+          'CONTENT_ITEM_WRITE',
+          'SETTINGS_READ',
+          'SETTINGS_WRITE',
+          'PAGE_CONTENTS_WRITE',
+          'PAGE_CONTENTS_READ',
+        ],
+      },
+      [DxpServiceId.components]: {
+        privileges: [
+          'COMPONENT_READ',
+          'COMPONENT_WRITE',
+          'COMPONENT_DEPLOY',
+          'COMPONENT_SET_WRITE',
+          'COMPONENT_DELETE',
+          'COMPONENT_SET_WRITE',
+          'COMPONENT_SET_READ',
+          'COMPONENT_SET_ENVIRONMENT_READ',
+          'COMPONENT_SET_ENVIRONMENT_WRITE',
+        ],
+      },
     },
-    [DXP_CONTENT_STORE_SERVICE_NAME]: {
-      privileges: [
-        'CONTENT_SCHEMA_READ',
-        'CONTENT_SCHEMA_WRITE',
-        'CONTENT_ITEM_READ',
-        'CONTENT_ITEM_WRITE',
-        'SETTINGS_READ',
-        'SETTINGS_WRITE',
-      ],
-    },
-  },
-};
-
-export const authToken = `Bearer xxx.${Buffer.from(JSON.stringify(validToken)).toString('base64')}.zzz`;
+  });
 
 export const managementService = axios.create({
   baseURL: configObj.managementServiceUrl + '/v1',
@@ -111,6 +106,13 @@ export const contentService = axios.create({
   },
 });
 
+export const pageRenderService = axios.create({
+  baseURL: configObj.pageRenderServiceUrl,
+  headers: {
+    authorization: authToken,
+  },
+});
+
 export const jobService = axios.create({
   baseURL: configObj.jobServiceUrl,
   headers: {
@@ -127,6 +129,12 @@ export async function getTestComponents() {
   return await manifestService.listAllComponentManifests();
 }
 
+export async function getTestComponent(componentFolderName: string) {
+  const componentsDir = path.join(__dirname, '/__components__/', componentFolderName);
+  const manifestService = new ManifestServiceForDev(componentsDir, getLogger({ name: 'getTestComponents' }));
+  return await manifestService.listAllComponentManifests();
+}
+
 export async function getTestJobs() {
   const jobsDir = path.join(__dirname, '/__jobs__/');
   const manifestService = new ManifestServiceForDev(jobsDir, getLogger({ name: 'getTestJobs' }));
@@ -174,6 +182,14 @@ export async function deleteContentItem(contentItemId: string) {
   }
 }
 
+export async function deleteContentSchema(contentSchemaName: string) {
+  try {
+    await contentService.delete(`/content-item/${contentSchemaName}`);
+  } catch (error) {
+    //no ops
+  }
+}
+
 export async function deleteComponent(manifest: Manifest) {
   try {
     await managementService.delete(`/component/${manifest.getName()}`);
@@ -191,6 +207,11 @@ export async function deleteComponents(manifests: Manifest[]) {
   await Promise.all(manifests.map((manifest) => deleteComponent(manifest)));
 }
 
+export async function uploadTestComponent(componentFolderPath: string, tempFolderPath: string): Promise<void> {
+  const componentPath = path.join(__dirname, componentFolderPath);
+  await uploadComponentFolder(managementServiceRoot, configObj.managementServiceUrl, componentPath, tempFolderPath);
+}
+
 export async function deleteJob(manifest: Manifest) {
   try {
     await jobService.delete(`/job/${manifest.getName()}/${manifest.getVersion()}`);

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

@@ -0,0 +1,151 @@
+import {
+  ContentItemWebModeForSave,
+  ContentSchemaType,
+  ContentSchemaWebModelForCreate,
+  PageContentsWebModel,
+} from '@squiz/component-web-api-lib/src/generated/ContentApi';
+import { ComponentSetWebModelForCreate } from '@squiz/component-lib';
+import path from 'path';
+import {
+  addComponentSet,
+  contentService,
+  deleteComponentSet,
+  deleteComponents,
+  deleteContentItem,
+  deleteContentSchema,
+  getTestComponent,
+  pageRenderService,
+  uploadTestComponent,
+} from './helper';
+import fsp from 'fs/promises';
+import { randomInt } from 'crypto';
+
+const SCHEMA_NAME = 'test-schema-name' + randomInt(10000);
+const CONTENT_ITEM_ID = 'test-content-id' + randomInt(10000);
+const PAGE_CONTENT_ID = 'test-page-content-id' + randomInt(10000);
+const COMPONENT_SET_WEB_PATH = 'local-development-only' + randomInt(10000);
+const COMPONENT_NAME = 'test-page-render';
+const COMPONENT_NAMESPACE = 'unit-test-components';
+const COMPONENT_CONTENT_ID = 'component-content-id' + randomInt(10000);
+const COMPONENT_CONTENT_SCHEMA_NAME = `${COMPONENT_NAMESPACE}/${COMPONENT_NAME}/1.0.0/main`;
+
+const componentContentItem = {
+  id: COMPONENT_CONTENT_ID,
+  schemaName: COMPONENT_CONTENT_SCHEMA_NAME,
+  content: {
+    text: 'component-input-string',
+  },
+};
+
+// This schema emulates the layout input schema
+const contentSchema: ContentSchemaWebModelForCreate = {
+  name: SCHEMA_NAME,
+  schema: {
+    type: 'object',
+    properties: {
+      nodes: {
+        type: 'FormattedText',
+      },
+    },
+    required: ['nodes'],
+    additionalProperties: false,
+  },
+  contentSchemaType: ContentSchemaType.Component,
+};
+
+// The content item with the formatted text
+const contentItem: ContentItemWebModeForSave = {
+  id: CONTENT_ITEM_ID,
+  schemaName: SCHEMA_NAME,
+  content: {
+    nodes: [
+      {
+        type: 'tag',
+        tag: 'h1',
+        children: [
+          {
+            type: 'text',
+            value: 'Hello World!',
+          },
+        ],
+      },
+      {
+        type: 'component',
+        schemaName: `http://localhost:3000/d/${COMPONENT_NAMESPACE}/${COMPONENT_NAME}/1.0.0`,
+        componentSet: COMPONENT_SET_WEB_PATH,
+        content: {
+          contentItemId: COMPONENT_CONTENT_ID,
+        },
+      },
+      {
+        type: 'tag',
+        tag: 'p',
+        children: [
+          {
+            type: 'text',
+            value: 'Bottom text',
+          },
+        ],
+      },
+    ],
+  },
+};
+// The page content item which references the content item
+const pageContents: PageContentsWebModel = {
+  name: 'page-contents-test-1',
+  id: PAGE_CONTENT_ID,
+  layouts: [
+    {
+      schemaName: SCHEMA_NAME,
+      content: {
+        contentItemId: CONTENT_ITEM_ID,
+      },
+    },
+  ],
+};
+//The componentSet for the component in the content item
+const testComponentSet: ComponentSetWebModelForCreate = {
+  webPath: COMPONENT_SET_WEB_PATH,
+  displayName: 'test-set',
+  description: 'test-set',
+  headers: {},
+  components: {},
+  componentVersionRules: {
+    [`${COMPONENT_NAMESPACE}/${COMPONENT_NAME}`]: {
+      renderableVersionPattern: '1.0.0',
+      editableVersions: [],
+      excludedVersions: [],
+    },
+  },
+};
+
+describe('PageRenderController- Integration', () => {
+  const testFilesDir = path.resolve(__dirname, 'test-files');
+  beforeAll(async () => {
+    await fsp.rm(testFilesDir, { force: true, recursive: true });
+    await fsp.mkdir(testFilesDir);
+    // Component Configuration
+    await uploadTestComponent('/__components__/test-page-render', testFilesDir);
+    await addComponentSet(testComponentSet);
+    // Post component items
+    await contentService.post('content-item', componentContentItem);
+    // Post items
+    await contentService.post('content-schema', contentSchema);
+    await contentService.post('content-item', contentItem);
+    await contentService.post('page-contents', pageContents);
+  });
+
+  afterAll(async () => {
+    await deleteContentItem(contentItem.id!);
+    await deleteContentItem(componentContentItem.id!);
+    await deleteContentSchema(COMPONENT_CONTENT_SCHEMA_NAME);
+    await deleteContentSchema(contentSchema.name);
+    await deleteComponentSet(COMPONENT_SET_WEB_PATH);
+    await deleteComponents(await getTestComponent(COMPONENT_NAME));
+  });
+
+  it('should render a page', async () => {
+    const page = await pageRenderService.get(`p/${PAGE_CONTENT_ID}`);
+    expect(page.data).toEqual('<h1>Hello World!</h1><div>component-html</div><p>Bottom text</p>');
+  });
+});