From 32f92b34d51553b79ae72861104328c3e360570b Mon Sep 17 00:00:00 2001 From: Jared Wein Date: Wed, 23 May 2018 14:23:36 -0400 Subject: [PATCH] Bug 1427959 - Clean up some tests WebPayments UI tests. r=MattN - Remove getTextContent since it was too verbose and unneeded. - Replace isElementVisible with content-available isVisible and isHidden since it is more convenient to check these within content tasks. - Removed browser_request_summary.js test since what it was testing is now covered by many other tests. - Added a checkPaymentMethodDetailsMatchesCard function to head.js to reduce duplication of card verification tests. - Changed some tests to use pre-defined addresses and cards instead of supplying their own. MozReview-Commit-ID: FLwDKFJQNUY --HG-- extra : rebase_source : 98b3675e8187073948332ef12f9f2604c6f63e9f --- .../payments/test/PaymentTestUtils.jsm | 58 +++-- .../payments/test/browser/browser.ini | 2 - .../test/browser/browser_address_edit.js | 25 +-- .../test/browser/browser_card_edit.js | 32 +-- .../test/browser/browser_change_shipping.js | 52 ++--- .../browser_payments_onboarding_wizard.js | 199 +++++++----------- .../test/browser/browser_profile_storage.js | 38 +--- .../test/browser/browser_request_shipping.js | 46 ++-- .../test/browser/browser_request_summary.js | 10 - .../browser_shippingaddresschange_error.js | 64 ++---- .../test/browser/browser_show_dialog.js | 56 ++--- .../components/payments/test/browser/head.js | 44 +++- 12 files changed, 251 insertions(+), 375 deletions(-) delete mode 100644 browser/components/payments/test/browser/browser_request_summary.js diff --git a/browser/components/payments/test/PaymentTestUtils.jsm b/browser/components/payments/test/PaymentTestUtils.jsm index acdd108d0442..759114c2bed4 100644 --- a/browser/components/payments/test/PaymentTestUtils.jsm +++ b/browser/components/payments/test/PaymentTestUtils.jsm @@ -83,17 +83,6 @@ var PaymentTestUtils = { }, DialogContentTasks: { - isElementVisible: selector => { - let element = content.document.querySelector(selector); - return element.getBoundingClientRect().height > 0; - }, - - getElementTextContent: selector => { - let doc = content.document; - let element = doc.querySelector(selector); - return element.textContent; - }, - getShippingOptions: () => { let select = content.document.querySelector("shipping-option-picker > rich-select"); let popupBox = Cu.waiveXrays(select).popupBox; @@ -165,6 +154,10 @@ var PaymentTestUtils = { /** * Do the minimum possible to complete the payment succesfully. + * + * Don't await on this task since the cancel can close the dialog before + * ContentTask can resolve the promise. + * * @returns {undefined} */ completePayment: () => { @@ -322,6 +315,43 @@ var PaymentTestUtils = { }, }, + UpdateWith: { + twoShippingOptions: { + error: "", + shippingOptions: [ + { + id: "1", + label: "Most Unperfect Shipping", + amount: { currency: "USD", value: "1" }, + }, + { + id: "2", + label: "Least Perfect Shipping", + amount: { currency: "USD", value: "2" }, + selected: true, + }, + ], + total: { + label: "Grand total is now: ", + amount: { + value: "24", + currency: "USD", + }, + }, + }, + genericShippingError: { + error: "Cannot ship with option 1 on days that end with Y", + shippingOptions: [], + total: { + label: "Grand total is!!!!!: ", + amount: { + value: "12", + currency: "USD", + }, + }, + }, + }, + Options: { requestShippingOption: { requestShipping: true, @@ -353,7 +383,7 @@ var PaymentTestUtils = { }, TimBL2: { "given-name": "Timothy", - "additional-name": "John", + "additional-name": "Johann", "family-name": "Berners-Lee", organization: "World Wide Web Consortium", "street-address": "1 Pommes Frittes Place", @@ -382,9 +412,9 @@ var PaymentTestUtils = { BasicCards: { JohnDoe: { "cc-exp-month": 1, - "cc-exp-year": 9999, + "cc-exp-year": (new Date()).getFullYear() + 9, "cc-name": "John Doe", - "cc-number": "999999999999", + "cc-number": "4111111111111111", }, }, }; diff --git a/browser/components/payments/test/browser/browser.ini b/browser/components/payments/test/browser/browser.ini index 0ea8625462dc..1293662ef448 100644 --- a/browser/components/payments/test/browser/browser.ini +++ b/browser/components/payments/test/browser/browser.ini @@ -15,8 +15,6 @@ support-files = [browser_profile_storage.js] [browser_request_serialization.js] [browser_request_shipping.js] -[browser_request_summary.js] -uses-unsafe-cpows = true [browser_shippingaddresschange_error.js] [browser_show_dialog.js] skip-if = os == 'win' && debug # bug 1418385 diff --git a/browser/components/payments/test/browser/browser_address_edit.js b/browser/components/payments/test/browser/browser_address_edit.js index 630a18aba52c..7b47cb3d8911 100644 --- a/browser/components/payments/test/browser/browser_address_edit.js +++ b/browser/components/payments/test/browser/browser_address_edit.js @@ -26,19 +26,6 @@ add_task(async function test_add_link() { eventName: "shippingaddresschange", }, PTU.ContentTasks.awaitPaymentRequestEventPromise); - const EXPECTED_ADDRESS = { - "given-name": "Jared", - "family-name": "Wein", - "organization": "Mozilla", - "street-address": "404 Internet Lane", - "address-level2": "Firefoxity City", - "address-level1": "CA", - "postal-code": "31337", - "country": "US", - "tel": "+15555551212", - "email": "test@example.com", - }; - await spawnPaymentDialogTask(frame, async (address) => { let { PaymentTestUtils: PTU, @@ -89,7 +76,7 @@ add_task(async function test_add_link() { state = await PTU.DialogContentUtils.waitForState(content, (state) => { return state.page.id == "payment-summary"; }, "Switched back to payment-summary"); - }, EXPECTED_ADDRESS); + }, PTU.Addresses.TimBL); await shippingAddressChangePromise; info("got shippingaddresschange event"); @@ -252,8 +239,8 @@ add_task(async function test_add_payer_contact_name_email_link() { info("check that non-payer requested fields are hidden"); for (let selector of ["#organization", "#tel"]) { - ok(content.document.querySelector(selector).getBoundingClientRect().height == 0, - selector + " should be hidden"); + let element = content.document.querySelector(selector); + ok(content.isHidden(element), selector + " should be hidden"); } content.document.querySelector("address-form button:last-of-type").click(); @@ -340,9 +327,9 @@ add_task(async function test_edit_payer_contact_name_email_phone_link() { for (let element of formElements) { let shouldBeVisible = allowedFields.includes(element.id); if (shouldBeVisible) { - ok(element.getBoundingClientRect().height > 0, element.id + " should be visible"); + ok(content.isVisible(element), element.id + " should be visible"); } else { - ok(element.getBoundingClientRect().height == 0, element.id + " should be hidden"); + ok(content.isHidden(element), element.id + " should be hidden"); } } @@ -422,7 +409,7 @@ add_task(async function test_private_persist_addresses() { await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.getShippingAddresses); is(initialAddresses.options.length, 2, "Got expected number of pre-filled shipping addresses"); - // // listen for shippingaddresschange event in merchant (private) window + // listen for shippingaddresschange event in merchant (private) window info("listen for shippingaddresschange"); let shippingAddressChangePromise = ContentTask.spawn(browser, { eventName: "shippingaddresschange", diff --git a/browser/components/payments/test/browser/browser_card_edit.js b/browser/components/payments/test/browser/browser_card_edit.js index 5b740c51af78..4ca9fe2f1aa0 100644 --- a/browser/components/payments/test/browser/browser_card_edit.js +++ b/browser/components/payments/test/browser/browser_card_edit.js @@ -34,13 +34,7 @@ add_task(async function test_add_link() { let persistCheckbox = content.document.querySelector("basic-card-form labelled-checkbox"); ok(Cu.waiveXrays(persistCheckbox).checked, "persist checkbox should be checked by default"); - let year = (new Date()).getFullYear(); - let card = { - "cc-number": "4111111111111111", - "cc-name": "J. Smith", - "cc-exp-month": 11, - "cc-exp-year": year, - }; + let card = Object.assign({}, PTU.BasicCards.JohnDoe); info("filling fields"); for (let [key, val] of Object.entries(card)) { @@ -50,8 +44,8 @@ add_task(async function test_add_link() { } let billingAddressSelect = content.document.querySelector("#billingAddressGUID"); - isnot(billingAddressSelect.getBoundingClientRect().height, 0, - "The billing address selector should always be visible"); + ok(content.isVisible(billingAddressSelect), + "The billing address selector should always be visible"); is(billingAddressSelect.childElementCount, 1, "Only one child option should exist by default"); is(billingAddressSelect.children[0].value, "", @@ -175,13 +169,11 @@ add_task(async function test_edit_link() { let title = content.document.querySelector("basic-card-form h1"); is(title.textContent, "Edit Credit Card", "Edit title should be set"); - let nextYear = (new Date()).getFullYear() + 1; - let card = { - // cc-number cannot be modified - "cc-name": "A. Nonymous", - "cc-exp-month": 3, - "cc-exp-year": nextYear, - }; + let card = Object.assign({}, PTU.BasicCards.JohnDoe); + // cc-number cannot be modified + delete card["cc-number"]; + card["cc-exp-year"]++; + card["cc-exp-month"]++; info("overwriting field values"); for (let [key, val] of Object.entries(card)) { @@ -375,13 +367,7 @@ add_task(async function test_private_card_adding() { let savedCardCount = Object.keys(state.savedBasicCards).length; let tempCardCount = Object.keys(state.tempBasicCards).length; - let year = (new Date()).getFullYear(); - let card = { - "cc-number": "4111111111111111", - "cc-name": "J. Smith", - "cc-exp-month": 11, - "cc-exp-year": year, - }; + let card = Object.assign({}, PTU.BasicCards.JohnDoe); info("filling fields"); for (let [key, val] of Object.entries(card)) { diff --git a/browser/components/payments/test/browser/browser_change_shipping.js b/browser/components/payments/test/browser/browser_change_shipping.js index 117fe73f12c5..da49dff7cb07 100644 --- a/browser/components/payments/test/browser/browser_change_shipping.js +++ b/browser/components/payments/test/browser/browser_change_shipping.js @@ -26,9 +26,7 @@ add_task(async function test_change_shipping() { is(shippingOptions.optionCount, 2, "there should be two shipping options"); is(shippingOptions.selectedOptionID, "2", "default selected should be '2'"); - await spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.selectShippingOptionById, - "1"); + await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.selectShippingOptionById, "1"); shippingOptions = await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.getShippingOptions); @@ -41,9 +39,7 @@ add_task(async function test_change_shipping() { }, PTU.ContentTasks.updateWith); info("added shipping change handler to change to EUR"); - await spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.selectShippingAddressByCountry, - "DE"); + await selectPaymentDialogShippingAddressByCountry(frame, "DE"); info("changed shipping address to DE country"); await ContentTask.spawn(browser, { @@ -67,27 +63,12 @@ add_task(async function test_change_shipping() { let result = await ContentTask.spawn(browser, {}, PTU.ContentTasks.addCompletionHandler); is(result.response.methodName, "basic-card", "Check methodName"); - let addressLines = PTU.Addresses.TimBL2["street-address"].split("\n"); - let actualShippingAddress = result.response.shippingAddress; + let {shippingAddress} = result.response; let expectedAddress = PTU.Addresses.TimBL2; - is(actualShippingAddress.addressLine[0], addressLines[0], "Address line 1 should match"); - is(actualShippingAddress.addressLine[1], addressLines[1], "Address line 2 should match"); - is(actualShippingAddress.country, expectedAddress.country, "Country should match"); - is(actualShippingAddress.region, expectedAddress["address-level1"], "Region should match"); - is(actualShippingAddress.city, expectedAddress["address-level2"], "City should match"); - is(actualShippingAddress.postalCode, expectedAddress["postal-code"], "Zip code should match"); - is(actualShippingAddress.organization, expectedAddress.organization, "Org should match"); - is(actualShippingAddress.recipient, - `${expectedAddress["given-name"]} ${expectedAddress["additional-name"]} ` + - `${expectedAddress["family-name"]}`, - "Recipient should match"); - is(actualShippingAddress.phone, expectedAddress.tel, "Phone should match"); + checkPaymentAddressMatchesStorageAddress(shippingAddress, expectedAddress, "Shipping address"); - let methodDetails = result.methodDetails; - is(methodDetails.cardholderName, "John Doe", "Check cardholderName"); - is(methodDetails.cardNumber, "999999999999", "Check cardNumber"); - is(methodDetails.expiryMonth, "01", "Check expiryMonth"); - is(methodDetails.expiryYear, "9999", "Check expiryYear"); + let {methodDetails} = result; + checkPaymentMethodDetailsMatchesCard(methodDetails, PTU.BasicCards.JohnDoe, "Payment method"); await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed"); }); @@ -132,9 +113,7 @@ add_task(async function test_default_shippingOptions_noneSelected() { }, PTU.ContentTasks.updateWith); info("added shipping change handler to change to EUR"); - await spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.selectShippingAddressByCountry, - "DE"); + await selectPaymentDialogShippingAddressByCountry(frame, "DE"); info("changed shipping address to DE country"); await ContentTask.spawn(browser, { @@ -193,9 +172,7 @@ add_task(async function test_default_shippingOptions_allSelected() { }, PTU.ContentTasks.updateWith); info("added shipping change handler to change to EUR"); - await spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.selectShippingAddressByCountry, - "DE"); + await selectPaymentDialogShippingAddressByCountry(frame, "DE"); info("changed shipping address to DE country"); await ContentTask.spawn(browser, { @@ -247,11 +224,8 @@ add_task(async function test_no_shippingchange_without_shipping() { ok(actualShippingAddress === null, "Check that shipping address is null with requestShipping:false"); - let methodDetails = result.methodDetails; - is(methodDetails.cardholderName, "John Doe", "Check cardholderName"); - is(methodDetails.cardNumber, "999999999999", "Check cardNumber"); - is(methodDetails.expiryMonth, "01", "Check expiryMonth"); - is(methodDetails.expiryYear, "9999", "Check expiryYear"); + let {methodDetails} = result; + checkPaymentMethodDetailsMatchesCard(methodDetails, PTU.BasicCards.JohnDoe, "Payment method"); await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed"); }); @@ -285,8 +259,7 @@ add_task(async function test_address_edit() { }, PTU.ContentTasks.promisePaymentRequestEvent); info("selecting the US address"); - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.selectShippingAddressByCountry, - "US"); + await selectPaymentDialogShippingAddressByCountry(frame, "US"); await ContentTask.spawn(browser, { eventName: "shippingaddresschange", @@ -343,8 +316,7 @@ add_task(async function test_address_removal() { ); info("selecting the US address"); - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.selectShippingAddressByCountry, - "US"); + await selectPaymentDialogShippingAddressByCountry(frame, "US"); let addressOptions = await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.getShippingAddresses); diff --git a/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js b/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js index 1264132a83fe..4cfbbf298e77 100644 --- a/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js +++ b/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js @@ -23,50 +23,34 @@ add_task(async function test_onboarding_wizard_without_saved_addresses_and_saved merchantTaskFn: PTU.ContentTasks.createAndShowRequest, }); - info("Checking if the address page has been rendered"); - let isAddressPageSaveButtonVisible = - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, - "address-form .save-button"); - ok(isAddressPageSaveButtonVisible, "Address page is rendered"); - await spawnPaymentDialogTask(frame, async function() { let { PaymentTestUtils: PTU, } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {}); + info("Checking if the address page has been rendered"); + let addressSaveButton = content.document.querySelector("address-form .save-button"); + ok(content.isVisible(addressSaveButton), "Address save button is rendered"); + await PTU.DialogContentUtils.waitForState(content, (state) => { return state.page.id == "address-page" && state["address-page"].selectedStateKey == "selectedShippingAddress"; }, "Address page is shown first during on-boarding if there are no saved addresses"); - }); - info("Check if the total header is visible on the address page during on-boarding"); - let isHeaderVisible = - spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, "header"); - ok(isHeaderVisible, "Total Header is visible on the address page during on-boarding"); - let headerTextContent = - spawnPaymentDialogTask(frame, PTU.DialogContentTasks.getElementTextContent, "header"); - ok(headerTextContent, "Total Header contains text"); + info("Check if the total header is visible on the address page during on-boarding"); + let header = content.document.querySelector("header"); + ok(content.isVisible(header), + "Total Header is visible on the address page during on-boarding"); + ok(header.textContent, "Total Header contains text"); - info("Check if the page title is visible on the address page"); - let isAddressPageTitleVisible = spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.isElementVisible, - "address-form h1"); - ok(isAddressPageTitleVisible, "Address page title is visible"); - let titleTextContent = - spawnPaymentDialogTask(frame, PTU.DialogContentTasks.getElementTextContent, - "address-form h1"); - ok(titleTextContent, "Address page title contains text"); + info("Check if the page title is visible on the address page"); + let addressPageTitle = content.document.querySelector("address-form h1"); + ok(content.isVisible(addressPageTitle), "Address page title is visible"); + ok(addressPageTitle.textContent, "Address page title contains text"); - let isAddressPageCancelButtonVisible = - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, - "address-form .cancel-button"); - ok(isAddressPageCancelButtonVisible, "The cancel button on the address page is visible"); - - await spawnPaymentDialogTask(frame, async function() { - let { - PaymentTestUtils: PTU, - } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {}); + let addressCancelButton = content.document.querySelector("address-form .cancel-button"); + ok(content.isVisible(addressCancelButton), + "The cancel button on the address page is visible"); for (let [key, val] of Object.entries(PTU.Addresses.TimBL2)) { let field = content.document.getElementById(key); @@ -77,50 +61,37 @@ add_task(async function test_onboarding_wizard_without_saved_addresses_and_saved ok(!field.disabled, `Field #${key} shouldn't be disabled`); } content.document.querySelector("address-form .save-button").click(); - }); - - let isBasicCardPageSaveButtonVisible = - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, - "basic-card-form .save-button"); - ok(isBasicCardPageSaveButtonVisible, "Basic card page is rendered"); - - let isBasicCardPageTitleVisible = spawnPaymentDialogTask(frame, - // eslint-disable-next-line max-len - PTU.DialogContentTasks.isElementVisible, - "basic-card-form h1"); - ok(isBasicCardPageTitleVisible, "Basic card page title is visible"); - titleTextContent = - spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.getElementTextContent, - "basic-card-form h1"); - ok(titleTextContent, "Basic card page title contains text"); - - await spawnPaymentDialogTask(frame, async function() { - let { - PaymentTestUtils: PTU, - } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {}); await PTU.DialogContentUtils.waitForState(content, (state) => { return state.page.id == "basic-card-page"; }, "Basic card page is shown after the address page during on boarding"); + let basicCardTitle = content.document.querySelector("basic-card-form h1"); + ok(content.isVisible(basicCardTitle), "Basic card page title is visible"); + ok(basicCardTitle.textContent, "Basic card page title contains text"); + + let cardSaveButton = content.document.querySelector("basic-card-form .save-button"); + ok(content.isVisible(cardSaveButton), "Basic card page is rendered"); + for (let [key, val] of Object.entries(PTU.BasicCards.JohnDoe)) { let field = content.document.getElementById(key); field.value = val; ok(!field.disabled, `Field #${key} shouldn't be disabled`); } content.document.querySelector("basic-card-form .save-button").click(); - }); - let isPaymentSummaryCancelButtonVisible = - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, "#cancel"); - ok(isPaymentSummaryCancelButtonVisible, - "Payment summary page is shown after the basic card page during on boarding"); + await PTU.DialogContentUtils.waitForState(content, (state) => { + return state.page.id == "payment-summary"; + }, "payment-summary is now visible"); + + let cancelButton = content.document.querySelector("#cancel"); + ok(content.isVisible(cancelButton), + "Payment summary page is shown after the basic card page during on boarding"); + }); info("Closing the payment dialog"); - spawnPaymentDialogTask(frame, async function() { - content.document.getElementById("cancel").click(); - }); + spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel); + await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed"); }); }); @@ -141,44 +112,35 @@ add_task(async function test_onboarding_wizard_with_saved_addresses_and_saved_ca merchantTaskFn: PTU.ContentTasks.createAndShowRequest, }); - info("Checking if the payment summary page is now visible"); - let isPaymentSummaryCancelButtonVisible = - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, "#cancel"); - ok(isPaymentSummaryCancelButtonVisible, "Payment summary page is rendered"); - await spawnPaymentDialogTask(frame, async function() { let { PaymentTestUtils: PTU, } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {}); + info("Checking if the payment summary page is now visible"); + let cancelButton = content.document.querySelector("#cancel"); + ok(content.isVisible(cancelButton), "Payment summary page is rendered"); + await PTU.DialogContentUtils.waitForState(content, (state) => { return state.page.id == "payment-summary"; }, "Payment summary page is shown first when there are saved addresses and saved cards"); - }); - info("Check if the total header is visible on payments summary page"); - let isHeaderVisible = - spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, "header"); - ok(isHeaderVisible, "Total Header is visible on the payment summary page"); - let headerTextContent = - spawnPaymentDialogTask(frame, PTU.DialogContentTasks.getElementTextContent, "header"); - ok(headerTextContent, "Total Header contains text"); - - // Click on the Add/Edit buttons in the payment summary page to check if - // the total header is visible on the address page and the basic card page. - let buttons = ["address-picker[selected-state-key='selectedShippingAddress'] .add-link", - "address-picker[selected-state-key='selectedShippingAddress'] .edit-link", - "payment-method-picker .add-link", - "payment-method-picker .edit-link"]; - for (let button of buttons) { - // eslint-disable-next-line no-shadow - await spawnPaymentDialogTask(frame, async function(button) { - let { - PaymentTestUtils: PTU, - } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {}); + info("Check if the total header is visible on payments summary page"); + let header = content.document.querySelector("header"); + ok(content.isVisible(header), + "Total Header is visible on the payment summary page"); + ok(header.textContent, "Total Header contains text"); + // Click on the Add/Edit buttons in the payment summary page to check if + // the total header is visible on the address page and the basic card page. + let buttons = [ + "address-picker[selected-state-key='selectedShippingAddress'] .add-link", + "address-picker[selected-state-key='selectedShippingAddress'] .edit-link", + "payment-method-picker .add-link", + "payment-method-picker .edit-link", + ]; + for (let button of buttons) { content.document.querySelector(button).click(); - if (button.startsWith("address")) { await PTU.DialogContentUtils.waitForState(content, (state) => { return state.page.id == "address-page"; @@ -188,27 +150,21 @@ add_task(async function test_onboarding_wizard_with_saved_addresses_and_saved_ca return state.page.id == "basic-card-page"; }, "Basic card page is shown"); } - }, button); - isHeaderVisible = - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, "header"); - ok(!isHeaderVisible, "Total Header is hidden on the address/basic card page"); + ok(!content.isVisible(header), + "Total Header is hidden on the address/basic card page"); - if (button.startsWith("address")) { - spawnPaymentDialogTask(frame, async function() { + if (button.startsWith("address")) { content.document.querySelector("address-form .back-button").click(); - }); - } else { - spawnPaymentDialogTask(frame, async function() { + } else { content.document.querySelector("basic-card-form .back-button").click(); - }); + } } - } + }); info("Closing the payment dialog"); - spawnPaymentDialogTask(frame, async function() { - content.document.getElementById("cancel").click(); - }); + spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel); + await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed"); cleanupFormAutofillStorage(); @@ -231,38 +187,35 @@ add_task(async function test_onboarding_wizard_with_saved_addresses_and_no_saved merchantTaskFn: PTU.ContentTasks.createAndShowRequest, }); - info("Checking if the basic card has been rendered"); - let isBasicCardPageSaveButtonVisible = - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, - "basic-card-form .save-button"); - ok(isBasicCardPageSaveButtonVisible, "Basic card page is rendered"); - await spawnPaymentDialogTask(frame, async function() { let { PaymentTestUtils: PTU, } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {}); + info("Checking if the basic card has been rendered"); + let cardSaveButton = content.document.querySelector("basic-card-form .save-button"); + ok(content.isVisible(cardSaveButton), "Basic card page is rendered"); + await PTU.DialogContentUtils.waitForState(content, (state) => { return state.page.id == "basic-card-page"; }, "Basic card page is shown first if there are saved addresses during on boarding"); + + info("Check if the total header is visible on the basic card page during on-boarding"); + let header = content.document.querySelector("header"); + ok(content.isVisible(header), + "Total Header is visible on the basic card page during on-boarding"); + ok(header.textContent, "Total Header contains text"); + + let cardCancelButton = content.document.querySelector("basic-card-form .cancel-button"); + ok(content.isVisible(cardCancelButton), + "Cancel button is visible on the basic card page"); }); - info("Check if the total header is visible on the basic card page during on-boarding"); - let isHeaderVisible = - spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, "header"); - ok(isHeaderVisible, "Total Header is visible on the basic card page during on-boarding"); - let headerTextContent = - spawnPaymentDialogTask(frame, PTU.DialogContentTasks.getElementTextContent, "header"); - ok(headerTextContent, "Total Header contains text"); - - let isBasicCardPageCancelButtonVisible = - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, - "basic-card-form .cancel-button"); - ok(isBasicCardPageCancelButtonVisible, "Cancel button is visible on the basic card page"); - - spawnPaymentDialogTask(frame, async function() { + // Do not await for this task since the dialog may close before the task resolves. + spawnPaymentDialogTask(frame, () => { content.document.querySelector("basic-card-form .cancel-button").click(); }); + await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed"); cleanupFormAutofillStorage(); diff --git a/browser/components/payments/test/browser/browser_profile_storage.js b/browser/components/payments/test/browser/browser_profile_storage.js index 611c647cf5a9..3c79a6b0d133 100644 --- a/browser/components/payments/test/browser/browser_profile_storage.js +++ b/browser/components/payments/test/browser/browser_profile_storage.js @@ -8,29 +8,12 @@ const details = PTU.Details.total60USD; add_task(async function test_initial_state() { let onChanged = TestUtils.topicObserved("formautofill-storage-changed", (subject, data) => data == "add"); - let address1GUID = formAutofillStorage.addresses.add({ - "given-name": "Timothy", - "additional-name": "John", - "family-name": "Berners-Lee", - organization: "World Wide Web Consortium", - "street-address": "32 Vassar Street\nMIT Room 32-G524", - "address-level2": "Cambridge", - "address-level1": "MA", - "postal-code": "02139", - country: "US", - tel: "+16172535702", - email: "timbl@w3.org", - }); + let address1GUID = formAutofillStorage.addresses.add(PTU.Addresses.TimBL); await onChanged; onChanged = TestUtils.topicObserved("formautofill-storage-changed", (subject, data) => data == "add"); - let card1GUID = formAutofillStorage.creditCards.add({ - "cc-name": "John Doe", - "cc-number": "1234567812345678", - "cc-exp-month": 4, - "cc-exp-year": 2028, - }); + let card1GUID = formAutofillStorage.creditCards.add(PTU.BasicCards.JohnDoe); await onChanged; await BrowserTestUtils.withNewTab({ @@ -61,7 +44,7 @@ add_task(async function test_initial_state() { is(savedAddresses[address1GUID].guid, address1GUID, "Check address guid matches key"); is(Object.keys(savedBasicCards).length, 1, "Initially one savedBasicCards"); - is(savedBasicCards[card1GUID]["cc-number"], "************5678", "Check cc-number"); + is(savedBasicCards[card1GUID]["cc-number"], "************1111", "Check cc-number"); is(savedBasicCards[card1GUID].guid, card1GUID, "Check card guid matches key"); is(savedBasicCards[card1GUID].methodName, "basic-card", "Check card has a methodName of basic-card"); @@ -73,16 +56,7 @@ add_task(async function test_initial_state() { let onChanged = TestUtils.topicObserved("formautofill-storage-changed", (subject, data) => data == "add"); info("adding an address"); - let address2GUID = formAutofillStorage.addresses.add({ - "given-name": "John", - "additional-name": "", - "family-name": "Smith", - "street-address": "331 E. Evelyn Ave.", - "address-level2": "Mountain View", - "address-level1": "CA", - "postal-code": "94041", - country: "US", - }); + let address2GUID = formAutofillStorage.addresses.add(PTU.Addresses.TimBL2); await onChanged; await spawnPaymentDialogTask(frame, async function checkAdd({ @@ -172,11 +146,11 @@ add_task(async function test_initial_state() { } = contentWin.document.querySelector("payment-dialog").requestStore.getState(); is(Object.keys(savedAddresses).length, 1, "Now one savedAddresses"); - is(savedAddresses[address2GUID].name, "John Smith", "Check full name"); + is(savedAddresses[address2GUID].name, "Timothy Johann Berners-Lee", "Check full name"); is(savedAddresses[address2GUID].guid, address2GUID, "Check address guid matches key"); is(Object.keys(savedBasicCards).length, 1, "Still one savedBasicCards"); - is(savedBasicCards[card1GUID]["cc-number"], "************5678", "Check cc-number"); + is(savedBasicCards[card1GUID]["cc-number"], "************1111", "Check cc-number"); is(savedBasicCards[card1GUID].guid, card1GUID, "Check card guid matches key"); }, { address2GUID, diff --git a/browser/components/payments/test/browser/browser_request_shipping.js b/browser/components/payments/test/browser/browser_request_shipping.js index 2ecd2988f18d..596df501c6bc 100644 --- a/browser/components/payments/test/browser/browser_request_shipping.js +++ b/browser/components/payments/test/browser/browser_request_shipping.js @@ -30,25 +30,21 @@ add_task(async function test_request_shipping_present() { } ); - let isShippingOptionsVisible = - await spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.isElementVisible, - "shipping-option-picker"); - ok(isShippingOptionsVisible, "shipping-option-picker should be visible"); - let addressSelector = "address-picker[selected-state-key='selectedShippingAddress']"; - let isShippingAddressVisible = - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, - addressSelector); - ok(isShippingAddressVisible, "shipping address picker should be visible"); - - let shippingOptionText = - await spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.getElementTextContent, - "#shipping-type-label"); - is(shippingOptionText, shippingString, - "Label should be match shipping type: " + shippingKey); + await spawnPaymentDialogTask(frame, async ([aShippingKey, aShippingString]) => { + let shippingOptionPicker = content.document.querySelector("shipping-option-picker"); + ok(content.isVisible(shippingOptionPicker), + "shipping-option-picker should be visible"); + const addressSelector = "address-picker[selected-state-key='selectedShippingAddress']"; + let shippingAddress = content.document.querySelector(addressSelector); + ok(content.isVisible(shippingAddress), + "shipping address picker should be visible"); + let shippingOption = content.document.querySelector("#shipping-type-label"); + is(shippingOption.textContent, aShippingString, + "Label should be match shipping type: " + aShippingKey); + }, [shippingKey, shippingString]); spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel); + await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed"); } }); @@ -67,15 +63,13 @@ add_task(async function test_request_shipping_not_present() { } ); - let isShippingOptionsVisible = - await spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.isElementVisible, - "shipping-option-picker"); - ok(!isShippingOptionsVisible, "shipping-option-picker should not be visible"); - let isShippingAddressVisible = - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, - "address-picker[selected-state-key='selectedShippingAddress']"); - ok(!isShippingAddressVisible, "shipping address picker should not be visible"); + await spawnPaymentDialogTask(frame, async () => { + let shippingOptionPicker = content.document.querySelector("shipping-option-picker"); + ok(content.isHidden(shippingOptionPicker), "shipping-option-picker should not be visible"); + const addressSelector = "address-picker[selected-state-key='selectedShippingAddress']"; + let shippingAddress = content.document.querySelector(addressSelector); + ok(content.isHidden(shippingAddress), "shipping address picker should not be visible"); + }); spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel); await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed"); diff --git a/browser/components/payments/test/browser/browser_request_summary.js b/browser/components/payments/test/browser/browser_request_summary.js deleted file mode 100644 index 83601450d78a..000000000000 --- a/browser/components/payments/test/browser/browser_request_summary.js +++ /dev/null @@ -1,10 +0,0 @@ -"use strict"; - -add_task(async function test_summary() { - await BrowserTestUtils.withNewTab({ - gBrowser, - url: "resource://payments/paymentRequest.xhtml", - }, async browser => { - ok(browser.contentDocumentAsCPOW.getElementById("cancel"), "Cancel button exists"); - }); -}); diff --git a/browser/components/payments/test/browser/browser_shippingaddresschange_error.js b/browser/components/payments/test/browser/browser_shippingaddresschange_error.js index 93bb9e0bc858..655dc9f4927d 100644 --- a/browser/components/payments/test/browser/browser_shippingaddresschange_error.js +++ b/browser/components/payments/test/browser/browser_shippingaddresschange_error.js @@ -1,3 +1,5 @@ +/* eslint-disable no-shadow */ + "use strict"; add_task(addSampleAddressesAndBasicCard); @@ -17,66 +19,42 @@ add_task(async function test_show_error_on_addresschange() { ); info("setting up the event handler for shippingoptionchange"); - let EXPECTED_ERROR_TEXT = "Cannot ship with option 1 on days that end with Y"; await ContentTask.spawn(browser, { eventName: "shippingoptionchange", - details: { - error: EXPECTED_ERROR_TEXT, - shippingOptions: [], - total: { - label: "Grand total is!!!!!: ", - amount: { - value: "12", - currency: "USD", - }, - }, - }, + details: PTU.UpdateWith.genericShippingError, }, PTU.ContentTasks.updateWith); - await spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.selectShippingOptionById, - "1"); + + await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.selectShippingOptionById, "1"); + info("awaiting the shippingoptionchange event"); await ContentTask.spawn(browser, { eventName: "shippingoptionchange", }, PTU.ContentTasks.awaitPaymentRequestEventPromise); - let errorText = await spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.getElementTextContent, - "#error-text"); - is(errorText, EXPECTED_ERROR_TEXT, "Error text should be present on dialog"); - let errorsVisible = - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, "#error-text"); - ok(errorsVisible, "Error text should be visible"); + await spawnPaymentDialogTask(frame, expectedText => { + let errorText = content.document.querySelector("#error-text"); + is(errorText.textContent, expectedText, "Error text should be on dialog"); + ok(content.isVisible(errorText), "Error text should be visible"); + }, PTU.UpdateWith.genericShippingError.error); info("setting up the event handler for shippingaddresschange"); await ContentTask.spawn(browser, { eventName: "shippingaddresschange", - details: { - error: "", - shippingOptions: PTU.Details.twoShippingOptions.shippingOptions, - total: { - label: "Grand total is now: ", - amount: { - value: "24", - currency: "USD", - }, - }, - }, + details: PTU.UpdateWith.twoShippingOptions, }, PTU.ContentTasks.updateWith); - await spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.selectShippingAddressByCountry, - "DE"); + + await selectPaymentDialogShippingAddressByCountry(frame, "DE"); + info("awaiting the shippingaddresschange event"); await ContentTask.spawn(browser, { eventName: "shippingaddresschange", }, PTU.ContentTasks.awaitPaymentRequestEventPromise); - errorText = await spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.getElementTextContent, - "#error-text"); - is(errorText, "", "Error text should not be present on dialog"); - errorsVisible = - await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible, "#error-text"); - ok(!errorsVisible, "Error text should not be visible"); + + await spawnPaymentDialogTask(frame, () => { + let errorText = content.document.querySelector("#error-text"); + is(errorText.textContent, "", "Error text should not be on dialog"); + ok(content.isHidden(errorText), "Error text should not be visible"); + }); info("clicking cancel"); spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel); diff --git a/browser/components/payments/test/browser/browser_show_dialog.js b/browser/components/payments/test/browser/browser_show_dialog.js index 76b30f04dcd8..8d401e040eda 100644 --- a/browser/components/payments/test/browser/browser_show_dialog.js +++ b/browser/components/payments/test/browser/browser_show_dialog.js @@ -41,35 +41,14 @@ add_task(async function test_show_manualAbort_dialog() { }); add_task(async function test_show_completePayment() { + let {address1GUID, card1GUID} = await addSampleAddressesAndBasicCard(); + let onChanged = TestUtils.topicObserved("formautofill-storage-changed", - (subject, data) => data == "add"); - let address = { - "given-name": "Timothy", - "additional-name": "John", - "family-name": "Berners-Lee", - organization: "World Wide Web Consortium", - "street-address": "32 Vassar Street\nMIT Room 32-G524", - "address-level2": "Cambridge", - "address-level1": "MA", - "postal-code": "02139", - country: "US", - tel: "+16172535702", - email: "timbl@example.org", - }; - let addressGUID = await formAutofillStorage.addresses.add(address); - await onChanged; - - onChanged = TestUtils.topicObserved("formautofill-storage-changed", - (subject, data) => data == "add"); - let card = { - billingAddressGUID: addressGUID, - "cc-exp-month": 1, - "cc-exp-year": 9999, - "cc-name": "John Doe", - "cc-number": "999999999999", - }; - - formAutofillStorage.creditCards.add(card); + (subject, data) => data == "update"); + info("associating the card with the billing address"); + formAutofillStorage.creditCards.update(card1GUID, { + billingAddressGUID: address1GUID, + }, true); await onChanged; await BrowserTestUtils.withNewTab({ @@ -86,9 +65,7 @@ add_task(async function test_show_completePayment() { ); info("select the shipping address"); - await spawnPaymentDialogTask(frame, - PTU.DialogContentTasks.selectShippingAddressByCountry, - "US"); + await selectPaymentDialogShippingAddressByCountry(frame, "US"); info("entering CSC"); await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.setSecurityCode, { @@ -101,17 +78,16 @@ add_task(async function test_show_completePayment() { info("acknowledging the completion from the merchant page"); let result = await ContentTask.spawn(browser, {}, PTU.ContentTasks.addCompletionHandler); - let actualShippingAddress = result.response.shippingAddress; - checkPaymentAddressMatchesStorageAddress(actualShippingAddress, address, "Shipping address"); + let {shippingAddress} = result.response; + checkPaymentAddressMatchesStorageAddress(shippingAddress, PTU.Addresses.TimBL, "Shipping"); + is(result.response.methodName, "basic-card", "Check methodName"); - let methodDetails = result.methodDetails; - is(methodDetails.cardholderName, "John Doe", "Check cardholderName"); - is(methodDetails.cardNumber, "999999999999", "Check cardNumber"); - is(methodDetails.expiryMonth, "01", "Check expiryMonth"); - is(methodDetails.expiryYear, "9999", "Check expiryYear"); + let {methodDetails} = result; + checkPaymentMethodDetailsMatchesCard(methodDetails, PTU.BasicCards.JohnDoe, "Payment method"); is(methodDetails.cardSecurityCode, "999", "Check cardSecurityCode"); is(typeof methodDetails.methodName, "undefined", "Check methodName wasn't included"); - checkPaymentAddressMatchesStorageAddress(methodDetails.billingAddress, address, + + checkPaymentAddressMatchesStorageAddress(methodDetails.billingAddress, PTU.Addresses.TimBL, "Billing address"); is(result.response.shippingOption, "2", "Check shipping option"); @@ -139,7 +115,7 @@ add_task(async function test_show_completePayment2() { }, PTU.ContentTasks.promisePaymentRequestEvent); info("changing shipping option to '1' from default selected option of '2'"); - spawnPaymentDialogTask(frame, PTU.DialogContentTasks.selectShippingOptionById, "1"); + await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.selectShippingOptionById, "1"); await ContentTask.spawn(browser, { eventName: "shippingoptionchange", diff --git a/browser/components/payments/test/browser/head.js b/browser/components/payments/test/browser/head.js index 36306be53170..b6487c00c303 100644 --- a/browser/components/payments/test/browser/head.js +++ b/browser/components/payments/test/browser/head.js @@ -143,18 +143,24 @@ function spawnTaskInNewDialog(requestId, contentTaskFn, args = null) { async function addSampleAddressesAndBasicCard() { let onChanged = TestUtils.topicObserved("formautofill-storage-changed", (subject, data) => data == "add"); - formAutofillStorage.addresses.add(PTU.Addresses.TimBL); + let address1GUID = formAutofillStorage.addresses.add(PTU.Addresses.TimBL); await onChanged; onChanged = TestUtils.topicObserved("formautofill-storage-changed", (subject, data) => data == "add"); - formAutofillStorage.addresses.add(PTU.Addresses.TimBL2); + let address2GUID = formAutofillStorage.addresses.add(PTU.Addresses.TimBL2); await onChanged; onChanged = TestUtils.topicObserved("formautofill-storage-changed", (subject, data) => data == "add"); - formAutofillStorage.creditCards.add(PTU.BasicCards.JohnDoe); + let card1GUID = formAutofillStorage.creditCards.add(PTU.BasicCards.JohnDoe); await onChanged; + + return { + address1GUID, + address2GUID, + card1GUID, + }; } /** @@ -180,6 +186,24 @@ function checkPaymentAddressMatchesStorageAddress(paymentAddress, storageAddress is(paymentAddress.phone, storageAddress.tel, "Phone should match"); } +/** + * Checks that a card from autofill storage matches a Payment Request MethodDetails response. + * @param {MethodDetails} methodDetails + * @param {object} card + * @param {string} msg to describe the check + */ +function checkPaymentMethodDetailsMatchesCard(methodDetails, card, msg) { + info(msg); + // The card expiry month should be a zero-padded two-digit string. + let cardExpiryMonth = card["cc-exp-month"] < 10 ? + "0" + card["cc-exp-month"] : + card["cc-exp-month"].toString(); + is(methodDetails.cardholderName, card["cc-name"], "Check cardholderName"); + is(methodDetails.cardNumber, card["cc-number"], "Check cardNumber"); + is(methodDetails.expiryMonth, cardExpiryMonth, "Check expiryMonth"); + is(methodDetails.expiryYear, card["cc-exp-year"], "Check expiryYear"); +} + /** * Create a PaymentRequest object with the given parameters, then * run the given merchantTaskFn. @@ -215,6 +239,14 @@ async function setupPaymentDialog(browser, {methodData, details, options, mercha await dialogReadyPromise; info("dialog ready"); + await spawnPaymentDialogTask(frame, () => { + let elementHeight = (element) => + element.getBoundingClientRect().height; + content.isHidden = (element) => elementHeight(element) == 0; + content.isVisible = (element) => elementHeight(element) > 0; + }); + info("helper functions injected into frame"); + return {win, requestId, frame}; } @@ -270,3 +302,9 @@ add_task(async function setup_head() { function deepClone(obj) { return JSON.parse(JSON.stringify(obj)); } + +async function selectPaymentDialogShippingAddressByCountry(frame, country) { + await spawnPaymentDialogTask(frame, + PTU.DialogContentTasks.selectShippingAddressByCountry, + country); +}