`}static variantStyle=St`
:host([variant='twp']) {
padding: 4px 10px 5px 10px;
}
@@ -1302,7 +1328,7 @@ merch-card[variant='twp'] merch-offer-select {
flex-direction: column;
align-self: flex-start;
}
- `};import{html as Se,css as Ce}from"../lit-all.min.js";var se=`
+ `};import{html as Ct,css as kt}from"../lit-all.min.js";var st=`
:root {
--consonant-merch-card-ccd-slice-single-width: 322px;
--consonant-merch-card-ccd-slice-icon-size: 30px;
@@ -1324,13 +1350,13 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a:not(.con-button) {
overflow: hidden;
border-radius: 50%;
}
-`;var z=class extends d{getGlobalCSS(){return se}renderLayout(){return Se`
+`;var k=class extends d{getGlobalCSS(){return st}renderLayout(){return Ct`
${this.badge}
-
`}static variantStyle=Ce`
+
`}static variantStyle=kt`
:host([variant='ccd-slice']) {
width: var(--consonant-merch-card-ccd-slice-single-width);
border-radius: 4px;
@@ -1386,7 +1412,7 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a:not(.con-button) {
width: inherit;
height: inherit;
}
- `};var G=(t,e=!1)=>{switch(t.variant){case"catalog":return new u(t);case"ccd-action":return new f(t);case"image":return new T(t);case"inline-heading":return new _(t);case"mini-compare-chart":return new b(t);case"plans":return new y(t);case"product":return new w(t);case"segment":return new E(t);case"special-offers":return new S(t);case"twp":return new C(t);case"ccd-slice":return new z(t);default:return e?void 0:new w(t)}},de=()=>{let t=[];return t.push(u.variantStyle),t.push(f.variantStyle),t.push(b.variantStyle),t.push(y.variantStyle),t.push(E.variantStyle),t.push(S.variantStyle),t.push(C.variantStyle),t.push(z.variantStyle),t};var he=document.createElement("style");he.innerHTML=`
+ `};var G=(r,t=!1)=>{switch(r.variant){case"catalog":return new f(r);case"ccd-action":return new v(r);case"image":return new _(r);case"inline-heading":return new $(r);case"mini-compare-chart":return new y(r);case"plans":return new w(r);case"product":return new x(r);case"segment":return new E(r);case"special-offers":return new S(r);case"twp":return new C(r);case"ccd-slice":return new k(r);default:return t?void 0:new x(r)}},dt=()=>{let r=[];return r.push(f.variantStyle),r.push(v.variantStyle),r.push(y.variantStyle),r.push(x.variantStyle),r.push(w.variantStyle),r.push(E.variantStyle),r.push(S.variantStyle),r.push(C.variantStyle),r.push(k.variantStyle),r};var ht=document.createElement("style");ht.innerHTML=`
:root {
--consonant-merch-card-detail-font-size: 12px;
--consonant-merch-card-detail-font-weight: 500;
@@ -1749,4 +1775,4 @@ body.merch-modal {
scrollbar-gutter: stable;
height: 100vh;
}
-`;document.head.appendChild(he);var c="merch-card",a=class extends ze{static properties={name:{type:String,attribute:"name",reflect:!0},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color"},borderColor:{type:String,attribute:"border-color"},badgeBackgroundColor:{type:String,attribute:"badge-background-color"},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},actionMenuContent:{type:String,attribute:"action-menu-content"},customHr:{type:Boolean,attribute:"custom-hr"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},selected:{type:Boolean,attribute:"aria-selected",reflect:!0},storageOption:{type:String,attribute:"storage",reflect:!0},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:e=>{let[r,o,l]=e.split(",");return{PUF:r,ABM:o,M2M:l}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(r=>{let[o,l,p]=r.split(":"),x=Number(l);return[o,{order:isNaN(x)?void 0:x,size:p}]})),toAttribute:e=>Object.entries(e).map(([r,{order:o,size:l}])=>[r,o,l].filter(p=>p!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[q,de(),...j()];customerSegment;marketSegment;variantLayout;constructor(){super(),this.filters={},this.types="",this.selected=!1}firstUpdated(){this.variantLayout=G(this,!1),this.variantLayout?.connectedCallbackHook()}willUpdate(e){(e.has("variant")||!this.variantLayout)&&(this.variantLayout=G(this),this.variantLayout.connectedCallbackHook())}updated(e){(e.has("badgeBackgroundColor")||e.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.variantLayout?.postCardUpdateHook(this)}get prices(){return Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'))}render(){if(!(!this.isConnected||!this.variantLayout||this.style.display==="none"))return this.variantLayout.renderLayout()}get computedBorderStyle(){return this.variant!=="twp"?`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`:""}get badgeElement(){return this.shadowRoot.getElementById("badge")}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}async toggleStockOffer({target:e}){if(!this.stockOfferOsis)return;let r=this.checkoutLinks;if(r.length!==0)for(let o of r){await o.onceSettled();let l=o.value?.[0]?.planType;if(!l)return;let p=this.stockOfferOsis[l];if(!p)return;let x=o.dataset.wcsOsi.split(",").filter(me=>me!==p);e.checked&&x.push(p),o.dataset.wcsOsi=x.join(",")}}handleQuantitySelection(e){let r=this.checkoutLinks;for(let o of r)o.dataset.quantity=e.detail.option}get titleElement(){return this.querySelector(this.variantLayout?.headingSelector||".card-heading")}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(e){let r={...this.filters};Object.keys(r).forEach(o=>{if(e){r[o].order=Math.min(r[o].order||2,2);return}let l=r[o].order;l===1||isNaN(l)||(r[o].order=Number(l)+1)}),this.filters=r}includes(e){return this.textContent.match(new RegExp(e,"i"))!==null}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex",this.getAttribute("tabindex")??"0"),this.addEventListener(P,this.handleQuantitySelection),this.addEventListener(I,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),this.variantLayout.disconnectedCallbackHook(),this.removeEventListener(P,this.handleQuantitySelection),this.storageOptions?.removeEventListener(R,this.handleStorageChange)}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let e=this.storageOptions?.selected;if(e){let r=this.querySelector(`merch-offer-select[storage="${e}"]`);if(r)return r}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(W,{bubbles:!0}))}handleStorageChange(){let e=this.closest("merch-card")?.offerSelect.cloneNode(!0);e&&this.dispatchEvent(new CustomEvent(R,{detail:{offerSelect:e},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(e){if(e===this.merchOffer)return;this.merchOffer=e;let r=this.dynamicPrice;if(e.price&&r){let o=e.price.cloneNode(!0);r.onceSettled?r.onceSettled().then(()=>{r.replaceWith(o)}):r.replaceWith(o)}}};customElements.define(c,a);
+`;document.head.appendChild(ht);var c="merch-card",n=class extends zt{static properties={name:{type:String,attribute:"name",reflect:!0},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color"},borderColor:{type:String,attribute:"border-color"},badgeBackgroundColor:{type:String,attribute:"badge-background-color"},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},actionMenuContent:{type:String,attribute:"action-menu-content"},customHr:{type:Boolean,attribute:"custom-hr"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},selected:{type:Boolean,attribute:"aria-selected",reflect:!0},storageOption:{type:String,attribute:"storage",reflect:!0},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:t=>{let[e,o,l]=t.split(",");return{PUF:e,ABM:o,M2M:l}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:t=>Object.fromEntries(t.split(",").map(e=>{let[o,l,p]=e.split(":"),u=Number(l);return[o,{order:isNaN(u)?void 0:u,size:p}]})),toAttribute:t=>Object.entries(t).map(([e,{order:o,size:l}])=>[e,o,l].filter(p=>p!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[q,dt(),...F()];customerSegment;marketSegment;variantLayout;constructor(){super(),this.filters={},this.types="",this.selected=!1}firstUpdated(){this.variantLayout=G(this,!1),this.variantLayout?.connectedCallbackHook()}willUpdate(t){(t.has("variant")||!this.variantLayout)&&(this.variantLayout=G(this),this.variantLayout.connectedCallbackHook())}updated(t){(t.has("badgeBackgroundColor")||t.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.variantLayout?.postCardUpdateHook(this)}get prices(){return Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'))}render(){if(!(!this.isConnected||!this.variantLayout||this.style.display==="none"))return this.variantLayout.renderLayout()}get computedBorderStyle(){return this.variant!=="twp"?`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`:""}get badgeElement(){return this.shadowRoot.getElementById("badge")}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}async toggleStockOffer({target:t}){if(!this.stockOfferOsis)return;let e=this.checkoutLinks;if(e.length!==0)for(let o of e){await o.onceSettled();let l=o.value?.[0]?.planType;if(!l)return;let p=this.stockOfferOsis[l];if(!p)return;let u=o.dataset.wcsOsi.split(",").filter(mt=>mt!==p);t.checked&&u.push(p),o.dataset.wcsOsi=u.join(",")}}handleQuantitySelection(t){let e=this.checkoutLinks;for(let o of e)o.dataset.quantity=t.detail.option}get titleElement(){return this.querySelector(this.variantLayout?.headingSelector||".card-heading")}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(t){let e={...this.filters};Object.keys(e).forEach(o=>{if(t){e[o].order=Math.min(e[o].order||2,2);return}let l=e[o].order;l===1||isNaN(l)||(e[o].order=Number(l)+1)}),this.filters=e}includes(t){return this.textContent.match(new RegExp(t,"i"))!==null}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex",this.getAttribute("tabindex")??"0"),this.addEventListener(H,this.handleQuantitySelection),this.addEventListener(I,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),this.variantLayout.disconnectedCallbackHook(),this.removeEventListener(H,this.handleQuantitySelection),this.storageOptions?.removeEventListener(P,this.handleStorageChange)}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let t=this.storageOptions?.selected;if(t){let e=this.querySelector(`merch-offer-select[storage="${t}"]`);if(e)return e}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(W,{bubbles:!0}))}handleStorageChange(){let t=this.closest("merch-card")?.offerSelect.cloneNode(!0);t&&this.dispatchEvent(new CustomEvent(P,{detail:{offerSelect:t},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(t){if(t===this.merchOffer)return;this.merchOffer=t;let e=this.dynamicPrice;if(t.price&&e){let o=t.price.cloneNode(!0);e.onceSettled?e.onceSettled().then(()=>{e.replaceWith(o)}):e.replaceWith(o)}}};customElements.define(c,n);
diff --git a/libs/features/jarvis-chat.js b/libs/features/jarvis-chat.js
index fc5c313ee5a..03e516ba214 100644
--- a/libs/features/jarvis-chat.js
+++ b/libs/features/jarvis-chat.js
@@ -204,7 +204,7 @@ const openChat = (event) => {
};
const startInitialization = async (config, event, onDemand) => {
- const asset = 'https://client.messaging.adobe.com/latest/AdobeMessagingClient';
+ const asset = `https://${config.env.name !== 'prod' ? 'stage-' : ''}client.messaging.adobe.com/latest/AdobeMessagingClient`;
await Promise.all([
loadStyle(`${asset}.css`),
loadScript(`${asset}.js`),
diff --git a/libs/features/mas/mocks/offers.json b/libs/features/mas/mocks/offers.json
index 3043954080d..6defc19bce9 100644
--- a/libs/features/mas/mocks/offers.json
+++ b/libs/features/mas/mocks/offers.json
@@ -1102,5 +1102,43 @@
"language": "MULT",
"merchant": "ADOBE"
}
- ]
+ ],
+ "nTbB50pS4lLGv_x1l_UKggd-lxxo2zAJ7WYDa2mW19s-mult": [
+ {
+ "offerSelectorIds": [
+ "nTbB50pS4lLGv_x1l_UKggd-lxxo2zAJ7WYDa2mW19s"
+ ],
+ "offerId": "44C623423443E5D4D7F53719C25F71D7",
+ "startDate": "2022-08-08T07:00:00.000Z",
+ "endDate": "2099-12-20T07:58:00.000Z",
+ "priceDetails": {
+ "price": 22.19,
+ "priceWithoutDiscount": 23.99,
+ "priceWithoutTax": 22.19,
+ "priceWithoutDiscountAndTax": 23.99,
+ "usePrecision": true,
+ "formatString": "'US$'#,##0.00",
+ "taxDisplay": "TAX_EXCLUSIVE",
+ "taxTerm": "TAX"
+ },
+ "analytics": "{\"offerId\":\"44C623423443E5D4D7F53719C25F71D7\",\"label\":\"acrobat_pro_dc_plus_sign_funnel_team\",\"price\":\"22.19\",\"amountWithoutTax\":\"22.19\",\"commitmentType\":\"YEAR\",\"billingFrequency\":\"MONTHLY\",\"currencyCode\":\"USD\"}",
+ "productArrangementCode": "acrobat_pro_dc_plus_sign_funnel_team",
+ "productArrangement": {
+ "productFamily": "ACROBAT",
+ "productCode": "ASIG"
+ },
+ "buyingProgram": "RETAIL",
+ "commitment": "YEAR",
+ "term": "MONTHLY",
+ "customerSegment": "TEAM",
+ "marketSegments": [
+ "COM"
+ ],
+ "salesChannel": "DIRECT",
+ "offerType": "PROMOTION",
+ "pricePoint": "ACROBAT_PRO_ASIG_FY22_LO_TEAM_BUNDLE_7_5_OFF_WW_COM",
+ "language": "MULT",
+ "merchant": "ADOBE"
+ }
+ ]
}
diff --git a/libs/features/mas/web-components/src/variants/mini-compare-chart.js b/libs/features/mas/web-components/src/variants/mini-compare-chart.js
index 02c88066b13..6f42b57c0ad 100644
--- a/libs/features/mas/web-components/src/variants/mini-compare-chart.js
+++ b/libs/features/mas/web-components/src/variants/mini-compare-chart.js
@@ -10,16 +10,9 @@ export class MiniCompareChart extends VariantLayout {
super(card);
}
- #container;
-
getRowMinHeightPropertyName = (index) =>
`--consonant-merch-card-footer-row-${index}-min-height`;
- getContainer() {
- this.#container = this.#container ?? this.card.closest('[class*="-merch-cards"]') ?? this.card.parentElement;
- return this.#container;
- }
-
getGlobalCSS() {
return CSS;
}
@@ -35,28 +28,10 @@ export class MiniCompareChart extends VariantLayout {
return html`
`;
}
- updateMiniCompareElementMinHeight (el, name) {
- const elMinHeightPropertyName = `--consonant-merch-card-mini-compare-${name}-height`;
- const height = Math.max(
- 0,
- parseFloat(window.getComputedStyle(el).height) || 0,
- );
- const maxMinHeight =
- parseFloat(
- this.getContainer().style.getPropertyValue(elMinHeightPropertyName),
- ) || 0;
- if (height > maxMinHeight) {
- this.getContainer().style.setProperty(
- elMinHeightPropertyName,
- `${height}px`,
- );
- }
- }
-
adjustMiniCompareBodySlots () {
if (this.card.getBoundingClientRect().width <= 2) return;
- this.updateMiniCompareElementMinHeight(
+ this.updateCardElementMinHeight(
this.card.shadowRoot.querySelector('.top-section'),
'top-section',
);
@@ -73,12 +48,12 @@ export class MiniCompareChart extends VariantLayout {
];
slots.forEach((slot) =>
- this.updateMiniCompareElementMinHeight(
+ this.updateCardElementMinHeight(
this.card.shadowRoot.querySelector(`slot[name="${slot}"]`),
slot,
),
);
- this.updateMiniCompareElementMinHeight(
+ this.updateCardElementMinHeight(
this.card.shadowRoot.querySelector('footer'),
'footer',
);
@@ -88,7 +63,7 @@ export class MiniCompareChart extends VariantLayout {
);
if (badge && badge.textContent !== '') {
this.getContainer().style.setProperty(
- '--consonant-merch-card-mini-compare-top-section-mobile-height',
+ '--consonant-merch-card-mini-compare-chart-top-section-mobile-height',
'32px',
);
}
@@ -158,7 +133,7 @@ export class MiniCompareChart extends VariantLayout {
display: block;
}
:host([variant='mini-compare-chart']) footer {
- min-height: var(--consonant-merch-card-mini-compare-footer-height);
+ min-height: var(--consonant-merch-card-mini-compare-chart-footer-height);
padding: var(--consonant-merch-spacing-xs);
}
@@ -166,7 +141,7 @@ export class MiniCompareChart extends VariantLayout {
:host([variant='mini-compare-chart']) .top-section {
padding-top: var(--consonant-merch-spacing-s);
padding-inline-start: var(--consonant-merch-spacing-s);
- height: var(--consonant-merch-card-mini-compare-top-section-height);
+ height: var(--consonant-merch-card-mini-compare-chart-top-section-height);
}
@media screen and ${unsafeCSS(TABLET_DOWN)} {
@@ -194,35 +169,35 @@ export class MiniCompareChart extends VariantLayout {
}
/* mini-compare card heights for the slots: heading-m, body-m, heading-m-price, price-commitment, offers, promo-text, footer */
:host([variant='mini-compare-chart']) slot[name='heading-m'] {
- min-height: var(--consonant-merch-card-mini-compare-heading-m-height);
+ min-height: var(--consonant-merch-card-mini-compare-chart-heading-m-height);
}
:host([variant='mini-compare-chart']) slot[name='body-m'] {
- min-height: var(--consonant-merch-card-mini-compare-body-m-height);
+ min-height: var(--consonant-merch-card-mini-compare-chart-body-m-height);
}
:host([variant='mini-compare-chart']) slot[name='heading-m-price'] {
min-height: var(
- --consonant-merch-card-mini-compare-heading-m-price-height
+ --consonant-merch-card-mini-compare-chart-heading-m-price-height
);
}
:host([variant='mini-compare-chart']) slot[name='body-xxs'] {
min-height: var(
- --consonant-merch-card-mini-compare-body-xxs-height
+ --consonant-merch-card-mini-compare-chart-body-xxs-height
);
}
:host([variant='mini-compare-chart']) slot[name='price-commitment'] {
min-height: var(
- --consonant-merch-card-mini-compare-price-commitment-height
+ --consonant-merch-card-mini-compare-chart-price-commitment-height
);
}
:host([variant='mini-compare-chart']) slot[name='offers'] {
- min-height: var(--consonant-merch-card-mini-compare-offers-height);
+ min-height: var(--consonant-merch-card-mini-compare-chart-offers-height);
}
:host([variant='mini-compare-chart']) slot[name='promo-text'] {
- min-height: var(--consonant-merch-card-mini-compare-promo-text-height);
+ min-height: var(--consonant-merch-card-mini-compare-chart-promo-text-height);
}
:host([variant='mini-compare-chart']) slot[name='callout-content'] {
min-height: var(
- --consonant-merch-card-mini-compare-callout-content-height
+ --consonant-merch-card-mini-compare-chart-callout-content-height
);
}
`;
diff --git a/libs/features/mas/web-components/src/variants/product.js b/libs/features/mas/web-components/src/variants/product.js
index b9aced83799..8c7d7862f1f 100644
--- a/libs/features/mas/web-components/src/variants/product.js
+++ b/libs/features/mas/web-components/src/variants/product.js
@@ -1,5 +1,6 @@
import { VariantLayout } from "./variant-layout";
-import { html } from 'lit';
+import { isMobile } from '../utils.js';
+import { html, css } from 'lit';
import { CSS } from './product.css.js';
export class Product extends VariantLayout {
@@ -11,16 +12,75 @@ export class Product extends VariantLayout {
return CSS;
}
+ adjustProductBodySlots() {
+ if (this.card.getBoundingClientRect().width === 0) return;
+
+ const slots = [
+ 'heading-xs',
+ 'body-xxs',
+ 'body-xs',
+ 'promo-text',
+ 'callout-content',
+ 'body-lower',
+ ];
+
+ slots.forEach((slot) =>
+ this.updateCardElementMinHeight(
+ this.card.shadowRoot.querySelector(`slot[name="${slot}"]`),
+ slot
+ ),
+ );
+ }
+
renderLayout() {
return html` ${this.badge}
- ${!this.promoBottom ? html` ` : ''}
+ ${!this.promoBottom ? html` ` : ''}
- ${this.promoBottom ? html` ` : ''}
+ ${this.promoBottom ? html` ` : ''}
+
+
${this.secureLabelFooter}`;
}
+
+ connectedCallbackHook() {
+ super.connectedCallbackHook();
+ window.addEventListener('resize', this.postCardUpdateHook.bind(this));
+ }
+
+ postCardUpdateHook() {
+ if (!isMobile()) {
+ this.adjustProductBodySlots();
+ }
+ }
+
+ static variantStyle = css`
+ :host([variant='product']) > slot:not([name='icons']) {
+ display: block;
+ }
+ :host([variant='product']) slot[name='body-xs'] {
+ min-height: var(--consonant-merch-card-product-body-xs-height);
+ display: block;
+ }
+ :host([variant='product']) slot[name='heading-xs'] {
+ min-height: var(--consonant-merch-card-product-heading-xs-height);
+ display: block;
+ }
+ :host([variant='product']) slot[name='body-xxs'] {
+ min-height: var(--consonant-merch-card-product-body-xxs-height);
+ display: block;
+ }
+ :host([variant='product']) slot[name='promo-text'] {
+ min-height: var(--consonant-merch-card-product-promo-text-height);
+ display: block;
+ }
+ :host([variant='product']) slot[name='callout-content'] {
+ min-height: var(--consonant-merch-card-product-callout-content-height);
+ display: block;
+ }
+ `;
}
diff --git a/libs/features/mas/web-components/src/variants/variant-layout.js b/libs/features/mas/web-components/src/variants/variant-layout.js
index 269b27e97c0..4f621359eb1 100644
--- a/libs/features/mas/web-components/src/variants/variant-layout.js
+++ b/libs/features/mas/web-components/src/variants/variant-layout.js
@@ -5,6 +5,13 @@ export class VariantLayout {
card;
+ #container;
+
+ getContainer() {
+ this.#container = this.#container ?? this.card.closest('[class*="-merch-cards"]') ?? this.card.parentElement;
+ return this.#container;
+ }
+
insertVariantStyle() {
if (!VariantLayout.styleMap[this.card.variant]) {
VariantLayout.styleMap[this.card.variant] = true;
@@ -14,6 +21,25 @@ export class VariantLayout {
}
}
+ updateCardElementMinHeight(el, name) {
+ const elMinHeightPropertyName = `--consonant-merch-card-${this.card.variant}-${name}-height`;
+ const height = Math.max(
+ 0,
+ parseInt(window.getComputedStyle(el).height) || 0,
+ );
+ const maxMinHeight =
+ parseInt(
+ this.getContainer().style.getPropertyValue(elMinHeightPropertyName),
+ ) || 0;
+
+ if (height > maxMinHeight) {
+ this.getContainer().style.setProperty(
+ elMinHeightPropertyName,
+ `${height}px`,
+ );
+ }
+ }
+
constructor(card) {
this.card = card;
this.insertVariantStyle();
diff --git a/libs/features/mas/web-components/src/variants/variants.js b/libs/features/mas/web-components/src/variants/variants.js
index 9a676de7d80..0a7d9a976cb 100644
--- a/libs/features/mas/web-components/src/variants/variants.js
+++ b/libs/features/mas/web-components/src/variants/variants.js
@@ -44,6 +44,7 @@ const getVariantStyles = () => {
styles.push(Catalog.variantStyle);
styles.push(CCDAction.variantStyle);
styles.push(MiniCompareChart.variantStyle);
+ styles.push(Product.variantStyle);
styles.push(Plans.variantStyle);
styles.push(Segment.variantStyle);
styles.push(SpecialOffer.variantStyle);
diff --git a/libs/features/mas/web-components/test/merch-card-product.test.html b/libs/features/mas/web-components/test/merch-card-product.test.html
new file mode 100644
index 00000000000..944bb43fecd
--- /dev/null
+++ b/libs/features/mas/web-components/test/merch-card-product.test.html
@@ -0,0 +1,176 @@
+
+
+
+
+
+
+
Merch Card Web Component Product Variant demo page
+
+
+
+
+
+
+
+
+
+ Toggle RTL
+ Skip tests
+ Run tests
+
+
+
+ Acrobat Standard for teams
+
+ Annual subscription, cancel within 14 days for a full refund . Fee applies if you cancel after 14
+ days.
+
+
+
+
AI Assistant add-on available for US$4.99/mo. Early access pricing extended to
+ September 4, 2024.
+
+
+
+
+
Simple PDF app with capabilities to edit, convert, and e-sign.
+
+
+
+
+
+
+
+ Acrobat Pro for teams
+
+ Annual subscription, cancel within 14 days for a full refund . Fee applies if you cancel after 14
+ days.
+
+
+
+
AI Assistant add-on available for US$4.99/mo. Early access pricing extended to
+ September 4, 2024.
+
+
+
+
+
Essential PDF solution with full conversion and editing capabilities, advanced e-sign features, and
+ more.
+
+
+
+
+
+
+
+ Acrobat Pro for teams 5-pack
+
+ Annual subscription, paid monthly. Cancel within 14 days for a full
+ refund. Fee applies if you cancel after 14 days. Minimum of 5 licenses. First year only. See terms .
+
+
+
+
AI Assistant add-on available for US$4.99/mo. Early access pricing extended to
+ September 4, 2024. I am the bigger string
+
+
+
+
+
Essential PDF solution with full convert and edit capabilities, advanced e-sign features, and more.
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/libs/features/mas/web-components/test/merch-card-product.test.html.js b/libs/features/mas/web-components/test/merch-card-product.test.html.js
new file mode 100644
index 00000000000..c67fb464a98
--- /dev/null
+++ b/libs/features/mas/web-components/test/merch-card-product.test.html.js
@@ -0,0 +1,69 @@
+// @ts-nocheck
+import { runTests } from '@web/test-runner-mocha';
+import { expect } from '@esm-bundle/chai';
+
+import { mockLana } from './mocks/lana.js';
+import { mockFetch } from './mocks/fetch.js';
+
+import '../src/merch-offer.js';
+import '../src/merch-offer-select.js';
+import '../src/merch-quantity-select.js';
+
+import { appendMiloStyles } from './utils.js';
+import { mockIms } from './mocks/ims.js';
+import { withWcs } from './mocks/wcs.js';
+import mas from './mas.js';
+
+const skipTests = sessionStorage.getItem('skipTests');
+
+runTests(async () => {
+ mockIms();
+ mockLana();
+ await mockFetch(withWcs);
+ await mas();
+ if (skipTests !== null) {
+ appendMiloStyles();
+ return;
+ };
+
+ describe('merch-card web component', () => {
+ it('product should have same body slot heights', async () => {
+ const products = document.querySelectorAll(
+ 'merch-card[variant="product"]',
+ );
+ await Promise.all(
+ [...products].flatMap((card) => {
+ return [
+ card.updateComplete,
+ ...[...card.querySelectorAll('[data-wcs-osi]')].map(
+ (osi) => osi.onceSettled(),
+ ),
+ ];
+ }),
+ );
+
+ const [card1Slots, card2Slots, card3Slots] = [
+ ...products,
+ ].map((product) => {
+ const heights = [
+ 'slot[name="heading-xs"]',
+ 'slot[name="body-xxs"]',
+ 'slot[name="body-xs"]',
+ 'slot[name="callout-content"]',
+ 'slot[name="body-lower"]',
+ ]
+ .map((selector) => {
+ const el =
+ product.shadowRoot.querySelector(selector);
+ if (!el) return 0;
+ return parseInt(window.getComputedStyle(el).height);
+ })
+ .join(',');
+ return heights;
+ });
+ expect(card1Slots).to.not.contain('auto');
+ expect(card1Slots).to.equal(card2Slots);
+ expect(card2Slots).to.equal(card3Slots);
+ });
+ });
+});
diff --git a/libs/features/mas/web-components/test/merch-card.mini-compare.test.html.js b/libs/features/mas/web-components/test/merch-card.mini-compare.test.html.js
index 55e5028ca4e..e439f80272f 100644
--- a/libs/features/mas/web-components/test/merch-card.mini-compare.test.html.js
+++ b/libs/features/mas/web-components/test/merch-card.mini-compare.test.html.js
@@ -52,7 +52,7 @@ runTests(async () => {
const el =
miniCompareChart.shadowRoot.querySelector(selector);
if (!el) return 0;
- return parseFloat(window.getComputedStyle(el).height);
+ return parseInt(window.getComputedStyle(el).height, 10);
})
.join(',');
return heights;
@@ -76,12 +76,13 @@ runTests(async () => {
.fill()
.map(
(_, i) =>
- parseFloat(
+ parseInt(
window.getComputedStyle(
miniCompareChart.querySelector(
`.footer-row-cell:nth-child(${i + 1})`,
),
),
+ 10,
).height,
)
.join(',');
diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js
index afd835a9823..121ab957be7 100644
--- a/libs/navigation/navigation.js
+++ b/libs/navigation/navigation.js
@@ -4,7 +4,7 @@ const blockConfig = [
name: 'global-navigation',
targetEl: 'header',
appendType: 'prepend',
- params: ['imsClientId', 'searchEnabled', 'unavHelpChildren'],
+ params: ['imsClientId', 'searchEnabled', 'unavHelpChildren', 'customLinks'],
},
{
key: 'footer',
diff --git a/libs/styles/styles.css b/libs/styles/styles.css
index 749ca43a029..335ef59b0d0 100644
--- a/libs/styles/styles.css
+++ b/libs/styles/styles.css
@@ -732,6 +732,10 @@ header.global-navigation.has-promo {
display: none !important;
}
+.disable-scroll {
+ overflow: hidden;
+}
+
h1, h2, h3, h4, h5, h6 {
scroll-margin-top: var(--feds-totalheight-nav);
}
diff --git a/nala/blocks/marquee-anchors/marquee-anchors.page.js b/nala/blocks/marquee-anchors/marquee-anchors.page.js
new file mode 100644
index 00000000000..aa82a5684cb
--- /dev/null
+++ b/nala/blocks/marquee-anchors/marquee-anchors.page.js
@@ -0,0 +1,57 @@
+export default class MarqueeAnchors {
+ constructor(page, nth = 0) {
+ this.page = page;
+
+ // marquee anchor variants locators
+ this.marqueeAnchors = page.locator('.marquee-anchors').nth(nth);
+ this.marqueeAnchorsTransparent = page.locator('.marquee-anchors').nth(nth);
+
+ // marquee details
+ this.detailM = this.marqueeAnchors.locator('.detail-m');
+ this.detailL = this.marqueeAnchors.locator('.detail-l');
+
+ // marquee headings
+ this.headingL = this.marqueeAnchors.locator('.heading-l').nth(0);
+
+ // marquee body area
+ this.bodyM = this.marqueeAnchors.locator('.body-m').nth(0);
+
+ // marquee actions area
+ this.actionArea = this.marqueeAnchors.locator('.action-area');
+ this.outlineButton = this.marqueeAnchors.locator('.con-button.outline');
+ this.blueButton = this.marqueeAnchors.locator('.con-button.blue');
+ this.supplementalText = this.marqueeAnchors.locator('.supplemental-text');
+ this.foregroundImage = this.marqueeAnchors.locator('.supplemental-text img');
+ // marquee anchor link
+ this.anchorHeader = this.marqueeAnchors.locator('.links-header');
+ this.anchorFooter = this.marqueeAnchors.locator('.links-footer');
+
+ this.anchorLinks = this.marqueeAnchors.locator('.anchor-link');
+ this.anchorLink = {
+ howTo: {
+ link: this.anchorLinks.nth(0),
+ linkHeader: this.anchorLinks.nth(0).locator('#anchor-how-to'),
+ linkText: this.anchorLinks.nth(0).locator('#anchor-how-to p').nth(0),
+ icon: this.anchorLinks.nth(0).locator('img.icon-milo'),
+ },
+ text: {
+ link: this.anchorLinks.nth(1),
+ linkHeader: this.anchorLinks.locator('#anchor-text'),
+ linkText: this.anchorLinks.locator('#anchor-text p').nth(0),
+ icon: this.anchorLinks.nth(1).locator('img.icon-milo'),
+ },
+ media: {
+ link: this.anchorLinks.nth(2),
+ linkHeader: this.anchorLinks.locator('#anchor-media'),
+ linkText: this.anchorLinks.locator('#anchor-media p').nth(0),
+ icon: this.anchorLinks.nth(2).locator('img.icon-milo'),
+ },
+ linkToAdobe: {
+ link: this.anchorLinks.nth(3),
+ linkHeader: this.anchorLinks.locator('h4#anchor-link-to-adobe'),
+ linkText: this.anchorLinks.locator('#anchor-link-to-adobe p').nth(0),
+ icon: this.anchorLinks.nth(3).locator('img.icon-milo'),
+ },
+ };
+ }
+}
diff --git a/nala/blocks/marquee-anchors/marquee-anchors.spec.js b/nala/blocks/marquee-anchors/marquee-anchors.spec.js
new file mode 100644
index 00000000000..bf79fb4a3cf
--- /dev/null
+++ b/nala/blocks/marquee-anchors/marquee-anchors.spec.js
@@ -0,0 +1,81 @@
+module.exports = {
+ name: 'Marquee Anchors Block',
+ features: [
+ {
+ tcid: '0',
+ name: 'Marquee Anchors',
+ path: '/drafts/nala/blocks/marquee/marquee-anchors',
+ data: {
+ detailText: 'Heading M Bold 24/30',
+ h2Text: 'Heading XL Bold (36/45) Lorem ipsum (Image Background)',
+ bodyText: 'Lorem ipsum dolor sit amet,.',
+ outlineButtonText: 'Lorem ipsum',
+ blueButtonText: 'Call to action',
+ anchors: {
+ linkCount: 4,
+ headerText: 'Anchors header (optional)',
+ footerText: 'Anchors footer What we offer (optional)',
+ howTo: {
+ h4Text: 'How to',
+ linkText: 'Link to a section with header “How To”',
+ href: 'http://how-to-block/',
+ },
+ text: {
+ h4Text: 'Text',
+ linkText: 'Link to a section with header “Text”',
+ href: 'http://text-block/',
+ },
+ media: {
+ h4Text: 'Media',
+ linkText: 'Link to a section with header “Media”',
+ href: 'http://media-block/',
+ },
+ linkToAdobe: {
+ h4Text: 'Link to Adobe',
+ linkText: 'Link to a new page',
+ href: 'https://adobe.com/',
+ },
+ },
+ },
+ tags: '@marquee @marquee-anchors @smoke @regression @milo',
+ },
+ {
+ tcid: '1',
+ name: 'Marquee Anchors (Transparent)',
+ path: '/drafts/nala/blocks/marquee/marquee-anchors-transparent',
+ data: {
+ detailText: 'Heading M Bold 24/30',
+ h2Text: 'Heading XL Bold (36/45) Lorem ipsum (Image Background)',
+ bodyText: 'Lorem ipsum dolor sit amet.',
+ outlineButtonText: 'Lorem ipsum',
+ blueButtonText: 'Call to action',
+ anchors: {
+ linkCount: 4,
+ headerText: 'Anchors header (optional)',
+ footerText: 'Anchors footer What we offer (optional)',
+ howTo: {
+ h4Text: 'How to',
+ linkText: 'Link to a section with header “How To”',
+ href: 'http://how-to-block/',
+ },
+ text: {
+ h4Text: 'Text',
+ linkText: 'Link to a section with header “Text”',
+ href: 'http://text-block/',
+ },
+ media: {
+ h4Text: 'Media',
+ linkText: 'Link to a section with header “Media”',
+ href: 'http://media-block/',
+ },
+ linkToAdobe: {
+ h4Text: 'Link to Adobe',
+ linkText: 'Link to a new page',
+ href: 'https://adobe.com/',
+ },
+ },
+ },
+ tags: '@marquee @marquee-anchors @smoke @regression @milo',
+ },
+ ],
+};
diff --git a/nala/blocks/marquee-anchors/marquee-anchors.test.js b/nala/blocks/marquee-anchors/marquee-anchors.test.js
new file mode 100644
index 00000000000..d2c0bdcb556
--- /dev/null
+++ b/nala/blocks/marquee-anchors/marquee-anchors.test.js
@@ -0,0 +1,140 @@
+import { expect, test } from '@playwright/test';
+import WebUtil from '../../libs/webutil.js';
+import { features } from './marquee-anchors.spec.js';
+import MarqueeAnchors from './marquee-anchors.page.js';
+
+let webUtil;
+let marquee;
+
+const miloLibs = process.env.MILO_LIBS || '';
+
+test.describe('Milo Marquee Anchors test suite', () => {
+ test.beforeEach(async ({ page }) => {
+ webUtil = new WebUtil(page);
+ marquee = new MarqueeAnchors(page);
+ });
+
+ // Test 0 : Marquee anchors
+ test(`[Test Id - ${features[0].tcid}] ${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[0].path}${miloLibs}`);
+ const { data } = features[0];
+
+ await test.step('step-1: Go to Marquee anchors block test page', async () => {
+ await page.goto(`${baseURL}${features[0].path}${miloLibs}`);
+ await page.waitForLoadState('domcontentloaded');
+ await expect(page).toHaveURL(`${baseURL}${features[0].path}${miloLibs}`);
+ });
+
+ await test.step('step-2: Verify marquee anchors specs', async () => {
+ await expect(await marquee.marqueeAnchors).toBeVisible();
+
+ await expect(await marquee.detailM).toContainText(data.detailText);
+ await expect(await marquee.headingL).toContainText(data.h2Text);
+ await expect(await marquee.bodyM).toContainText(data.bodyText);
+ await expect(await marquee.outlineButton).toContainText(data.outlineButtonText);
+ await expect(await marquee.blueButton).toContainText(data.blueButtonText);
+
+ await expect(await marquee.foregroundImage).toBeVisible();
+
+ // verify marquee anchors links
+ await expect(marquee.anchorLinks).toHaveCount(data.anchors.linkCount);
+ await expect(marquee.anchorHeader).toContainText(data.anchors.headerText);
+
+ await expect(marquee.anchorLink.howTo.link).toContainText(data.anchors.howTo.linkText);
+ await expect(marquee.anchorLink.howTo.linkHeader).toContainText(data.anchors.howTo.h4Text);
+ await expect(marquee.anchorLink.howTo.link).toHaveAttribute('href', data.anchors.howTo.href);
+ await expect(marquee.anchorLink.howTo.icon).toBeVisible();
+
+ await expect(marquee.anchorLink.text.link).toContainText(data.anchors.text.linkText);
+ await expect(marquee.anchorLink.text.linkHeader).toContainText(data.anchors.text.h4Text);
+ await expect(marquee.anchorLink.text.link).toHaveAttribute('href', data.anchors.text.href);
+ await expect(marquee.anchorLink.text.icon).toBeVisible();
+
+ await expect(marquee.anchorLink.media.link).toContainText(data.anchors.media.linkText);
+ await expect(marquee.anchorLink.media.linkHeader).toContainText(data.anchors.media.h4Text);
+ await expect(marquee.anchorLink.media.link).toHaveAttribute('href', data.anchors.media.href);
+ await expect(marquee.anchorLink.media.icon).toBeVisible();
+
+ await expect(marquee.anchorLink.linkToAdobe.link).toContainText(data.anchors.linkToAdobe.linkText);
+ await expect(marquee.anchorLink.linkToAdobe.linkHeader).toContainText(data.anchors.linkToAdobe.h4Text);
+ await expect(marquee.anchorLink.linkToAdobe.link).toHaveAttribute('href', data.anchors.linkToAdobe.href);
+ await expect(marquee.anchorLink.linkToAdobe.icon).toBeVisible();
+
+ await expect(marquee.anchorFooter).toContainText(data.anchors.footerText);
+ });
+
+ await test.step('step-3: Verify analytics attributes', async () => {
+ await expect(await marquee.marqueeAnchors).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee-anchors', 1));
+
+ await expect(await marquee.outlineButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
+ await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));
+
+ await expect(await marquee.anchorLink.howTo.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.howTo.h4Text} ${data.anchors.howTo.linkText}`, 3, data.anchors.headerText));
+ await expect(await marquee.anchorLink.text.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.text.h4Text} ${data.anchors.text.linkText}`, 4, data.anchors.howTo.h4Text));
+ await expect(await marquee.anchorLink.media.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.media.h4Text} ${data.anchors.media.linkText}`, 5, data.anchors.text.h4Text));
+ await expect(await marquee.anchorLink.linkToAdobe.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.linkToAdobe.h4Text} ${data.anchors.linkToAdobe.linkText}`, 6, data.anchors.media.h4Text));
+ });
+ });
+
+ // Test 1 : Marquee anchors (transparent)
+ test(`[Test Id - ${features[1].tcid}] ${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[1].path}${miloLibs}`);
+ const { data } = features[1];
+
+ await test.step('step-1: Go to Marquee anchors (Transparent) block test page', async () => {
+ await page.goto(`${baseURL}${features[1].path}${miloLibs}`);
+ await page.waitForLoadState('domcontentloaded');
+ await expect(page).toHaveURL(`${baseURL}${features[1].path}${miloLibs}`);
+ });
+
+ await test.step('step-2: Verify marquee anchors (Transparent) specs', async () => {
+ await expect(await marquee.marqueeAnchorsTransparent).toBeVisible();
+
+ await expect(await marquee.detailM).toContainText(data.detailText);
+ await expect(await marquee.headingL).toContainText(data.h2Text);
+ await expect(await marquee.bodyM).toContainText(data.bodyText);
+ await expect(await marquee.outlineButton).toContainText(data.outlineButtonText);
+ await expect(await marquee.blueButton).toContainText(data.blueButtonText);
+
+ await expect(await marquee.foregroundImage).toBeVisible();
+
+ // verify marquee anchors links
+ await expect(marquee.anchorLinks).toHaveCount(data.anchors.linkCount);
+ await expect(marquee.anchorHeader).toContainText(data.anchors.headerText);
+
+ await expect(marquee.anchorLink.howTo.link).toContainText(data.anchors.howTo.linkText);
+ await expect(marquee.anchorLink.howTo.linkHeader).toContainText(data.anchors.howTo.h4Text);
+ await expect(marquee.anchorLink.howTo.link).toHaveAttribute('href', data.anchors.howTo.href);
+ await expect(marquee.anchorLink.howTo.icon).toBeVisible();
+
+ await expect(marquee.anchorLink.text.link).toContainText(data.anchors.text.linkText);
+ await expect(marquee.anchorLink.text.linkHeader).toContainText(data.anchors.text.h4Text);
+ await expect(marquee.anchorLink.text.link).toHaveAttribute('href', data.anchors.text.href);
+ await expect(marquee.anchorLink.text.icon).toBeVisible();
+
+ await expect(marquee.anchorLink.media.link).toContainText(data.anchors.media.linkText);
+ await expect(marquee.anchorLink.media.linkHeader).toContainText(data.anchors.media.h4Text);
+ await expect(marquee.anchorLink.media.link).toHaveAttribute('href', data.anchors.media.href);
+ await expect(marquee.anchorLink.media.icon).toBeVisible();
+
+ await expect(marquee.anchorLink.linkToAdobe.link).toContainText(data.anchors.linkToAdobe.linkText);
+ await expect(marquee.anchorLink.linkToAdobe.linkHeader).toContainText(data.anchors.linkToAdobe.h4Text);
+ await expect(marquee.anchorLink.linkToAdobe.link).toHaveAttribute('href', data.anchors.linkToAdobe.href);
+ await expect(marquee.anchorLink.linkToAdobe.icon).toBeVisible();
+
+ await expect(marquee.anchorFooter).toContainText(data.anchors.footerText);
+
+ await test.step('step-3: Verify analytics attributes', async () => {
+ await expect(await marquee.marqueeAnchorsTransparent).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee-anchors', 1));
+
+ await expect(await marquee.outlineButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
+ await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));
+
+ await expect(await marquee.anchorLink.howTo.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.howTo.h4Text} ${data.anchors.howTo.linkText}`, 3, data.anchors.headerText));
+ await expect(await marquee.anchorLink.text.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.text.h4Text} ${data.anchors.text.linkText}`, 4, data.anchors.howTo.h4Text));
+ await expect(await marquee.anchorLink.media.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.media.h4Text} ${data.anchors.media.linkText}`, 5, data.anchors.text.h4Text));
+ await expect(await marquee.anchorLink.linkToAdobe.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.linkToAdobe.h4Text} ${data.anchors.linkToAdobe.linkText}`, 6, data.anchors.media.h4Text));
+ });
+ });
+ });
+});
diff --git a/nala/blocks/marquee/marquee.page.js b/nala/blocks/marquee/marquee.page.js
index 84673f0110b..729774c84d9 100644
--- a/nala/blocks/marquee/marquee.page.js
+++ b/nala/blocks/marquee/marquee.page.js
@@ -4,12 +4,16 @@ export default class Marquee {
// marquee types locators
this.marquee = page.locator('.marquee').nth(nth);
this.marqueeLight = page.locator('.marquee.light');
+ this.marqueeLightXxlButton = page.locator('.marquee.light.xxl-button');
this.marqueeSmall = page.locator('.marquee.small');
this.marqueeSmallLight = page.locator('.marquee.small.light');
+ this.marqueeDark = page.locator('.marquee.dark');
this.marqueeSmallDark = page.locator('.marquee.small.dark');
this.marqueeLarge = page.locator('.marquee.large');
this.marqueeLargeLight = page.locator('.marquee.large.light');
this.marqueeLargeDark = page.locator('.marquee.large.dark');
+ this.marqueeLargeStandardDark = page.locator('.marquee.large.standard.dark');
+ this.marqueeLargeCompactDark = page.locator('.marquee.large.compact.dark');
this.marqueeQuiet = page.locator('.marquee.quiet');
this.marqueeInline = page.locator('.marquee');
this.marqueeSplitSmall = page.locator('.marquee.split.small');
@@ -26,12 +30,12 @@ export default class Marquee {
this.brandImage = this.marquee.locator('.detail-m');
// marquee headings
- this.headingXL = this.marquee.locator('.heading-xl');
+ this.headingXL = this.marquee.locator('.heading-xl').nth(0);
this.headingXXL = this.marquee.locator('.heading-xxl');
// marquee body area
this.bodyM = this.marquee.locator('.body-m');
- this.bodyXL = this.marquee.locator('.body-xl');
+ this.bodyXL = this.marquee.locator('.body-xl').nth(0);
// marquee actions area
this.actionArea = this.marquee.locator('.action-area');
@@ -52,7 +56,9 @@ export default class Marquee {
this.actionLink1 = this.marquee.locator('a').nth(0);
this.actionLink2 = this.marquee.locator('a').nth(1);
+ this.actionLink3 = this.marquee.locator('a').nth(2);
+ this.supplementalText = this.marquee.locator('.supplemental-text');
// background images
this.background = this.marquee.locator('.background');
this.backgroundImage = this.marquee.locator('div.background img');
@@ -71,6 +77,7 @@ export default class Marquee {
// media images
this.mediaImage = this.marquee.locator('div.asset img');
+ this.foregroundAssetImage = this.marquee.locator('div.asset img');
// marquee attributes
this.attributes = {
diff --git a/nala/blocks/marquee/marquee.spec.js b/nala/blocks/marquee/marquee.spec.js
index 87b18b33ee3..f8c84189ffb 100644
--- a/nala/blocks/marquee/marquee.spec.js
+++ b/nala/blocks/marquee/marquee.spec.js
@@ -3,7 +3,7 @@ module.exports = {
features: [
{
tcid: '0',
- name: '@Marquee (light)',
+ name: 'Marquee (light)',
path: '/drafts/nala/blocks/marquee/marquee-light',
data: {
h2Text: 'Heading XL Marquee standard medium left light',
@@ -15,7 +15,19 @@ module.exports = {
},
{
tcid: '1',
- name: '@Marquee (small)',
+ name: 'Marquee (light xxl-button)',
+ path: '/drafts/nala/blocks/marquee/marquee-light-xxl-button',
+ data: {
+ h2Text: 'Heading XL Marquee standard medium left light XXL button',
+ bodyText: 'Body M Lorem ipsum dolor sit amet.',
+ outlineButtonText: 'Lorem ipsum',
+ blueButtonText: 'Call to action',
+ },
+ tags: '@marquee @m16 @marquee-background @smoke @regression @milo',
+ },
+ {
+ tcid: '2',
+ name: 'Marquee (small)',
path: '/drafts/nala/blocks/marquee/marquee-small',
data: {
h2Text: 'Marquee standard small dark',
@@ -25,8 +37,8 @@ module.exports = {
tags: '@marquee @marquee-small @smoke @regression @milo',
},
{
- tcid: '2',
- name: '@Marquee (small,light)',
+ tcid: '3',
+ name: 'Marquee (small,light)',
path: '/drafts/nala/blocks/marquee/marquee-small-light',
data: {
detailText: 'Detail',
@@ -38,8 +50,8 @@ module.exports = {
tags: '@marquee @marquee-small-light @smoke @regression @milo',
},
{
- tcid: '3',
- name: '@Marquee (large)',
+ tcid: '4',
+ name: 'Marquee (large)',
path: '/drafts/nala/blocks/marquee/marquee-large',
data: {
h2Text: 'Marquee Large Dark',
@@ -50,8 +62,8 @@ module.exports = {
tags: '@marquee @marquee-large @smoke @regression @milo',
},
{
- tcid: '4',
- name: '@Marquee (large,light)',
+ tcid: '5',
+ name: 'Marquee (large,light)',
path: '/drafts/nala/blocks/marquee/marquee-large-light',
data: {
h2Text: 'Marquee Large Light',
@@ -62,8 +74,32 @@ module.exports = {
tags: '@marquee @marquee-large-light @smoke @regression @milo',
},
{
- tcid: '5',
- name: '@Marquee (quiet)',
+ tcid: '6',
+ name: 'Marquee (large,standard)',
+ path: '/drafts/nala/blocks/marquee/marquee-large-standard',
+ data: {
+ h2Text: 'Marquee Large Standard',
+ bodyText: 'Body XL Regular (22/33) Lorem ipsum dolor sit amet.',
+ outlineButtonText: 'Action',
+ blueButtonText: 'Action',
+ supplemenatalText: 'Body XL (22/33) CTA Supplemental text',
+ },
+ tags: '@marquee @marquee-large-standard @smoke @regression @milo',
+ },
+ {
+ tcid: '7',
+ name: 'Marquee (large,compact)',
+ path: '/drafts/nala/blocks/marquee/marquee-large-compact',
+ data: {
+ h2Text: 'Marquee Large Compact',
+ bodyText: 'Body XL Regular (22/33) Lorem ipsum dolor sit amet.',
+ blueButtonText: 'Action',
+ },
+ tags: '@marquee @marquee-large-standard @smoke @regression @milo',
+ },
+ {
+ tcid: '8',
+ name: 'Marquee (quiet)',
path: '/drafts/nala/blocks/marquee/marquee-quiet',
data: {
detailText: 'Detail',
@@ -74,8 +110,8 @@ module.exports = {
tags: '@marquee @marquee-quiet @smoke @regression @milo',
},
{
- tcid: '6',
- name: '@Marquee (inline)',
+ tcid: '9',
+ name: 'Marquee (inline)',
path: '/drafts/nala/blocks/marquee/marquee-inline',
data: {
detailText: 'Detail',
@@ -85,8 +121,8 @@ module.exports = {
tags: '@marquee @marquee-inline @smoke @regression @milo',
},
{
- tcid: '7',
- name: '@Marquee (split,small)',
+ tcid: '10',
+ name: 'Marquee (split,small)',
path: '/drafts/nala/blocks/marquee/marquee-split-small',
data: {
detailText: 'DETAIL M BOLD 12/15 OPTIONAL',
@@ -98,8 +134,8 @@ module.exports = {
tags: '@marquee @marquee-split-small @smoke @regression @milo',
},
{
- tcid: '8',
- name: '@Marquee (split,large)',
+ tcid: '11',
+ name: 'Marquee (split,large)',
path: '/drafts/nala/blocks/marquee/marquee-split-large',
data: {
detailText: 'DETAIL L BOLD 16/20',
@@ -111,8 +147,8 @@ module.exports = {
tags: '@marquee @marquee-split-large @smoke @regression @milo',
},
{
- tcid: '9',
- name: '@Marquee (split,one-third,large,light)',
+ tcid: '12',
+ name: 'Marquee (split,one-third,large,light)',
path: '/drafts/nala/blocks/marquee/marquee-split-one-third-large-light',
data: {
detailText: 'DETAIL L BOLD 16/20',
@@ -124,8 +160,8 @@ module.exports = {
tags: '@marquee @marquee-split-one-third-large-light @smoke @regression @milo',
},
{
- tcid: '10',
- name: '@Marquee (split,one-third)',
+ tcid: '13',
+ name: 'Marquee (split,one-third)',
path: '/drafts/nala/blocks/marquee/marquee-split-one-third',
data: {
detailText: 'DETAIL M BOLD 12/15 OPTIONAL',
@@ -137,8 +173,8 @@ module.exports = {
tags: '@marquee @marquee-split-one-third @smoke @regression @milo',
},
{
- tcid: '11',
- name: '@Marquee (split,one-third,small,light)',
+ tcid: '14',
+ name: 'Marquee (split,one-third,small,light)',
path: '/drafts/nala/blocks/marquee/marquee-split-one-third-small-light',
data: {
detailText: 'DETAIL M BOLD 12/15 OPTIONAL',
@@ -149,8 +185,8 @@ module.exports = {
tags: '@marquee @marquee-split-one-third-small-light @smoke @regression @milo',
},
{
- tcid: '12',
- name: '@Marquee small (background video playsinline)',
+ tcid: '15',
+ name: 'Marquee small (background video playsinline)',
path: '/drafts/nala/blocks/marquee/marquee-small-background-video',
data: {
h2Text: 'Marquee standard small dark',
@@ -160,8 +196,8 @@ module.exports = {
tags: '@marquee @marquee-video @smoke @regression @milo',
},
{
- tcid: '13',
- name: '@Marquee large (background video playsinline desktop)',
+ tcid: '16',
+ name: 'Marquee large (background video playsinline desktop)',
path: '/drafts/nala/blocks/marquee/marquee-large-desktop-video-autoplay',
data: {
h2Text: 'Desktop video only',
@@ -172,8 +208,8 @@ module.exports = {
tags: '@marquee @marquee-video @smoke @regression @milo',
},
{
- tcid: '14',
- name: '@Marquee large (background video playsinline loop once)',
+ tcid: '17',
+ name: 'Marquee large (background video playsinline loop once)',
path: '/drafts/nala/blocks/marquee/video-autoplay-loop-once',
data: {
detailText: 'DETAIL L 16/20',
@@ -183,5 +219,20 @@ module.exports = {
},
tags: '@marquee @marquee-video @smoke @regression @milo',
},
+ {
+ tcid: '18',
+ name: 'Marquee background image focal point',
+ path: '/drafts/nala/blocks/marquee/marquee-background-image-focal-point',
+ data: {
+ detailText: 'This is my detail',
+ h2Text: 'Heading XL Marquee standard medium left',
+ bodyText: 'Body M Lorem ipsum dolor sit amet.',
+ outlineButtonText: 'Lorem ipsum',
+ blueButtonText: 'Learn more',
+ linkText: 'Text link',
+
+ },
+ tags: '@marquee @m16 @marquee-background @smoke @regression @milo',
+ },
],
};
diff --git a/nala/blocks/marquee/marquee.test.js b/nala/blocks/marquee/marquee.test.js
index f0b61239a9f..c7ca9bdebbe 100644
--- a/nala/blocks/marquee/marquee.test.js
+++ b/nala/blocks/marquee/marquee.test.js
@@ -5,36 +5,17 @@ import MarqueeBlock from './marquee.page.js';
let webUtil;
let marquee;
-let consoleErrors = [];
const miloLibs = process.env.MILO_LIBS || '';
-const knownConsoleErrors = [
- 'Access-Control-Allow-Origin',
- 'Failed to load resource: net::ERR_FAILED',
- 'adobeid-na1-stg1.services',
- 'Attestation check for Topics',
- 'Access to fetch at',
- 'net::ERR_HTTP2_PROTOCOL_ERROR',
-];
test.describe('Milo Marquee Block test suite', () => {
test.beforeEach(async ({ page }) => {
webUtil = new WebUtil(page);
marquee = new MarqueeBlock(page);
-
- page.on('console', (exception) => {
- if (exception.type() === 'error') {
- consoleErrors.push(exception.text());
- }
- });
- });
-
- test.afterEach(async () => {
- consoleErrors = [];
});
// Test 0 : Marquee (light)
- test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
+ test(`[Test Id - ${features[0].tcid}] ${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
console.info(`[Test Page]: ${baseURL}${features[0].path}${miloLibs}`);
const { data } = features[0];
@@ -61,24 +42,46 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.outlineButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));
});
-
- await test.step('step-4: Verify browser console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
- });
});
- // Test 1 : Marquee (small)
- test(`${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => {
+ // Test 1 : Marquee (light, xxl-button)
+ test(`[Test Id - ${features[1].tcid}] ${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => {
console.info(`[Test Page]: ${baseURL}${features[1].path}${miloLibs}`);
const { data } = features[1];
- await test.step('step-1: Go to Marquee (small) block test page', async () => {
+ await test.step('step-1: Go to Marquee (light, xxl-button) block test page', async () => {
await page.goto(`${baseURL}${features[1].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
await expect(page).toHaveURL(`${baseURL}${features[1].path}${miloLibs}`);
});
+ await test.step('step-2: Verify Marquee (light, xxl-button) specs', async () => {
+ await expect(await marquee.marqueeLightXxlButton).toBeVisible();
+
+ await expect(await marquee.headingXL).toContainText(data.h2Text);
+ await expect(await marquee.bodyM).toContainText(data.bodyText);
+
+ await expect(await marquee.outlineButtonL).toContainText(data.outlineButtonText);
+ await expect(await marquee.blueButtonL).toContainText(data.blueButtonText);
+
+ await expect(await marquee.foregroundAssetImage).toBeVisible();
+
+ await expect(await marquee.backgroundImage).toBeVisible();
+ await expect(await marquee.backgroundImage).toHaveAttribute('loading', 'eager');
+ });
+ });
+
+ // Test 2 : Marquee (small)
+ test(`[Test Id - ${features[2].tcid}] ${features[2].name},${features[2].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[2].path}${miloLibs}`);
+ const { data } = features[2];
+
+ await test.step('step-1: Go to Marquee (small) block test page', async () => {
+ await page.goto(`${baseURL}${features[2].path}${miloLibs}`);
+ await page.waitForLoadState('domcontentloaded');
+ await expect(page).toHaveURL(`${baseURL}${features[2].path}${miloLibs}`);
+ });
+
await test.step('step-2: Verify Marquee (small) specs', async () => {
await expect(await marquee.marqueeSmall).toBeVisible();
@@ -94,22 +97,17 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.marqueeSmall).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee', 1));
await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
});
-
- await test.step('step-4: Verify browser console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
- });
});
- // Test 2 : Marquee (small,light)
- test(`${features[2].name},${features[2].tags}`, async ({ page, baseURL }) => {
- console.info(`[Test Page]: ${baseURL}${features[2].path}${miloLibs}`);
- const { data } = features[2];
+ // Test 3 : Marquee (small,light)
+ test(`[Test Id - ${features[3].tcid}] ${features[3].name},${features[3].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[3].path}${miloLibs}`);
+ const { data } = features[3];
await test.step('step-1: Go to Marquee (small, light ) block test page', async () => {
- await page.goto(`${baseURL}${features[2].path}${miloLibs}`);
+ await page.goto(`${baseURL}${features[3].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
- await expect(page).toHaveURL(`${baseURL}${features[2].path}${miloLibs}`);
+ await expect(page).toHaveURL(`${baseURL}${features[3].path}${miloLibs}`);
});
await test.step('step-2: Verify Marquee (small, light) specs', async () => {
@@ -130,22 +128,17 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.outlineButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));
});
-
- await test.step('step-4: Verify browser console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
- });
});
- // Test 3 : Marquee (large)
- test(`${features[3].name},${features[3].tags}`, async ({ page, baseURL }) => {
- console.info(`[Test Page]: ${baseURL}${features[3].path}${miloLibs}`);
- const { data } = features[3];
+ // Test 4 : Marquee (large)
+ test(`[Test Id - ${features[4].tcid}] ${features[4].name},${features[4].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[4].path}${miloLibs}`);
+ const { data } = features[4];
await test.step('step-1: Go to Marquee (large ) block test page', async () => {
- await page.goto(`${baseURL}${features[3].path}${miloLibs}`);
+ await page.goto(`${baseURL}${features[4].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
- await expect(page).toHaveURL(`${baseURL}${features[3].path}${miloLibs}`);
+ await expect(page).toHaveURL(`${baseURL}${features[4].path}${miloLibs}`);
});
await test.step('step-2: Verify Marquee (large) specs', async () => {
@@ -165,22 +158,17 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.outlineButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
await expect(await marquee.blueButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));
});
-
- await test.step('step-4: Verify browser console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
- });
});
- // Test 4 : Marquee (large,light)
- test(`${features[4].name},${features[4].tags}`, async ({ page, baseURL }) => {
- console.info(`[Test Page]: ${baseURL}${features[4].path}${miloLibs}`);
- const { data } = features[4];
+ // Test 5 : Marquee (large,light)
+ test(`[Test Id - ${features[5].tcid}] ${features[5].name},${features[5].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[5].path}${miloLibs}`);
+ const { data } = features[5];
await test.step('step-1: Go to Marquee (large, light ) block test page', async () => {
- await page.goto(`${baseURL}${features[4].path}${miloLibs}`);
+ await page.goto(`${baseURL}${features[5].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
- await expect(page).toHaveURL(`${baseURL}${features[4].path}${miloLibs}`);
+ await expect(page).toHaveURL(`${baseURL}${features[5].path}${miloLibs}`);
});
await test.step('step-2: Verify Marquee (large, light) specs', async () => {
@@ -200,22 +188,68 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.outlineButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
await expect(await marquee.blueButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));
});
+ });
+
+ // Test 6 : Marquee (large standard)
+ test(`[Test Id - ${features[6].tcid}] ${features[6].name},${features[6].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[6].path}${miloLibs}`);
+ const { data } = features[6];
+
+ await test.step('step-1: Go to Marquee (large standard) block test page', async () => {
+ await page.goto(`${baseURL}${features[6].path}${miloLibs}`);
+ await page.waitForLoadState('domcontentloaded');
+ await expect(page).toHaveURL(`${baseURL}${features[6].path}${miloLibs}`);
+ });
+
+ await test.step('step-2: Verify Marquee (large standard) specs', async () => {
+ await expect(await marquee.marqueeLargeStandardDark).toBeVisible();
+
+ await expect(await marquee.headingXXL).toContainText(data.h2Text);
+ await expect(await marquee.bodyXL).toContainText(data.bodyText);
+
+ await expect(await marquee.outlineButtonXL).toContainText(data.outlineButtonText);
+ await expect(await marquee.blueButtonXL).toContainText(data.blueButtonText);
+ await expect(await marquee.supplementalText).toContainText(data.supplemenatalText);
- await test.step('step-4: Verify and log if any console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
+ await expect(await marquee.foregroundAssetImage).toBeVisible();
+ await expect(await marquee.backgroundImage).toBeVisible();
+ await expect(await marquee.backgroundImage).toHaveAttribute('loading', 'eager');
});
});
- // Test 5 : Marquee (quiet)
- test(`${features[5].name},${features[5].tags}`, async ({ page, baseURL }) => {
- console.info(`[Test Page]: ${baseURL}${features[5].path}${miloLibs}`);
- const { data } = features[5];
+ // Test 7 : Marquee (large compact)
+ test(`[Test Id - ${features[7].tcid}] ${features[7].name},${features[7].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[7].path}${miloLibs}`);
+ const { data } = features[7];
+
+ await test.step('step-1: Go to Marquee (large compact) block test page', async () => {
+ await page.goto(`${baseURL}${features[7].path}${miloLibs}`);
+ await page.waitForLoadState('domcontentloaded');
+ await expect(page).toHaveURL(`${baseURL}${features[7].path}${miloLibs}`);
+ });
+
+ await test.step('step-2: Verify Marquee (large compact) specs', async () => {
+ await expect(await marquee.marqueeLargeCompactDark).toBeVisible();
+
+ await expect(await marquee.headingXXL).toContainText(data.h2Text);
+ await expect(await marquee.bodyXL).toContainText(data.bodyText);
+
+ await expect(await marquee.blueButtonXL).toContainText(data.blueButtonText);
+
+ await expect(await marquee.foregroundAssetImage).toBeVisible();
+ await expect(await marquee.backgroundImage).toBeVisible();
+ await expect(await marquee.backgroundImage).toHaveAttribute('loading', 'eager');
+ });
+ });
+ // Test 8 : Marquee (quiet)
+ test(`[Test Id - ${features[8].tcid}] ${features[8].name},${features[8].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[8].path}${miloLibs}`);
+ const { data } = features[8];
await test.step('step-1: Go to Marquee (quiet ) block test page', async () => {
- await page.goto(`${baseURL}${features[5].path}${miloLibs}`);
+ await page.goto(`${baseURL}${features[8].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
- await expect(page).toHaveURL(`${baseURL}${features[5].path}${miloLibs}`);
+ await expect(page).toHaveURL(`${baseURL}${features[8].path}${miloLibs}`);
});
await test.step('step-2: Verify Marquee (quiet) specs', async () => {
@@ -233,22 +267,17 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.marqueeQuiet).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee', 1));
await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
});
-
- await test.step('step-4: Verify and log if any console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
- });
});
- // Test 6 : Marquee (inline)
- test(`${features[6].name},${features[6].tags}`, async ({ page, baseURL }) => {
- console.info(`[Test Page]: ${baseURL}${features[6].path}${miloLibs}`);
- const { data } = features[6];
+ // Test 9 : Marquee (inline)
+ test(`[Test Id - ${features[9].tcid}] ${features[9].name},${features[9].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[9].path}${miloLibs}`);
+ const { data } = features[9];
await test.step('step-1: Go to Marquee (inline ) block test page', async () => {
- await page.goto(`${baseURL}${features[6].path}${miloLibs}`);
+ await page.goto(`${baseURL}${features[9].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
- await expect(page).toHaveURL(`${baseURL}${features[6].path}${miloLibs}`);
+ await expect(page).toHaveURL(`${baseURL}${features[9].path}${miloLibs}`);
});
await test.step('step-2: Verify Marquee (inline) specs', async () => {
@@ -264,22 +293,17 @@ test.describe('Milo Marquee Block test suite', () => {
await test.step('step-3: Verify analytic attributes', async () => {
await expect(await marquee.marqueeInline).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee', 1));
});
-
- await test.step('step-4: Verify and log if any console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
- });
});
- // Test 7 : Marquee (split,small)
- test(`${features[7].name},${features[7].tags}`, async ({ page, baseURL }) => {
- console.info(`[Test Page]: ${baseURL}${features[7].path}${miloLibs}`);
- const { data } = features[7];
+ // Test 10: Marquee (split,small)
+ test(`[Test Id - ${features[10].tcid}] ${features[10].name},${features[10].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[10].path}${miloLibs}`);
+ const { data } = features[10];
await test.step('step-1: Go to Marquee (split, small ) block test page', async () => {
- await page.goto(`${baseURL}${features[7].path}${miloLibs}`);
+ await page.goto(`${baseURL}${features[10].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
- await expect(page).toHaveURL(`${baseURL}${features[7].path}${miloLibs}`);
+ await expect(page).toHaveURL(`${baseURL}${features[10].path}${miloLibs}`);
});
await test.step('step-2: Verify Marquee (split, small) specs', async () => {
@@ -299,22 +323,17 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.outlineButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text));
await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text));
});
-
- await test.step('step-4: Verify and log if any console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
- });
});
- // Test 8 : Marquee (split,large)
- test(`${features[8].name},${features[8].tags}`, async ({ page, baseURL }) => {
- console.info(`[Test Page]: ${baseURL}${features[8].path}${miloLibs}`);
- const { data } = features[8];
+ // Test 11 : Marquee (split,large)
+ test(`[Test Id - ${features[11].tcid}] ${features[11].name},${features[11].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[11].path}${miloLibs}`);
+ const { data } = features[11];
await test.step('step-1: Go to Marquee (split, large ) block test page', async () => {
- await page.goto(`${baseURL}${features[8].path}${miloLibs}`);
+ await page.goto(`${baseURL}${features[11].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
- await expect(page).toHaveURL(`${baseURL}${features[8].path}${miloLibs}`);
+ await expect(page).toHaveURL(`${baseURL}${features[11].path}${miloLibs}`);
});
await test.step('step-2: Verify Marquee (split, large) specs ', async () => {
@@ -338,22 +357,17 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.blueButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
await expect(await marquee.actionLink2).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.linkText, 2, data.h2Text));
});
-
- await test.step('step-4: Verify and log if any console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
- });
});
- // Test 9 : Marquee (split,one-third,large,light)
- test(`${features[9].name},${features[9].tags}`, async ({ page, baseURL }) => {
- console.info(`[Test Page]: ${baseURL}${features[9].path}${miloLibs}`);
- const { data } = features[9];
+ // Test 12 : Marquee (split,one-third,large,light)
+ test(`[Test Id - ${features[12].tcid}] ${features[12].name},${features[12].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[12].path}${miloLibs}`);
+ const { data } = features[12];
await test.step('step-1: Go to Marquee (split, one-third, large, light ) block test page', async () => {
- await page.goto(`${baseURL}${features[9].path}${miloLibs}`);
+ await page.goto(`${baseURL}${features[12].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
- await expect(page).toHaveURL(`${baseURL}${features[9].path}${miloLibs}`);
+ await expect(page).toHaveURL(`${baseURL}${features[12].path}${miloLibs}`);
});
await test.step('step-2: Verify Marquee (split, one-third, large, light) specs', async () => {
@@ -377,22 +391,17 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.blueButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
await expect(await marquee.actionLink2).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.linkText, 2, data.h2Text));
});
-
- await test.step('step-3: Verify and log if any console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
- });
});
- // Test 10 : Marquee (split,one-third)
- test(`${features[10].name},${features[10].tags}`, async ({ page, baseURL }) => {
- console.info(`[Test Page]: ${baseURL}${features[10].path}${miloLibs}`);
- const { data } = features[10];
+ // Test 13 : Marquee (split,one-third)
+ test(`[Test Id - ${features[13].tcid}] ${features[13].name},${features[13].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[13].path}${miloLibs}`);
+ const { data } = features[13];
- await test.step('step-1: Go to Marquee (split, one-third ) block test page', async () => {
- await page.goto(`${baseURL}${features[10].path}${miloLibs}`);
+ await test.step('step-1: Go to Marquee (split, one-third) block test page', async () => {
+ await page.goto(`${baseURL}${features[13].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
- await expect(page).toHaveURL(`${baseURL}${features[10].path}${miloLibs}`);
+ await expect(page).toHaveURL(`${baseURL}${features[13].path}${miloLibs}`);
});
await test.step('step-2: Verify Marquee (split, one-third) specs', async () => {
@@ -416,22 +425,17 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.blueButtonL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
await expect(await marquee.actionLink2).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.linkText, 2, data.h2Text));
});
-
- await test.step('step-4: Verify and log if any console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
- });
});
- // Test 11 : Marquee (split,one-third,small,light)
- test(`${features[11].name},${features[11].tags}`, async ({ page, baseURL }) => {
- console.info(`[Test Page]: ${baseURL}${features[11].path}${miloLibs}`);
- const { data } = features[11];
+ // Test 14 : Marquee (split,one-third,small,light)
+ test(`[Test Id - ${features[14].tcid}] ${features[14].name},${features[14].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[14].path}${miloLibs}`);
+ const { data } = features[14];
await test.step('step-1: Go to Marquee (split,one-third,small,light ) block test page', async () => {
- await page.goto(`${baseURL}${features[11].path}${miloLibs}`);
+ await page.goto(`${baseURL}${features[14].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
- await expect(page).toHaveURL(`${baseURL}${features[11].path}${miloLibs}`);
+ await expect(page).toHaveURL(`${baseURL}${features[14].path}${miloLibs}`);
});
await test.step('step-2: Verify Marquee (split,one-third,small,light) specs', async () => {
@@ -450,24 +454,19 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.marqueeSplitOneThirdSmallLight).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee', 1));
await expect(await marquee.blueButtonL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
});
-
- await test.step('step-4: Verify and log if any console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
- });
});
- // Test 12 : Marquee small (background video playsinline)
- test(`${features[12].name},${features[12].tags}`, async ({ page, baseURL, browserName }) => {
+ // Test 15 : Marquee small (background video playsinline)
+ test(`[Test Id - ${features[15].tcid}] ${features[15].name},${features[15].tags}`, async ({ page, baseURL, browserName }) => {
test.slow();
test.skip(browserName === 'webkit', 'This feature is failing on Webkit browsers');
- console.info(`[Test Page]: ${baseURL}${features[12].path}${miloLibs}`);
- const { data } = features[12];
+ console.info(`[Test Page]: ${baseURL}${features[15].path}${miloLibs}`);
+ const { data } = features[15];
await test.step('step-1: Go to Marquee (small) block test page', async () => {
- await page.goto(`${baseURL}${features[12].path}${miloLibs}`);
+ await page.goto(`${baseURL}${features[15].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
- await expect(page).toHaveURL(`${baseURL}${features[12].path}${miloLibs}`);
+ await expect(page).toHaveURL(`${baseURL}${features[15].path}${miloLibs}`);
});
await test.step('step-2: Verify Marquee (small) background video playsinline specs', async () => {
@@ -485,24 +484,19 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.marqueeSmallDark).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee', 1));
await expect(await marquee.blueButtonL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
});
-
- await test.step('step-4: Verify and log if any console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
- });
});
- // Test 13 : Marquee large (background video playsinline desktop)
- test(`${features[13].name},${features[13].tags}`, async ({ page, baseURL, browserName }) => {
+ // Test 16: Marquee large (background video playsinline desktop)
+ test(`[Test Id - ${features[16].tcid}] ${features[16].name},${features[16].tags}`, async ({ page, baseURL, browserName }) => {
test.skip(browserName === 'webkit', 'This feature is failing on Webkit browsers');
test.slow();
- console.info(`[Test Page]: ${baseURL}${features[13].path}${miloLibs}`);
- const { data } = features[13];
+ console.info(`[Test Page]: ${baseURL}${features[16].path}${miloLibs}`);
+ const { data } = features[16];
await test.step('step-1: Go to Marquee (large, light ) block test page', async () => {
- await page.goto(`${baseURL}${features[13].path}${miloLibs}`);
+ await page.goto(`${baseURL}${features[16].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
- await expect(page).toHaveURL(`${baseURL}${features[13].path}${miloLibs}`);
+ await expect(page).toHaveURL(`${baseURL}${features[16].path}${miloLibs}`);
});
await test.step('step-2: Verify Marquee (large, light) desktop background specs', async () => {
@@ -525,26 +519,21 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.blueButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
await expect(await marquee.actionLink2).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.linkText, 2, data.h2Text));
});
-
- await test.step('step-4: Verify and log if any console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
- });
});
- // Test 14 : Marquee large (background video playsinline loop once)
- test(`${features[14].name},${features[14].tags}`, async ({ page, baseURL }) => {
+ // Test 17 : Marquee large (background video playsinline loop once)
+ test(`[Test Id - ${features[17].tcid}] ${features[17].name},${features[17].tags}`, async ({ page, baseURL }) => {
test.slow();
- console.info(`[Test Page]: ${baseURL}${features[14].path}${miloLibs}`);
- const { data } = features[14];
+ console.info(`[Test Page]: ${baseURL}${features[17].path}${miloLibs}`);
+ const { data } = features[17];
await test.step('step-1: Go to Marquee (large, dark ) block test page', async () => {
- await page.goto(`${baseURL}${features[14].path}${miloLibs}`);
+ await page.goto(`${baseURL}${features[17].path}${miloLibs}`);
await page.waitForLoadState('domcontentloaded');
- await expect(page).toHaveURL(`${baseURL}${features[14].path}${miloLibs}`);
+ await expect(page).toHaveURL(`${baseURL}${features[17].path}${miloLibs}`);
});
- await test.step('step-2: Verify Marquee (large, dark) background specs', async () => {
+ await test.step('step-2: Verify Marquee (large, dark) (background video playsinline loop once) specs', async () => {
await expect(await marquee.marqueeLargeDark).toBeVisible();
await expect(await marquee.headingXXL).toContainText(data.h2Text);
@@ -563,10 +552,35 @@ test.describe('Milo Marquee Block test suite', () => {
await expect(await marquee.marqueeLargeDark).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee', 2));
await expect(await marquee.blueButtonXL).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 1, data.h2Text));
});
+ });
+
+ // Test 18 : Marquee background image focal point
+ test(`[Test Id - ${features[18].tcid}] ${features[18].name},${features[18].tags}`, async ({ page, baseURL }) => {
+ console.info(`[Test Page]: ${baseURL}${features[18].path}${miloLibs}`);
+ const { data } = features[18];
+
+ await test.step('step-1: Go to Marquee ( background image focal point ) block test page', async () => {
+ await page.goto(`${baseURL}${features[18].path}${miloLibs}`);
+ await page.waitForLoadState('domcontentloaded');
+ await expect(page).toHaveURL(`${baseURL}${features[18].path}${miloLibs}`);
+ });
+
+ await test.step('step-2: Verify Marquee (background image focal point) specs', async () => {
+ await expect(await marquee.marqueeDark).toBeVisible();
+
+ await expect(await marquee.detailM).toContainText(data.detailText);
+ await expect(await marquee.headingXL).toContainText(data.h2Text);
+ await expect(await marquee.bodyM).toContainText(data.bodyText);
+
+ await expect(await marquee.outlineButtonL).toContainText(data.outlineButtonText);
+ await expect(await marquee.blueButtonL).toContainText(data.blueButtonText);
+ await expect(await marquee.actionLink3).toContainText(data.linkText);
- await test.step('step-4: Verify and log if any console errors', async () => {
- consoleErrors.length > knownConsoleErrors.length && console.log('[Console error]:', consoleErrors);
- expect.soft(consoleErrors.length).toBeLessThanOrEqual(knownConsoleErrors.length);
+ await expect(await marquee.iconImage).toBeVisible();
+ await expect(await marquee.foregroundAssetImage).toBeVisible();
+
+ await expect(await marquee.backgroundImage).toBeVisible();
+ await expect(await marquee.backgroundImage).toHaveAttribute('style', 'object-position: right bottom;');
});
});
});
diff --git a/test/blocks/global-navigation/global-navigation.test.js b/test/blocks/global-navigation/global-navigation.test.js
index 3c9cf81e384..d28284a70f3 100644
--- a/test/blocks/global-navigation/global-navigation.test.js
+++ b/test/blocks/global-navigation/global-navigation.test.js
@@ -18,6 +18,7 @@ import { isDesktop, isTangentToViewport, toFragment } from '../../../libs/blocks
import logoOnlyNav from './mocks/global-navigation-only-logo.plain.js';
import longNav from './mocks/global-navigation-long.plain.js';
import darkNav from './mocks/dark-global-navigation.plain.js';
+import navigationWithCustomLinks from './mocks/navigation-with-custom-links.plain.js';
import globalNavigationMock from './mocks/global-navigation.plain.js';
import { getConfig } from '../../../tools/send-to-caas/send-utils.js';
@@ -645,4 +646,18 @@ describe('global navigation', () => {
expect(document.querySelector(selectors.topNavWrapper).classList.contains('feds-client-search')).to.exist;
});
});
+
+ describe('Custom Links for mobile hamburger menu', () => {
+ it('Add custom links through Link Group block in parallel to large menu\'s', async () => {
+ const customLinks = 'home,learn';
+ await createFullGlobalNavigation({
+ viewport: 'mobile',
+ globalNavigation: navigationWithCustomLinks,
+ customConfig: { customLinks },
+ });
+ expect(
+ document.querySelectorAll(selectors.customMobileLink).length,
+ ).to.equal(customLinks.split(',').length);
+ });
+ });
});
diff --git a/test/blocks/global-navigation/mocks/navigation-with-custom-links.plain.js b/test/blocks/global-navigation/mocks/navigation-with-custom-links.plain.js
new file mode 100644
index 00000000000..b58cb5259b9
--- /dev/null
+++ b/test/blocks/global-navigation/mocks/navigation-with-custom-links.plain.js
@@ -0,0 +1,62 @@
+export default `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/test/blocks/global-navigation/test-utilities.js b/test/blocks/global-navigation/test-utilities.js
index 9e38a606b89..fab0999332e 100644
--- a/test/blocks/global-navigation/test-utilities.js
+++ b/test/blocks/global-navigation/test-utilities.js
@@ -42,6 +42,7 @@ export const selectors = {
mainNav: '.feds-nav',
imsSignIn: '.feds-signIn',
crossCloudMenuWrapper: '.feds-crossCloudMenu-wrapper',
+ customMobileLink: '.feds-navItem--mobile-only',
};
export const viewports = {
diff --git a/test/blocks/merch-card/merch-card.test.js b/test/blocks/merch-card/merch-card.test.js
index 154df0f8d14..dd314894dd8 100644
--- a/test/blocks/merch-card/merch-card.test.js
+++ b/test/blocks/merch-card/merch-card.test.js
@@ -497,3 +497,16 @@ describe('Viewport Responsiveness without Sinon', () => {
expect(bigPrice.style.fontSize).to.equal('16px');
});
});
+
+describe('Product Merch Card', () => {
+ it('Supports Product Merch card with callout', async () => {
+ document.body.innerHTML = await readMockText('/test/blocks/merch-card/mocks/product.html');
+ const merchCard = await init(document.querySelector('.product'));
+
+ const calloutSlot = merchCard.querySelector('[slot="callout-content"]');
+ expect(calloutSlot).to.exist;
+
+ const lowerBodySlot = merchCard.querySelector('[slot="body-lower"]');
+ expect(lowerBodySlot).to.exist;
+ });
+});
diff --git a/test/blocks/merch-card/mocks/product.html b/test/blocks/merch-card/mocks/product.html
new file mode 100644
index 00000000000..ff984ea7fff
--- /dev/null
+++ b/test/blocks/merch-card/mocks/product.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
Acrobat Standard for Teams
+
+
+ Annual subscription, cancel within 14 days for a full refund. Fee applies if you cancel after 14 days
+
Single PDF App with capabilities to edit, convert and e-sign
+
AI Assistant add-on
+ available. Early access pricing extended to September 4, 2024.
+
+ Quantity
+
+ Number of licenses
+ 2,10,1
+
+
+
+
--- #E8E8E8
+
CTA
+ {{buy-now}}
+
+
+
+
diff --git a/test/features/jarvis-chat/jarvis-chat.test.js b/test/features/jarvis-chat/jarvis-chat.test.js
index ee6e6fe2738..ba3e260b2f5 100644
--- a/test/features/jarvis-chat/jarvis-chat.test.js
+++ b/test/features/jarvis-chat/jarvis-chat.test.js
@@ -262,4 +262,29 @@ describe('Jarvis Chat', () => {
params.callbacks.onReadyCallback();
expect(openMessagingWindowSpy.called).to.be.true;
});
+
+ it('should use stage asset URL in non-prod environment', async () => {
+ setConfig(defaultConfig);
+ const config = getConfig();
+ config.jarvis.onDemand = false;
+ const loadScriptSpy = sinon.spy();
+ const loadStyleSpy = sinon.spy();
+ await initJarvisChat(config, loadScriptSpy, loadStyleSpy, sinon.stub());
+ const expectedAsset = 'https://stage-client.messaging.adobe.com/latest/AdobeMessagingClient';
+ expect(loadScriptSpy.calledWithExactly(`${expectedAsset}.js`)).to.be.true;
+ expect(loadStyleSpy.calledWithExactly(`${expectedAsset}.css`)).to.be.true;
+ });
+
+ it('should use prod asset URL in prod environment', async () => {
+ setConfig(defaultConfig);
+ const config = getConfig();
+ config.jarvis.onDemand = false;
+ config.env.name = 'prod';
+ const loadScriptSpy = sinon.spy();
+ const loadStyleSpy = sinon.spy();
+ await initJarvisChat(config, loadScriptSpy, loadStyleSpy, sinon.stub());
+ const expectedAsset = 'https://client.messaging.adobe.com/latest/AdobeMessagingClient';
+ expect(loadScriptSpy.calledWithExactly(`${expectedAsset}.js`)).to.be.true;
+ expect(loadStyleSpy.calledWithExactly(`${expectedAsset}.css`)).to.be.true;
+ });
});