mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1844112 - Update shopping.html and shopping tests. r=shopping-reviewers,kpatenio 

Differential Revision: https://phabricator.services.mozilla.com/D184168
This commit is contained in:
Niklas Baumgardner 2023-07-24 19:37:44 +00:00
Родитель f8b9470054
Коммит edb21a26d2
10 изменённых файлов: 126 добавлений и 147 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

5
browser/components/shopping/content/adjusted-rating.mjs
Просмотреть файл

@ -24,6 +24,11 @@ class AdjustedRating extends MozLitElement {
} }
render() { render() {
if (!this.rating) {
this.hidden = true;
return null;
}
return html` return html`
<shopping-card <shopping-card
data-l10n-id="shopping-adjusted-rating-label" data-l10n-id="shopping-adjusted-rating-label"

1
browser/components/shopping/content/highlights.mjs
Просмотреть файл

@ -95,6 +95,7 @@ class ReviewHighlights extends MozLitElement {
render() { render() {
if (!this.#highlightsMap) { if (!this.#highlightsMap) {
this.hidden = true;
return null; return null;
} }

5
browser/components/shopping/content/reliability.mjs
Просмотреть файл

@ -24,6 +24,11 @@ class ReviewReliability extends MozLitElement {
} }
render() { render() {
if (!this.letter) {
this.hidden = true;
return null;
}
return html` return html`
<shopping-card <shopping-card
data-l10n-id="shopping-review-reliability-label" data-l10n-id="shopping-review-reliability-label"

9
browser/components/shopping/content/shopping-container.mjs
Просмотреть файл

@ -22,6 +22,15 @@ export class ShoppingContainer extends MozLitElement {
data: { type: Object }, data: { type: Object },
}; };
static get queries() {
return {
reviewReliabilityEl: "review-reliability",
adjustedRatingEl: "adjusted-rating",
highlightsEl: "review-highlights",
settingsEl: "shopping-settings",
};
}
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
if (!this.data) { if (!this.data) {

15
browser/components/shopping/content/shopping.html
Просмотреть файл

@ -21,24 +21,9 @@
type="module" type="module"
src="chrome://browser/content/shopping/shopping-container.mjs" src="chrome://browser/content/shopping/shopping-container.mjs"
></script> ></script>
<script
type="module"
src="chrome://browser/content/shopping/highlights.mjs"
></script>
<script
type="module"
src="chrome://browser/content/shopping/letter-grade.mjs"
></script>
<script
type="module"
src="chrome://browser/content/shopping/settings.mjs"
></script>
<title data-l10n-id="shopping-page-title"></title> <title data-l10n-id="shopping-page-title"></title>
</head> </head>
<body> <body>
<shopping-container></shopping-container> <shopping-container></shopping-container>
<!-- TODO: Remove below elements when tests for review-highlights and shopping-settings are updated -->
<review-highlights hidden></review-highlights>
<shopping-settings></shopping-settings>
</body> </body>
</html> </html>

2
browser/components/shopping/tests/browser/browser.ini
Просмотреть файл

@ -7,6 +7,4 @@ prefs =
[browser_adjusted_rating.js] [browser_adjusted_rating.js]
[browser_private_mode.js] [browser_private_mode.js]
[browser_review_highlights.js] [browser_review_highlights.js]
skip-if = true # Bug 1844112
[browser_shopping_settings.js] [browser_shopping_settings.js]
skip-if = true # Bug 1844112

57
browser/components/shopping/tests/browser/browser_adjusted_rating.js
Просмотреть файл

@ -10,40 +10,41 @@ add_task(async function test_adjusted_rating() {
gBrowser, gBrowser,
}, },
async browser => { async browser => {
await SpecialPowers.spawn(browser, [], async function () { const { document } = browser.contentWindow;
let rating = 2.5; let rating = MOCK_POPULATED_DATA.adjusted_rating;
let adjustedRating = content.document.createElement("adjusted-rating");
adjustedRating.rating = rating;
content.document.body.appendChild(adjustedRating);
await adjustedRating.updateComplete; let shoppingContainer = document.querySelector("shopping-container");
shoppingContainer.data = MOCK_POPULATED_DATA;
await shoppingContainer.updateComplete;
let mozFiveStar = adjustedRating.ratingEl; let adjustedRating = shoppingContainer.adjustedRatingEl;
ok(mozFiveStar, "The moz-five-star element exists"); await adjustedRating.updateComplete;
is(mozFiveStar.rating, rating, `The moz-five-star rating is ${rating}`); let mozFiveStar = adjustedRating.ratingEl;
is( ok(mozFiveStar, "The moz-five-star element exists");
adjustedRating.rating,
rating,
`The adjusted rating "rating" is ${rating}`
);
rating = 5; is(mozFiveStar.rating, rating, `The moz-five-star rating is ${rating}`);
adjustedRating.rating = rating; is(
adjustedRating.rating,
rating,
`The adjusted rating "rating" is ${rating}`
);
await adjustedRating.updateComplete; rating = 2.55;
adjustedRating.rating = rating;
is( await adjustedRating.updateComplete;
mozFiveStar.rating,
rating, is(
`The moz-five-star rating is now ${rating}` mozFiveStar.rating,
); rating,
is( `The moz-five-star rating is now ${rating}`
adjustedRating.rating, );
rating, is(
`The adjusted rating "rating" is now ${rating}` adjustedRating.rating,
); rating,
}); `The adjusted rating "rating" is now ${rating}`
);
} }
); );
}); });

96
browser/components/shopping/tests/browser/browser_review_highlights.js
Просмотреть файл

@ -3,19 +3,11 @@
"use strict"; "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 * Tests that the review highlights custom components are visible on the page
* if there is valid data. * if there is valid data.
*/ */
add_task(async function test_review_highlights() { 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( await BrowserTestUtils.withNewTab(
{ {
url: "chrome://browser/content/shopping/shopping.html", url: "chrome://browser/content/shopping/shopping.html",
@ -25,16 +17,16 @@ add_task(async function test_review_highlights() {
const { document } = browser.contentWindow; const { document } = browser.contentWindow;
const EXPECTED_KEYS = ["price", "quality", "competitiveness"]; const EXPECTED_KEYS = ["price", "quality", "competitiveness"];
let reviewHighlights = document.querySelector("review-highlights"); let shoppingContainer = document.querySelector("shopping-container");
ok(reviewHighlights, "review-highlights should be visible"); shoppingContainer.data = MOCK_POPULATED_DATA;
await shoppingContainer.updateComplete;
let reviewHighlights = shoppingContainer.highlightsEl;
ok(reviewHighlights, "Got review-highlights");
await reviewHighlights.updateComplete;
let highlightsList = reviewHighlights.reviewHighlightsListEl; let highlightsList = reviewHighlights.reviewHighlightsListEl;
await highlightsList.updateComplete;
await BrowserTestUtils.waitForMutationCondition(
highlightsList,
{ childList: true },
() => highlightsList.querySelector("highlight-item")
);
is( is(
highlightsList.children.length, highlightsList.children.length,
@ -50,16 +42,15 @@ add_task(async function test_review_highlights() {
let actualNumberOfReviews = highlightEl.shadowRoot.querySelector( let actualNumberOfReviews = highlightEl.shadowRoot.querySelector(
".highlight-details-list" ".highlight-details-list"
).children.length; ).children.length;
let expectedNumberOfReviews = Object.values(MOCK_OBJ[key]).flat() let expectedNumberOfReviews = Object.values(
.length; MOCK_POPULATED_DATA.highlights[key]
).flat().length;
is( is(
actualNumberOfReviews, actualNumberOfReviews,
expectedNumberOfReviews, expectedNumberOfReviews,
"There should be equal number of reviews displayed for " + key "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. * Tests that entire highlights components is still hidden if we receive falsy data.
*/ */
add_task(async function test_review_highlights_no_highlights() { 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( await BrowserTestUtils.withNewTab(
{ {
url: "chrome://browser/content/shopping/shopping.html", url: "chrome://browser/content/shopping/shopping.html",
@ -79,47 +66,24 @@ add_task(async function test_review_highlights_no_highlights() {
}, },
async browser => { async browser => {
const { document } = browser.contentWindow; 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( ok(
BrowserTestUtils.is_hidden(reviewHighlights), BrowserTestUtils.is_hidden(reviewHighlights),
"review-highlights should not be visible" "review-highlights should not be visible"
); );
let highlightsList = reviewHighlights?.reviewHighlightsListEl; let highlightsList = reviewHighlights?.reviewHighlightsListEl;
ok(!highlightsList, "review-highlights-list should not be visible"); 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. * Tests that we do not show an invalid highlight type and properly filter data.
*/ */
add_task(async function test_review_highlights_invalid_type() { 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( await BrowserTestUtils.withNewTab(
{ {
url: "chrome://browser/content/shopping/shopping.html", url: "chrome://browser/content/shopping/shopping.html",
@ -140,14 +99,21 @@ add_task(async function test_review_highlights_invalid_type() {
}, },
async browser => { async browser => {
const { document } = browser.contentWindow; 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( ok(
BrowserTestUtils.is_hidden(reviewHighlights), BrowserTestUtils.is_hidden(reviewHighlights),
"review-highlights should not be visible" "review-highlights should not be visible"
); );
sandbox.restore();
} }
); );
}); });

9
browser/components/shopping/tests/browser/browser_shopping_settings.js
Просмотреть файл

@ -15,8 +15,13 @@ add_task(async function test_shopping_settings() {
async browser => { async browser => {
const { document } = browser.contentWindow; const { document } = browser.contentWindow;
let shoppingSettings = document.querySelector("shopping-settings"); let shoppingContainer = document.querySelector("shopping-container");
ok(shoppingSettings, "shopping-settings should be visible"); 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; let toggle = shoppingSettings.recommendationsToggleEl;
ok(toggle, "There should be a toggle"); ok(toggle, "There should be a toggle");

74
browser/components/shopping/tests/browser/head.js
Просмотреть файл

@ -5,41 +5,45 @@ const { sinon } = ChromeUtils.importESModule(
"resource://testing-common/Sinon.sys.mjs" "resource://testing-common/Sinon.sys.mjs"
); );
const MOCK_POPULATED_OBJ = { const MOCK_POPULATED_DATA = {
price: { adjusted_rating: 5,
positive: ["This watch is great and the price was even better."], grade: "B",
negative: [], highlights: {
neutral: [], price: {
}, positive: ["This watch is great and the price was even better."],
quality: { negative: [],
positive: [ neutral: [],
"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.", quality: {
], positive: [
negative: [ "Other than that, I am very impressed with the watch and it’s capabilities.",
"Battery life is no better than the 3 even with the solar gimmick, probably worse.", "This watch performs above expectations in every way with the exception of the heart rate monitor.",
], ],
neutral: [ negative: [
"I have small wrists and still went with the 6X and glad I did.", "Battery life is no better than the 3 even with the solar gimmick, probably worse.",
"I can deal with the looks, as Im now retired.", ],
], neutral: [
}, "I have small wrists and still went with the 6X and glad I did.",
competitiveness: { "I can deal with the looks, as Im now retired.",
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.", competitiveness: {
], positive: [
negative: [ "Bought this to replace my vivoactive 3.",
"I do not use it for sleep or heartrate monitoring so not sure how accurate they are.", "I like that this watch has so many features, especially those that monitor health like SP02, respiration, sleep, HRV status, stress, and heart rate.",
], ],
neutral: [ negative: [
"I've avoided getting a smartwatch for so long due to short battery life on most of them.", "I do not use it for sleep or heartrate monitoring so not sure how accurate they are.",
], ],
}, neutral: [
shipping: { "I've avoided getting a smartwatch for so long due to short battery life on most of them.",
positive: [], ],
negative: [], },
neutral: [], shipping: {
positive: [],
negative: [],
neutral: [],
},
}, },
}; };