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() {
if (!this.rating) {
this.hidden = true;
return null;
}
return html`
<shopping-card
data-l10n-id="shopping-adjusted-rating-label"

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

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

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

@ -24,6 +24,11 @@ class ReviewReliability extends MozLitElement {
}
render() {
if (!this.letter) {
this.hidden = true;
return null;
}
return html`
<shopping-card
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 },
};
static get queries() {
return {
reviewReliabilityEl: "review-reliability",
adjustedRatingEl: "adjusted-rating",
highlightsEl: "review-highlights",
settingsEl: "shopping-settings",
};
}
connectedCallback() {
super.connectedCallback();
if (!this.data) {

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

@ -21,24 +21,9 @@
type="module"
src="chrome://browser/content/shopping/shopping-container.mjs"
></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>
</head>
<body>
<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>
</html>

2
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

57
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}`
);
}
);
});

96
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();
}
);
});

9
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");

74
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: [],
},
},
};