Merge a0dbb6d into 3778264

package.json

@@ -7,7 +7,8 @@
     "setup-test-site": "./test-site/scripts/setup.sh",
     "build-test-site": "./test-site/scripts/build.sh",
     "serve-test-site": "serve -p 5042 test-site/public",
-    "acceptance": "node ./tests/acceptance/index.js"
+    "acceptance": "node ./tests/acceptance/index.js",
+    "percy": "npx percy exec -- node tests/percy/index.js"
   },
   "repository": {
     "type": "git",

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

@@ -0,0 +1,13 @@
+{
+  "verticalsToConfig": {
+    "events": { // The vertical key from your search configuration
+      // "label": "", // The name of the vertical in the section header and the navigation bar
+      // "verticalLimit": 15, // The result count limit for vertical search
+      // "universalLimit": 5, // The result count limit for universal search
+      "cardType": "event-custom", // The name of the card to use - e.g. accordion, location, customcard
+      "icon": "star", // The icon to use on the card for this vertical
+      "universalSectionTemplate": "standard",
+      "label": "Eventos"
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+{
+  "verticalsToConfig": {
+    "financial_professionals": { // The vertical key from your search configuration
+      "label": "Profesionales financieros", // The name of the vertical in the section header and the navigation bar
+      // "verticalLimit": 15, // The result count limit for vertical search
+      // "universalLimit": 5, // The result count limit for universal search
+      "cardType": "multilang-financial-professional-location", // The name of the card to use - e.g. accordion, location, customcard
+      "icon": "star", // The icon to use on the card for this vertical
+      "universalSectionTemplate": "standard"
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+{
+  "verticalsToConfig": {
+    "healthcare_professionals": { // The vertical key from your search configuration
+      "label": "Profesionales de la salud", // The name of the vertical in the section header and the navigation bar
+      "cardType": "multilang-professional-standard", // The name of the card to use - e.g. accordion, location, customcard
+      "icon": "star", // The icon to use on the card for this vertical
+      "universalSectionTemplate": "standard"
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+{
+  "verticalsToConfig": {
+    "help_articles": { // The vertical key from your search configuration
+      "label": "Artículos de ayuda", // The name of the vertical in the section header and the navigation bar
+      // "verticalLimit": 15, // The result count limit for vertical search
+      // "universalLimit": 5, // The result count limit for universal search
+      "cardType": "document-standard", // The name of the card to use - e.g. accordion, location, customcard
+      "icon": "star", // The icon to use on the card for this vertical
+      "universalSectionTemplate": "standard"
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+{
+  "verticalsToConfig": {
+    "jobs": { // The vertical key from your search configuration
+      "label": "Trabajos", // The name of the vertical in the section header and the navigation bar
+      // "verticalLimit": 15, // The result count limit for vertical search
+      // "universalLimit": 5, // The result count limit for universal search
+      "cardType": "multilang-job-standard", // The name of the card to use - e.g. accordion, location, customcard
+      "icon": "star", // The icon to use on the card for this vertical
+      "universalSectionTemplate": "standard"
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+{
+  "verticalsToConfig": {
+    "menu_items": { // The vertical key from your search configuration
+      "label": "Elementos de menú", // The name of the vertical in the section header and the navigation bar
+      "cardType": "multilang-menuitem-standard", // The name of the card to use - e.g. accordion, location, customcard
+      "icon": "star", // The icon to use on the card for this vertical
+      "universalSectionTemplate": "standard"
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+{
+  "verticalsToConfig": {
+    "people": {
+      "label": "Pesonas"
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+{
+  "verticalsToConfig": {
+    "products": { // The vertical key from your search configuration
+      "label": "Productos", // The name of the vertical in the section header and the navigation bar
+      "cardType": "multilang-product-prominentvideo", // The name of the card to use - e.g. accordion, location, customcard
+      "icon": "star", // The icon to use on the card for this vertical
+      "universalSectionTemplate": "standard"
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+{
+  "verticalsToConfig": {
+    "products": { // The vertical key from your search configuration
+      "label": "Productos", // The name of the vertical in the section header and the navigation bar
+      "cardType": "multilang-product-prominentimage-clickable", // The name of the card to use - e.g. accordion, location, customcard
+      "icon": "star", // The icon to use on the card for this vertical
+      "universalSectionTemplate": "standard"
+    }
+  }
+}

test-site/config/index.json

@@ -36,20 +36,20 @@
     },
     "KM": {
       "universalSectionTemplate": "grid-two-columns",
-      "cardType": "financial-professional-location",
+      "cardType": "multilang-financial-professional-location",
       "mapConfig": {
         "mapProvider": "Google"
       }
     },
     "products": {
       "universalSectionTemplate": "grid-three-columns",
-      "cardType": "product-prominentimage"
+      "cardType": "multilang-product-prominentimage"
     },
     "links": {
-      "cardType": "link-standard"
+      "cardType": "multilang-link-standard"
     },
     "healthcare_professionals": {
-      "cardType": "professional-location"
+      "cardType": "multilang-professional-location"
     }
   }
 }

test-site/config/locale_config.json

@@ -6,6 +6,12 @@
       // "translationFile": "<filepath>.po", // the filepath for the translation file
       // "urlOverride": "", // provide an override for the url path for this locale if you want it to be different than specified in the urlFormat object
       "experienceKey": "slanswers" //  the unique key of your search configuration for this locale
+    },
+    "es": {
+      // "fallback": [""], // allows you to specify locale fallbacks for this locale
+      // "translationFile": "../../translation/es.po", // the filepath for the translation file
+      // "urlOverride": "", // provide an override for the url path for this locale if you want it to be different than specified in the urlFormat object
+      "experienceKey": "slanswers-es" //  the unique key of your search configuration for this locale
     }
   },
   "urlFormat": {

test-site/scripts/build.sh

@@ -12,9 +12,9 @@ rm -rf directanswercards/allfields-custom
 
 set -e
 
-npx jambo card --name event-custom --templateCardFolder cards/event-standard
-npx jambo directanswercard --name allfields-custom --templateCardFolder directanswercards/allfields-standard
+npx jambo card --name event-custom --templateCardFolder cards/multilang-event-standard
+npx jambo directanswercard --name allfields-custom --templateCardFolder directanswercards/multilang-allfields-standard
 
 node scripts/create-verticals.js
 
-npx jambo build && grunt webpack
+npx jambo build && npx grunt webpack

test-site/scripts/create-verticals.js

@@ -18,27 +18,27 @@ const verticalConfiguration = {
   locations: {
     verticalKey: 'KM',
     template: 'vertical-map',
-    cardName: 'location-standard'
+    cardName: 'multilang-location-standard'
   },
   locations_google: {
     verticalKey: 'KM',
     template: 'vertical-map',
-    cardName: 'location-standard'
+    cardName: 'multilang-location-standard'
   },
   locations_full_page_map: {
     verticalKey: 'KM',
     template: 'vertical-full-page-map',
-    cardName: 'location-standard'
+    cardName: 'multilang-location-standard'
   },
   locations_full_page_map_with_filters: {
     verticalKey: 'KM',
     template: 'vertical-full-page-map',
-    cardName: 'location-standard'
+    cardName: 'multilang-location-standard'
   },
   people: {
     verticalKey: 'people',
     template: 'vertical-grid',
-    cardName: 'standard'
+    cardName: 'multilang-standard'
   },
   products: {
     verticalKey: 'products',
@@ -48,22 +48,22 @@ const verticalConfiguration = {
   products_clickable_image: {
     verticalKey: 'products',
     template: 'vertical-grid',
-    cardName: 'product-prominentimage-clickable'
+    cardName: 'multilang-product-prominentimage-clickable'
   },
   financial_professionals: {
     verticalKey: 'financial_professionals',
     template: 'vertical-standard',
-    cardName: 'financial-professional-location'
+    cardName: 'multilang-financial-professional-location'
   },
   healthcare_professionals: {
     verticalKey: 'healthcare_professionals',
     template: 'vertical-grid',
-    cardName: 'professional-standard'
+    cardName: 'multilang-professional-standard'
   },
   jobs: {
     verticalKey: 'jobs',
     template: 'vertical-standard',
-    cardName: 'job-standard'
+    cardName: 'multilang-job-standard'
   },
   help_articles: {
     verticalKey: 'help_articles',
@@ -73,7 +73,7 @@ const verticalConfiguration = {
   menu_items: {
     verticalKey: 'menu_items',
     template: 'vertical-grid',
-    cardName: 'menuitem-standard'
+    cardName: 'multilang-menuitem-standard'
   }
 };
 
@@ -90,7 +90,9 @@ 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}`);
+  execSync(`npx jambo vertical --name ${pageName} --verticalKey ${config.verticalKey} --template ${config.template} --cardName ${config.cardName} --locales es`);
   configMerger.mergeConfigForPage(pageName);
   pagePatcher.applyPatchToPage(pageName);
+  configMerger.mergeConfigForPage(pageName + '.es');
+  pagePatcher.applyPatchToPage(pageName + '.es');
 });

tests/percy/iframepagenavigator.js

@@ -9,24 +9,36 @@ class IframePageNavigator extends PageNavigator {
    * @param {import('puppeteer').Page} page A Pupeteer Page
    * @param {string} siteUrl A url to the index of the site
    * @param {string} iframePage The name of the iframe page
+   * @param {string} defaultLocale default locale config of the site
    */
-  constructor(page, siteUrl, iframePage) {
+  constructor(page, siteUrl, iframePage, defaultLocale='en') {
     super();
     this._page = page;
     this._siteUrl = siteUrl;
     this._iframePage = iframePage;
+    this._defaultLocale = defaultLocale;
+    this._localeUrlPath = '';
+  }
+
+  /**
+   * Set locale for the site
+   * 
+   * @param {string} locale 
+   */
+  setCurrentLocale(locale) {
+    this._localeUrlPath = locale === this.defaultLocale? '' : '/' + locale;
   }
 
   async gotoUniversalPage(queryParams = {}) {
     const queryParamsString = getQueryParamsString(queryParams);
-    const url = `${this._siteUrl}/${this._iframePage}.html?${queryParamsString}`;
+    const url = `${this._siteUrl}${this._localeUrlPath}/${this._iframePage}.html?${queryParamsString}`;
     await this._page.goto(url);
     await waitTillHTMLRendered(this._page);
   }
 
   async gotoVerticalPage(vertical, queryParams = {}) {
     const queryParamsString = getQueryParamsString(queryParams);
-    const url = `${this._siteUrl}/${this._iframePage}.html?verticalUrl=${vertical}.html&${queryParamsString}`;
+    const url = `${this._siteUrl}${this._localeUrlPath}/${this._iframePage}.html?verticalUrl=${vertical}.html&${queryParamsString}`;
     await this._page.goto(url);
     await waitTillHTMLRendered(this._page);
   }

tests/percy/index.js

@@ -1,6 +1,7 @@
 const PercyScript = require('@percy/script');
 const HttpServer = require('../test-utils/server');
 const Photographer = require('./photographer');
+const MultilangPhotographer = require('./multilangphotographer');
 const StandardPageNavigator = require('./standardpagenavigator');
 const IframePageNavigator = require('./iframepagenavigator');
 const Camera = require('./camera');
@@ -17,11 +18,18 @@ PercyScript.run(async (page, percySnapshot) => {
 
   const standardPageNavigator = new StandardPageNavigator(page, `http://localhost:${PORT}`);
   const iframePageNavigator = new IframePageNavigator(page, `http://localhost:${PORT}`, 'iframe_test');
+
   const standardCamera = new Camera(percySnapshot);
   const iframeCamera = new Camera(percySnapshot, true);
 
   await (new Photographer(standardPageNavigator, standardCamera).captureSnapshots());
   await (new Photographer(iframePageNavigator, iframeCamera).captureSnapshots());
 
+  standardPageNavigator.setCurrentLocale('es');
+  iframePageNavigator.setCurrentLocale('es');
+  await (new MultilangPhotographer(standardPageNavigator, standardCamera, 'es').captureSnapshots());
+  await (new MultilangPhotographer(iframePageNavigator, iframeCamera, 'es').captureSnapshots());
+
+
   server.shutdown();
 });