[angular-xmcloud][create-sitecore-jss] Add sxa styles to angular-xmcloud add on

CHANGELOG.md

@@ -16,11 +16,12 @@ Our versioning strategy is as follows:
 ### 🎉 New Features & Improvements
 
 * `[create-sitecore-jss]` Introduced "node-xmcloud-proxy" addon ([#1863](https://github.com/Sitecore/jss/pull/1863))
-* `[create-sitecore-jss]` `[template/angular]` `[template/angular-sxp]` `[template/angular-xmcloud]` Introduced "angular-sxp", "angular-xmcloud" addons ([#1838](https://github.com/Sitecore/jss/pull/1838))([#1845](https://github.com/Sitecore/jss/pull/1845)):
+* `[create-sitecore-jss]` `[template/angular]` `[template/angular-sxp]` `[template/angular-xmcloud]` Introduced "angular-sxp", "angular-xmcloud" addons ([#1838](https://github.com/Sitecore/jss/pull/1838))([#1845](https://github.com/Sitecore/jss/pull/1845))([#1858](https://github.com/Sitecore/jss/pull/1858))([#1865](https://github.com/Sitecore/jss/pull/1865)):
     * The Angular app should now be initialized by providing both templates (or using CLI prompts): 
       * SXP-based: 'angular,angular-sxp'
       * XMCloud-based: 'angular,angular-xmcloud'
     * Rework Angular initializer to support XMCloud and SXP journeys;
+    * Add SXA styles to xmcloud addon
 
 * `[create-sitecore-jss]` Rework Angular initializer to support XMCloud and SXP journeys ([#1845](https://github.com/Sitecore/jss/pull/1845))([#1858](https://github.com/Sitecore/jss/pull/1858))
 * `[create-sitecore-jss]` Allows proxy apps to be installed alongside main apps ([#1858](https://github.com/Sitecore/jss/pull/1858))

packages/create-sitecore-jss/src/common/index.ts

@@ -12,8 +12,8 @@ export { StyleguideAnswer, styleguidePrompts } from './prompts/styleguide';
 
 export {
   isDevEnvironment,
-  openPackageJson,
-  writePackageJson,
+  openJsonFile,
+  writeJsonFile,
   getAllTemplates,
   getBaseTemplates,
   saveConfiguration,

packages/create-sitecore-jss/src/common/processes/install.test.ts

@@ -10,7 +10,7 @@ import * as helpers from '../utils/helpers';
 describe('install', () => {
   let run: SinonStub;
   let isDevEnvironment: SinonStub;
-  let openPackageJson: SinonStub;
+  let openJsonFile: SinonStub;
   let log: SinonStub;
 
   beforeEach(() => {
@@ -21,7 +21,7 @@ describe('install', () => {
   afterEach(() => {
     run?.restore();
     isDevEnvironment?.restore();
-    openPackageJson?.restore();
+    openJsonFile?.restore();
     log?.restore();
   });
 
@@ -94,7 +94,7 @@ describe('install', () => {
   describe('lintFix', () => {
     it('should run lint script', () => {
       const projectFolder = './some/path';
-      openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({
+      openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({
         scripts: {
           lint: 'lint',
         },
@@ -116,7 +116,7 @@ describe('install', () => {
 
     it('should skip if lint script not defined', () => {
       const projectFolder = './some/path';
-      openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({
+      openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({
         scripts: {},
       });
 
@@ -129,7 +129,7 @@ describe('install', () => {
     it('should respect silent', () => {
       const projectFolder = './some/path';
       const silent = true;
-      openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({
+      openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({
         scripts: {
           lint: 'lint',
         },
@@ -162,7 +162,7 @@ describe('install', () => {
 
     it('should run exec function', () => {
       const destination = './some/path';
-      openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({
+      openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({
         scripts: {
           'install-pre-push-hook': 'stub',
         },
@@ -178,7 +178,7 @@ describe('install', () => {
     it('should respect silent', () => {
       const destination = './some/path';
       const silent = true;
-      openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({
+      openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({
         scripts: {
           'install-pre-push-hook': 'stub',
         },
@@ -193,7 +193,7 @@ describe('install', () => {
 
     it('should skip if installPrePushHook script not defined', () => {
       const destination = './some/path';
-      openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({
+      openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({
         scripts: {},
       });
 
@@ -207,7 +207,7 @@ describe('install', () => {
       const destination = './some/path';
       const error = new Error('some error');
       execStub.yields(error);
-      openPackageJson = sinon.stub(helpers, 'openPackageJson').returns({
+      openJsonFile = sinon.stub(helpers, 'openJsonFile').returns({
         scripts: {
           'install-pre-push-hook': 'stub',
         },

packages/create-sitecore-jss/src/common/processes/install.ts

@@ -2,7 +2,7 @@ import { exec } from 'child_process';
 import path from 'path';
 import chalk from 'chalk';
 import { run } from '../utils/cmd';
-import { isDevEnvironment, openPackageJson } from '../utils/helpers';
+import { isDevEnvironment, openJsonFile } from '../utils/helpers';
 
 /**
  * Executes packages installation, depending on the environment
@@ -87,5 +87,5 @@ export const installPrePushHook = async (destination: string, silent?: boolean)
 
 const getPackageJson = (projectFolder: string) => {
   const packagePath = path.join(projectFolder, 'package.json');
-  return openPackageJson(packagePath);
+  return openJsonFile(packagePath);
 };

packages/create-sitecore-jss/src/common/processes/transform.test.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-expressions */
 import fs from 'fs-extra';
-import path from 'path';
+import path, { sep } from 'path';
 import chalk from 'chalk';
 import inquirer from 'inquirer';
 import ejs from 'ejs';
@@ -476,7 +476,7 @@ describe('transform', () => {
     let diffAndWriteFilesStub: SinonStub;
     let writeFileToPathStub: SinonStub;
     let transformFilenameStub: SinonStub;
-    let openPackageJsonStub: SinonStub;
+    let openJsonFileStub: SinonStub;
     let log: SinonStub;
 
     beforeEach(() => {
@@ -495,7 +495,7 @@ describe('transform', () => {
       diffAndWriteFilesStub?.restore();
       writeFileToPathStub?.restore();
       transformFilenameStub?.restore();
-      openPackageJsonStub?.restore();
+      openJsonFileStub?.restore();
       log?.restore();
     });
 
@@ -663,7 +663,7 @@ describe('transform', () => {
 
       globSyncStub = sinon.stub(glob, 'sync').returns([file]);
       fsExistsSyncStub = sinon.stub(fs, 'existsSync').returns(true);
-      openPackageJsonStub = sinon.stub(helpers, 'openPackageJson').returns(currentPkg);
+      openJsonFileStub = sinon.stub(helpers, 'openJsonFile').returns(currentPkg);
       ejsRenderFileStub = sinon.stub(ejs, 'renderFile').returns(Promise.resolve(renderFileOutput));
       mergeStub = sinon.stub(transform, 'merge').returns(mergedPkg);
       diffAndWriteFilesStub = sinon.stub(transform, 'diffAndWriteFiles');
@@ -693,6 +693,48 @@ describe('transform', () => {
       });
     });
 
+    it('should merge json file', async () => {
+      const templatePath = path.resolve('templates/next');
+      const destinationPath = path.resolve('samples/next');
+      const file = 'test.json';
+      const renderFileOutput = '{ "one": 1, "two": 2}';
+      const currentJson = { three: 3, four: 4 };
+      const templateJson = JSON.parse(renderFileOutput);
+      const mergedPkg = { merged: true };
+
+      globSyncStub = sinon.stub(glob, 'sync').returns([file]);
+      fsExistsSyncStub = sinon.stub(fs, 'existsSync').returns(true);
+      openJsonFileStub = sinon.stub(helpers, 'openJsonFile').returns(currentJson);
+      ejsRenderFileStub = sinon.stub(ejs, 'renderFile').returns(Promise.resolve(renderFileOutput));
+      mergeStub = sinon.stub(transform, 'merge').returns(mergedPkg);
+      diffAndWriteFilesStub = sinon.stub(transform, 'diffAndWriteFiles');
+
+      const answers = {
+        destination: destinationPath,
+        templates: [],
+        appPrefix: false,
+        force: false,
+      };
+
+      await transformFunc(templatePath, answers);
+
+      expect(ejsRenderFileStub).to.have.been.calledOnceWith(path.join(templatePath, file), {
+        ...answers,
+        helper: {
+          isDev: false,
+          getPascalCaseName: helpers.getPascalCaseName,
+          getAppPrefix: helpers.getAppPrefix,
+        },
+      });
+      expect(mergeStub).to.have.been.calledOnceWith(currentJson, templateJson);
+      expect(openJsonFileStub).to.have.been.calledOnceWith(`${destinationPath}${sep}${file}`);
+      expect(diffAndWriteFilesStub).to.have.been.calledOnceWith({
+        rendered: JSON.stringify(mergedPkg, null, 2),
+        pathToNewFile: path.join(destinationPath, file),
+        answers,
+      });
+    });
+
     it('should concatenate .env file', async () => {
       const templatePath = path.resolve('templates/next');
       const destinationPath = path.resolve('samples/next');

packages/create-sitecore-jss/src/common/processes/transform.ts

@@ -8,7 +8,7 @@ import inquirer from 'inquirer';
 import {
   getPascalCaseName,
   getAppPrefix,
-  openPackageJson,
+  openJsonFile,
   sortKeys,
   writeFileToPath,
   isDevEnvironment,
@@ -282,13 +282,13 @@ export const transform = async (
         continue;
       }
 
-      if (file.endsWith('package.json') && fs.existsSync(pathToNewFile)) {
-        // we treat package.json a bit differently
-        // read the current package.json and the template package.json (rendered with ejs)
-        const currentPkg = openPackageJson(pathToNewFile);
-        const templatePkg = JSON.parse(await renderFile(path.resolve(pathToTemplate), ejsData));
+      if (file.endsWith('.json') && fs.existsSync(pathToNewFile)) {
+        // we treat a .json a bit differently
+        // read the current .json and the template .json (rendered with ejs)
+        const currentJson = openJsonFile(pathToNewFile);
+        const templateJson = JSON.parse(await renderFile(path.resolve(pathToTemplate), ejsData));
         // merge them and set the result to str which will then go through diff
-        const merged = merge(currentPkg, templatePkg);
+        const merged = merge(currentJson, templateJson);
         str = JSON.stringify(merged, null, 2);
       }
 

packages/create-sitecore-jss/src/common/test-data/test.json

@@ -0,0 +1,9 @@
+{
+  "first": "test first",
+  "second": "test second",
+  "description": "Test package.json",
+  "third": {
+    "thirdOne": "tests third one"
+  },
+  "array": ["one", "two"]
+}

packages/create-sitecore-jss/src/common/utils/helpers.test.ts

@@ -6,8 +6,8 @@ import chalk from 'chalk';
 import sinon, { SinonStub } from 'sinon';
 import {
   getPascalCaseName,
-  openPackageJson,
-  writePackageJson,
+  openJsonFile,
+  writeJsonFile,
   sortKeys,
   getAllTemplates,
   getBaseTemplates,
@@ -16,7 +16,7 @@ import {
 } from './helpers';
 import { JsonObjectType } from '../processes/transform';
 import testPackage from '../test-data/test.package.json';
-import rootPackage from '../../../package.json';
+import testJson from '../test-data/test.json';
 import { Initializer } from '../Initializer';
 import { InitializerFactory } from '../../InitializerFactory';
 
@@ -41,15 +41,15 @@ describe('helpers', () => {
     });
   });
 
-  describe('openPackageJson', () => {
+  describe('openJsonFile', () => {
     let log: SinonStub;
 
     afterEach(() => log?.restore());
 
     it('should return package.json data using provided path', () => {
       const filePath = path.resolve('src', 'common', 'test-data', 'test.package.json');
 
-      const result = openPackageJson(filePath);
+      const result = openJsonFile(filePath);
 
       expect(result).to.deep.equal(testPackage);
     });
@@ -59,7 +59,7 @@ describe('helpers', () => {
 
       const filePath = path.resolve('not', 'existing', 'path', 'package.json');
 
-      const result = openPackageJson(filePath);
+      const result = openJsonFile(filePath);
 
       expect(result).to.equal(undefined);
       expect(log.calledTwice).to.equal(true);
@@ -73,14 +73,35 @@ describe('helpers', () => {
       log.restore();
     });
 
-    it('should return package.json data from the root when path is not provided', () => {
-      const result = openPackageJson();
+    it('should return json data using provided path', () => {
+      const filePath = path.resolve('src', 'common', 'test-data', 'test.json');
 
-      expect(result).to.deep.equal(rootPackage);
+      const result = openJsonFile(filePath);
+
+      expect(result).to.deep.equal(testJson);
+    });
+
+    it('should throw an error when the path to the package does not exist', () => {
+      log = sinon.stub(console, 'log');
+
+      const filePath = path.resolve('not', 'existing', 'path', 'package.json');
+
+      const result = openJsonFile(filePath);
+
+      expect(result).to.equal(undefined);
+      expect(log.calledTwice).to.equal(true);
+      expect(log.getCall(0).args[0]).to.equal(
+        chalk.red(`The following error occurred while trying to read ${filePath}:`)
+      );
+      expect(log.getCall(1).args[0]).to.equal(
+        chalk.red(`Error: ENOENT: no such file or directory, open '${filePath}'`)
+      );
+
+      log.restore();
     });
   });
 
-  describe('writePackageJson', () => {
+  describe('writeJsonFile', () => {
     let log: SinonStub;
     let writeFileSync: SinonStub;
 
@@ -97,27 +118,20 @@ describe('helpers', () => {
         bar: { baz: 'baz' },
       };
 
-      writePackageJson(data);
-
-      expect(writeFileSync.calledOnce).to.equal(true);
-      expect(writeFileSync.getCall(0).args[1]).to.equal(JSON.stringify(data, null, 2));
-    });
-
-    it('should use default path when path is not provided', () => {
-      writeFileSync = sinon.stub(fs, 'writeFileSync');
+      const filePath = path.resolve('src', 'common', 'test-data', 'test.package.json');
 
-      writePackageJson({});
+      writeJsonFile(data, filePath);
 
       expect(writeFileSync.calledOnce).to.equal(true);
-      expect(writeFileSync.getCall(0).args[0]).to.equal(path.resolve('./package.json'));
+      expect(writeFileSync.getCall(0).args[1]).to.equal(JSON.stringify(data, null, 2));
     });
 
     it('should use provided path', () => {
       writeFileSync = sinon.stub(fs, 'writeFileSync');
 
       const filePath = path.resolve('src', 'common', 'test-data', 'test.package.json');
 
-      writePackageJson({}, filePath);
+      writeJsonFile({}, filePath);
 
       expect(writeFileSync.calledOnce).to.equal(true);
       expect(writeFileSync.getCall(0).args[0]).to.equal(filePath);
@@ -128,7 +142,7 @@ describe('helpers', () => {
 
       const filePath = path.resolve('not', 'existing', 'path', 'package.json');
 
-      writePackageJson({}, filePath);
+      writeJsonFile({}, filePath);
 
       expect(log.calledTwice).to.equal(true);
       expect(log.getCall(0).args[0]).to.equal(
@@ -154,7 +168,7 @@ describe('helpers', () => {
     it('should save configuration', () => {
       writeFileSync = sinon.stub(fs, 'writeFileSync');
       const pkgPath = path.resolve('src', 'common', 'test-data', 'test.package.json');
-      const pkg = openPackageJson(pkgPath);
+      const pkg = openJsonFile(pkgPath);
       const templates = ['nextjs', 'nextjs-styleguide'];
 
       saveConfiguration(templates, pkgPath);