pre work for replacing IconComponent usages with iconPartial (#870)

This is the work needed before replacing IconComponent usages with iconPartial.
Since there are many icon usages, it wouild be hard to see these changes if they were
combined with the replacements.

- register the relativePathHandler for SDK components so it can be used at runtime
- fix bug in relativePathHandler where if the url is undefined, it will return something
  like "./undefined" instead of the value undefined. In previous usages of the helper,
  url was guarded from being null/undefined, but this won't be the case for iconPartial
- add percy snapshots for a card with custom cta icons
- fix test-sites gitignore negations not working properly
- point the theme's test-site to the feature/icon-partial-i18n so we get the icon-partial change, and also i18n-ed assets so the spanish snapshots work
- also collect code coverage on the hbshelpers folder

J=SLAP-1297
TEST=manual,auto

test that custom icons still work, both for section titles on universal
and inside cards

unit tests for relativePathHandler

commands/helpers/utils/argumentmetadata.js

@@ -16,9 +16,9 @@ Object.freeze(ArgumentType);
 class ArgumentMetadata {
   constructor(type, description, isRequired, defaultValue, itemType) {
     this._type = type;
+    this._description = description;
     this._isRequired = isRequired;
     this._defaultValue = defaultValue;
-    this._description = description;
     this._itemType = itemType;
   }
 

hbshelpers/relativePathHandler.js

@@ -4,13 +4,14 @@ const isNonRelativeUrl = require('./isNonRelativeUrl');
  * If the url is not relative, return it. If it is relative,
  * append relativePath to it.
  * 
- * @param {string} url 
  * @param {import('handlebars').HelperOptions} options
+ * @param {string} options.hash.relativePath
+ * @param {string} options.hash.url
  * @returns {string}
  */
 module.exports = function relativePathHandler(options) {
   const { relativePath, url } = options.hash || {};
-  if (isNonRelativeUrl(url) || !relativePath) {
+  if (isNonRelativeUrl(url) || !relativePath || !url) {
     return url;
   }
   return relativePath + '/' + url;

hbshelpers/sdkAssetUrl.js

@@ -1,5 +1,6 @@
 const RELEASE_BRANCH_REGEX = /^release\/v[0-9.]+$/;
 const HOTFIX_BRANCH_REGEX = /^hotfix\/v[0-9.]+$/;
+const I18N_FEATURE_BRANCH_REGEX = /^feature\/.+-i18n$/;
 const SEM_VER_REGEX = /^[1-9]+$|^[1-9]+\.[0-9]+$|^[1-9]+\.[0-9]+\.[0-9]+$/;
 
 /**
@@ -25,8 +26,9 @@ module.exports = function sdkAssetUrl(branch, locale, assetName) {
 
   const isPreReleaseBranch = 
     RELEASE_BRANCH_REGEX.test(branch) || HOTFIX_BRANCH_REGEX.test(branch);
+  const isI18nFeatureBranch = I18N_FEATURE_BRANCH_REGEX.test(branch);
   const isLocalizationSupported = 
-    (isReleasedBranch || isPreReleaseBranch) && 
+    (isReleasedBranch || isPreReleaseBranch || isI18nFeatureBranch) && 
     !(locale.startsWith('en') || assetName === 'answers.css') ;
 
   const parsedAssetName = isLocalizationSupported ?

package.json

@@ -47,7 +47,8 @@
   },
   "jest": {
     "collectCoverageFrom": [
-      "static/**/*.js"
+      "static/**/*.js",
+      "hbshelpers/*.js"
     ],
     "verbose": true,
     "moduleFileExtensions": [

script/core.hbs

@@ -73,14 +73,32 @@
          * Determine whether a URL is absolute or not.
          * Common examples: "mailto:slapshot@gmail.com", "//yext.com", "https://yext.com"
          */
-        ANSWERS.registerHelper('isNonRelativeUrl', function(str) {
+        function isNonRelativeUrl(str) {
           const absoluteURLRegex = /^(\/|[a-zA-Z]+:)/;
           return str && str.match(absoluteURLRegex);
-        });
+        }
+        ANSWERS.registerHelper('isNonRelativeUrl', isNonRelativeUrl);
 
         ANSWERS.registerHelper('close-card-svg', () => {
           return ANSWERS.renderer.SafeString({{{stringifyPartial (read 'static/assets/images/close-card') }}});
         });
+
+        /**
+        * If the url is not relative, return it. If it is relative,
+        * append relativePath to it.
+        *
+        * @param {import('handlebars').HelperOptions} options
+        * @param {string} options.hash.relativePath
+        * @param {string} options.hash.url
+        * @returns {string}
+        */
+        ANSWERS.registerHelper('relativePathHandler', function relativePathHandler(options) {
+          const { relativePath, url } = options.hash || {};
+          if (isNonRelativeUrl(url) || !relativePath || !url) {
+            return url;
+          }
+          return relativePath + '/' + url;
+        });
       }
     }).catch(err => {
       window.AnswersExperience.AnswersInitializedPromise.reject('Answers failed to initialized.');

test-site/.gitignore

@@ -1,15 +1,17 @@
+public/*
+config/*
+pages/*
+cards/*
+directanswercards/*
+Gruntfile.js
+package-lock.json
+package.json
+webpack-config.js
+
+!cards/custom-cta-icons/
 !config/global_config.json
 !config/locale_config.json
 !config/index.json
 !pages/index.html.hbs
 !public/iframe_test.html
-!public/overlay.html
-public/
-config/
-pages/
-cards/
-directanswercards/
-Gruntfile.js
-package-lock.json
-package.json
-webpack-config.js
+!public/overlay.html

test-site/cards/custom-cta-icons/component.js

@@ -0,0 +1,56 @@
+{{> cards/card_component componentName='custom-cta-icons' }}
+
+class custom_cta_iconsCardComponent extends BaseCard['custom-cta-icons'] {
+  constructor(config = {}, systemConfig = {}) {
+    super(config, systemConfig);
+  }
+
+  dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
+    return {
+      title: profile.name, 
+      url: profile.website,
+      target: linkTarget,
+      titleEventOptions: this.addDefaultEventOptions(),
+      date: Formatter.bigDate(profile),
+      subtitle: Formatter.dateRange(profile),
+      details: profile.description,
+      CTA1: {
+        label: 'Hitchhiker Thumb!',
+        /**
+         * @Test a custom icon url without iconName in the CTA
+         * @Expect the custom icon to show up
+         */
+        iconUrl: 'static/assets/hitchhiker-thumb.jpeg',
+        url: 'testUrl',
+        target: linkTarget,
+        eventType: 'RSVP',
+        eventOptions: this.addDefaultEventOptions(),
+      },
+      CTA2: {
+        label: 'AYAYA',
+        iconName: 'star',
+        /**
+         * @Test a custom icon url hen an iconName already exists
+         * @Expect the custom icon to show up
+         */
+        iconUrl: 'static/assets/ayaya.png',
+        url: 'testUrl',
+        target: linkTarget,
+        eventType: 'DRIVING_DIRECTIONS',
+        eventOptions: this.addDefaultEventOptions(),
+      }
+    };
+  }
+
+  static defaultTemplateName (config) {
+    return 'cards/custom-cta-icons';
+  }
+}
+
+ANSWERS.registerTemplate(
+  'cards/custom-cta-icons',
+  {{{stringifyPartial (read 'cards/event-standard/template') }}}
+);
+ANSWERS.registerComponentType(custom_cta_iconsCardComponent);

test-site/config-overrides/events_custom_cta_icons.es.json

@@ -0,0 +1,8 @@
+{
+  "verticalsToConfig": {
+    "events": {
+      "cardType": "custom-cta-icons",
+      "label": "Eventos"
+    }
+  }
+}

test-site/config-overrides/events_custom_cta_icons.json

@@ -0,0 +1,7 @@
+{
+  "verticalsToConfig": {
+    "events": {
+      "cardType": "custom-cta-icons"
+    }
+  }
+}

test-site/config/global_config.json

@@ -1,5 +1,5 @@
 {
-  "sdkVersion": "1.9", // The version of the Answers SDK to use
+  "sdkVersion": "feature/icon-partial-i18n", // The version of the Answers SDK to use
   "apiKey": "2d8c550071a64ea23e263118a2b0680b", // The answers api key found on the experiences page. This will be provided automatically by the Yext CI system
   // "experienceVersion": "<REPLACE ME>", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system
   // "businessId": "<REPLACE ME>", // The business ID of the account. This will be provided automatically by the Yext CI system

test-site/config/index.json

@@ -40,7 +40,7 @@
       "mapConfig": {
         "mapProvider": "Google"
       },
-      "icon": "static/assets/slapshot.png"
+      "iconUrl": "static/assets/slapshot.png"
     },
     "products": {
       "universalSectionTemplate": "grid-three-columns",

test-site/scripts/create-verticals.js

@@ -10,6 +10,10 @@ const verticalConfiguration = {
     template: 'vertical-standard',
     cardName: 'event-custom'
   },
+  events_custom_cta_icons: {
+    verticalKey: 'events',
+    template: 'vertical-standard'
+  },
   faqs: {
     verticalKey: 'faq',
     template: 'vertical-standard',
@@ -90,7 +94,12 @@ const testSiteDir = path.resolve(__dirname, '..');
 process.chdir(testSiteDir);
 
 Object.entries(verticalConfiguration).forEach(([pageName, config]) => {
-  execSync(`npx jambo vertical --name ${pageName} --verticalKey ${config.verticalKey} --template ${config.template} --cardName ${config.cardName} --locales es`);
+  let verticalCommand =
+    `npx jambo vertical --name ${pageName} --verticalKey ${config.verticalKey} --template ${config.template} --locales es`
+  if (config.cardName) {
+    verticalCommand += ` --cardName ${config.cardName}`
+  }
+  execSync(verticalCommand);
   configMerger.mergeConfigForPage(pageName);
   pagePatcher.applyPatchToPage(pageName);
   configMerger.mergeConfigForPage(pageName + '.es');

tests/hbshelpers/relativePathHandler.js

@@ -0,0 +1,56 @@
+import relativePathHandler from '../../hbshelpers/relativePathHandler';
+
+it('works for undefined url', () => {
+  const hash = {
+    url: undefined,
+    relativePath: '.'
+  };
+  expect(relativePathHandler({ hash })).toEqual(undefined);
+});
+
+it('works for null url', () => {
+  const hash = {
+    url: null,
+    relativePath: '.'
+  };
+  expect(relativePathHandler({ hash })).toEqual(null);
+});
+
+it('works for blank string url', () => {
+  const hash = {
+    url: '',
+    relativePath: '.'
+  };
+  expect(relativePathHandler({ hash })).toEqual('');
+});
+
+it('works for relative url with relativePath', () => {
+  const hash = {
+    url: 'mySpecialAsset.jpg',
+    relativePath: '.'
+  };
+  expect(relativePathHandler({ hash })).toEqual('./mySpecialAsset.jpg');
+});
+
+it('works for relative url with relativePath that points back a level', () => {
+  const hash = {
+    url: 'mySpecialAsset.jpg',
+    relativePath: '../..'
+  };
+  expect(relativePathHandler({ hash })).toEqual('../../mySpecialAsset.jpg');
+});
+
+it('works when no relativePath', () => {
+  const hash = {
+    url: 'mySpecialAsset.jpg'
+  };
+  expect(relativePathHandler({ hash })).toEqual('mySpecialAsset.jpg');
+});
+
+it('works with absolute url', () => {
+  const hash = {
+    url: '/mySpecialAsset.jpg',
+    relativePath: '../../'
+  };
+  expect(relativePathHandler({ hash })).toEqual('/mySpecialAsset.jpg');
+});

tests/percy/photographer.js

@@ -53,6 +53,9 @@ class Photographer {
     await this._pageNavigator.gotoVerticalPage('events', { query: 'vrginia' });
     await this._camera.snapshot('vertical-search--spellcheck');
 
+    await this._pageNavigator.gotoVerticalPage('events_custom_cta_icons');
+    await this._camera.snapshot('vertical-search--custom-cta-icons');
+
     await this._pageNavigator.gotoVerticalPage('financial_professionals', { query: 'connor' });
     await this._camera.snapshot('vertical-search--financial-professional-location');