Bug 1851246 - add Storybook entries for shopping-container r=shopping…

…-reviewers,reusable-components-reviewers,hjones,Gijs Differential Revision: https://phabricator.services.mozilla.com/D189174
dothq · Oct 5, 2023 · 081d72d · 081d72d
1 parent 2714359
commit 081d72d
Show file tree

Hide file tree

Showing 9 changed files with 338 additions and 21 deletions.
diff --git a/browser/components/shopping/content/analysis-explainer.mjs b/browser/components/shopping/content/analysis-explainer.mjs
@@ -24,7 +24,7 @@ const VALID_EXPLAINER_L10N_IDS = new Map([
  */
 class AnalysisExplainer extends MozLitElement {
   static properties = {
-    productURL: { type: String, reflect: true },
+    productUrl: { type: String, reflect: true },
   };
 
   getGradesDescriptionTemplate() {
@@ -83,10 +83,10 @@ class AnalysisExplainer extends MozLitElement {
   // placeholder "retailer", which should never be visible to users.
   getRetailerDisplayName() {
     let defaultName = "retailer";
-    if (!this.productURL) {
+    if (!this.productUrl) {
       return defaultName;
     }
-    let url = new URL(this.productURL);
+    let url = new URL(this.productUrl);
     let hostname = url.hostname;
     let displayNames = {
       "www.amazon.com": "Amazon",

diff --git a/browser/components/shopping/content/settings.mjs b/browser/components/shopping/content/settings.mjs
@@ -16,6 +16,7 @@ import { FAKESPOT_BASE_URL } from "chrome://global/content/shopping/ProductConfi
 
 class ShoppingSettings extends MozLitElement {
   static properties = {
+    adsEnabled: { type: Boolean },
     adsEnabledByUser: { type: Boolean },
   };
 
@@ -52,9 +53,8 @@ class ShoppingSettings extends MozLitElement {
   render() {
     // Whether we show recommendations at all (including offering a user
     // control for them) is controlled via a nimbus-enabled pref.
-    let canShowRecommendationToggle = RPMGetBoolPref(
-      "browser.shopping.experience2023.ads.enabled"
-    );
+    let canShowRecommendationToggle = this.adsEnabled;
+
     let toggleMarkup = canShowRecommendationToggle
       ? html`
         <moz-toggle

diff --git a/browser/components/shopping/content/shopping-container.mjs b/browser/components/shopping/content/shopping-container.mjs
@@ -320,6 +320,7 @@ export class ShoppingContainer extends MozLitElement {
       ></analysis-explainer>
       ${this.recommendationTemplate()}
       <shopping-settings
+        ?adsEnabled=${this.adsEnabled}
         ?adsEnabledByUser=${this.adsEnabledByUser}
       ></shopping-settings>
     `;

diff --git a/browser/components/shopping/tests/browser/browser_shopping_settings.js b/browser/components/shopping/tests/browser/browser_shopping_settings.js
@@ -18,17 +18,32 @@ add_task(async function test_shopping_settings_ads_enabled() {
       gBrowser,
     },
     async browser => {
-      let shoppingSettings = await getSettingsDetails(
+      await SpecialPowers.spawn(
         browser,
-        MOCK_POPULATED_DATA
+        [MOCK_ANALYZED_PRODUCT_RESPONSE],
+        async mockData => {
+          let shoppingContainer =
+            content.document.querySelector(
+              "shopping-container"
+            ).wrappedJSObject;
+
+          shoppingContainer.data = Cu.cloneInto(mockData, content);
+          // TODO: Until we have proper mocks of data passed from ShoppingSidebarChild,
+          // hardcode `adsEnabled` to be passed to settings.mjs so that we can test
+          // toggle for ad visibility.
+          shoppingContainer.adsEnabled = true;
+          await shoppingContainer.updateComplete;
+
+          let shoppingSettings = shoppingContainer.settingsEl;
+          ok(shoppingSettings, "Got the shopping-settings element");
+
+          let toggle = shoppingSettings.recommendationsToggleEl;
+          ok(toggle, "There should be a toggle");
+
+          let optOutButton = shoppingSettings.optOutButtonEl;
+          ok(optOutButton, "There should be an opt-out button");
+        }
       );
-      ok(shoppingSettings.settingsEl, "Got the shopping-settings element");
-
-      let toggle = shoppingSettings.recommendationsToggleEl;
-      ok(toggle, "There should be a toggle");
-
-      let optOutButton = shoppingSettings.optOutButtonEl;
-      ok(optOutButton, "There should be an opt-out button");
     }
   );
 

diff --git a/browser/components/shopping/tests/browser/head.js b/browser/components/shopping/tests/browser/head.js
@@ -58,11 +58,6 @@ const MOCK_POPULATED_DATA = {
   },
 };
 
-const MOCK_ERROR_OBJ = {
-  status: 422,
-  error: "Unprocessable entity",
-};
-
 const MOCK_INVALID_KEY_OBJ = {
   invalidHighlight: {
     negative: ["This is an invalid highlight and should not be visible"],

diff --git a/browser/components/storybook/.storybook/preview.mjs b/browser/components/storybook/.storybook/preview.mjs
@@ -16,6 +16,11 @@ window.MozXULElement = {
   insertFTLIfNeeded,
 };
 
+// Used to set prefs in unprivileged contexts.
+window.RPMSetPref = () => {
+  /* NOOP */
+};
+
 /**
  * Wrapper component used to decorate all of our stories by providing access to
  * `in-content/common.css` without leaking styles that conflict Storybook's CSS.

diff --git a/browser/components/storybook/stories/shopping-card.stories.mjs b/browser/components/storybook/stories/shopping-card.stories.mjs
@@ -61,3 +61,12 @@ CardTypeAccordion.args = {
   In a eros ac dolor hendrerit varius et at mauris.`,
   type: "accordion",
 };
+
+export const CardTypeShowMore = Template.bind({});
+CardTypeShowMore.args = {
+  ...DefaultCard.args,
+  content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Nunc velit turpis, mollis a ultricies vitae, accumsan ut augue.
+  In a eros ac dolor hendrerit varius et at mauris.`,
+  type: "show-more",
+};