Skip to content

Commit

Permalink
update multilang queries handling and locale setting logic
Browse files Browse the repository at this point in the history
  • Loading branch information
Yen Truong committed Jun 14, 2021
1 parent 15152cb commit 9b1b3da
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 83 deletions.
20 changes: 15 additions & 5 deletions tests/percy/camera.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,21 @@ class Camera {
/**
* @param {function} percySnapshot The percy snapshot function
* @param {boolean} iframeMode Enables capturing iframe snapshots
* @param {string} locale Enables capturing locale specific snapshots
*/
constructor(percySnapshot, iframeMode ) {
constructor(percySnapshot, iframeMode, locale='en') {
this._percySnapshot = percySnapshot;
this._iframeMode = iframeMode;
this._locale = locale;
}

/**
* Set locale for snapshot of the site
*
* @param {string} locale
*/
setLocale(locale) {
this._locale = locale;
}

/**
Expand Down Expand Up @@ -44,15 +55,14 @@ class Camera {
}

/**
* Returns the correct snapshot name based on the iframe mode
* Returns the correct snapshot name based on the iframe mode and locale
*
* @param {string} snapshotName
* @returns {string}
*/
_getSnapshotName(snapshotName) {
return this._iframeMode
? snapshotName + '_iframe'
: snapshotName;
let updatedSnapshotName = this._iframeMode ? snapshotName + '_iframe' : snapshotName;
return this._locale === 'en' ? updatedSnapshotName : this._locale + '--' + updatedSnapshotName;
}
}

Expand Down
8 changes: 4 additions & 4 deletions tests/percy/iframepagenavigator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ class IframePageNavigator extends PageNavigator {
*
* @type {string}
*/
this._localeVerticalUrlPath = '&verticalUrl=';
this._localePrefix = '';
}

/**
Expand All @@ -39,8 +39,8 @@ class IframePageNavigator extends PageNavigator {
* @param {string} locale
*/
setCurrentLocale(locale) {
this._localeUniversalUrlPath = locale === this._defaultLocale? '' : '&verticalUrl=' + locale;
this._localeVerticalUrlPath = locale === this._defaultLocale? '&verticalUrl=' : '&verticalUrl=' + locale + "/";
this._localeUniversalUrlPath = locale === this._defaultLocale ? '' : '&verticalUrl=' + locale;
this._localePrefix = locale === this._defaultLocale ? '' : + locale + '/';
}

async gotoUniversalPage(queryParams = {}) {
Expand All @@ -52,7 +52,7 @@ class IframePageNavigator extends PageNavigator {

async gotoVerticalPage(vertical, queryParams = {}) {
const queryParamsString = getQueryParamsString(queryParams);
const url = `${this._siteUrl}/${this._iframePage}.html?${this._localeVerticalUrlPath}${vertical}.html&${queryParamsString}`;
const url = `${this._siteUrl}/${this._iframePage}.html?verticalUrl=${this._localePrefix}${vertical}.html&${queryParamsString}`;
await this._page.goto(url);
await waitTillHTMLRendered(this._page);
}
Expand Down
9 changes: 7 additions & 2 deletions tests/percy/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const MultilangPhotographer = require('./multilangphotographer');
const StandardPageNavigator = require('./standardpagenavigator');
const IframePageNavigator = require('./iframepagenavigator');
const Camera = require('./camera');
const queryConfig = require('./queries.json');

const PORT = 5042;

Expand All @@ -27,8 +28,12 @@ PercyScript.run(async (page, percySnapshot) => {

standardPageNavigator.setCurrentLocale('es');
iframePageNavigator.setCurrentLocale('es');
await (new MultilangPhotographer(standardPageNavigator, standardCamera, 'es').captureSnapshots());
await (new MultilangPhotographer(iframePageNavigator, iframeCamera, 'es').captureSnapshots());

standardCamera.setLocale('es');
iframeCamera.setLocale('es');

await (new MultilangPhotographer(standardPageNavigator, standardCamera, queryConfig.es).captureSnapshots());
await (new MultilangPhotographer(iframePageNavigator, iframeCamera, queryConfig.es).captureSnapshots());


server.shutdown();
Expand Down
103 changes: 31 additions & 72 deletions tests/percy/multilangphotographer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,62 +10,21 @@ class MultilangPhotographer {
/**
* @param {PageNavigator} pageNavigator
* @param {Camera} camera
* @param {locale} locale locale set for the site when taking snapshot
* @param {Object<string, string>} queries custom queries for specific locale
*/
constructor(pageNavigator, camera, locale) {
constructor(pageNavigator, camera, queries) {
this._pageNavigator = pageNavigator;
this._camera = camera;
this._locale = locale;

/**
* Custom queries for specific locale
*
* @type {Object<string, string>}
*/
this._queries = {};

/**
* Locale tag to add to snapshot name
*
* @type {string}
*/
this.localeSnapshotTag = '';

this.setLocale(locale);
}

/**
* Sets locale for the page navigation and snapshot tag
*
* @param {string} locale locale of the site
*/
setLocale(locale) {
this._locale = locale;
this.localeSnapshotTag = this._locale === 'en'? '' : this._locale + '--';
this._setLocaleQueries();
this._queries = queries;
}

/**
* Sets custom queries based on locale
*
* @param {Object<string, string>} queries
*/
_setLocaleQueries() {
switch (this._locale) {
case 'es':
this._queries = {
faq: '¿Qué pasa si olvidé mi contraseña?',
job: 'trabajo',
menu_item: 'rollo',
field_direct_answers: 'descripción de bryan reed'
}
break;
default:
this._queries = {
faq: 'what if i forgot my password?',
job: 'job',
menu_item: 'roll',
field_direct_answers: 'bryan reed description'
}
}
setLocaleQueries(queries) {
this._queries = queries;
}

async captureSnapshots() {
Expand All @@ -79,91 +38,91 @@ class MultilangPhotographer {

async _captureUniversalSearch () {
await this._pageNavigator.gotoUniversalPage();
await this._camera.snapshot(this.localeSnapshotTag + 'universal-search');
await this._camera.snapshot('universal-search');

await this._pageNavigator.gotoUniversalPage({ query: 'a' });
await this._camera.snapshot(this.localeSnapshotTag + 'universal-search--no-results');
await this._camera.snapshot('universal-search--no-results');

await this._pageNavigator.gotoUniversalPage({ query: this._queries.faq });
await this._pageNavigator.click('.HitchhikerFaqAccordion-toggle')
await this._camera.snapshot(this.localeSnapshotTag + 'universal-search--faq-accordion');
await this._camera.snapshot('universal-search--faq-accordion');

await this._pageNavigator.gotoUniversalPage({ query: 'yext answers'});
await this._camera.snapshot(this.localeSnapshotTag + 'universal-search--product-prominentimage');
await this._camera.snapshot('universal-search--product-prominentimage');
}

async _captureVerticalSearch () {
await this._pageNavigator.gotoVerticalPage('events');
await this._camera.snapshot(this.localeSnapshotTag + 'vertical-search');
await this._camera.snapshot('vertical-search');

await this._pageNavigator.gotoVerticalPage('events', { query: 'a' });
await this._camera.snapshot(this.localeSnapshotTag + 'vertical-search--no-results');
await this._camera.snapshot('vertical-search--no-results');

await this._pageNavigator.gotoVerticalPage('financial_professionals', { query: 'connor' });
await this._camera.snapshot(this.localeSnapshotTag + 'vertical-search--financial-professional-location');
await this._camera.snapshot('vertical-search--financial-professional-location');

await this._pageNavigator.gotoVerticalPage('jobs', { query: this._queries.job });
await this._camera.snapshot(this.localeSnapshotTag + 'vertical-search--job-standard');
await this._camera.snapshot('vertical-search--job-standard');

await this._pageNavigator.gotoVerticalPage('help_articles', { query: 'slap chop' });
await this._camera.snapshot(this.localeSnapshotTag + 'vertical-search--document-standard');
await this._camera.snapshot('vertical-search--document-standard');

await this._pageNavigator.gotoVerticalPage('menu_items', { query: this._queries.menu_item });
await this._camera.snapshot(this.localeSnapshotTag + 'vertical-search--menuitem-standard');
await this._camera.snapshot('vertical-search--menuitem-standard');
}

async _captureVerticalGridSearch () {
await this._pageNavigator.gotoVerticalPage('people', { query: 'a' });
await this._camera.snapshot(this.localeSnapshotTag + 'vertical-grid-search');
await this._camera.snapshot('vertical-grid-search');

await this._pageNavigator.gotoVerticalPage('people', { query: 'vrginia' });
await this._camera.snapshot(this.localeSnapshotTag + 'vertical-grid-search--spellcheck');
await this._camera.snapshot('vertical-grid-search--spellcheck');

await this._pageNavigator.gotoVerticalPage('products', { query: 'yext answers' });
await this._camera.snapshot('vertical-grid-search--product-prominentvideo');

await this._pageNavigator.gotoVerticalPage('products_clickable_image', { query: 'yext answers' });
await this._camera.snapshot(this.localeSnapshotTag + 'vertical-grid-search--product-prominentimage-clickable');
await this._camera.snapshot('vertical-grid-search--product-prominentimage-clickable');
}

async _captureVerticalMapSearch () {
await this._pageNavigator.gotoVerticalPage('locations', { query: 'a' });
await this._camera.snapshot(this.localeSnapshotTag + 'vertical-map-search');
await this._camera.snapshot('vertical-map-search');

await this._pageNavigator.gotoVerticalPage('locations_google', { query: 'virginia' });
await this._camera.snapshot(this.localeSnapshotTag + 'vertical-map-search--google');
await this._camera.snapshot('vertical-map-search--google');
}

async _captureVerticalFullPageMapSearch () {
await this._pageNavigator
.gotoVerticalPage('locations_full_page_map', { query: '' });
await this._camera.snapshotDesktopOnly(this.localeSnapshotTag + 'vertical-full-page-map__desktop-view');
await this._camera.snapshotMobileOnly(this.localeSnapshotTag + 'vertical-full-page-map__mobile-list-view');
await this._camera.snapshotDesktopOnly('vertical-full-page-map__desktop-view');
await this._camera.snapshotMobileOnly('vertical-full-page-map__mobile-list-view');

await this._pageNavigator.click('.Answers-mobileToggle');
await this._camera.snapshotMobileOnly(this.localeSnapshotTag + 'vertical-full-page-map__mobile-map-view');
await this._camera.snapshotMobileOnly('vertical-full-page-map__mobile-map-view');

const mapboxPinSelector = '.js-answersMap button';
await this._pageNavigator.click(mapboxPinSelector);
await this._camera.snapshotMobileOnly(this.localeSnapshotTag + 'vertical-full-page-map__mobile-detail-view');
await this._camera.snapshotMobileOnly('vertical-full-page-map__mobile-detail-view');

await this._pageNavigator
.gotoVerticalPage('locations_full_page_map', { query: 'office sparce'});
await this._camera.snapshotDesktopOnly(this.localeSnapshotTag + 'vertical-full-page-map--spellcheck__desktop-view');
await this._camera.snapshotMobileOnly(this.localeSnapshotTag + 'vertical-full-page-map--spellcheck__mobile-list-view');
await this._camera.snapshotDesktopOnly('vertical-full-page-map--spellcheck__desktop-view');
await this._camera.snapshotMobileOnly('vertical-full-page-map--spellcheck__mobile-list-view');

await this._pageNavigator
.gotoVerticalPage('locations_full_page_map', { query: 'virginia' });
await this._camera.snapshotDesktopOnly(this.localeSnapshotTag + 'vertical-full-page-map--nlp-filters__desktop-view');
await this._camera.snapshotDesktopOnly('vertical-full-page-map--nlp-filters__desktop-view');

await this._pageNavigator
.gotoVerticalPage('locations_full_page_map_with_filters', { query: 'virginia' });
await this._camera.snapshotDesktopOnly(this.localeSnapshotTag + 'vertical-full-page-map-with-filters--nlp-filters__desktop-view');
await this._camera.snapshotDesktopOnly('vertical-full-page-map-with-filters--nlp-filters__desktop-view');
}

async _captureDirectAnswers () {
await this._pageNavigator.gotoUniversalPage({ query: this._queries.field_direct_answers });
await this._camera.snapshot(this.localeSnapshotTag + 'field-direct-answer');
await this._camera.snapshot('field-direct-answer');
}
}

Expand Down
14 changes: 14 additions & 0 deletions tests/percy/queries.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"en": {
"faq": "what if i forgot my password?",
"job": "job",
"menu_item": "roll",
"field_direct_answers": "bryan reed description"
},
"es": {
"faq": "¿Qué pasa si olvidé mi contraseña?",
"job": "trabajo",
"menu_item": "rollo",
"field_direct_answers": "descripción de bryan reed"
}
}

0 comments on commit 9b1b3da

Please sign in to comment.