From f4578cefaa0acd4ff44c5361677743fd4f57e97f Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Mon, 24 Jan 2022 19:52:39 -0800 Subject: [PATCH 001/116] added camelcase to shopping config files --- examples/amp-story/amp-story-shopping.html | 70 +++++++++---------- examples/amp-story/shopping/remote.json | 8 +-- .../amp-story/amp-story-shopping-lang-de.html | 48 ++++++------- .../amp-story/amp-story-shopping.html | 70 +++++++++---------- .../0.1/amp-story-shopping-config.js | 2 +- .../0.1/amp-story-shopping-tag.js | 12 ++-- .../test/test-amp-story-shopping-config.js | 2 +- .../0.1/test/test-amp-story-shopping-tag.js | 10 +-- .../amp-story/1.0/amp-story-store-service.js | 12 ++-- 9 files changed, 117 insertions(+), 117 deletions(-) diff --git a/examples/amp-story/amp-story-shopping.html b/examples/amp-story/amp-story-shopping.html index 94d7ef2d200b..2f437b0a2469 100644 --- a/examples/amp-story/amp-story-shopping.html +++ b/examples/amp-story/amp-story-shopping.html @@ -55,26 +55,26 @@ { "items" : [ { - "product-tag-id": "hat", - "product-title": "Hootenanny Hat", - "product-price": 799.00, - "product-price-currency": "USD", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" + "productTagId": "hat", + "productTitle": "Hootenanny Hat", + "productPrice": 799.00, + "productPriceCurrency": "USD", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" }, { - "product-tag-id": "sunglasses", - "product-title": "Spectacular Spectacles", - "product-price": 400.00, - "product-price-currency": "INR", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" + "productTagId": "sunglasses", + "productTitle": "Spectacular Spectacles", + "productPrice": 400.00, + "productPriceCurrency": "INR", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" }, { - "product-tag-id": "backpack", - "product-title": "Beastly Backpack", - "product-price": 1000.00, - "product-price-currency": "BRL", - "product-tag-text": "Beastly Backpack Brews Beastly Beverages", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" + "productTagId": "backpack", + "productTitle": "Beastly Backpack", + "productPrice": 1000.00, + "productPriceCurrency": "BRL", + "productTagText": "Beastly Backpack Brews Beastly Beverages", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" } ] } @@ -99,10 +99,10 @@ { "items" : [ { - "product-tag-id": "city-pop", - "product-title": "Plastic Love", - "product-price": 19.00, - "product-price-currency": "JPY", + "productTagId": "city-pop", + "productTitle": "Plastic Love", + "productPrice": 19.00, + "productPriceCurrency": "JPY", } ] } @@ -145,25 +145,25 @@ { "items" : [ { - "product-tag-id": "hat-rtl", - "product-title": "Hootenanny Hat", - "product-price": 799.00, - "product-tag-text": " حبا حبا حبا سعادةا سعادة", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" + "productTagId": "hat-rtl", + "productTitle": "Hootenanny Hat", + "productPrice": 799.00, + "productTagText": " حبا حبا حبا سعادةا سعادة", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" }, { - "product-tag-id": "sunglasses-rtl", - "product-title": "Spectacular Spectacles", - "product-price": 400.00, - "product-tag-text": "حبا حب سعادة قط حبا حب سعادة قط ", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" + "productTagId": "sunglasses-rtl", + "productTitle": "Spectacular Spectacles", + "productPrice": 400.00, + "productTagText": "حبا حب سعادة قط حبا حب سعادة قط ", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" }, { - "product-tag-id": "backpack-rtl", - "product-title": "Beastly Backpack", - "product-price": 500.00, - "product-price-currency": "AED", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" + "productTagId": "backpack-rtl", + "productTitle": "Beastly Backpack", + "productPrice": 500.00, + "productPriceCurrency": "AED", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" } ] } diff --git a/examples/amp-story/shopping/remote.json b/examples/amp-story/shopping/remote.json index c9055b8fd0a5..1203d51d95af 100644 --- a/examples/amp-story/shopping/remote.json +++ b/examples/amp-story/shopping/remote.json @@ -1,10 +1,10 @@ { "items": [ { - "product-tag-id": "city-pop", - "product-title": "Plastic Love", - "product-price": 19, - "product-price-currency": "JPY" + "productTagId": "city-pop", + "productTitle": "Plastic Love", + "productPrice": 19, + "productPriceCurrency": "JPY" } ] } diff --git a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html index bad0c7d18e0c..7c09d27f22f9 100644 --- a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html +++ b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html @@ -51,32 +51,32 @@ { "items" : [ { - "product-tag-id": "hat", - "product-title": "Hootenanny Hat", - "product-price": 123456.789, - "product-price-currency": "USD", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" + "productTagId": "hat", + "productTitle": "Hootenanny Hat", + "productPrice": 123456.789, + "productPriceCurrency": "USD", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" }, { - "product-tag-id": "sunglasses", - "product-title": "Spectacular Spectacles", - "product-price": 123456.789, - "product-price-currency": "INR", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" + "productTagId": "sunglasses", + "productTitle": "Spectacular Spectacles", + "productPrice": 123456.789, + "productPriceCurrency": "INR", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" }, { - "product-tag-id": "backpack", - "product-title": "Beastly Backpack", - "product-price": 123456.789, - "product-price-currency": "BRL", - "product-tag-text": "Beastly Backpack", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" + "productTagId": "backpack", + "productTitle": "Beastly Backpack", + "productPrice": 123456.789, + "productPriceCurrency": "BRL", + "productTagText": "Beastly Backpack", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" }, { - "product-tag-id": "euro-dance", - "product-title": "Dolphin Dance", - "product-price": 123456.789, - "product-price-currency": "EUR" + "productTagId": "euro-dance", + "productTitle": "Dolphin Dance", + "productPrice": 123456.789, + "productPriceCurrency": "EUR" } ] } @@ -104,10 +104,10 @@ { "items" : [ { - "product-tag-id": "city-pop", - "product-title": "Plastic Love", - "product-price": 19, - "product-price-currency": "JPY", + "productTagId": "city-pop", + "productTitle": "Plastic Love", + "productPrice": 19, + "productPriceCurrency": "JPY", } ] } diff --git a/examples/visual-tests/amp-story/amp-story-shopping.html b/examples/visual-tests/amp-story/amp-story-shopping.html index 94d7ef2d200b..2f437b0a2469 100644 --- a/examples/visual-tests/amp-story/amp-story-shopping.html +++ b/examples/visual-tests/amp-story/amp-story-shopping.html @@ -55,26 +55,26 @@ { "items" : [ { - "product-tag-id": "hat", - "product-title": "Hootenanny Hat", - "product-price": 799.00, - "product-price-currency": "USD", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" + "productTagId": "hat", + "productTitle": "Hootenanny Hat", + "productPrice": 799.00, + "productPriceCurrency": "USD", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" }, { - "product-tag-id": "sunglasses", - "product-title": "Spectacular Spectacles", - "product-price": 400.00, - "product-price-currency": "INR", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" + "productTagId": "sunglasses", + "productTitle": "Spectacular Spectacles", + "productPrice": 400.00, + "productPriceCurrency": "INR", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" }, { - "product-tag-id": "backpack", - "product-title": "Beastly Backpack", - "product-price": 1000.00, - "product-price-currency": "BRL", - "product-tag-text": "Beastly Backpack Brews Beastly Beverages", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" + "productTagId": "backpack", + "productTitle": "Beastly Backpack", + "productPrice": 1000.00, + "productPriceCurrency": "BRL", + "productTagText": "Beastly Backpack Brews Beastly Beverages", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" } ] } @@ -99,10 +99,10 @@ { "items" : [ { - "product-tag-id": "city-pop", - "product-title": "Plastic Love", - "product-price": 19.00, - "product-price-currency": "JPY", + "productTagId": "city-pop", + "productTitle": "Plastic Love", + "productPrice": 19.00, + "productPriceCurrency": "JPY", } ] } @@ -145,25 +145,25 @@ { "items" : [ { - "product-tag-id": "hat-rtl", - "product-title": "Hootenanny Hat", - "product-price": 799.00, - "product-tag-text": " حبا حبا حبا سعادةا سعادة", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" + "productTagId": "hat-rtl", + "productTitle": "Hootenanny Hat", + "productPrice": 799.00, + "productTagText": " حبا حبا حبا سعادةا سعادة", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" }, { - "product-tag-id": "sunglasses-rtl", - "product-title": "Spectacular Spectacles", - "product-price": 400.00, - "product-tag-text": "حبا حب سعادة قط حبا حب سعادة قط ", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" + "productTagId": "sunglasses-rtl", + "productTitle": "Spectacular Spectacles", + "productPrice": 400.00, + "productTagText": "حبا حب سعادة قط حبا حب سعادة قط ", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" }, { - "product-tag-id": "backpack-rtl", - "product-title": "Beastly Backpack", - "product-price": 500.00, - "product-price-currency": "AED", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" + "productTagId": "backpack-rtl", + "productTitle": "Beastly Backpack", + "productPrice": 500.00, + "productPriceCurrency": "AED", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" } ] } diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index c62932b0151f..e1789b0ddf03 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -32,7 +32,7 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { addShoppingDataFromConfig_(shoppingConfig) { const productIDtoProduct = {}; for (const item of shoppingConfig['items']) { - productIDtoProduct[item['product-tag-id']] = item; + productIDtoProduct[item['productTagId']] = item; } this.storeService_.dispatch(Action.ADD_SHOPPING_DATA, productIDtoProduct); //TODO(#36412): Add call to validate config here. diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js index 5e62b19fb7bf..07623e515600 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js @@ -148,17 +148,17 @@ export class AmpStoryShoppingTag extends AMP.BaseElement { - {(this.tagData_['product-tag-text'] && ( + {(this.tagData_['productTagText'] && ( - {this.tagData_['product-tag-text']} + {this.tagData_['productTagText']} )) || new Intl.NumberFormat( @@ -167,9 +167,9 @@ export class AmpStoryShoppingTag extends AMP.BaseElement { )[0], { style: 'currency', - currency: this.tagData_['product-price-currency'], + currency: this.tagData_['productPriceCurrency'], } - ).format(this.tagData_['product-price'])} + ).format(this.tagData_['productPrice'])} diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index 271241632beb..3662631802fe 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -73,7 +73,7 @@ describes.realWin( element.setAttribute('src', exampleURL); const expectedRemoteResult = JSON.parse( - '{"city-pop":{"product-tag-id":"city-pop","product-title":"Plastic Love","product-price": 19, "product-price-currency": "JPY"}}' + '{"city-pop":{"productTagId":"city-pop","productTitle":"Plastic Love","productPrice": 19, "productPriceCurrency": "JPY"}}' ); expect(storeService.get(StateProperty.SHOPPING_DATA)).to.deep.eql( diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js index 48becb8caa2c..06a516b26e6f 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js @@ -58,7 +58,7 @@ describes.realWin( async function shoppingDataDispatchStoreService() { const shoppingData = { - 'sunglasses': {'product-title': 'Spectacular Spectacles'}, + 'sunglasses': {'productTitle': 'Spectacular Spectacles'}, }; storeService.dispatch(Action.ADD_SHOPPING_DATA, shoppingData); } @@ -86,10 +86,10 @@ describes.realWin( it('should set active product in store service when shopping tag is clicked', async () => { const tagData = { - 'product-tag-id': 'sunglasses', - 'product-title': 'Spectacular Spectacles', - 'product-price': '400', - 'product-icon': + 'productTagId': 'sunglasses', + 'productTitle': 'Spectacular Spectacles', + 'productPrice': '400', + 'productIcon': '/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png', }; diff --git a/extensions/amp-story/1.0/amp-story-store-service.js b/extensions/amp-story/1.0/amp-story-store-service.js index 99a93400d1ff..c4fe1860985f 100644 --- a/extensions/amp-story/1.0/amp-story-store-service.js +++ b/extensions/amp-story/1.0/amp-story-store-service.js @@ -74,12 +74,12 @@ export let InteractiveReactData; /** * @typedef {{ - * product-tag-id: string, - * product-title: string, - * product-price: number, - * product-price-currency: string, - * product-icon: string, - * product-tag-text: ?string, + * productTagId: string, + * productTitle: string, + * productPrice: number, + * productPriceCurrency: string, + * productIcon: string, + * productTagText: ?string, * }} */ export let ShoppingConfigDataDef; From 08ed0ea2004a38e0f8191b5a8e217dde453eebd0 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Mon, 24 Jan 2022 21:40:48 -0800 Subject: [PATCH 002/116] added attribute validators for validate config --- .../0.1/amp-story-shopping-config.js | 98 ++++++++++++++++++- 1 file changed, 97 insertions(+), 1 deletion(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index e1789b0ddf03..786802dd5346 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -16,12 +16,108 @@ import { */ let ShoppingConfigDef; +const attributeValidators = { + 'requiredAttributes': new Set([ + 'productTagId', + 'brandLabel', + 'productTitle', + 'productPrice', + 'productImages', + 'productDetails', + 'productPriceCurrency', + 'reviewsPage', + ]), + 'optionalAttributes': new Set([ + 'productColor', + 'productSize', + 'productIcon', + 'productTagText', + ]), +}; + export class AmpStoryShoppingConfig extends AMP.BaseElement { /** @param {!AmpElement} element */ constructor(element) { super(element); /** @private @const {?../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */ this.storeService_ = null; + + /** @private @const {!Object>} */ + this.productValidationConfig_ = { + /* Required Attrs */ + 'productTagId': [this.validateStringLength_], + 'brandLabel': [this.validateStringLength_], + 'productTitle': [this.validateStringLength_], + 'productPrice': [this.validateStringLength_], + 'productImages': [this.validateURL_], + 'productDetails': [this.validateStringLength_], + 'reviewsPage': [this.validateURL_], + 'productPriceCurrency': [this.validateStringLength_], + /* Optional Attrs */ + 'productColor': [this.validateStringLength_], + 'productSize': [this.validateStringLength_], + 'productIcon': [this.validateURL_], + 'productTagText': [this.validateStringLength_], + }; + } + + /** + * Validates shopping config Attributes + * @param {!ShoppingConfigDataDef} prouductAttrs + * @param {?string} attribValidatorType + * @private + */ + validateAttributes_( + prouductAttrs, + attribValidatorType = 'requiredAttributes' + ) { + for (const attrib of attributeValidators[attribValidatorType]) { + if (!prouductAttrs[attrib]) { + console.log('missing attribute ' + attrib); + } + } + } + + /** + * Validates string length of shopping config attributes + * @param {string} str + * @param {?number} maxLen + * @private + */ + validateStringLength_(str, maxLen = 12) { + if (str.length > maxLen) { + console.log( + str + ' length exceeds max length: ' + str.length + ' > ' + maxLen + ); + } + } + + /** + * Validates url of shopping config attributes + * @param {string} url + * @private + */ + validateURL_(url) { + //TODO + } + + /** + * Validates shopping config. + * @param {!ShoppingConfigDataDef} shoppingConfig + * @private + */ + validateConfig_(shoppingConfig) { + for (const attr in shoppingConfig) { + if (attr in this.productValidationConfig_) { + /* Valid Attribute, run the function array check here */ + for (const validationFunction of this.productValidationConfig_[attr]) { + validationFunction(shoppingConfig[attr]); + } + } else { + console.log('invalid product attribute: ' + attr); + } + this.validateAttributes_(shoppingConfig); + } } /** @@ -32,10 +128,10 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { addShoppingDataFromConfig_(shoppingConfig) { const productIDtoProduct = {}; for (const item of shoppingConfig['items']) { + this.validateConfig_(item); productIDtoProduct[item['productTagId']] = item; } this.storeService_.dispatch(Action.ADD_SHOPPING_DATA, productIDtoProduct); - //TODO(#36412): Add call to validate config here. } /** @override */ From 343505fc122943364c533c8e3b94f4a3687da036 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Mon, 24 Jan 2022 21:43:44 -0800 Subject: [PATCH 003/116] added upper limit for max string length --- extensions/amp-story-shopping/0.1/amp-story-shopping-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index 786802dd5346..f68046d01a1e 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -84,7 +84,7 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { * @param {?number} maxLen * @private */ - validateStringLength_(str, maxLen = 12) { + validateStringLength_(str, maxLen = 100) { if (str.length > maxLen) { console.log( str + ' length exceeds max length: ' + str.length + ' > ' + maxLen From 1e8f51e80df39a92fd6283915f3cad93b7ac2dad Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Tue, 25 Jan 2022 11:16:11 -0800 Subject: [PATCH 004/116] added validate number and optional attributes --- .../0.1/amp-story-shopping-config.js | 37 ++++++++++++++----- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index f68046d01a1e..0b08572c0b5d 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -32,6 +32,9 @@ const attributeValidators = { 'productSize', 'productIcon', 'productTagText', + 'reviewsData', + 'ctaText', + 'shippingText', ]), }; @@ -45,19 +48,22 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { /** @private @const {!Object>} */ this.productValidationConfig_ = { /* Required Attrs */ - 'productTagId': [this.validateStringLength_], - 'brandLabel': [this.validateStringLength_], - 'productTitle': [this.validateStringLength_], - 'productPrice': [this.validateStringLength_], - 'productImages': [this.validateURL_], - 'productDetails': [this.validateStringLength_], - 'reviewsPage': [this.validateURL_], - 'productPriceCurrency': [this.validateStringLength_], + 'productTagId': [this.validateStringLength_], // Required. String. Keys to amp-story-shopping-tag nodes. + 'brandLabel': [this.validateStringLength_], // Required. String. + 'productTitle': [this.validateStringLength_], // Required. String. + 'productPrice': [this.validateNumber_], // Required. Number. + 'productImages': [this.validateURL_], // Required. String or array of strings. + 'productDetails': [this.validateStringLength_], // Required. String. + 'reviewsPage': [this.validateURL_], // Required if reviews-data. Links to a page where reviews can be read. + 'productPriceCurrency': [this.validateStringLength_], // Required. String. ISO 4217 currency code used to display the correct currency symbol. /* Optional Attrs */ 'productColor': [this.validateStringLength_], 'productSize': [this.validateStringLength_], - 'productIcon': [this.validateURL_], - 'productTagText': [this.validateStringLength_], + 'productIcon': [this.validateURL_], // Optional. Links to an image. Defaults to a shopping bag icon. + 'productTagText': [this.validateStringLength_], // Optional. String. + 'reviewsData': [this.validateURL_], // Optional. Links to review data. + 'ctaText': [this.validateNumber_], // Optional. Number. Defaults to “Buy now”. Keys to a CTA text option for i18n. + 'shippingText': [this.validateNumber_], // Optional. Number. Keys to a shipping text option for i18n. Shipping text will not be rendered if the string is omitted. }; } @@ -92,6 +98,17 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { } } + /** + * Validates number in shopping config attributes + * @param {number} number + * @private + */ + validateNumber_(number) { + if (isNaN(number)) { + console.log(number + ' is not a number '); + } + } + /** * Validates url of shopping config attributes * @param {string} url From 1e087c163764b26ebdec672569e3436bc2e7dfe2 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Tue, 25 Jan 2022 11:30:19 -0800 Subject: [PATCH 005/116] optimzied arrays --- .../0.1/amp-story-shopping-config.js | 36 ++++++++++--------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index 0b08572c0b5d..2bc27419a676 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -45,25 +45,29 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { /** @private @const {?../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */ this.storeService_ = null; + const validateStringLength = [this.validateStringLength_]; + const validateNumber = [this.validateNumber_]; + const validateURL = [this.validateURL_]; + /** @private @const {!Object>} */ this.productValidationConfig_ = { /* Required Attrs */ - 'productTagId': [this.validateStringLength_], // Required. String. Keys to amp-story-shopping-tag nodes. - 'brandLabel': [this.validateStringLength_], // Required. String. - 'productTitle': [this.validateStringLength_], // Required. String. - 'productPrice': [this.validateNumber_], // Required. Number. - 'productImages': [this.validateURL_], // Required. String or array of strings. - 'productDetails': [this.validateStringLength_], // Required. String. - 'reviewsPage': [this.validateURL_], // Required if reviews-data. Links to a page where reviews can be read. - 'productPriceCurrency': [this.validateStringLength_], // Required. String. ISO 4217 currency code used to display the correct currency symbol. + 'productTagId': validateStringLength, // Required. String. Keys to amp-story-shopping-tag nodes. + 'brandLabel': validateStringLength, // Required. String. + 'productTitle': validateStringLength, // Required. String. + 'productPrice': validateNumber, // Required. Number. + 'productImages': validateURL, // Required. String or array of strings. + 'productDetails': validateStringLength, // Required. String. + 'reviewsPage': validateURL, // Required if reviews-data. Links to a page where reviews can be read. + 'productPriceCurrency': validateStringLength, // Required. String. ISO 4217 currency code used to display the correct currency symbol. /* Optional Attrs */ - 'productColor': [this.validateStringLength_], - 'productSize': [this.validateStringLength_], - 'productIcon': [this.validateURL_], // Optional. Links to an image. Defaults to a shopping bag icon. - 'productTagText': [this.validateStringLength_], // Optional. String. - 'reviewsData': [this.validateURL_], // Optional. Links to review data. - 'ctaText': [this.validateNumber_], // Optional. Number. Defaults to “Buy now”. Keys to a CTA text option for i18n. - 'shippingText': [this.validateNumber_], // Optional. Number. Keys to a shipping text option for i18n. Shipping text will not be rendered if the string is omitted. + 'productColor': validateStringLength, + 'productSize': validateStringLength, + 'productIcon': validateURL, // Optional. Links to an image. Defaults to a shopping bag icon. + 'productTagText': validateStringLength, // Optional. String. + 'reviewsData': validateURL, // Optional. Links to review data. + 'ctaText': validateNumber, // Optional. Number. Defaults to “Buy now”. Keys to a CTA text option for i18n. + 'shippingText': validateNumber, // Optional. Number. Keys to a shipping text option for i18n. Shipping text will not be rendered if the string is omitted. }; } @@ -115,7 +119,7 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { * @private */ validateURL_(url) { - //TODO + //TODO (need to check if string or araay of strings (use typeof?) for 'productImages' ) } /** From 7a1bcd03c063d1ce0d66d7b8af80b6e260b4f218 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Tue, 25 Jan 2022 11:41:35 -0800 Subject: [PATCH 006/116] spruced up required and optional attribute blaidtor --- .../0.1/amp-story-shopping-config.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index 2bc27419a676..741d3c315f9e 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -17,7 +17,7 @@ import { let ShoppingConfigDef; const attributeValidators = { - 'requiredAttributes': new Set([ + 'required': new Set([ 'productTagId', 'brandLabel', 'productTitle', @@ -27,7 +27,7 @@ const attributeValidators = { 'productPriceCurrency', 'reviewsPage', ]), - 'optionalAttributes': new Set([ + 'optional': new Set([ 'productColor', 'productSize', 'productIcon', @@ -61,8 +61,8 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { 'reviewsPage': validateURL, // Required if reviews-data. Links to a page where reviews can be read. 'productPriceCurrency': validateStringLength, // Required. String. ISO 4217 currency code used to display the correct currency symbol. /* Optional Attrs */ - 'productColor': validateStringLength, - 'productSize': validateStringLength, + 'productColor': validateStringLength, // Optional. String. + 'productSize': validateStringLength, // Optional. String. 'productIcon': validateURL, // Optional. Links to an image. Defaults to a shopping bag icon. 'productTagText': validateStringLength, // Optional. String. 'reviewsData': validateURL, // Optional. Links to review data. @@ -77,13 +77,10 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { * @param {?string} attribValidatorType * @private */ - validateAttributes_( - prouductAttrs, - attribValidatorType = 'requiredAttributes' - ) { + validateAttributes_(prouductAttrs, attribValidatorType = 'required') { for (const attrib of attributeValidators[attribValidatorType]) { if (!prouductAttrs[attrib]) { - console.log('missing attribute ' + attrib); + console.log('missing ' + attribValidatorType + ' attribute ' + attrib); } } } From 4f03c3ba4a3c50032e2537cf846230724be33cf6 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Tue, 25 Jan 2022 13:29:58 -0800 Subject: [PATCH 007/116] added in proper valdiation checks using reduce funcitons --- .../0.1/amp-story-shopping-config.js | 195 +++++++++--------- 1 file changed, 96 insertions(+), 99 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index 741d3c315f9e..450ee641153d 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -4,6 +4,7 @@ import {Services} from '#service'; import {getElementConfig} from 'extensions/amp-story/1.0/request-utils'; +import {assertHttpsUrl} from '../../../src/url'; import { Action, ShoppingConfigDataDef, @@ -16,28 +17,70 @@ import { */ let ShoppingConfigDef; -const attributeValidators = { - 'required': new Set([ - 'productTagId', - 'brandLabel', - 'productTitle', - 'productPrice', - 'productImages', - 'productDetails', - 'productPriceCurrency', - 'reviewsPage', - ]), - 'optional': new Set([ - 'productColor', - 'productSize', - 'productIcon', - 'productTagText', - 'reviewsData', - 'ctaText', - 'shippingText', - ]), -}; +/** + * Validates string length of shopping config attributes + * @param {?string} field + * @param {?string} value + * @return {!Array} + * @private + */ +function validateRequired(field, value) { + if (value == null) { + return [`${field} is required.`]; + } +} + +/** + * Validates string length of shopping config attributes + * @param {?string} field + * @param {?string} str + * @param {?number} maxLen + * @return {!Array} + * @private + */ +function validateStringLength(field, str, maxLen = 100) { + if (str != null && str.length > maxLen) { + return [ + 'Length of ' + + field + + ' exceeds max length: ' + + str.length + + ' > ' + + maxLen, + ]; + } +} + +/** + * Validates number in shopping config attributes + * @param {?string} field + * @param {?number} number + * @private + * @return {!Array} + */ +function validateNumber(field, number) { + if (isNaN(number)) { + return ['Value for field ' + field + ' is not a number ']; + } +} +/** + * Validates url of shopping config attributes + * @param {?string} field + * @param {?string} url + * @private + * @return {!Array} + */ +function validateURL(field, url) { + const urls = Array.isArray(url) ? url : [url]; + return urls.map((url) => { + try { + assertHttpsUrl(url, 'amp-story-shopping-config ' + field); + } catch (e) { + return e.message; + } + }); +} export class AmpStoryShoppingConfig extends AMP.BaseElement { /** @param {!AmpElement} element */ constructor(element) { @@ -45,96 +88,50 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { /** @private @const {?../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */ this.storeService_ = null; - const validateStringLength = [this.validateStringLength_]; - const validateNumber = [this.validateNumber_]; - const validateURL = [this.validateURL_]; - /** @private @const {!Object>} */ this.productValidationConfig_ = { /* Required Attrs */ - 'productTagId': validateStringLength, // Required. String. Keys to amp-story-shopping-tag nodes. - 'brandLabel': validateStringLength, // Required. String. - 'productTitle': validateStringLength, // Required. String. - 'productPrice': validateNumber, // Required. Number. - 'productImages': validateURL, // Required. String or array of strings. - 'productDetails': validateStringLength, // Required. String. - 'reviewsPage': validateURL, // Required if reviews-data. Links to a page where reviews can be read. - 'productPriceCurrency': validateStringLength, // Required. String. ISO 4217 currency code used to display the correct currency symbol. + 'productTagId': [validateRequired, validateStringLength], // Required. String. Keys to amp-story-shopping-tag nodes. + 'brandLabel': [validateRequired, validateStringLength], // Required. String. + 'productTitle': [validateRequired, validateStringLength], // Required. String. + 'productPrice': [validateRequired, validateNumber], // Required. Number. + 'productImages': [validateRequired, validateURL], // Required. String or array of strings. + 'productDetails': [validateRequired, validateStringLength], // Required. String. + 'reviewsPage': [validateRequired, validateURL], // Required if reviews-data. Links to a page where reviews can be read. + 'productPriceCurrency': [validateRequired, validateStringLength], // Required. String. ISO 4217 currency code used to display the correct currency symbol. /* Optional Attrs */ - 'productColor': validateStringLength, // Optional. String. - 'productSize': validateStringLength, // Optional. String. - 'productIcon': validateURL, // Optional. Links to an image. Defaults to a shopping bag icon. - 'productTagText': validateStringLength, // Optional. String. - 'reviewsData': validateURL, // Optional. Links to review data. - 'ctaText': validateNumber, // Optional. Number. Defaults to “Buy now”. Keys to a CTA text option for i18n. - 'shippingText': validateNumber, // Optional. Number. Keys to a shipping text option for i18n. Shipping text will not be rendered if the string is omitted. + 'productColor': [validateRequired, validateStringLength], // Optional. String. + 'productSize': [validateStringLength], // Optional. String. + 'productIcon': [validateURL], // Optional. Links to an image. Defaults to a shopping bag icon. + 'productTagText': [validateStringLength], // Optional. String. + 'reviewsData': [validateURL], // Optional. Links to review data. + 'ctaText': [validateNumber], // Optional. Number. Defaults to “Buy now”. Keys to a CTA text option for i18n. + 'shippingText': [validateNumber], // Optional. Number. Keys to a shipping text option for i18n. Shipping text will not be rendered if the string is omitted. }; } - - /** - * Validates shopping config Attributes - * @param {!ShoppingConfigDataDef} prouductAttrs - * @param {?string} attribValidatorType - * @private - */ - validateAttributes_(prouductAttrs, attribValidatorType = 'required') { - for (const attrib of attributeValidators[attribValidatorType]) { - if (!prouductAttrs[attrib]) { - console.log('missing ' + attribValidatorType + ' attribute ' + attrib); - } - } - } - - /** - * Validates string length of shopping config attributes - * @param {string} str - * @param {?number} maxLen - * @private - */ - validateStringLength_(str, maxLen = 100) { - if (str.length > maxLen) { - console.log( - str + ' length exceeds max length: ' + str.length + ' > ' + maxLen - ); - } - } - - /** - * Validates number in shopping config attributes - * @param {number} number - * @private - */ - validateNumber_(number) { - if (isNaN(number)) { - console.log(number + ' is not a number '); - } - } - - /** - * Validates url of shopping config attributes - * @param {string} url - * @private - */ - validateURL_(url) { - //TODO (need to check if string or araay of strings (use typeof?) for 'productImages' ) - } - /** * Validates shopping config. * @param {!ShoppingConfigDataDef} shoppingConfig * @private */ validateConfig_(shoppingConfig) { - for (const attr in shoppingConfig) { - if (attr in this.productValidationConfig_) { - /* Valid Attribute, run the function array check here */ - for (const validationFunction of this.productValidationConfig_[attr]) { - validationFunction(shoppingConfig[attr]); - } - } else { - console.log('invalid product attribute: ' + attr); - } - this.validateAttributes_(shoppingConfig); + const errors = Object.keys(this.productValidationConfig_) + .reduce((errors, k) => { + const value = shoppingConfig[k]; + const fns = this.productValidationConfig_[k]; + errors.push( + ...fns.reduce((errors, fn) => { + const localErrors = fn(k, value) || []; + errors.push(...localErrors); + return errors; + }, []) + ); + return errors; + }, []) + .filter(Boolean); + + for (const error of errors) { + this.user().warn(error); } } From 1cb969ce8d5e2fcd1ae690c7c407f86da8f59b92 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Tue, 25 Jan 2022 14:26:31 -0800 Subject: [PATCH 008/116] Added in required attributes --- examples/amp-story/amp-story-shopping.html | 42 ++++++++++++++++--- examples/amp-story/shopping/remote.json | 6 ++- .../0.1/amp-story-shopping-config.js | 12 ++++-- 3 files changed, 50 insertions(+), 10 deletions(-) diff --git a/examples/amp-story/amp-story-shopping.html b/examples/amp-story/amp-story-shopping.html index 2f437b0a2469..2536fe2879d2 100644 --- a/examples/amp-story/amp-story-shopping.html +++ b/examples/amp-story/amp-story-shopping.html @@ -59,14 +59,22 @@ "productTitle": "Hootenanny Hat", "productPrice": 799.00, "productPriceCurrency": "USD", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png", + "productImages": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png", + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "Wearing this hat makes you the life of the party!" }, { "productTagId": "sunglasses", "productTitle": "Spectacular Spectacles", "productPrice": 400.00, "productPriceCurrency": "INR", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "You can see the stars in the night sky with these sunglasses." }, { "productTagId": "backpack", @@ -74,7 +82,11 @@ "productPrice": 1000.00, "productPriceCurrency": "BRL", "productTagText": "Beastly Backpack Brews Beastly Beverages", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "This backpack has a mind of its own..." } ] } @@ -103,6 +115,10 @@ "productTitle": "Plastic Love", "productPrice": 19.00, "productPriceCurrency": "JPY", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "Vinyl for the hit J-Pop song Plastic Love." } ] } @@ -148,22 +164,36 @@ "productTagId": "hat-rtl", "productTitle": "Hootenanny Hat", "productPrice": 799.00, + "productPriceCurrency": "AED", "productTagText": " حبا حبا حبا سعادةا سعادة", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : " حبا حبا حبا سعادةا سعادة" }, { "productTagId": "sunglasses-rtl", "productTitle": "Spectacular Spectacles", "productPrice": 400.00, + "productPriceCurrency": "AED", "productTagText": "حبا حب سعادة قط حبا حب سعادة قط ", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "حبا حب سعادة قط حبا حب سعادة قط " }, { "productTagId": "backpack-rtl", "productTitle": "Beastly Backpack", "productPrice": 500.00, "productPriceCurrency": "AED", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "This backpack has a mind of its own..." } ] } diff --git a/examples/amp-story/shopping/remote.json b/examples/amp-story/shopping/remote.json index 1203d51d95af..460317c2d962 100644 --- a/examples/amp-story/shopping/remote.json +++ b/examples/amp-story/shopping/remote.json @@ -4,7 +4,11 @@ "productTagId": "city-pop", "productTitle": "Plastic Love", "productPrice": 19, - "productPriceCurrency": "JPY" + "productPriceCurrency": "JPY", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "Vinyl for the hit J-Pop song Plastic Love." } ] } diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index 450ee641153d..bc0d69dd7881 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -59,7 +59,7 @@ function validateStringLength(field, str, maxLen = 100) { * @return {!Array} */ function validateNumber(field, number) { - if (isNaN(number)) { + if (number != null && isNaN(number)) { return ['Value for field ' + field + ' is not a number ']; } } @@ -72,6 +72,11 @@ function validateNumber(field, number) { * @return {!Array} */ function validateURL(field, url) { + if (url == null) { + /* Not a Required Attribute, return.*/ + return; + } + const urls = Array.isArray(url) ? url : [url]; return urls.map((url) => { try { @@ -100,7 +105,7 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { 'reviewsPage': [validateRequired, validateURL], // Required if reviews-data. Links to a page where reviews can be read. 'productPriceCurrency': [validateRequired, validateStringLength], // Required. String. ISO 4217 currency code used to display the correct currency symbol. /* Optional Attrs */ - 'productColor': [validateRequired, validateStringLength], // Optional. String. + 'productColor': [validateStringLength], // Optional. String. 'productSize': [validateStringLength], // Optional. String. 'productIcon': [validateURL], // Optional. Links to an image. Defaults to a shopping bag icon. 'productTagText': [validateStringLength], // Optional. String. @@ -119,6 +124,7 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { .reduce((errors, k) => { const value = shoppingConfig[k]; const fns = this.productValidationConfig_[k]; + errors.push( ...fns.reduce((errors, fn) => { const localErrors = fn(k, value) || []; @@ -131,7 +137,7 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { .filter(Boolean); for (const error of errors) { - this.user().warn(error); + this.user().warn('ERROR', error); } } From 2d0b837fb33c2a68a21b74bcb4978bc43c85d3ba Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Wed, 26 Jan 2022 19:20:38 -0800 Subject: [PATCH 009/116] added correct unit tests --- .../0.1/test/test-amp-story-shopping-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index 3662631802fe..fe045340f620 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -73,7 +73,7 @@ describes.realWin( element.setAttribute('src', exampleURL); const expectedRemoteResult = JSON.parse( - '{"city-pop":{"productTagId":"city-pop","productTitle":"Plastic Love","productPrice": 19, "productPriceCurrency": "JPY"}}' + '{"city-pop":{"productTagId":"city-pop","productTitle":"Plastic Love","productPrice": 19, "productPriceCurrency": "JPY", "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails": "Vinyl for the hit J-Pop song Plastic Love."}}' ); expect(storeService.get(StateProperty.SHOPPING_DATA)).to.deep.eql( From ca49d981fd3fc9edc49af950ba155ee0038eab7f Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Wed, 26 Jan 2022 19:46:42 -0800 Subject: [PATCH 010/116] added correct attribtues to the visual diff tests --- .../amp-story/amp-story-shopping-lang-de.html | 28 +++++++++++-- .../amp-story/amp-story-shopping.html | 42 ++++++++++++++++--- 2 files changed, 61 insertions(+), 9 deletions(-) diff --git a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html index 7c09d27f22f9..ca05c3bac6d3 100644 --- a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html +++ b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html @@ -55,14 +55,22 @@ "productTitle": "Hootenanny Hat", "productPrice": 123456.789, "productPriceCurrency": "USD", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png", + "productImages": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png", + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "Wearing this hat makes you the life of the party!" }, { "productTagId": "sunglasses", "productTitle": "Spectacular Spectacles", "productPrice": 123456.789, "productPriceCurrency": "INR", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "You can see the stars in the night sky with these sunglasses." }, { "productTagId": "backpack", @@ -70,13 +78,23 @@ "productPrice": 123456.789, "productPriceCurrency": "BRL", "productTagText": "Beastly Backpack", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "This backpack has a mind of its own...", "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" }, { "productTagId": "euro-dance", "productTitle": "Dolphin Dance", "productPrice": 123456.789, - "productPriceCurrency": "EUR" + "productPriceCurrency": "EUR", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "Creator's Favorite", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" } ] } @@ -108,6 +126,10 @@ "productTitle": "Plastic Love", "productPrice": 19, "productPriceCurrency": "JPY", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "Vinyl for the hit J-Pop song Plastic Love." } ] } diff --git a/examples/visual-tests/amp-story/amp-story-shopping.html b/examples/visual-tests/amp-story/amp-story-shopping.html index 2f437b0a2469..2536fe2879d2 100644 --- a/examples/visual-tests/amp-story/amp-story-shopping.html +++ b/examples/visual-tests/amp-story/amp-story-shopping.html @@ -59,14 +59,22 @@ "productTitle": "Hootenanny Hat", "productPrice": 799.00, "productPriceCurrency": "USD", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png", + "productImages": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png", + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "Wearing this hat makes you the life of the party!" }, { "productTagId": "sunglasses", "productTitle": "Spectacular Spectacles", "productPrice": 400.00, "productPriceCurrency": "INR", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "You can see the stars in the night sky with these sunglasses." }, { "productTagId": "backpack", @@ -74,7 +82,11 @@ "productPrice": 1000.00, "productPriceCurrency": "BRL", "productTagText": "Beastly Backpack Brews Beastly Beverages", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "This backpack has a mind of its own..." } ] } @@ -103,6 +115,10 @@ "productTitle": "Plastic Love", "productPrice": 19.00, "productPriceCurrency": "JPY", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "Vinyl for the hit J-Pop song Plastic Love." } ] } @@ -148,22 +164,36 @@ "productTagId": "hat-rtl", "productTitle": "Hootenanny Hat", "productPrice": 799.00, + "productPriceCurrency": "AED", "productTagText": " حبا حبا حبا سعادةا سعادة", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : " حبا حبا حبا سعادةا سعادة" }, { "productTagId": "sunglasses-rtl", "productTitle": "Spectacular Spectacles", "productPrice": 400.00, + "productPriceCurrency": "AED", "productTagText": "حبا حب سعادة قط حبا حب سعادة قط ", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "حبا حب سعادة قط حبا حب سعادة قط " }, { "productTagId": "backpack-rtl", "productTitle": "Beastly Backpack", "productPrice": 500.00, "productPriceCurrency": "AED", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png", + "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "This backpack has a mind of its own..." } ] } From 5154d0b1ee2ab1cde4e84d53f62ca2bd0a098871 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Wed, 26 Jan 2022 20:11:25 -0800 Subject: [PATCH 011/116] fixed JSON formatting of remote config --- examples/amp-story/shopping/remote.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/examples/amp-story/shopping/remote.json b/examples/amp-story/shopping/remote.json index 460317c2d962..913b7992eb68 100644 --- a/examples/amp-story/shopping/remote.json +++ b/examples/amp-story/shopping/remote.json @@ -5,10 +5,13 @@ "productTitle": "Plastic Love", "productPrice": 19, "productPriceCurrency": "JPY", - "productImages": ["/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png","/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"], + "productImages": [ + "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png", + "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" + ], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", - "productDetails" : "Vinyl for the hit J-Pop song Plastic Love." + "productDetails": "Vinyl for the hit J-Pop song Plastic Love." } ] } From fca4c718270c4fd54f689a6b3eb5ddeecf68061f Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Fri, 28 Jan 2022 02:22:29 -0800 Subject: [PATCH 012/116] finished writing unit tests for config --- .../0.1/amp-story-shopping-config.js | 3 +- .../test/test-amp-story-shopping-config.js | 88 +++++++++++++++++-- 2 files changed, 84 insertions(+), 7 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index bc0d69dd7881..052d508ec035 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -60,7 +60,7 @@ function validateStringLength(field, str, maxLen = 100) { */ function validateNumber(field, number) { if (number != null && isNaN(number)) { - return ['Value for field ' + field + ' is not a number ']; + return ['Value for field ' + field + ' is not a number']; } } @@ -78,6 +78,7 @@ function validateURL(field, url) { } const urls = Array.isArray(url) ? url : [url]; + return urls.map((url) => { try { assertHttpsUrl(url, 'amp-story-shopping-config ' + field); diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index fe045340f620..702b0a9bd1de 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -2,6 +2,8 @@ import {createElementWithAttributes} from '#core/dom'; import {Layout_Enum} from '#core/dom/layout'; import '../amp-story-shopping'; +import {user} from '#utils/log'; + import * as configData from '../../../../examples/amp-story/shopping/remote.json'; import {registerServiceBuilder} from '../../../../src/service-helpers'; import { @@ -22,18 +24,18 @@ describes.realWin( let element; let shoppingConfig; let storeService; + let userWarnStub; beforeEach(async () => { win = env.win; storeService = getStoreService(win); + userWarnStub = env.sandbox.stub(user(), 'warn'); registerServiceBuilder(win, 'story-store', function () { return storeService; }); - - await createAmpStoryShoppingConfig(); }); - async function createAmpStoryShoppingConfig() { + async function createAmpStoryShoppingConfig(optConfigData = configData) { const pageEl = win.document.createElement('amp-story-page'); pageEl.id = 'page1'; element = createElementWithAttributes( @@ -44,7 +46,7 @@ describes.realWin( element.innerHTML = ` `; @@ -54,11 +56,13 @@ describes.realWin( shoppingConfig = await element.getImpl(); } - it('should build shopping config component', () => { + it('should build shopping config component', async () => { + await createAmpStoryShoppingConfig(); expect(() => shoppingConfig.layoutCallback()).to.not.throw(); }); it('throws on no config', async () => { + await createAmpStoryShoppingConfig(); expectAsyncConsoleError(async () => { expect(async () => { await shoppingConfig.buildCallback(); @@ -69,6 +73,7 @@ describes.realWin( }); it('does use remote config when src attribute is provided', async () => { + await createAmpStoryShoppingConfig(); const exampleURL = 'foo.example'; element.setAttribute('src', exampleURL); @@ -82,6 +87,7 @@ describes.realWin( }); it('does use inline config when remote src is invalid', async () => { + await createAmpStoryShoppingConfig(); const exampleURL = 'invalidRemoteURL'; element.setAttribute('src', exampleURL); @@ -90,7 +96,8 @@ describes.realWin( }); }); - it('Test Invalid Remote Config URL', async () => { + it('test invalid remote config url', async () => { + await createAmpStoryShoppingConfig(); const exampleURL = 'invalidRemoteURL'; element.setAttribute('src', exampleURL); expectAsyncConsoleError(async () => { @@ -103,5 +110,74 @@ describes.realWin( expect(shoppingConfig.isLayoutSupported(Layout_Enum.NODISPLAY)).to.be .true; }); + + it('test config string too long', async () => { + expectAsyncConsoleError(userWarnStub, 1); + const invalidConfig = { + 'items': [ + { + 'productTagId': 'city-pop', + 'productTitle': + 'Mariya Takeuchi (竹内 まりや, Takeuchi Mariya, born 20 March 1955) is a Japanese singer and songwriter. Regarded as an influential figure in the city pop genre, she is one of the best-selling music artists in Japan, having sold over 16 million records, and has received several accolades. Takeuchi was born in Taisha, Hikawa district, now the city of Izumo, Shimane, and attended Keio University. She made her singing debut after signing with the RCA record label in 1978, with whom she released her debut album Beginning, which peaked at No. 17 on Oricon Charts. She then released four albums between 1979 and 1981, all of which obtained commercial success, including the 1980 album Love Songs, which became her first work to peak at No. 1 on Oricon Charts. Takeuchi then announced she would go on a temporary hiatus in 1981, terminating her contract with RCA records. Three years later, Takeuchi and her husband Tatsuro Yamashita signed with Moon Records, and she made her comeback with her sixth studio album Variety in 1984, which was released internationally and shot her to mainstream success, and peaked at No. 1 on Oricon Charts. The track "Plastic Love", which was released in 1985 as a single, became a surprise hit outside of Japan in 2017 after a YouTube upload of the song went viral. The song has since attained a cult following and is seen as the staple in a revival of interest in city pop in the late 2010s.', + /* Very, Very, Very long string value - will not pass string length test */ + 'productPrice': 19, + 'productPriceCurrency': 'JPY', + 'productImages': [ + '/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png', + '/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png', + ], + 'reviewsPage': 'https://store.google.com/jp/?hl=ja', + 'brandLabel': 'Google', + 'productDetails': 'Vinyl for the hit J-Pop song Plastic Love.', + }, + ], + }; + + await createAmpStoryShoppingConfig(invalidConfig); + }); + + it('test config not a number', async () => { + expectAsyncConsoleError(userWarnStub, 1); + const invalidConfig = { + 'items': [ + { + 'productTagId': 'city-pop', + 'productTitle': 'Plastic Love', + 'productPrice': 'two dozen watermelons', + /* Not an actual price */ + 'productPriceCurrency': 'JPY', + 'productImages': [ + '/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png', + '/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png', + ], + 'reviewsPage': 'https://store.google.com/jp/?hl=ja', + 'brandLabel': 'Google', + 'productDetails': 'Vinyl for the hit J-Pop song Plastic Love.', + }, + ], + }; + + await createAmpStoryShoppingConfig(invalidConfig); + }); + + it('test config invalid url array', async () => { + expectAsyncConsoleError(userWarnStub, 1); + const invalidConfig = { + 'items': [ + { + 'productTagId': 'city-pop', + 'productTitle': 'Plastic Love', + 'productPrice': 19, + 'productPriceCurrency': 'JPY', + 'productImages': ['http://pizazz', 'http://zapp'], + 'reviewsPage': 'http://zeppelinzero.com', + 'brandLabel': 'Google', + 'productDetails': 'Vinyl for the hit J-Pop song Plastic Love.', + }, + ], + }; + + await createAmpStoryShoppingConfig(invalidConfig); + }); } ); From 304deccb7f9b38f08d1f10c7ed66665776f93ec5 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Fri, 28 Jan 2022 21:43:49 -0800 Subject: [PATCH 013/116] added camelCase --- examples/amp-story/amp-story-shopping.html | 118 ++++++++--------- examples/amp-story/shopping/remote.json | 12 +- examples/analytics-vendors.amp.html | 2 +- .../amp-story/amp-story-shopping-lang-de.html | 120 +++++++++--------- .../amp-story/amp-story-shopping.html | 120 +++++++++--------- .../0.1/amp-story-shopping-attachment.js | 10 +- .../0.1/amp-story-shopping-tag.css | 2 +- .../0.1/amp-story-shopping-tag.js | 6 +- .../test-amp-story-shopping-attachment.js | 12 +- .../test/test-amp-story-shopping-config.js | 2 +- 10 files changed, 202 insertions(+), 202 deletions(-) diff --git a/examples/amp-story/amp-story-shopping.html b/examples/amp-story/amp-story-shopping.html index dfb2f2e9a495..ff870cb1f62a 100644 --- a/examples/amp-story/amp-story-shopping.html +++ b/examples/amp-story/amp-story-shopping.html @@ -48,47 +48,47 @@ { "items" : [ { - "product-tag-id": "lamp", - "product-title": "Brass Lamp", - "product-brand": "Lamp Co", - "product-price": 799.00, - "product-price-currency": "USD", - "product-images": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], + "productTagId": "lamp", + "productTitle": "Brass Lamp", + "productBrand": "Lamp Co", + "productPrice": 799.00, + "productPriceCurrency": "USD", + "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "A lamp made out of brass.", }, { - "product-tag-id": "art", - "product-title": "Abstract Art", - "product-brand": "V. Artsy", - "product-price": 1200.00, - "product-price-currency": "INR", - "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], + "productTagId": "art", + "productTitle": "Abstract Art", + "productBrand": "V. Artsy", + "productPrice": 1200.00, + "productPriceCurrency": "INR", + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "Abstract Art.", }, { - "product-tag-id": "chair", - "product-title": "Yellow chair", - "product-brand": "Chair Co.", - "product-price": 1000.00, - "product-price-currency": "BRL", - "product-tag-text": "The perfectly imperfect yellow chair", - "product-images": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], + "productTagId": "chair", + "productTitle": "Yellow chair", + "productBrand": "Chair Co.", + "productPrice": 1000.00, + "productPriceCurrency": "BRL", + "productTagText": "The perfectly imperfect yellow chair", + "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "A Yellow Chair. Stylish and radian like the morning sun, but not very comfy.", }, { - "product-tag-id": "flowers", - "product-title": "Flowers", - "product-brand": "Very Long Flower Company Name", - "product-price": 10.00, - "product-price-currency": "USD", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "product-images": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], + "productTagId": "flowers", + "productTitle": "Flowers", + "productBrand": "Very Long Flower Company Name", + "productPrice": 10.00, + "productPriceCurrency": "USD", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", + "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "This flower company has been in business for ages.", @@ -117,12 +117,12 @@ { "items" : [ { - "product-tag-id": "art", - "product-title": "Abstract Art", - "product-brand": "V. Artsy", - "product-price": 1200.00, - "product-price-currency": "JPY", - "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], + "productTagId": "art", + "productTitle": "Abstract Art", + "productBrand": "V. Artsy", + "productPrice": 1200.00, + "productPriceCurrency": "JPY", + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "Super Abstract Art." @@ -169,48 +169,48 @@ { "items" : [ { - "product-tag-id": "lamp-rtl", - "product-title": "Brass Lamp", - "product-brand": "Lamp Co", - "product-price": 799.00, - "product-price-currency": "AED", - "product-tag-text": " حبا حبا حبا سعادةا سعادة", - "product-images": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], + "productTagId": "lamp-rtl", + "productTitle": "Brass Lamp", + "productBrand": "Lamp Co", + "productPrice": 799.00, + "productPriceCurrency": "AED", + "productTagText": " حبا حبا حبا سعادةا سعادة", + "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "product-tag-id": "art-rtl", - "product-title": "Abstract Art", - "product-brand": "V. Artsy", - "product-price-currency": "AED", - "product-price": 1200.00, - "product-tag-text": "حبا حب سعادة قط حبا حب سعادة قط ", - "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], + "productTagId": "art-rtl", + "productTitle": "Abstract Art", + "productBrand": "V. Artsy", + "productPriceCurrency": "AED", + "productPrice": 1200.00, + "productTagText": "حبا حب سعادة قط حبا حب سعادة قط ", + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "product-tag-id": "chair-rtl", - "product-title": "Yellow chair", - "product-brand": "Chair Co.", - "product-price": 1000.00, - "product-price-currency": "AED", - "product-images": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], + "productTagId": "chair-rtl", + "productTitle": "Yellow chair", + "productBrand": "Chair Co.", + "productPrice": 1000.00, + "productPriceCurrency": "AED", + "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "product-tag-id": "flowers-rtl", - "product-title": "Flowers", - "product-brand": "Very Long Flower Company Name", - "product-price": 10.00, - "product-price-currency": "AED", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "product-images": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], + "productTagId": "flowers-rtl", + "productTitle": "Flowers", + "productBrand": "Very Long Flower Company Name", + "productPrice": 10.00, + "productPriceCurrency": "AED", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", + "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "حبا حبا حبا سعادةا سعادة" diff --git a/examples/amp-story/shopping/remote.json b/examples/amp-story/shopping/remote.json index 8b706b825b5e..617580b1bb8f 100644 --- a/examples/amp-story/shopping/remote.json +++ b/examples/amp-story/shopping/remote.json @@ -1,12 +1,12 @@ { "items": [ { - "product-tag-id": "art", - "product-title": "Abstract Art", - "product-brand": "V. Artsy", - "product-price": 1200.0, - "product-price-currency": "JPY", - "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], + "productTagId": "art", + "productTitle": "Abstract Art", + "productBrand": "V. Artsy", + "productPrice": 1200.0, + "productPriceCurrency": "JPY", + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails": "Vinyl for the hit J-Pop song Plastic Love." diff --git a/examples/analytics-vendors.amp.html b/examples/analytics-vendors.amp.html index ea6b787dbdd9..f030b4d4e157 100644 --- a/examples/analytics-vendors.amp.html +++ b/examples/analytics-vendors.amp.html @@ -524,7 +524,7 @@ "externalId": "product-id", "sku": "product-sku", "name": "product-name", - "brand": "product-brand", + "brand": "productBrand", "category": "product-category", "variant": "product-variant", "price": 1000, diff --git a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html index 930ee051937f..674ea46ada78 100644 --- a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html +++ b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html @@ -49,47 +49,47 @@ { "items" : [ { - "product-tag-id": "lamp", - "product-title": "Brass Lamp", - "product-brand": "Lamp Co", - "product-price": 799.00, - "product-price-currency": "USD", - "product-images": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], + "productTagId": "lamp", + "productTitle": "Brass Lamp", + "productBrand": "Lamp Co", + "productPrice": 799.00, + "productPriceCurrency": "USD", + "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], "brandLabel": "Google", "productDetails" : "Creator's Favorite Brass Lamp", "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" }, { - "product-tag-id": "art", - "product-title": "Abstract Art", - "product-brand": "V. Artsy", - "product-price": 1200.00, - "product-price-currency": "INR", - "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], + "productTagId": "art", + "productTitle": "Abstract Art", + "productBrand": "V. Artsy", + "productPrice": 1200.00, + "productPriceCurrency": "INR", + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], "brandLabel": "Google", "productDetails" : "Creator's Favorite Art", "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" }, { - "product-tag-id": "chair", - "product-title": "Yellow chair", - "product-brand": "Chair Co.", - "product-price": 1000.00, - "product-price-currency": "BRL", - "product-tag-text": "The perfectly imperfect yellow chair", - "product-images": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], + "productTagId": "chair", + "productTitle": "Yellow chair", + "productBrand": "Chair Co.", + "productPrice": 1000.00, + "productPriceCurrency": "BRL", + "productTagText": "The perfectly imperfect yellow chair", + "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], "brandLabel": "Google", "productDetails" : "Creator's Favorite Chair", "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" }, { - "product-tag-id": "flowers", - "product-title": "Flowers", - "product-brand": "Very Long Flower Company Name", - "product-price": 10.00, - "product-price-currency": "USD", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "product-images": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], + "productTagId": "flowers", + "productTitle": "Flowers", + "productBrand": "Very Long Flower Company Name", + "productPrice": 10.00, + "productPriceCurrency": "USD", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", + "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], "brandLabel": "Google", "productDetails" : "Creator's Favorite Flowers", "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" @@ -118,12 +118,12 @@ { "items" : [ { - "product-tag-id": "art", - "product-title": "Abstract Art", - "product-brand": "V. Artsy", - "product-price": 1200.00, - "product-price-currency": "JPY", - "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], + "productTagId": "art", + "productTitle": "Abstract Art", + "productBrand": "V. Artsy", + "productPrice": 1200.00, + "productPriceCurrency": "JPY", + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "Abstract Art.", @@ -170,40 +170,40 @@ { "items" : [ { - "product-tag-id": "lamp-rtl", - "product-title": "Brass Lamp", - "product-brand": "Lamp Co", - "product-price": 799.00, - "product-price-currency": "AED", - "product-tag-text": " حبا حبا حبا سعادةا سعادة", - "product-images": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"] + "productTagId": "lamp-rtl", + "productTitle": "Brass Lamp", + "productBrand": "Lamp Co", + "productPrice": 799.00, + "productPriceCurrency": "AED", + "productTagText": " حبا حبا حبا سعادةا سعادة", + "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"] }, { - "product-tag-id": "art-rtl", - "product-title": "Abstract Art", - "product-brand": "V. Artsy", - "product-price-currency": "AED", - "product-price": 1200.00, - "product-tag-text": "حبا حب سعادة قط حبا حب سعادة قط ", - "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] + "productTagId": "art-rtl", + "productTitle": "Abstract Art", + "productBrand": "V. Artsy", + "productPriceCurrency": "AED", + "productPrice": 1200.00, + "productTagText": "حبا حب سعادة قط حبا حب سعادة قط ", + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] }, { - "product-tag-id": "chair-rtl", - "product-title": "Yellow chair", - "product-brand": "Chair Co.", - "product-price": 1000.00, - "product-price-currency": "AED", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png", - "product-images": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"] + "productTagId": "chair-rtl", + "productTitle": "Yellow chair", + "productBrand": "Chair Co.", + "productPrice": 1000.00, + "productPriceCurrency": "AED", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png", + "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"] }, { - "product-tag-id": "flowers-rtl", - "product-title": "Flowers", - "product-brand": "Very Long Flower Company Name", - "product-price": 10.00, - "product-price-currency": "AED", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "product-images": ["https://source.unsplash.com/SavQfLRm4Do/500x500"] + "productTagId": "flowers-rtl", + "productTitle": "Flowers", + "productBrand": "Very Long Flower Company Name", + "productPrice": 10.00, + "productPriceCurrency": "AED", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", + "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"] } ] } diff --git a/examples/visual-tests/amp-story/amp-story-shopping.html b/examples/visual-tests/amp-story/amp-story-shopping.html index 576e5cfe3597..1ac9bfaea9e9 100644 --- a/examples/visual-tests/amp-story/amp-story-shopping.html +++ b/examples/visual-tests/amp-story/amp-story-shopping.html @@ -47,47 +47,47 @@ { "items" : [ { - "product-tag-id": "lamp", - "product-title": "Brass Lamp", - "product-brand": "Lamp Co", - "product-price": 799.00, - "product-price-currency": "USD", - "product-images": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], + "productTagId": "lamp", + "productTitle": "Brass Lamp", + "productBrand": "Lamp Co", + "productPrice": 799.00, + "productPriceCurrency": "USD", + "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "Brass Lamp is a classic lamp. It is a great way to add a touch of class to your home." }, { - "product-tag-id": "art", - "product-title": "Abstract Art", - "product-brand": "V. Artsy", - "product-price": 1200.00, - "product-price-currency": "INR", - "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], + "productTagId": "art", + "productTitle": "Abstract Art", + "productBrand": "V. Artsy", + "productPrice": 1200.00, + "productPriceCurrency": "INR", + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "Abstract Art for the avant garde artist." }, { - "product-tag-id": "chair", - "product-title": "Yellow chair", - "product-brand": "Chair Co.", - "product-price": 1000.00, - "product-price-currency": "BRL", - "product-tag-text": "The perfectly imperfect yellow chair", - "product-images": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], + "productTagId": "chair", + "productTitle": "Yellow chair", + "productBrand": "Chair Co.", + "productPrice": 1000.00, + "productPriceCurrency": "BRL", + "productTagText": "The perfectly imperfect yellow chair", + "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "Bright, like the radiant monring sun, this chair is a must have!" }, { - "product-tag-id": "flowers", - "product-title": "Flowers", - "product-brand": "Very Long Flower Company Name", - "product-price": 10.00, - "product-price-currency": "USD", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "product-images": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], + "productTagId": "flowers", + "productTitle": "Flowers", + "productBrand": "Very Long Flower Company Name", + "productPrice": 10.00, + "productPriceCurrency": "USD", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", + "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "These flowers are so pretty!" @@ -116,12 +116,12 @@ { "items" : [ { - "product-tag-id": "art", - "product-title": "Abstract Art", - "product-brand": "V. Artsy", - "product-price": 1200.00, - "product-price-currency": "JPY", - "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], + "productTagId": "art", + "productTitle": "Abstract Art", + "productBrand": "V. Artsy", + "productPrice": 1200.00, + "productPriceCurrency": "JPY", + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "Abstract Art for the avant garde artist." @@ -168,49 +168,49 @@ { "items" : [ { - "product-tag-id": "lamp-rtl", - "product-title": "Brass Lamp", - "product-brand": "Lamp Co", - "product-price": 799.00, - "product-price-currency": "AED", - "product-tag-text": " حبا حبا حبا سعادةا سعادة", - "product-images": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], + "productTagId": "lamp-rtl", + "productTitle": "Brass Lamp", + "productBrand": "Lamp Co", + "productPrice": 799.00, + "productPriceCurrency": "AED", + "productTagText": " حبا حبا حبا سعادةا سعادة", + "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "product-tag-id": "art-rtl", - "product-title": "Abstract Art", - "product-brand": "V. Artsy", - "product-price-currency": "AED", - "product-price": 1200.00, - "product-tag-text": "حبا حب سعادة قط حبا حب سعادة قط", - "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], + "productTagId": "art-rtl", + "productTitle": "Abstract Art", + "productBrand": "V. Artsy", + "productPriceCurrency": "AED", + "productPrice": 1200.00, + "productTagText": "حبا حب سعادة قط حبا حب سعادة قط", + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "product-tag-id": "chair-rtl", - "product-title": "Yellow chair", - "product-brand": "Chair Co.", - "product-price": 1000.00, - "product-price-currency": "AED", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png", - "product-images": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], + "productTagId": "chair-rtl", + "productTitle": "Yellow chair", + "productBrand": "Chair Co.", + "productPrice": 1000.00, + "productPriceCurrency": "AED", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png", + "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "product-tag-id": "flowers-rtl", - "product-title": "Flowers", - "product-brand": "Very Long Flower Company Name", - "product-price": 10.00, - "product-price-currency": "AED", - "product-icon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "product-images": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], + "productTagId": "flowers-rtl", + "productTitle": "Flowers", + "productBrand": "Very Long Flower Company Name", + "productPrice": 10.00, + "productPriceCurrency": "AED", + "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", + "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "حبا حبا حبا سعادةا سعادة" diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js index d9c6894763aa..b4eed0f63fd8 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js @@ -132,20 +132,20 @@ export class AmpStoryShoppingAttachment extends AMP.BaseElement {
- {data['product-brand']} + {data['productBrand']}
- {data['product-title']} + {data['productTitle']}
{formatI18nNumber( this.localizationService_, this.element, - data['product-price-currency'], - data['product-price'] + data['productPriceCurrency'], + data['productPrice'] )}
diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css index e519f5dd4876..4ee227a0a5ee 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css @@ -14,7 +14,7 @@ amp-story-shopping-tag { --i-amphtml-shopping-tag-backdrop-filter: blur(20px); } -.amp-story-shopping-product-tag-text { +.amp-story-shopping-productTagText { font-weight: 600 !important; font-size: 11px !important; line-height: 15.4px !important; diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js index 98a465a3ccbd..756abf9d40ca 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js @@ -159,15 +159,15 @@ export class AmpStoryShoppingTag extends AMP.BaseElement { > {(this.tagData_['productTagText'] && ( - + {this.tagData_['productTagText']} )) || formatI18nNumber( this.localizationService_, this.element, - this.tagData_['product-price-currency'], - this.tagData_['product-price'] + this.tagData_['productPriceCurrency'], + this.tagData_['productPrice'] )} diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-attachment.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-attachment.js index 680e5fd9e51a..4f7149aea713 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-attachment.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-attachment.js @@ -69,12 +69,12 @@ describes.realWin( async function dispatchTestShoppingData() { const shoppingData = { 'lamp': { - 'product-tag-id': 'lamp', - 'product-title': 'Brass Lamp', - 'product-brand': 'Lamp Co', - 'product-price': 799.0, - 'product-price-currency': 'USD', - 'product-images': ['https://source.unsplash.com/Ry9WBo3qmoc/500x500'], + 'productTagId': 'lamp', + 'productTitle': 'Brass Lamp', + 'productBrand': 'Lamp Co', + 'productPrice': 799.0, + 'productPriceCurrency': 'USD', + 'productImages': ['https://source.unsplash.com/Ry9WBo3qmoc/500x500'], }, }; storeService.dispatch(Action.CHANGE_PAGE, { diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index f49f28c85a61..8428c5b129d6 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -78,7 +78,7 @@ describes.realWin( element.setAttribute('src', exampleURL); const expectedRemoteResult = JSON.parse( - '{"art":{"product-tag-id": "art","product-title": "Abstract Art","product-brand": "V. Artsy","product-price": 1200.0,"product-price-currency": "JPY","product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"]}}' + '{"art":{"productTagId": "art","productTitle": "Abstract Art","productBrand": "V. Artsy","productPrice": 1200.0,"productPriceCurrency": "JPY","productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"]}}' ); expect(storeService.get(StateProperty.SHOPPING_DATA)).to.deep.eql( From 8972268c9e540ee91a1723a478bd516b6361aa56 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Fri, 28 Jan 2022 22:06:22 -0800 Subject: [PATCH 014/116] fixed merge conflicts --- examples/amp-story/amp-story-shopping.html | 36 ++++++++--------- .../amp-story/amp-story-shopping-lang-de.html | 39 ++++++++++++------- .../0.1/amp-story-shopping-config.js | 2 - 3 files changed, 44 insertions(+), 33 deletions(-) diff --git a/examples/amp-story/amp-story-shopping.html b/examples/amp-story/amp-story-shopping.html index ff870cb1f62a..7fb620f5cb28 100644 --- a/examples/amp-story/amp-story-shopping.html +++ b/examples/amp-story/amp-story-shopping.html @@ -56,7 +56,7 @@ "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", - "productDetails" : "A lamp made out of brass.", + "productDetails": "A lamp made out of brass." }, { "productTagId": "art", @@ -67,7 +67,7 @@ "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", - "productDetails" : "Abstract Art.", + "productDetails" : "Abstract Art." }, { "productTagId": "chair", @@ -79,7 +79,7 @@ "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", - "productDetails" : "A Yellow Chair. Stylish and radian like the morning sun, but not very comfy.", + "productDetails" : "A Yellow Chair. Stylish and radian like the morning sun, but not very comfy." }, { "productTagId": "flowers", @@ -91,7 +91,7 @@ "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", - "productDetails" : "This flower company has been in business for ages.", + "productDetails" : "This flower company has been in business for ages." } ] } @@ -116,17 +116,17 @@ @@ -202,8 +202,8 @@ "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "حبا حبا حبا سعادةا سعادة" - }, - { + }, + { "productTagId": "flowers-rtl", "productTitle": "Flowers", "productBrand": "Very Long Flower Company Name", @@ -214,7 +214,7 @@ "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "حبا حبا حبا سعادةا سعادة" - } + } ] } diff --git a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html index 674ea46ada78..59ea6e9d7fc6 100644 --- a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html +++ b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html @@ -55,9 +55,9 @@ "productPrice": 799.00, "productPriceCurrency": "USD", "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", - "productDetails" : "Creator's Favorite Brass Lamp", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" + "productDetails" : "Creator's Favorite Brass Lamp" }, { "productTagId": "art", @@ -66,9 +66,9 @@ "productPrice": 1200.00, "productPriceCurrency": "INR", "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", - "productDetails" : "Creator's Favorite Art", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" + "productDetails" : "Creator's Favorite Art" }, { "productTagId": "chair", @@ -78,9 +78,9 @@ "productPriceCurrency": "BRL", "productTagText": "The perfectly imperfect yellow chair", "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", - "productDetails" : "Creator's Favorite Chair", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" + "productDetails" : "Creator's Favorite Chair" }, { "productTagId": "flowers", @@ -90,9 +90,10 @@ "productPriceCurrency": "USD", "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", "productDetails" : "Creator's Favorite Flowers", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" + "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png" } ] } @@ -126,7 +127,7 @@ "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], "reviewsPage": "https://store.google.com/jp/?hl=ja", "brandLabel": "Google", - "productDetails" : "Abstract Art.", + "productDetails" : "Abstract Art." }, ] } @@ -176,7 +177,10 @@ "productPrice": 799.00, "productPriceCurrency": "AED", "productTagText": " حبا حبا حبا سعادةا سعادة", - "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"] + "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { "productTagId": "art-rtl", @@ -185,7 +189,10 @@ "productPriceCurrency": "AED", "productPrice": 1200.00, "productTagText": "حبا حب سعادة قط حبا حب سعادة قط ", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { "productTagId": "chair-rtl", @@ -193,8 +200,11 @@ "productBrand": "Chair Co.", "productPrice": 1000.00, "productPriceCurrency": "AED", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png", - "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"] + "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", + "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { "productTagId": "flowers-rtl", @@ -203,7 +213,10 @@ "productPrice": 10.00, "productPriceCurrency": "AED", "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"] + "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], + "reviewsPage": "https://store.google.com/jp/?hl=ja", + "brandLabel": "Google", + "productDetails" : "حبا حبا حبا سعادةا سعادة" } ] } diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index 052d508ec035..28dea8e302aa 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -125,7 +125,6 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { .reduce((errors, k) => { const value = shoppingConfig[k]; const fns = this.productValidationConfig_[k]; - errors.push( ...fns.reduce((errors, fn) => { const localErrors = fn(k, value) || []; @@ -136,7 +135,6 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { return errors; }, []) .filter(Boolean); - for (const error of errors) { this.user().warn('ERROR', error); } From 371b63a42eaf38c11eace2d068dabd5eb98be76b Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Fri, 28 Jan 2022 22:10:49 -0800 Subject: [PATCH 015/116] fixed unit test --- .../0.1/test/test-amp-story-shopping-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index 8428c5b129d6..ea541b4c41fd 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -78,7 +78,7 @@ describes.realWin( element.setAttribute('src', exampleURL); const expectedRemoteResult = JSON.parse( - '{"art":{"productTagId": "art","productTitle": "Abstract Art","productBrand": "V. Artsy","productPrice": 1200.0,"productPriceCurrency": "JPY","productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"]}}' + '{"art":{"productTagId": "art","productTitle": "Abstract Art","productBrand": "V. Artsy","productPrice": 1200.0,"productPriceCurrency": "JPY","productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"],"reviewsPage": "https://store.google.com/jp/?hl=ja","brandLabel": "Google","productDetails": "Vinyl for the hit J-Pop song Plastic Love."}}' ); expect(storeService.get(StateProperty.SHOPPING_DATA)).to.deep.eql( From 27439de4717ab2fdbc34761826e9cf3ff111c2f5 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Mon, 31 Jan 2022 12:45:35 -0800 Subject: [PATCH 016/116] changed producttagid to prodcutId --- examples/amp-story/amp-story-shopping.html | 18 +++++++++--------- examples/amp-story/shopping/remote.json | 2 +- .../amp-story/amp-story-shopping-lang-de.html | 18 +++++++++--------- .../amp-story/amp-story-shopping.html | 18 +++++++++--------- .../0.1/amp-story-shopping-config.js | 4 ++-- .../test/test-amp-story-shopping-attachment.js | 2 +- .../0.1/test/test-amp-story-shopping-config.js | 8 ++++---- .../0.1/test/test-amp-story-shopping-tag.js | 2 +- .../amp-story/1.0/amp-story-store-service.js | 2 +- 9 files changed, 37 insertions(+), 37 deletions(-) diff --git a/examples/amp-story/amp-story-shopping.html b/examples/amp-story/amp-story-shopping.html index 7fb620f5cb28..260fd24d945e 100644 --- a/examples/amp-story/amp-story-shopping.html +++ b/examples/amp-story/amp-story-shopping.html @@ -48,7 +48,7 @@ { "items" : [ { - "productTagId": "lamp", + "productId": "lamp", "productTitle": "Brass Lamp", "productBrand": "Lamp Co", "productPrice": 799.00, @@ -59,7 +59,7 @@ "productDetails": "A lamp made out of brass." }, { - "productTagId": "art", + "productId": "art", "productTitle": "Abstract Art", "productBrand": "V. Artsy", "productPrice": 1200.00, @@ -70,7 +70,7 @@ "productDetails" : "Abstract Art." }, { - "productTagId": "chair", + "productId": "chair", "productTitle": "Yellow chair", "productBrand": "Chair Co.", "productPrice": 1000.00, @@ -82,7 +82,7 @@ "productDetails" : "A Yellow Chair. Stylish and radian like the morning sun, but not very comfy." }, { - "productTagId": "flowers", + "productId": "flowers", "productTitle": "Flowers", "productBrand": "Very Long Flower Company Name", "productPrice": 10.00, @@ -117,7 +117,7 @@ { "items" : [ { - "productTagId": "art", + "productId": "art", "productTitle": "Abstract Art", "productBrand": "V. Artsy", "productPrice": 1200.00, @@ -169,7 +169,7 @@ { "items" : [ { - "productTagId": "lamp-rtl", + "productId": "lamp-rtl", "productTitle": "Brass Lamp", "productBrand": "Lamp Co", "productPrice": 799.00, @@ -181,7 +181,7 @@ "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "productTagId": "art-rtl", + "productId": "art-rtl", "productTitle": "Abstract Art", "productBrand": "V. Artsy", "productPriceCurrency": "AED", @@ -193,7 +193,7 @@ "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "productTagId": "chair-rtl", + "productId": "chair-rtl", "productTitle": "Yellow chair", "productBrand": "Chair Co.", "productPrice": 1000.00, @@ -204,7 +204,7 @@ "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "productTagId": "flowers-rtl", + "productId": "flowers-rtl", "productTitle": "Flowers", "productBrand": "Very Long Flower Company Name", "productPrice": 10.00, diff --git a/examples/amp-story/shopping/remote.json b/examples/amp-story/shopping/remote.json index 617580b1bb8f..2501315d3ba3 100644 --- a/examples/amp-story/shopping/remote.json +++ b/examples/amp-story/shopping/remote.json @@ -1,7 +1,7 @@ { "items": [ { - "productTagId": "art", + "productId": "art", "productTitle": "Abstract Art", "productBrand": "V. Artsy", "productPrice": 1200.0, diff --git a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html index 59ea6e9d7fc6..c9b800ef4fbd 100644 --- a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html +++ b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html @@ -49,7 +49,7 @@ { "items" : [ { - "productTagId": "lamp", + "productId": "lamp", "productTitle": "Brass Lamp", "productBrand": "Lamp Co", "productPrice": 799.00, @@ -60,7 +60,7 @@ "productDetails" : "Creator's Favorite Brass Lamp" }, { - "productTagId": "art", + "productId": "art", "productTitle": "Abstract Art", "productBrand": "V. Artsy", "productPrice": 1200.00, @@ -71,7 +71,7 @@ "productDetails" : "Creator's Favorite Art" }, { - "productTagId": "chair", + "productId": "chair", "productTitle": "Yellow chair", "productBrand": "Chair Co.", "productPrice": 1000.00, @@ -83,7 +83,7 @@ "productDetails" : "Creator's Favorite Chair" }, { - "productTagId": "flowers", + "productId": "flowers", "productTitle": "Flowers", "productBrand": "Very Long Flower Company Name", "productPrice": 10.00, @@ -119,7 +119,7 @@ { "items" : [ { - "productTagId": "art", + "productId": "art", "productTitle": "Abstract Art", "productBrand": "V. Artsy", "productPrice": 1200.00, @@ -171,7 +171,7 @@ { "items" : [ { - "productTagId": "lamp-rtl", + "productId": "lamp-rtl", "productTitle": "Brass Lamp", "productBrand": "Lamp Co", "productPrice": 799.00, @@ -183,7 +183,7 @@ "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "productTagId": "art-rtl", + "productId": "art-rtl", "productTitle": "Abstract Art", "productBrand": "V. Artsy", "productPriceCurrency": "AED", @@ -195,7 +195,7 @@ "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "productTagId": "chair-rtl", + "productId": "chair-rtl", "productTitle": "Yellow chair", "productBrand": "Chair Co.", "productPrice": 1000.00, @@ -207,7 +207,7 @@ "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "productTagId": "flowers-rtl", + "productId": "flowers-rtl", "productTitle": "Flowers", "productBrand": "Very Long Flower Company Name", "productPrice": 10.00, diff --git a/examples/visual-tests/amp-story/amp-story-shopping.html b/examples/visual-tests/amp-story/amp-story-shopping.html index 1ac9bfaea9e9..3689e6cb1cb4 100644 --- a/examples/visual-tests/amp-story/amp-story-shopping.html +++ b/examples/visual-tests/amp-story/amp-story-shopping.html @@ -47,7 +47,7 @@ { "items" : [ { - "productTagId": "lamp", + "productId": "lamp", "productTitle": "Brass Lamp", "productBrand": "Lamp Co", "productPrice": 799.00, @@ -58,7 +58,7 @@ "productDetails" : "Brass Lamp is a classic lamp. It is a great way to add a touch of class to your home." }, { - "productTagId": "art", + "productId": "art", "productTitle": "Abstract Art", "productBrand": "V. Artsy", "productPrice": 1200.00, @@ -69,7 +69,7 @@ "productDetails" : "Abstract Art for the avant garde artist." }, { - "productTagId": "chair", + "productId": "chair", "productTitle": "Yellow chair", "productBrand": "Chair Co.", "productPrice": 1000.00, @@ -81,7 +81,7 @@ "productDetails" : "Bright, like the radiant monring sun, this chair is a must have!" }, { - "productTagId": "flowers", + "productId": "flowers", "productTitle": "Flowers", "productBrand": "Very Long Flower Company Name", "productPrice": 10.00, @@ -116,7 +116,7 @@ { "items" : [ { - "productTagId": "art", + "productId": "art", "productTitle": "Abstract Art", "productBrand": "V. Artsy", "productPrice": 1200.00, @@ -168,7 +168,7 @@ { "items" : [ { - "productTagId": "lamp-rtl", + "productId": "lamp-rtl", "productTitle": "Brass Lamp", "productBrand": "Lamp Co", "productPrice": 799.00, @@ -180,7 +180,7 @@ "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "productTagId": "art-rtl", + "productId": "art-rtl", "productTitle": "Abstract Art", "productBrand": "V. Artsy", "productPriceCurrency": "AED", @@ -192,7 +192,7 @@ "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "productTagId": "chair-rtl", + "productId": "chair-rtl", "productTitle": "Yellow chair", "productBrand": "Chair Co.", "productPrice": 1000.00, @@ -204,7 +204,7 @@ "productDetails" : "حبا حبا حبا سعادةا سعادة" }, { - "productTagId": "flowers-rtl", + "productId": "flowers-rtl", "productTitle": "Flowers", "productBrand": "Very Long Flower Company Name", "productPrice": 10.00, diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index 28dea8e302aa..30865ce6a67c 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -97,7 +97,7 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { /** @private @const {!Object>} */ this.productValidationConfig_ = { /* Required Attrs */ - 'productTagId': [validateRequired, validateStringLength], // Required. String. Keys to amp-story-shopping-tag nodes. + 'productId': [validateRequired, validateStringLength], // Required. String. Keys to amp-story-shopping-tag nodes. 'brandLabel': [validateRequired, validateStringLength], // Required. String. 'productTitle': [validateRequired, validateStringLength], // Required. String. 'productPrice': [validateRequired, validateNumber], // Required. Number. @@ -149,7 +149,7 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { const productIDtoProduct = {}; for (const item of shoppingConfig['items']) { this.validateConfig_(item); - productIDtoProduct[item['productTagId']] = item; + productIDtoProduct[item['productId']] = item; } this.storeService_.dispatch(Action.ADD_SHOPPING_DATA, productIDtoProduct); } diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-attachment.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-attachment.js index 4f7149aea713..b2681bdd54ed 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-attachment.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-attachment.js @@ -69,7 +69,7 @@ describes.realWin( async function dispatchTestShoppingData() { const shoppingData = { 'lamp': { - 'productTagId': 'lamp', + 'productId': 'lamp', 'productTitle': 'Brass Lamp', 'productBrand': 'Lamp Co', 'productPrice': 799.0, diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index ea541b4c41fd..88f8c975332d 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -78,7 +78,7 @@ describes.realWin( element.setAttribute('src', exampleURL); const expectedRemoteResult = JSON.parse( - '{"art":{"productTagId": "art","productTitle": "Abstract Art","productBrand": "V. Artsy","productPrice": 1200.0,"productPriceCurrency": "JPY","productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"],"reviewsPage": "https://store.google.com/jp/?hl=ja","brandLabel": "Google","productDetails": "Vinyl for the hit J-Pop song Plastic Love."}}' + '{"art":{"productId": "art","productTitle": "Abstract Art","productBrand": "V. Artsy","productPrice": 1200.0,"productPriceCurrency": "JPY","productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"],"reviewsPage": "https://store.google.com/jp/?hl=ja","brandLabel": "Google","productDetails": "Vinyl for the hit J-Pop song Plastic Love."}}' ); expect(storeService.get(StateProperty.SHOPPING_DATA)).to.deep.eql( @@ -116,7 +116,7 @@ describes.realWin( const invalidConfig = { 'items': [ { - 'productTagId': 'city-pop', + 'productId': 'city-pop', 'productTitle': 'Mariya Takeuchi (竹内 まりや, Takeuchi Mariya, born 20 March 1955) is a Japanese singer and songwriter. Regarded as an influential figure in the city pop genre, she is one of the best-selling music artists in Japan, having sold over 16 million records, and has received several accolades. Takeuchi was born in Taisha, Hikawa district, now the city of Izumo, Shimane, and attended Keio University. She made her singing debut after signing with the RCA record label in 1978, with whom she released her debut album Beginning, which peaked at No. 17 on Oricon Charts. She then released four albums between 1979 and 1981, all of which obtained commercial success, including the 1980 album Love Songs, which became her first work to peak at No. 1 on Oricon Charts. Takeuchi then announced she would go on a temporary hiatus in 1981, terminating her contract with RCA records. Three years later, Takeuchi and her husband Tatsuro Yamashita signed with Moon Records, and she made her comeback with her sixth studio album Variety in 1984, which was released internationally and shot her to mainstream success, and peaked at No. 1 on Oricon Charts. The track "Plastic Love", which was released in 1985 as a single, became a surprise hit outside of Japan in 2017 after a YouTube upload of the song went viral. The song has since attained a cult following and is seen as the staple in a revival of interest in city pop in the late 2010s.', /* Very, Very, Very long string value - will not pass string length test */ @@ -141,7 +141,7 @@ describes.realWin( const invalidConfig = { 'items': [ { - 'productTagId': 'city-pop', + 'productId': 'city-pop', 'productTitle': 'Plastic Love', 'productPrice': 'two dozen watermelons', /* Not an actual price */ @@ -165,7 +165,7 @@ describes.realWin( const invalidConfig = { 'items': [ { - 'productTagId': 'city-pop', + 'productId': 'city-pop', 'productTitle': 'Plastic Love', 'productPrice': 19, 'productPriceCurrency': 'JPY', diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js index 06a516b26e6f..39aa3d877a4a 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js @@ -86,7 +86,7 @@ describes.realWin( it('should set active product in store service when shopping tag is clicked', async () => { const tagData = { - 'productTagId': 'sunglasses', + 'productId': 'sunglasses', 'productTitle': 'Spectacular Spectacles', 'productPrice': '400', 'productIcon': diff --git a/extensions/amp-story/1.0/amp-story-store-service.js b/extensions/amp-story/1.0/amp-story-store-service.js index d9ea07a71b7d..7f79a9becfe4 100644 --- a/extensions/amp-story/1.0/amp-story-store-service.js +++ b/extensions/amp-story/1.0/amp-story-store-service.js @@ -74,7 +74,7 @@ export let InteractiveReactData; /** * @typedef {{ - * productTagId: string, + * productId: string, * productTitle: string, * prodcutBrand: string, * productPrice: number, From b845f045c2c14058555a36441192ab95aa42de6b Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Tue, 1 Feb 2022 00:13:06 -0800 Subject: [PATCH 017/116] Fixed a few find and replace bugs --- examples/analytics-vendors.amp.html | 2 +- extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css | 2 +- extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/analytics-vendors.amp.html b/examples/analytics-vendors.amp.html index f030b4d4e157..ea6b787dbdd9 100644 --- a/examples/analytics-vendors.amp.html +++ b/examples/analytics-vendors.amp.html @@ -524,7 +524,7 @@ "externalId": "product-id", "sku": "product-sku", "name": "product-name", - "brand": "productBrand", + "brand": "product-brand", "category": "product-category", "variant": "product-variant", "price": 1000, diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css index 4ee227a0a5ee..e519f5dd4876 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css @@ -14,7 +14,7 @@ amp-story-shopping-tag { --i-amphtml-shopping-tag-backdrop-filter: blur(20px); } -.amp-story-shopping-productTagText { +.amp-story-shopping-product-tag-text { font-weight: 600 !important; font-size: 11px !important; line-height: 15.4px !important; diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js index 756abf9d40ca..16411751de7f 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js @@ -159,7 +159,7 @@ export class AmpStoryShoppingTag extends AMP.BaseElement { > {(this.tagData_['productTagText'] && ( - + {this.tagData_['productTagText']} )) || From 1b8d825bec0a092de0c1b76fa21871195ba633b2 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Tue, 1 Feb 2022 12:16:45 -0800 Subject: [PATCH 018/116] added tempalte literals --- .../0.1/amp-story-shopping-config.js | 27 +++++++------------ 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index 3572e8d03a3f..0b79987acdb9 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -25,8 +25,8 @@ let ShoppingConfigDef; * @private */ function validateRequired(field, value) { - if (value == null) { - return [`${field} is required.`]; + if (value === undefined) { + return [`Field ${field} is required.`]; } } @@ -39,15 +39,8 @@ function validateRequired(field, value) { * @private */ function validateStringLength(field, str, maxLen = 100) { - if (str != null && str.length > maxLen) { - return [ - 'Length of ' + - field + - ' exceeds max length: ' + - str.length + - ' > ' + - maxLen, - ]; + if (str !== undefined && str.length > maxLen) { + return [`Length of ${field} exceeds max length: ${str.length} > ${maxLen}`]; } } @@ -59,20 +52,20 @@ function validateStringLength(field, str, maxLen = 100) { * @return {!Array} */ function validateNumber(field, number) { - if (number != null && isNaN(number)) { - return ['Value for field ' + field + ' is not a number']; + if (number !== undefined && isNaN(number)) { + return [`Value for field ${field} is not a number`]; } } /** * Validates url of shopping config attributes * @param {?string} field - * @param {?string} url + * @param {!Array} url * @private * @return {!Array} */ function validateURL(field, url) { - if (url == null) { + if (url === undefined) { /* Not a Required Attribute, return.*/ return; } @@ -81,7 +74,7 @@ function validateURL(field, url) { return urls.map((url) => { try { - assertHttpsUrl(url, 'amp-story-shopping-config ' + field); + assertHttpsUrl(url, `amp-story-shopping-config ${field}`); } catch (e) { return e.message; } @@ -136,7 +129,7 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { }, []) .filter(Boolean); for (const error of errors) { - this.user().warn('ERROR', error); + this.user().warn('ERROR', `amp-story-shopping-config: ${error}`); } } From f2ddeda65ec589477d90ae25a72315bf091db517 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Tue, 1 Feb 2022 12:21:11 -0800 Subject: [PATCH 019/116] fix reduce array --- .../0.1/amp-story-shopping-config.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index 0b79987acdb9..41c41d3f7d5c 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -117,14 +117,9 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { const errors = Object.keys(this.productValidationConfig_) .reduce((errors, k) => { const value = shoppingConfig[k]; - const fns = this.productValidationConfig_[k]; - errors.push( - ...fns.reduce((errors, fn) => { - const localErrors = fn(k, value) || []; - errors.push(...localErrors); - return errors; - }, []) - ); + this.productValidationConfig_[k].forEach((fn) => { + errors.push(...(fn(k, value) || [])); + }); return errors; }, []) .filter(Boolean); From 67b20dfb5f358bc7f33bd4ee2e84838afcf9bfad Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Wed, 2 Feb 2022 11:08:46 -0800 Subject: [PATCH 020/116] removed unused fiedls --- examples/amp-story/amp-story-shopping.html | 45 ++++-------------- .../amp-story/amp-story-shopping-lang-de.html | 46 ++++--------------- .../amp-story/amp-story-shopping.html | 45 ++++-------------- .../0.1/amp-story-shopping-config.js | 27 +++++------ 4 files changed, 39 insertions(+), 124 deletions(-) diff --git a/examples/amp-story/amp-story-shopping.html b/examples/amp-story/amp-story-shopping.html index fa63e8190fa0..3020e3ab221f 100644 --- a/examples/amp-story/amp-story-shopping.html +++ b/examples/amp-story/amp-story-shopping.html @@ -53,10 +53,7 @@ "productBrand": "Lamp Co", "productPrice": 799.00, "productPriceCurrency": "USD", - "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails": "A lamp made out of brass." + "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"] }, { "productId": "art", @@ -64,10 +61,7 @@ "productBrand": "V. Artsy", "productPrice": 1200.00, "productPriceCurrency": "INR", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "Abstract Art." + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] }, { "productId": "chair", @@ -76,10 +70,7 @@ "productPrice": 1000.00, "productPriceCurrency": "BRL", "productTagText": "The perfectly imperfect yellow chair", - "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "A Yellow Chair. Stylish and radian like the morning sun, but not very comfy." + "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"] }, { "productId": "flowers", @@ -88,10 +79,7 @@ "productPrice": 10.00, "productPriceCurrency": "USD", "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "This flower company has been in business for ages." + "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"] } ] } @@ -122,10 +110,7 @@ "productBrand": "V. Artsy", "productPrice": 1200.00, "productPriceCurrency": "JPY", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "Super Abstract Art." + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] } ] } @@ -175,10 +160,7 @@ "productPrice": 799.00, "productPriceCurrency": "AED", "productTagText": " حبا حبا حبا سعادةا سعادة", - "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "حبا حبا حبا سعادةا سعادة" + "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"] }, { "productId": "art-rtl", @@ -187,10 +169,7 @@ "productPriceCurrency": "AED", "productPrice": 1200.00, "productTagText": "حبا حب سعادة قط حبا حب سعادة قط ", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "حبا حبا حبا سعادةا سعادة" + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] }, { "productId": "chair-rtl", @@ -198,10 +177,7 @@ "productBrand": "Chair Co.", "productPrice": 1000.00, "productPriceCurrency": "AED", - "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "حبا حبا حبا سعادةا سعادة" + "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"] }, { "productId": "flowers-rtl", @@ -210,10 +186,7 @@ "productPrice": 10.00, "productPriceCurrency": "AED", "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "حبا حبا حبا سعادةا سعادة" + "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"] } ] } diff --git a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html index ea9e96158da9..6aac9d92d7c8 100644 --- a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html +++ b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html @@ -54,10 +54,7 @@ "productBrand": "Lamp Co", "productPrice": 799.00, "productPriceCurrency": "USD", - "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "Creator's Favorite Brass Lamp" + "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"] }, { "productId": "art", @@ -65,10 +62,7 @@ "productBrand": "V. Artsy", "productPrice": 1200.00, "productPriceCurrency": "INR", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "Creator's Favorite Art" + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] }, { "productId": "chair", @@ -77,10 +71,7 @@ "productPrice": 1000.00, "productPriceCurrency": "BRL", "productTagText": "The perfectly imperfect yellow chair", - "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "Creator's Favorite Chair" + "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"] }, { "productId": "flowers", @@ -89,11 +80,7 @@ "productPrice": 10.00, "productPriceCurrency": "USD", "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "Creator's Favorite Flowers", - "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png" + "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"] } ] } @@ -124,10 +111,7 @@ "productBrand": "V. Artsy", "productPrice": 1200.00, "productPriceCurrency": "JPY", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "Abstract Art." + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] }, ] } @@ -177,10 +161,7 @@ "productPrice": 799.00, "productPriceCurrency": "AED", "productTagText": " حبا حبا حبا سعادةا سعادة", - "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "حبا حبا حبا سعادةا سعادة" + "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"] }, { "productId": "art-rtl", @@ -189,10 +170,7 @@ "productPriceCurrency": "AED", "productPrice": 1200.00, "productTagText": "حبا حب سعادة قط حبا حب سعادة قط ", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "حبا حبا حبا سعادةا سعادة" + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] }, { "productId": "chair-rtl", @@ -201,10 +179,7 @@ "productPrice": 1000.00, "productPriceCurrency": "AED", "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "حبا حبا حبا سعادةا سعادة" + "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"] }, { "productId": "flowers-rtl", @@ -213,10 +188,7 @@ "productPrice": 10.00, "productPriceCurrency": "AED", "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "حبا حبا حبا سعادةا سعادة" + "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"] } ] } diff --git a/examples/visual-tests/amp-story/amp-story-shopping.html b/examples/visual-tests/amp-story/amp-story-shopping.html index f1da9ea92620..4727992933b8 100644 --- a/examples/visual-tests/amp-story/amp-story-shopping.html +++ b/examples/visual-tests/amp-story/amp-story-shopping.html @@ -52,10 +52,7 @@ "productBrand": "Lamp Co", "productPrice": 799.00, "productPriceCurrency": "USD", - "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "Brass Lamp is a classic lamp. It is a great way to add a touch of class to your home." + "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"] }, { "productId": "art", @@ -63,10 +60,7 @@ "productBrand": "V. Artsy", "productPrice": 1200.00, "productPriceCurrency": "INR", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "Abstract Art for the avant garde artist." + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] }, { "productId": "chair", @@ -75,10 +69,7 @@ "productPrice": 1000.00, "productPriceCurrency": "BRL", "productTagText": "The perfectly imperfect yellow chair", - "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "Bright, like the radiant monring sun, this chair is a must have!" + "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"] }, { "productId": "flowers", @@ -87,10 +78,7 @@ "productPrice": 10.00, "productPriceCurrency": "USD", "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "These flowers are so pretty!" + "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"] } ] } @@ -121,10 +109,7 @@ "productBrand": "V. Artsy", "productPrice": 1200.00, "productPriceCurrency": "JPY", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "Abstract Art for the avant garde artist." + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] }, ] } @@ -174,10 +159,7 @@ "productPrice": 799.00, "productPriceCurrency": "AED", "productTagText": " حبا حبا حبا سعادةا سعادة", - "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "حبا حبا حبا سعادةا سعادة" + "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"] }, { "productId": "art-rtl", @@ -186,10 +168,7 @@ "productPriceCurrency": "AED", "productPrice": 1200.00, "productTagText": "حبا حب سعادة قط حبا حب سعادة قط", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "حبا حبا حبا سعادةا سعادة" + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] }, { "productId": "chair-rtl", @@ -198,10 +177,7 @@ "productPrice": 1000.00, "productPriceCurrency": "AED", "productIcon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png", - "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "حبا حبا حبا سعادةا سعادة" + "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"] }, { "productId": "flowers-rtl", @@ -210,10 +186,7 @@ "productPrice": 10.00, "productPriceCurrency": "AED", "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails" : "حبا حبا حبا سعادةا سعادة" + "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"] } ] } diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index 41c41d3f7d5c..497e87caac57 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -90,22 +90,19 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement { /** @private @const {!Object>} */ this.productValidationConfig_ = { /* Required Attrs */ - 'productId': [validateRequired, validateStringLength], // Required. String. Keys to amp-story-shopping-tag nodes. - 'brandLabel': [validateRequired, validateStringLength], // Required. String. - 'productTitle': [validateRequired, validateStringLength], // Required. String. - 'productPrice': [validateRequired, validateNumber], // Required. Number. - 'productImages': [validateRequired, validateURL], // Required. String or array of strings. - 'productDetails': [validateRequired, validateStringLength], // Required. String. - 'reviewsPage': [validateRequired, validateURL], // Required if reviews-data. Links to a page where reviews can be read. - 'productPriceCurrency': [validateRequired, validateStringLength], // Required. String. ISO 4217 currency code used to display the correct currency symbol. + 'productId': [validateRequired, validateStringLength], + 'productTitle': [validateRequired, validateStringLength], + 'productPrice': [validateRequired, validateNumber], + 'productImages': [validateRequired, validateURL], + 'productPriceCurrency': [validateRequired, validateStringLength], /* Optional Attrs */ - 'productColor': [validateStringLength], // Optional. String. - 'productSize': [validateStringLength], // Optional. String. - 'productIcon': [validateURL], // Optional. Links to an image. Defaults to a shopping bag icon. - 'productTagText': [validateStringLength], // Optional. String. - 'reviewsData': [validateURL], // Optional. Links to review data. - 'ctaText': [validateNumber], // Optional. Number. Defaults to “Buy now”. Keys to a CTA text option for i18n. - 'shippingText': [validateNumber], // Optional. Number. Keys to a shipping text option for i18n. Shipping text will not be rendered if the string is omitted. + 'productColor': [validateStringLength], + 'productSize': [validateStringLength], + 'productIcon': [validateURL], + 'productTagText': [validateStringLength], + 'reviewsData': [validateURL], + 'ctaText': [validateNumber], + 'shippingText': [validateNumber], }; } /** From 689ffdf87323caf142012fc29ae3fcdcfcea76f8 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Wed, 2 Feb 2022 12:12:01 -0800 Subject: [PATCH 021/116] changed test string --- .../0.1/test/test-amp-story-shopping-config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index 88f8c975332d..bac23d9b8ea0 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -118,7 +118,7 @@ describes.realWin( { 'productId': 'city-pop', 'productTitle': - 'Mariya Takeuchi (竹内 まりや, Takeuchi Mariya, born 20 March 1955) is a Japanese singer and songwriter. Regarded as an influential figure in the city pop genre, she is one of the best-selling music artists in Japan, having sold over 16 million records, and has received several accolades. Takeuchi was born in Taisha, Hikawa district, now the city of Izumo, Shimane, and attended Keio University. She made her singing debut after signing with the RCA record label in 1978, with whom she released her debut album Beginning, which peaked at No. 17 on Oricon Charts. She then released four albums between 1979 and 1981, all of which obtained commercial success, including the 1980 album Love Songs, which became her first work to peak at No. 1 on Oricon Charts. Takeuchi then announced she would go on a temporary hiatus in 1981, terminating her contract with RCA records. Three years later, Takeuchi and her husband Tatsuro Yamashita signed with Moon Records, and she made her comeback with her sixth studio album Variety in 1984, which was released internationally and shot her to mainstream success, and peaked at No. 1 on Oricon Charts. The track "Plastic Love", which was released in 1985 as a single, became a surprise hit outside of Japan in 2017 after a YouTube upload of the song went viral. The song has since attained a cult following and is seen as the staple in a revival of interest in city pop in the late 2010s.', + 'Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, Very, long string', /* Very, Very, Very long string value - will not pass string length test */ 'productPrice': 19, 'productPriceCurrency': 'JPY', @@ -128,7 +128,7 @@ describes.realWin( ], 'reviewsPage': 'https://store.google.com/jp/?hl=ja', 'brandLabel': 'Google', - 'productDetails': 'Vinyl for the hit J-Pop song Plastic Love.', + 'productDetails': 'Vinyl for a hit J-Pop song.', }, ], }; From 45810b67d69cded31f991996f32a547baa648075 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Wed, 2 Feb 2022 12:13:12 -0800 Subject: [PATCH 022/116] udpated test to remove unusd fields --- .../0.1/test/test-amp-story-shopping-config.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index bac23d9b8ea0..3912503de0b8 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -78,7 +78,7 @@ describes.realWin( element.setAttribute('src', exampleURL); const expectedRemoteResult = JSON.parse( - '{"art":{"productId": "art","productTitle": "Abstract Art","productBrand": "V. Artsy","productPrice": 1200.0,"productPriceCurrency": "JPY","productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"],"reviewsPage": "https://store.google.com/jp/?hl=ja","brandLabel": "Google","productDetails": "Vinyl for the hit J-Pop song Plastic Love."}}' + '{"art":{"productId": "art","productTitle": "Abstract Art","productBrand": "V. Artsy","productPrice": 1200.0,"productPriceCurrency": "JPY","productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"]}}' ); expect(storeService.get(StateProperty.SHOPPING_DATA)).to.deep.eql( @@ -126,9 +126,6 @@ describes.realWin( '/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png', '/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png', ], - 'reviewsPage': 'https://store.google.com/jp/?hl=ja', - 'brandLabel': 'Google', - 'productDetails': 'Vinyl for a hit J-Pop song.', }, ], }; @@ -150,9 +147,6 @@ describes.realWin( '/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png', '/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png', ], - 'reviewsPage': 'https://store.google.com/jp/?hl=ja', - 'brandLabel': 'Google', - 'productDetails': 'Vinyl for the hit J-Pop song Plastic Love.', }, ], }; @@ -170,9 +164,6 @@ describes.realWin( 'productPrice': 19, 'productPriceCurrency': 'JPY', 'productImages': ['http://pizazz', 'http://zapp'], - 'reviewsPage': 'http://zeppelinzero.com', - 'brandLabel': 'Google', - 'productDetails': 'Vinyl for the hit J-Pop song Plastic Love.', }, ], }; From 5ff7a957d3aa83dd6c5658bd00fa1b31f95eaff1 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Wed, 2 Feb 2022 23:26:46 -0800 Subject: [PATCH 023/116] added better vladiation logic --- .../0.1/amp-story-shopping-config.js | 39 ++++++++----------- .../amp-story/1.0/amp-story-store-service.js | 2 +- 2 files changed, 18 insertions(+), 23 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index f4bf724b75bc..a95d1285e602 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -22,11 +22,10 @@ let ShoppingConfigResponseDef; * @param {?string} field * @param {?string} value * @return {!Array} - * @private */ function validateRequired(field, value) { if (value === undefined) { - return [`Field ${field} is required.`]; + throw Error(`Field ${field} is required.`); } } @@ -36,11 +35,12 @@ function validateRequired(field, value) { * @param {?string} str * @param {?number} maxLen * @return {!Array} - * @private */ function validateStringLength(field, str, maxLen = 100) { if (str !== undefined && str.length > maxLen) { - return [`Length of ${field} exceeds max length: ${str.length} > ${maxLen}`]; + throw Error( + `Length of ${field} exceeds max length: ${str.length} > ${maxLen}` + ); } } @@ -48,12 +48,11 @@ function validateStringLength(field, str, maxLen = 100) { * Validates number in shopping config attributes * @param {?string} field * @param {?number} number - * @private * @return {!Array} */ function validateNumber(field, number) { if (number !== undefined && isNaN(number)) { - return [`Value for field ${field} is not a number`]; + throw Error(`Value for field ${field} is not a number`); } } @@ -61,7 +60,6 @@ function validateNumber(field, number) { * Validates url of shopping config attributes * @param {?string} field * @param {!Array} url - * @private * @return {!Array} */ function validateURL(field, url) { @@ -102,21 +100,18 @@ const productValidationConfig_ = { /** * Validates shopping config. * @param {!ShoppingConfigDataDef} shoppingConfig - * @private */ -function validateConfig_(shoppingConfig) { - const errors = Object.keys(productValidationConfig_) - .reduce((errors, k) => { - const value = shoppingConfig[k]; - productValidationConfig_[k].forEach((fn) => { - errors.push(...(fn(k, value) || [])); - }); - return errors; - }, []) - .filter(Boolean); - for (const error of errors) { - user().warn('ERROR', `amp-story-shopping-config: ${error}`); - } +function validateConfig(shoppingConfig) { + Object.keys(productValidationConfig_).forEach((configKey) => { + const validationFunctions = productValidationConfig_[configKey]; + validationFunctions.forEach((fn) => { + try { + fn(configKey, shoppingConfig[configKey]); + } catch (err) { + user().warn('ERROR', `amp-story-shopping-config: ${err}`); + } + }); + }); } /** @typedef {!Object */ @@ -131,7 +126,7 @@ export let KeyedShoppingConfigDef; export function getShoppingConfig(pageElement) { const element = pageElement.querySelector('amp-story-shopping-config'); return getElementConfig(element).then((config) => { - validateConfig_(config); + validateConfig(config); return keyByProductTagId(config); }); } diff --git a/extensions/amp-story/1.0/amp-story-store-service.js b/extensions/amp-story/1.0/amp-story-store-service.js index ee34d57d9641..872a2adaa39c 100644 --- a/extensions/amp-story/1.0/amp-story-store-service.js +++ b/extensions/amp-story/1.0/amp-story-store-service.js @@ -77,7 +77,7 @@ export let InteractiveReactData; * @typedef {{ * productId: string, * productTitle: string, - * prodcutBrand: string, + * productBrand: string, * productPrice: number, * productPriceCurrency: string, * productIcon: string, From 879748d2a04aa6ce39553f4e04f08cf787bf7ab2 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Thu, 3 Feb 2022 00:01:48 -0800 Subject: [PATCH 024/116] fixed unit test --- examples/amp-story/shopping/remote.json | 5 +- .../0.1/amp-story-shopping-config.js | 4 +- .../test/test-amp-story-shopping-config.js | 81 +++++-------------- 3 files changed, 23 insertions(+), 67 deletions(-) diff --git a/examples/amp-story/shopping/remote.json b/examples/amp-story/shopping/remote.json index 2501315d3ba3..028fa22c6883 100644 --- a/examples/amp-story/shopping/remote.json +++ b/examples/amp-story/shopping/remote.json @@ -6,10 +6,7 @@ "productBrand": "V. Artsy", "productPrice": 1200.0, "productPriceCurrency": "JPY", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], - "reviewsPage": "https://store.google.com/jp/?hl=ja", - "brandLabel": "Google", - "productDetails": "Vinyl for the hit J-Pop song Plastic Love." + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] } ] } diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index a95d1285e602..c9807ac379ea 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -126,7 +126,9 @@ export let KeyedShoppingConfigDef; export function getShoppingConfig(pageElement) { const element = pageElement.querySelector('amp-story-shopping-config'); return getElementConfig(element).then((config) => { - validateConfig(config); + for (const configItem of config['items']) { + validateConfig(configItem); + } return keyByProductTagId(config); }); } diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index 9a0a9b6c9194..a6332884bde2 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -1,13 +1,16 @@ import * as Preact from '#core/dom/jsx'; +import {Services} from '#service'; + import {user} from '#utils/log'; import * as configData from '../../../../examples/amp-story/shopping/remote.json'; -import {registerServiceBuilder} from '../../../../src/service-helpers'; -import {Services} from '#service'; - import * as remoteConfig from '../../../../examples/amp-story/shopping/remote.json'; -import {Action} from '../../../amp-story/1.0/amp-story-store-service'; +import {registerServiceBuilder} from '../../../../src/service-helpers'; +import { + Action, + getStoreService, +} from '../../../amp-story/1.0/amp-story-store-service'; import { getShoppingConfig, storeShoppingConfig, @@ -23,7 +26,6 @@ describes.realWin( }, (env) => { let win; - let element; let shoppingConfig; let storeService; let userWarnStub; @@ -37,47 +39,15 @@ describes.realWin( }); }); - async function createAmpStoryShoppingConfig(optConfigData = configData) { - const pageEl = win.document.createElement('amp-story-page'); - pageEl.id = 'page1'; - element = createElementWithAttributes( - win.document, - 'amp-story-shopping-config', - {'layout': 'nodisplay'} - ); - - element.innerHTML = ` - - `; - - pageEl.appendChild(element); - win.document.body.appendChild(pageEl); - - shoppingConfig = await element.getImpl(); - } + let pageElement; it('should build shopping config component', async () => { await createAmpStoryShoppingConfig(); - expect(() => shoppingConfig.layoutCallback()).to.not.throw(); + expect(() => getShoppingConfig(pageElement)).to.not.throw(); }); - let pageElement; - - const defaultInlineConfig = { - items: [ - { - 'productId': 'city-pop', - 'productTitle': 'Plastic Love', - 'productPrice': 19, - 'productPriceCurrency': 'JPY', - }, - ], - }; - const keyedDefaultInlineConfig = { - 'city-pop': defaultInlineConfig.items[0], + 'art': configData.items[0], }; beforeEach(async () => { @@ -87,7 +57,7 @@ describes.realWin( async function createAmpStoryShoppingConfig( src = null, - config = defaultInlineConfig + config = configData ) { pageElement.appendChild( @@ -107,14 +77,6 @@ describes.realWin( }); }); - it('does use remote config when src attribute is provided', async () => { - await createAmpStoryShoppingConfig(); - const exampleURL = 'foo.example'; - element.setAttribute('src', exampleURL); - - const expectedRemoteResult = JSON.parse( - '{"art":{"productId": "art","productTitle": "Abstract Art","productBrand": "V. Artsy","productPrice": 1200.0,"productPriceCurrency": "JPY","productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"]}}' - ); it('does use inline config', async () => { const result = await createAmpStoryShoppingConfig(); expect(result).to.deep.eql(keyedDefaultInlineConfig); @@ -153,15 +115,7 @@ describes.realWin( it('does use inline config when remote src is invalid', async () => { await createAmpStoryShoppingConfig(); const exampleURL = 'invalidRemoteURL'; - element.setAttribute('src', exampleURL); - - shoppingConfig.buildCallback().then(async () => { - expect(await shoppingConfig.getInlineConfig_).to.be.called(); - env.sandbox.stub(Services, 'xhrFor').returns({ - fetchJson() { - throw new Error(); - }, - }); + pageElement.setAttribute('src', exampleURL); const result = await createAmpStoryShoppingConfig('invalidRemoteUrl'); expect(result).to.deep.eql(keyedDefaultInlineConfig); }); @@ -169,13 +123,16 @@ describes.realWin( it('test invalid remote config url', async () => { await createAmpStoryShoppingConfig(); const exampleURL = 'invalidRemoteURL'; - element.setAttribute('src', exampleURL); + pageElement.setAttribute('src', exampleURL); expectAsyncConsoleError(async () => { expect(async () => { await shoppingConfig.buildCallback(); }).to.throw( /'amp-story-auto-ads:config error determining if remote config is valid json: bad url or bad json'​​​/ ); + }); + }); + describe('storeShoppingConfig', () => { let storeService; @@ -215,7 +172,7 @@ describes.realWin( ], }; - await createAmpStoryShoppingConfig(invalidConfig); + await createAmpStoryShoppingConfig(null, invalidConfig); }); it('test config not a number', async () => { @@ -236,7 +193,7 @@ describes.realWin( ], }; - await createAmpStoryShoppingConfig(invalidConfig); + await createAmpStoryShoppingConfig(null, invalidConfig); }); it('test config invalid url array', async () => { @@ -253,7 +210,7 @@ describes.realWin( ], }; - await createAmpStoryShoppingConfig(invalidConfig); + await createAmpStoryShoppingConfig(null, invalidConfig); }); } ); From 962082cfea0700772f242ca618dca889dd7cedc2 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Thu, 3 Feb 2022 09:50:44 -0800 Subject: [PATCH 025/116] updated unit tests --- .../0.1/test/test-amp-story-shopping-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index a6332884bde2..4025da93f0af 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -126,7 +126,7 @@ describes.realWin( pageElement.setAttribute('src', exampleURL); expectAsyncConsoleError(async () => { expect(async () => { - await shoppingConfig.buildCallback(); + await getShoppingConfig(pageElement); }).to.throw( /'amp-story-auto-ads:config error determining if remote config is valid json: bad url or bad json'​​​/ ); From 323e5fbf7bf7a0020a273519c7d221633697ca06 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Mon, 7 Feb 2022 10:00:02 -0800 Subject: [PATCH 026/116] removed unued variable --- .../0.1/test/test-amp-story-shopping-config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index 4025da93f0af..f1ce159c1809 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -26,7 +26,6 @@ describes.realWin( }, (env) => { let win; - let shoppingConfig; let storeService; let userWarnStub; From 8525bb11d7c1d29e5f955f831af95a4f04ea07a6 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Tue, 8 Feb 2022 13:11:29 -0800 Subject: [PATCH 027/116] refactored unit tests and typedefs --- .../0.1/amp-story-shopping-config.js | 69 +++++++++---------- .../test/test-amp-story-shopping-config.js | 18 ++--- 2 files changed, 39 insertions(+), 48 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index c9807ac379ea..e10de3a5ecdb 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -18,81 +18,76 @@ import { let ShoppingConfigResponseDef; /** - * Validates string length of shopping config attributes - * @param {?string} field - * @param {?string} value - * @return {!Array} + * Validates if a required field exists for shopping config attributes + * @param {string} field + * @param {?string=} value */ -function validateRequired(field, value) { - if (value === undefined) { +function validateRequired(field, value = null) { + if (value == null) { throw Error(`Field ${field} is required.`); } } +/** + * Max Length of strings allowed in shopping config. + */ +const MAX_STR_LEN = 100; /** * Validates string length of shopping config attributes - * @param {?string} field - * @param {?string} str - * @param {?number} maxLen - * @return {!Array} + * @param {string} field + * @param {?string=} str */ -function validateStringLength(field, str, maxLen = 100) { - if (str !== undefined && str.length > maxLen) { +function validateStringLength(field, str = undefined) { + if (str !== undefined && str.length > MAX_STR_LEN) { throw Error( - `Length of ${field} exceeds max length: ${str.length} > ${maxLen}` + `Length of ${field} exceeds max length: ${str.length} > ${MAX_STR_LEN}` ); } } /** * Validates number in shopping config attributes - * @param {?string} field - * @param {?number} number - * @return {!Array} + * @param {string} field + * @param {?number=} number */ -function validateNumber(field, number) { - if (number !== undefined && isNaN(number)) { +function validateNumber(field, number = null) { + if (number != null && isNaN(number)) { throw Error(`Value for field ${field} is not a number`); } } /** * Validates url of shopping config attributes - * @param {?string} field - * @param {!Array} url - * @return {!Array} + * @param {string} field + * @param {?Array=} url */ -function validateURL(field, url) { - if (url === undefined) { +function validateURLs(field, url = null) { + if (url == null) { /* Not a Required Attribute, return.*/ return; } const urls = Array.isArray(url) ? url : [url]; - return urls.map((url) => { - try { - assertHttpsUrl(url, `amp-story-shopping-config ${field}`); - } catch (e) { - return e.message; - } + urls.forEach((url) => { + assertHttpsUrl(url, `amp-story-shopping-config ${field}`); }); } -/** @private @const {!Object>} */ -const productValidationConfig_ = { +/** @const {!Object>} */ +const PRODUCT_VALIDATION_CONFIG = { /* Required Attrs */ 'productId': [validateRequired, validateStringLength], 'productTitle': [validateRequired, validateStringLength], 'productPrice': [validateRequired, validateNumber], - 'productImages': [validateRequired, validateURL], + 'productImages': [validateRequired, validateURLs], 'productPriceCurrency': [validateRequired, validateStringLength], /* Optional Attrs */ 'productColor': [validateStringLength], 'productSize': [validateStringLength], - 'productIcon': [validateURL], + 'productIcon': [validateURLs], 'productTagText': [validateStringLength], - 'reviewsData': [validateURL], + 'reviewsData': [validateURLs], 'ctaText': [validateNumber], 'shippingText': [validateNumber], }; @@ -102,13 +97,13 @@ const productValidationConfig_ = { * @param {!ShoppingConfigDataDef} shoppingConfig */ function validateConfig(shoppingConfig) { - Object.keys(productValidationConfig_).forEach((configKey) => { - const validationFunctions = productValidationConfig_[configKey]; + Object.keys(PRODUCT_VALIDATION_CONFIG).forEach((configKey) => { + const validationFunctions = PRODUCT_VALIDATION_CONFIG[configKey]; validationFunctions.forEach((fn) => { try { fn(configKey, shoppingConfig[configKey]); } catch (err) { - user().warn('ERROR', `amp-story-shopping-config: ${err}`); + user().warn('AMP-STORY-SHOPPING-CONFIG', `${err}`); } }); }); diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index f1ce159c1809..8a84bdd0324b 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -16,6 +16,10 @@ import { storeShoppingConfig, } from '../amp-story-shopping-config'; +const keyedDefaultInlineConfig = { + 'art': configData.items[0], +}; + describes.realWin( 'amp-story-shopping-config-v0.1', { @@ -28,6 +32,7 @@ describes.realWin( let win; let storeService; let userWarnStub; + let pageElement; beforeEach(async () => { win = env.win; @@ -36,24 +41,15 @@ describes.realWin( registerServiceBuilder(win, 'story-store', function () { return storeService; }); + pageElement = ; + env.win.document.body.appendChild(pageElement); }); - let pageElement; - it('should build shopping config component', async () => { await createAmpStoryShoppingConfig(); expect(() => getShoppingConfig(pageElement)).to.not.throw(); }); - const keyedDefaultInlineConfig = { - 'art': configData.items[0], - }; - - beforeEach(async () => { - pageElement = ; - env.win.document.body.appendChild(pageElement); - }); - async function createAmpStoryShoppingConfig( src = null, config = configData From c7fdf1d01d6e02232fb8c21b4a866bd188f69965 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Wed, 9 Feb 2022 10:23:18 -0800 Subject: [PATCH 028/116] test, do not merge --- .../0.1/amp-story-shopping-config.js | 4 ++-- .../0.1/test/test-amp-story-shopping-config.js | 14 ++++++++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index e10de3a5ecdb..71e4e31365a3 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -61,7 +61,7 @@ function validateNumber(field, number = null) { * @param {string} field * @param {?Array=} url */ -function validateURLs(field, url = null) { +export function validateURLs(field, url = null) { if (url == null) { /* Not a Required Attribute, return.*/ return; @@ -96,7 +96,7 @@ const PRODUCT_VALIDATION_CONFIG = { * Validates shopping config. * @param {!ShoppingConfigDataDef} shoppingConfig */ -function validateConfig(shoppingConfig) { +export function validateConfig(shoppingConfig) { Object.keys(PRODUCT_VALIDATION_CONFIG).forEach((configKey) => { const validationFunctions = PRODUCT_VALIDATION_CONFIG[configKey]; validationFunctions.forEach((fn) => { diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index 8a84bdd0324b..e84a7cad8676 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -4,6 +4,8 @@ import {Services} from '#service'; import {user} from '#utils/log'; +import {getElementConfig} from 'extensions/amp-story/1.0/request-utils'; + import * as configData from '../../../../examples/amp-story/shopping/remote.json'; import * as remoteConfig from '../../../../examples/amp-story/shopping/remote.json'; import {registerServiceBuilder} from '../../../../src/service-helpers'; @@ -14,6 +16,8 @@ import { import { getShoppingConfig, storeShoppingConfig, + validateConfig, + validateURLs, } from '../amp-story-shopping-config'; const keyedDefaultInlineConfig = { @@ -192,7 +196,6 @@ describes.realWin( }); it('test config invalid url array', async () => { - expectAsyncConsoleError(userWarnStub, 1); const invalidConfig = { 'items': [ { @@ -204,8 +207,15 @@ describes.realWin( }, ], }; - + /*const invalidURLStub = env.sandbox.spy(validateURLs); + const validateConfigStub = env.sandbox.spy(validateConfig); await createAmpStoryShoppingConfig(null, invalidConfig); + expect(validateConfigStub).to.be.called.once; + expect(invalidURLStub).to.be.called.thrice; + expect(invalidURLStub).to.be.called.calledWith( + 'productImages', + invalidConfig['items'][0]['productImages'] + );*/ }); } ); From f80405d962ed27c06eeecdb1973c67814496bb89 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Wed, 9 Feb 2022 12:26:48 -0800 Subject: [PATCH 029/116] added in test that throw errors --- .../0.1/amp-story-shopping-config.js | 12 ++-- .../test/test-amp-story-shopping-config.js | 66 ++++++++++++++----- 2 files changed, 56 insertions(+), 22 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index 71e4e31365a3..8840e1dcb972 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -22,7 +22,7 @@ let ShoppingConfigResponseDef; * @param {string} field * @param {?string=} value */ -function validateRequired(field, value = null) { +export function validateRequired(field, value = null) { if (value == null) { throw Error(`Field ${field} is required.`); } @@ -30,14 +30,14 @@ function validateRequired(field, value = null) { /** * Max Length of strings allowed in shopping config. */ -const MAX_STR_LEN = 100; +export const MAX_STR_LEN = 100; /** * Validates string length of shopping config attributes * @param {string} field * @param {?string=} str */ -function validateStringLength(field, str = undefined) { +export function validateStringLength(field, str = undefined) { if (str !== undefined && str.length > MAX_STR_LEN) { throw Error( `Length of ${field} exceeds max length: ${str.length} > ${MAX_STR_LEN}` @@ -50,9 +50,9 @@ function validateStringLength(field, str = undefined) { * @param {string} field * @param {?number=} number */ -function validateNumber(field, number = null) { +export function validateNumber(field, number = null) { if (number != null && isNaN(number)) { - throw Error(`Value for field ${field} is not a number`); + throw Error(`Value ${number} for field ${field} is not a number`); } } @@ -75,7 +75,7 @@ export function validateURLs(field, url = null) { } /** @const {!Object>} */ -const PRODUCT_VALIDATION_CONFIG = { +export const PRODUCT_VALIDATION_CONFIG = { /* Required Attrs */ 'productId': [validateRequired, validateStringLength], 'productTitle': [validateRequired, validateStringLength], diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index e84a7cad8676..a3f487bf744f 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -4,8 +4,6 @@ import {Services} from '#service'; import {user} from '#utils/log'; -import {getElementConfig} from 'extensions/amp-story/1.0/request-utils'; - import * as configData from '../../../../examples/amp-story/shopping/remote.json'; import * as remoteConfig from '../../../../examples/amp-story/shopping/remote.json'; import {registerServiceBuilder} from '../../../../src/service-helpers'; @@ -14,9 +12,13 @@ import { getStoreService, } from '../../../amp-story/1.0/amp-story-store-service'; import { + MAX_STR_LEN, + PRODUCT_VALIDATION_CONFIG, getShoppingConfig, storeShoppingConfig, - validateConfig, + validateNumber, + validateRequired, + validateStringLength, validateURLs, } from '../amp-story-shopping-config'; @@ -152,8 +154,23 @@ describes.realWin( }); }); + it('test validate required fields for config', async () => { + const invalidConfig = { + 'items': [{}], + }; + + await createAmpStoryShoppingConfig(null, invalidConfig); + + for (const [key, value] of Object.entries(PRODUCT_VALIDATION_CONFIG)) { + if (value.includes(validateRequired)) { + expect(() => { + validateRequired(key, invalidConfig['items'][0][key]); + }).to.throw(`Field ${key} is required.`); + } + } + }); + it('test config string too long', async () => { - expectAsyncConsoleError(userWarnStub, 1); const invalidConfig = { 'items': [ { @@ -172,15 +189,22 @@ describes.realWin( }; await createAmpStoryShoppingConfig(null, invalidConfig); + expect(() => { + validateStringLength( + 'productTitle', + invalidConfig['items'][0]['productTitle'] + ); + }).to.throw( + `Length of productTitle exceeds max length: ${invalidConfig['items'][0]['productTitle'].length} > ${MAX_STR_LEN}` + ); }); it('test config not a number', async () => { - expectAsyncConsoleError(userWarnStub, 1); const invalidConfig = { 'items': [ { 'productId': 'city-pop', - 'productTitle': 'Plastic Love', + 'productTitle': 'Adventure', 'productPrice': 'two dozen watermelons', /* Not an actual price */ 'productPriceCurrency': 'JPY', @@ -193,6 +217,15 @@ describes.realWin( }; await createAmpStoryShoppingConfig(null, invalidConfig); + + expect(() => { + validateNumber( + 'productPrice', + invalidConfig['items'][0]['productPrice'] + ); + }).to.throw( + `Value ${invalidConfig['items'][0]['productPrice']} for field productPrice is not a number` + ); }); it('test config invalid url array', async () => { @@ -200,22 +233,23 @@ describes.realWin( 'items': [ { 'productId': 'city-pop', - 'productTitle': 'Plastic Love', + 'productTitle': 'Adventure', 'productPrice': 19, 'productPriceCurrency': 'JPY', 'productImages': ['http://pizazz', 'http://zapp'], }, ], }; - /*const invalidURLStub = env.sandbox.spy(validateURLs); - const validateConfigStub = env.sandbox.spy(validateConfig); - await createAmpStoryShoppingConfig(null, invalidConfig); - expect(validateConfigStub).to.be.called.once; - expect(invalidURLStub).to.be.called.thrice; - expect(invalidURLStub).to.be.called.calledWith( - 'productImages', - invalidConfig['items'][0]['productImages'] - );*/ + + expect(() => { + validateURLs( + 'productImages', + invalidConfig['items'][0]['productImages'] + ); + }).to.throw( + 'amp-story-shopping-config productImages source must start with "https://" or "//" or be relative and served from either https or from localhost. Invalid value: ' + + invalidConfig['items'][0]['productImages'][0] + ); }); } ); From 066b74e1e910e48f14d8dede943e58ba833f421b Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Wed, 9 Feb 2022 19:21:40 -0800 Subject: [PATCH 030/116] fixed a few validation PR things --- .../0.1/amp-story-shopping-config.js | 61 ++++++++----------- .../test/test-amp-story-shopping-config.js | 2 - 2 files changed, 26 insertions(+), 37 deletions(-) diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index 8840e1dcb972..94af1861b6ed 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -10,6 +10,29 @@ import { ShoppingConfigDataDef, } from '../../amp-story/1.0/amp-story-store-service'; +/** + * Max Length of strings allowed in shopping config. + */ +export const MAX_STR_LEN = 100; + +/** @const {!Object>} */ +export const PRODUCT_VALIDATION_CONFIG = { + /* Required Attrs */ + 'productId': [validateRequired, validateStringLength], + 'productTitle': [validateRequired, validateStringLength], + 'productPrice': [validateRequired, validateNumber], + 'productImages': [validateRequired, validateURLs], + 'productPriceCurrency': [validateRequired, validateStringLength], + /* Optional Attrs */ + 'productColor': [validateStringLength], + 'productSize': [validateStringLength], + 'productIcon': [validateURLs], + 'productTagText': [validateStringLength], + 'reviewsData': [validateURLs], + 'ctaText': [validateNumber], + 'shippingText': [validateNumber], +}; + /** * @typedef {{ * items: !Array, @@ -27,18 +50,14 @@ export function validateRequired(field, value = null) { throw Error(`Field ${field} is required.`); } } -/** - * Max Length of strings allowed in shopping config. - */ -export const MAX_STR_LEN = 100; /** * Validates string length of shopping config attributes * @param {string} field * @param {?string=} str */ -export function validateStringLength(field, str = undefined) { - if (str !== undefined && str.length > MAX_STR_LEN) { +export function validateStringLength(field, str = null) { + if (str?.length > MAX_STR_LEN) { throw Error( `Length of ${field} exceeds max length: ${str.length} > ${MAX_STR_LEN}` ); @@ -63,7 +82,6 @@ export function validateNumber(field, number = null) { */ export function validateURLs(field, url = null) { if (url == null) { - /* Not a Required Attribute, return.*/ return; } @@ -74,24 +92,6 @@ export function validateURLs(field, url = null) { }); } -/** @const {!Object>} */ -export const PRODUCT_VALIDATION_CONFIG = { - /* Required Attrs */ - 'productId': [validateRequired, validateStringLength], - 'productTitle': [validateRequired, validateStringLength], - 'productPrice': [validateRequired, validateNumber], - 'productImages': [validateRequired, validateURLs], - 'productPriceCurrency': [validateRequired, validateStringLength], - /* Optional Attrs */ - 'productColor': [validateStringLength], - 'productSize': [validateStringLength], - 'productIcon': [validateURLs], - 'productTagText': [validateStringLength], - 'reviewsData': [validateURLs], - 'ctaText': [validateNumber], - 'shippingText': [validateNumber], -}; - /** * Validates shopping config. * @param {!ShoppingConfigDataDef} shoppingConfig @@ -121,9 +121,7 @@ export let KeyedShoppingConfigDef; export function getShoppingConfig(pageElement) { const element = pageElement.querySelector('amp-story-shopping-config'); return getElementConfig(element).then((config) => { - for (const configItem of config['items']) { - validateConfig(configItem); - } + config['items'].forEach((item) => validateConfig(item)); return keyByProductTagId(config); }); } @@ -151,10 +149,3 @@ export function storeShoppingConfig(pageElement, config) { return config; }); } - -export class AmpStoryShoppingConfig extends AMP.BaseElement { - /** @param {!AmpElement} element */ - constructor(element) { - super(element); - } -} diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index a3f487bf744f..3daf748c997b 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -37,13 +37,11 @@ describes.realWin( (env) => { let win; let storeService; - let userWarnStub; let pageElement; beforeEach(async () => { win = env.win; storeService = getStoreService(win); - userWarnStub = env.sandbox.stub(user(), 'warn'); registerServiceBuilder(win, 'story-store', function () { return storeService; }); From 77b9216db65a751f9ddba40f9a623df42b08f47e Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Wed, 9 Feb 2022 19:31:37 -0800 Subject: [PATCH 031/116] Added alt attribute for product images --- examples/amp-story/amp-story-shopping.html | 11 ++++++----- examples/amp-story/shopping/remote.json | 2 +- .../0.1/amp-story-shopping-config.js | 6 +++++- .../0.1/test/test-amp-story-shopping-config.js | 7 ++++--- 4 files changed, 16 insertions(+), 10 deletions(-) diff --git a/examples/amp-story/amp-story-shopping.html b/examples/amp-story/amp-story-shopping.html index a36e053ab410..ad029714602e 100644 --- a/examples/amp-story/amp-story-shopping.html +++ b/examples/amp-story/amp-story-shopping.html @@ -49,7 +49,7 @@ "productBrand": "Lamp Co", "productPrice": 799.00, "productPriceCurrency": "USD", - "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"] + "productImages": [{"url":"https://source.unsplash.com/Ry9WBo3qmoc/500x500","alt":"Abstract Art"}] }, { "productId": "art", @@ -57,7 +57,8 @@ "productBrand": "V. Artsy", "productPrice": 1200.00, "productPriceCurrency": "INR", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] + "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"], + "productImages": [{"url":"https://source.unsplash.com/BdVQU-NDtA8/500x500","alt":"Abstract Art"}] }, { "productId": "chair", @@ -66,7 +67,7 @@ "productPrice": 1000.00, "productPriceCurrency": "BRL", "productTagText": "The perfectly imperfect yellow chair", - "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"] + "productImages": [{"url":"https://source.unsplash.com/DgQGKKLaVhY/500x500","alt":"Chair"}] }, { "productId": "flowers", @@ -75,7 +76,7 @@ "productPrice": 10.00, "productPriceCurrency": "USD", "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", - "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"] + "productImages": [{"url":"https://source.unsplash.com/SavQfLRm4Do/500x500","alt":"Flowers"}] } ] } @@ -106,7 +107,7 @@ "productBrand": "V. Artsy", "productPrice": 1200.00, "productPriceCurrency": "JPY", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] + "productImages": [{"url":"https://source.unsplash.com/BdVQU-NDtA8/500x500","alt":"Abstract Art"}] } ] } diff --git a/examples/amp-story/shopping/remote.json b/examples/amp-story/shopping/remote.json index 028fa22c6883..4679fabfce8d 100644 --- a/examples/amp-story/shopping/remote.json +++ b/examples/amp-story/shopping/remote.json @@ -6,7 +6,7 @@ "productBrand": "V. Artsy", "productPrice": 1200.0, "productPriceCurrency": "JPY", - "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] + "productImages": [{"url":"https://source.unsplash.com/BdVQU-NDtA8/500x500","alt":"Abstract Art"}] } ] } diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js index 94af1861b6ed..c954fb6964f5 100644 --- a/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-config.js @@ -88,7 +88,11 @@ export function validateURLs(field, url = null) { const urls = Array.isArray(url) ? url : [url]; urls.forEach((url) => { - assertHttpsUrl(url, `amp-story-shopping-config ${field}`); + if (url.url != null) { + assertHttpsUrl(url.url, `amp-story-shopping-config ${field}`); + } else { + assertHttpsUrl(url, `amp-story-shopping-config ${field}`); + } }); } diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js index 3daf748c997b..82e0068d1dc5 100644 --- a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js +++ b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js @@ -2,8 +2,6 @@ import * as Preact from '#core/dom/jsx'; import {Services} from '#service'; -import {user} from '#utils/log'; - import * as configData from '../../../../examples/amp-story/shopping/remote.json'; import * as remoteConfig from '../../../../examples/amp-story/shopping/remote.json'; import {registerServiceBuilder} from '../../../../src/service-helpers'; @@ -93,7 +91,10 @@ describes.realWin( 'productPrice': 1200.0, 'productPriceCurrency': 'JPY', 'productImages': [ - 'https://source.unsplash.com/BdVQU-NDtA8/500x500', + { + 'url': 'https://source.unsplash.com/BdVQU-NDtA8/500x500', + 'alt': 'Abstract Art', + }, ], }, }; From 2807b20f518d2b0df931b2b4206855c4f8d468c6 Mon Sep 17 00:00:00 2001 From: Jonathan Shamblen Date: Wed, 9 Feb 2022 19:33:57 -0800 Subject: [PATCH 032/116] udpated visual diff tests --- .../amp-story/amp-story-shopping-lang-de.html | 28 +++++++++---------- .../amp-story/amp-story-shopping-rtl.html | 26 +++++++++-------- .../amp-story/amp-story-shopping.html | 28 ++++++++++--------- 3 files changed, 43 insertions(+), 39 deletions(-) diff --git a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html index 399e3827ac61..eef0873fd8e1 100644 --- a/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html +++ b/examples/visual-tests/amp-story/amp-story-shopping-lang-de.html @@ -1,6 +1,4 @@ - @@ -9,6 +7,7 @@ + + + - - - -