From edb21a26d25fddc124649e299f4985e06afcd0f4 Mon Sep 17 00:00:00 2001 From: Niklas Baumgardner Date: Mon, 24 Jul 2023 19:37:44 +0000 Subject: [PATCH] Bug 1844112 - Update shopping.html and shopping tests. r=shopping-reviewers,kpatenio Differential Revision: https://phabricator.services.mozilla.com/D184168 --- .../shopping/content/adjusted-rating.mjs | 5 + .../shopping/content/highlights.mjs | 1 + .../shopping/content/reliability.mjs | 5 + .../shopping/content/shopping-container.mjs | 9 ++ .../components/shopping/content/shopping.html | 15 --- .../shopping/tests/browser/browser.ini | 2 - .../tests/browser/browser_adjusted_rating.js | 57 +++++------ .../browser/browser_review_highlights.js | 96 ++++++------------- .../browser/browser_shopping_settings.js | 9 +- .../components/shopping/tests/browser/head.js | 74 +++++++------- 10 files changed, 126 insertions(+), 147 deletions(-) diff --git a/browser/components/shopping/content/adjusted-rating.mjs b/browser/components/shopping/content/adjusted-rating.mjs index 82bab89d2f3e..96650c212840 100644 --- a/browser/components/shopping/content/adjusted-rating.mjs +++ b/browser/components/shopping/content/adjusted-rating.mjs @@ -24,6 +24,11 @@ class AdjustedRating extends MozLitElement { } render() { + if (!this.rating) { + this.hidden = true; + return null; + } + return html` - - - - - - diff --git a/browser/components/shopping/tests/browser/browser.ini b/browser/components/shopping/tests/browser/browser.ini index f146db42ad66..af1d7b49117a 100644 --- a/browser/components/shopping/tests/browser/browser.ini +++ b/browser/components/shopping/tests/browser/browser.ini @@ -7,6 +7,4 @@ prefs = [browser_adjusted_rating.js] [browser_private_mode.js] [browser_review_highlights.js] -skip-if = true # Bug 1844112 [browser_shopping_settings.js] -skip-if = true # Bug 1844112 diff --git a/browser/components/shopping/tests/browser/browser_adjusted_rating.js b/browser/components/shopping/tests/browser/browser_adjusted_rating.js index 857891262e17..e1dd636fb04e 100644 --- a/browser/components/shopping/tests/browser/browser_adjusted_rating.js +++ b/browser/components/shopping/tests/browser/browser_adjusted_rating.js @@ -10,40 +10,41 @@ add_task(async function test_adjusted_rating() { gBrowser, }, async browser => { - await SpecialPowers.spawn(browser, [], async function () { - let rating = 2.5; - let adjustedRating = content.document.createElement("adjusted-rating"); - adjustedRating.rating = rating; - content.document.body.appendChild(adjustedRating); + const { document } = browser.contentWindow; + let rating = MOCK_POPULATED_DATA.adjusted_rating; - await adjustedRating.updateComplete; + let shoppingContainer = document.querySelector("shopping-container"); + shoppingContainer.data = MOCK_POPULATED_DATA; + await shoppingContainer.updateComplete; - let mozFiveStar = adjustedRating.ratingEl; - ok(mozFiveStar, "The moz-five-star element exists"); + let adjustedRating = shoppingContainer.adjustedRatingEl; + await adjustedRating.updateComplete; - is(mozFiveStar.rating, rating, `The moz-five-star rating is ${rating}`); - is( - adjustedRating.rating, - rating, - `The adjusted rating "rating" is ${rating}` - ); + let mozFiveStar = adjustedRating.ratingEl; + ok(mozFiveStar, "The moz-five-star element exists"); - rating = 5; - adjustedRating.rating = rating; + is(mozFiveStar.rating, rating, `The moz-five-star rating is ${rating}`); + is( + adjustedRating.rating, + rating, + `The adjusted rating "rating" is ${rating}` + ); - await adjustedRating.updateComplete; + rating = 2.55; + adjustedRating.rating = rating; - is( - mozFiveStar.rating, - rating, - `The moz-five-star rating is now ${rating}` - ); - is( - adjustedRating.rating, - rating, - `The adjusted rating "rating" is now ${rating}` - ); - }); + await adjustedRating.updateComplete; + + is( + mozFiveStar.rating, + rating, + `The moz-five-star rating is now ${rating}` + ); + is( + adjustedRating.rating, + rating, + `The adjusted rating "rating" is now ${rating}` + ); } ); }); diff --git a/browser/components/shopping/tests/browser/browser_review_highlights.js b/browser/components/shopping/tests/browser/browser_review_highlights.js index 1b3c2c17fec5..ff95d8c7bce8 100644 --- a/browser/components/shopping/tests/browser/browser_review_highlights.js +++ b/browser/components/shopping/tests/browser/browser_review_highlights.js @@ -3,19 +3,11 @@ "use strict"; -const { ShoppingUtils } = ChromeUtils.importESModule( - "chrome://browser/content/shopping/ShoppingUtils.sys.mjs" -); - /** * Tests that the review highlights custom components are visible on the page * if there is valid data. */ add_task(async function test_review_highlights() { - let sandbox = sinon.createSandbox(); - const MOCK_OBJ = MOCK_POPULATED_OBJ; - sandbox.stub(ShoppingUtils, "getHighlights").returns(MOCK_OBJ); - await BrowserTestUtils.withNewTab( { url: "chrome://browser/content/shopping/shopping.html", @@ -25,16 +17,16 @@ add_task(async function test_review_highlights() { const { document } = browser.contentWindow; const EXPECTED_KEYS = ["price", "quality", "competitiveness"]; - let reviewHighlights = document.querySelector("review-highlights"); - ok(reviewHighlights, "review-highlights should be visible"); + let shoppingContainer = document.querySelector("shopping-container"); + shoppingContainer.data = MOCK_POPULATED_DATA; + await shoppingContainer.updateComplete; + + let reviewHighlights = shoppingContainer.highlightsEl; + ok(reviewHighlights, "Got review-highlights"); + await reviewHighlights.updateComplete; let highlightsList = reviewHighlights.reviewHighlightsListEl; - - await BrowserTestUtils.waitForMutationCondition( - highlightsList, - { childList: true }, - () => highlightsList.querySelector("highlight-item") - ); + await highlightsList.updateComplete; is( highlightsList.children.length, @@ -50,16 +42,15 @@ add_task(async function test_review_highlights() { let actualNumberOfReviews = highlightEl.shadowRoot.querySelector( ".highlight-details-list" ).children.length; - let expectedNumberOfReviews = Object.values(MOCK_OBJ[key]).flat() - .length; + let expectedNumberOfReviews = Object.values( + MOCK_POPULATED_DATA.highlights[key] + ).flat().length; is( actualNumberOfReviews, expectedNumberOfReviews, "There should be equal number of reviews displayed for " + key ); } - - sandbox.restore(); } ); }); @@ -68,10 +59,6 @@ add_task(async function test_review_highlights() { * Tests that entire highlights components is still hidden if we receive falsy data. */ add_task(async function test_review_highlights_no_highlights() { - let sandbox = sinon.createSandbox(); - const MOCK_OBJ = null; - sandbox.stub(ShoppingUtils, "getHighlights").returns(MOCK_OBJ); - await BrowserTestUtils.withNewTab( { url: "chrome://browser/content/shopping/shopping.html", @@ -79,47 +66,24 @@ add_task(async function test_review_highlights_no_highlights() { }, async browser => { const { document } = browser.contentWindow; + const noHighlightData = MOCK_POPULATED_DATA; + noHighlightData.highlights = null; + + let shoppingContainer = document.querySelector("shopping-container"); + shoppingContainer.data = noHighlightData; + await shoppingContainer.updateComplete; + + let reviewHighlights = shoppingContainer.highlightsEl; + ok(reviewHighlights, "Got review-highlights"); + await reviewHighlights.updateComplete; - let reviewHighlights = document.querySelector("review-highlights"); ok( BrowserTestUtils.is_hidden(reviewHighlights), "review-highlights should not be visible" ); let highlightsList = reviewHighlights?.reviewHighlightsListEl; - ok(!highlightsList, "review-highlights-list should not be visible"); - sandbox.restore(); - } - ); -}); - -/** - * Tests that the entire highlights component is still hidden if an error occurs when fetching highlights. - */ -add_task(async function test_review_highlights_error() { - let sandbox = sinon.createSandbox(); - const MOCK_OBJ = MOCK_ERROR_OBJ; - sandbox.stub(ShoppingUtils, "getHighlights").returns(MOCK_OBJ); - - await BrowserTestUtils.withNewTab( - { - url: "chrome://browser/content/shopping/shopping.html", - gBrowser, - }, - async browser => { - const { document } = browser.contentWindow; - - let reviewHighlights = document.querySelector("review-highlights"); - ok( - BrowserTestUtils.is_hidden(reviewHighlights), - "review-highlights should not be visible" - ); - - let highlightsList = reviewHighlights?.reviewHighlightsListEl; - - ok(!highlightsList, "review-highlights-list should not be visible"); - sandbox.restore(); } ); }); @@ -128,11 +92,6 @@ add_task(async function test_review_highlights_error() { * Tests that we do not show an invalid highlight type and properly filter data. */ add_task(async function test_review_highlights_invalid_type() { - let sandbox = sinon.createSandbox(); - // This mock object only has invalid data, so we should expect an empty object after filtering. - const MOCK_OBJ = MOCK_INVALID_KEY_OBJ; - sandbox.stub(ShoppingUtils, "getHighlights").returns(MOCK_OBJ); - await BrowserTestUtils.withNewTab( { url: "chrome://browser/content/shopping/shopping.html", @@ -140,14 +99,21 @@ add_task(async function test_review_highlights_invalid_type() { }, async browser => { const { document } = browser.contentWindow; + const invalidHighlightData = MOCK_POPULATED_DATA; + invalidHighlightData.highlights = MOCK_INVALID_KEY_OBJ; + + let shoppingContainer = document.querySelector("shopping-container"); + shoppingContainer.data = invalidHighlightData; + await shoppingContainer.updateComplete; + + let reviewHighlights = shoppingContainer.highlightsEl; + ok(reviewHighlights, "Got review-highlights"); + await reviewHighlights.updateComplete; - let reviewHighlights = document.querySelector("review-highlights"); ok( BrowserTestUtils.is_hidden(reviewHighlights), "review-highlights should not be visible" ); - - sandbox.restore(); } ); }); diff --git a/browser/components/shopping/tests/browser/browser_shopping_settings.js b/browser/components/shopping/tests/browser/browser_shopping_settings.js index 4f3d9a7533b5..7c00b0ec5766 100644 --- a/browser/components/shopping/tests/browser/browser_shopping_settings.js +++ b/browser/components/shopping/tests/browser/browser_shopping_settings.js @@ -15,8 +15,13 @@ add_task(async function test_shopping_settings() { async browser => { const { document } = browser.contentWindow; - let shoppingSettings = document.querySelector("shopping-settings"); - ok(shoppingSettings, "shopping-settings should be visible"); + let shoppingContainer = document.querySelector("shopping-container"); + shoppingContainer.data = MOCK_POPULATED_DATA; + await shoppingContainer.updateComplete; + + let shoppingSettings = shoppingContainer.settingsEl; + await shoppingSettings.updateComplete; + ok(shoppingSettings, "Got the shopping-settings element"); let toggle = shoppingSettings.recommendationsToggleEl; ok(toggle, "There should be a toggle"); diff --git a/browser/components/shopping/tests/browser/head.js b/browser/components/shopping/tests/browser/head.js index 868c51ef09d3..0fcc351b98bc 100644 --- a/browser/components/shopping/tests/browser/head.js +++ b/browser/components/shopping/tests/browser/head.js @@ -5,41 +5,45 @@ const { sinon } = ChromeUtils.importESModule( "resource://testing-common/Sinon.sys.mjs" ); -const MOCK_POPULATED_OBJ = { - price: { - positive: ["This watch is great and the price was even better."], - negative: [], - neutral: [], - }, - quality: { - positive: [ - "Other than that, I am very impressed with the watch and it’s capabilities.", - "This watch performs above expectations in every way with the exception of the heart rate monitor.", - ], - negative: [ - "Battery life is no better than the 3 even with the solar gimmick, probably worse.", - ], - neutral: [ - "I have small wrists and still went with the 6X and glad I did.", - "I can deal with the looks, as Im now retired.", - ], - }, - competitiveness: { - positive: [ - "Bought this to replace my vivoactive 3.", - "I like that this watch has so many features, especially those that monitor health like SP02, respiration, sleep, HRV status, stress, and heart rate.", - ], - negative: [ - "I do not use it for sleep or heartrate monitoring so not sure how accurate they are.", - ], - neutral: [ - "I've avoided getting a smartwatch for so long due to short battery life on most of them.", - ], - }, - shipping: { - positive: [], - negative: [], - neutral: [], +const MOCK_POPULATED_DATA = { + adjusted_rating: 5, + grade: "B", + highlights: { + price: { + positive: ["This watch is great and the price was even better."], + negative: [], + neutral: [], + }, + quality: { + positive: [ + "Other than that, I am very impressed with the watch and it’s capabilities.", + "This watch performs above expectations in every way with the exception of the heart rate monitor.", + ], + negative: [ + "Battery life is no better than the 3 even with the solar gimmick, probably worse.", + ], + neutral: [ + "I have small wrists and still went with the 6X and glad I did.", + "I can deal with the looks, as Im now retired.", + ], + }, + competitiveness: { + positive: [ + "Bought this to replace my vivoactive 3.", + "I like that this watch has so many features, especially those that monitor health like SP02, respiration, sleep, HRV status, stress, and heart rate.", + ], + negative: [ + "I do not use it for sleep or heartrate monitoring so not sure how accurate they are.", + ], + neutral: [ + "I've avoided getting a smartwatch for so long due to short battery life on most of them.", + ], + }, + shipping: { + positive: [], + negative: [], + neutral: [], + }, }, };