mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-14 05:45:37 +00:00
Bug 1476204 - Implement the payment summary error bar. r=jaws
MozReview-Commit-ID: 3Rc9ljfMCW3 --HG-- extra : rebase_source : e80fd0a269f4565300e3923223a2ac483f4cf33e
This commit is contained in:
parent
84558567ed
commit
97013686ad
@ -53,7 +53,7 @@ export default class PaymentDialog extends PaymentStateSubscriberMixin(HTMLEleme
|
||||
|
||||
this._header = contents.querySelector("header");
|
||||
|
||||
this._errorText = contents.querySelector("#payment-summary .page-error");
|
||||
this._errorText = contents.querySelector("header > .page-error");
|
||||
|
||||
this._disabledOverlay = contents.getElementById("disabled-overlay");
|
||||
|
||||
|
@ -45,11 +45,25 @@ payment-dialog > header,
|
||||
payment-dialog > header {
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
/* Wrap so that the error text appears full-width above the rest of the contents */
|
||||
flex-wrap: wrap;
|
||||
/* from visual spec: */
|
||||
padding-bottom: 19px;
|
||||
padding-top: 19px;
|
||||
}
|
||||
|
||||
payment-dialog > header > .page-error:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
payment-dialog > header > .page-error {
|
||||
background: #D70022;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
padding: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
display: flex;
|
||||
grid-area: main;
|
||||
|
@ -94,6 +94,7 @@
|
||||
|
||||
<template id="payment-dialog-template">
|
||||
<header>
|
||||
<div class="page-error" aria-live="polite"></div>
|
||||
<div id="total">
|
||||
<currency-amount display-code="display-code"></currency-amount>
|
||||
<div>&header.payTo; <span id="host-name"></span></div>
|
||||
@ -106,7 +107,6 @@
|
||||
<div id="main-container">
|
||||
<payment-request-page id="payment-summary">
|
||||
<div class="page-body">
|
||||
<div class="page-error" aria-live="polite"></div>
|
||||
<address-picker class="shipping-related"
|
||||
data-add-link-label="&address.addLink.label;"
|
||||
data-edit-link-label="&address.editLink.label;"
|
||||
|
@ -37,7 +37,7 @@ add_task(async function test_show_error_on_addresschange() {
|
||||
}, PTU.ContentTasks.awaitPaymentRequestEventPromise);
|
||||
|
||||
await spawnPaymentDialogTask(frame, expectedText => {
|
||||
let errorText = content.document.querySelector("#payment-summary .page-error");
|
||||
let errorText = content.document.querySelector("header .page-error");
|
||||
is(errorText.textContent, expectedText, "Error text should be on dialog");
|
||||
ok(content.isVisible(errorText), "Error text should be visible");
|
||||
}, PTU.Details.genericShippingError.error);
|
||||
@ -59,7 +59,7 @@ add_task(async function test_show_error_on_addresschange() {
|
||||
}, PTU.ContentTasks.awaitPaymentRequestEventPromise);
|
||||
|
||||
await spawnPaymentDialogTask(frame, () => {
|
||||
let errorText = content.document.querySelector("#payment-summary .page-error");
|
||||
let errorText = content.document.querySelector("header .page-error");
|
||||
is(errorText.textContent, "", "Error text should not be on dialog");
|
||||
ok(content.isHidden(errorText), "Error text should not be visible");
|
||||
});
|
||||
@ -112,7 +112,7 @@ add_task(async function test_show_field_specific_error_on_addresschange() {
|
||||
return Object.keys(state.request.paymentDetails.shippingAddressErrors).length;
|
||||
}, "Check that there are shippingAddressErrors");
|
||||
|
||||
is(content.document.querySelector("#payment-summary .page-error").textContent,
|
||||
is(content.document.querySelector("header .page-error").textContent,
|
||||
PTU.Details.fieldSpecificErrors.error,
|
||||
"Error text should be present on dialog");
|
||||
|
||||
@ -165,7 +165,7 @@ add_task(async function test_show_field_specific_error_on_addresschange() {
|
||||
return !Object.keys(state.request.paymentDetails.shippingAddressErrors).length;
|
||||
}, "Check that there are no more shippingAddressErrors");
|
||||
|
||||
is(content.document.querySelector("#payment-summary .page-error").textContent,
|
||||
is(content.document.querySelector("header .page-error").textContent,
|
||||
"", "Error text should not be present on dialog");
|
||||
|
||||
info("click the Edit link again");
|
||||
|
Loading…
Reference in New Issue
Block a user