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

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

@ -10,12 +10,14 @@ 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;
let shoppingContainer = document.querySelector("shopping-container");
shoppingContainer.data = MOCK_POPULATED_DATA;
await shoppingContainer.updateComplete;
let adjustedRating = shoppingContainer.adjustedRatingEl;
await adjustedRating.updateComplete;
let mozFiveStar = adjustedRating.ratingEl;
@ -28,7 +30,7 @@ add_task(async function test_adjusted_rating() {
`The adjusted rating "rating" is ${rating}`
);
rating = 5;
rating = 2.55;
adjustedRating.rating = rating;
await adjustedRating.updateComplete;
@ -43,7 +45,6 @@ add_task(async function test_adjusted_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");

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

@ -5,7 +5,10 @@ const { sinon } = ChromeUtils.importESModule(
"resource://testing-common/Sinon.sys.mjs"
);
const MOCK_POPULATED_OBJ = {
const MOCK_POPULATED_DATA = {
adjusted_rating: 5,
grade: "B",
highlights: {
price: {
positive: ["This watch is great and the price was even better."],
negative: [],
@ -41,6 +44,7 @@ const MOCK_POPULATED_OBJ = {
negative: [],
neutral: [],
},
},
};
const MOCK_ERROR_OBJ = {