Checkout fixes (#4425)

* Fix spinner partial usage in Checkout v1

* Update v2 tests
This commit is contained in:
d11n 2022-12-10 11:19:13 +01:00 committed by GitHub
parent 4dbe622a4a
commit 5b20be8cfd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 17 additions and 13 deletions

View File

@ -46,6 +46,9 @@ namespace BTCPayServer.Tests
var invoiceId = s.CreateInvoice(defaultPaymentMethod: "BTC_LightningLike");
s.GoToInvoiceCheckout(invoiceId);
// Ensure we are seeing Checkout v2
s.Driver.WaitUntilAvailable(By.Id("Checkout-v2"));
Assert.Equal(2, s.Driver.FindElements(By.CssSelector(".payment-method")).Count);
Assert.Contains("Lightning", s.Driver.WaitForElement(By.CssSelector(".payment-method.active")).Text);
Assert.DoesNotContain("LNURL", s.Driver.PageSource);
@ -195,10 +198,13 @@ namespace BTCPayServer.Tests
var invoice = await s.Server.PayTester.InvoiceRepository.GetInvoice(invoiceId);
s.Driver.Navigate()
.GoToUrl(new Uri(s.ServerUri, $"tests/index.html?invoice={invoiceId}"));
TestUtils.Eventually(() =>
{
Assert.True(s.Driver.FindElement(By.Name("btcpay")).Displayed);
});
s.Driver.WaitUntilAvailable(By.Name("btcpay"));
var frameElement = s.Driver.FindElement(By.Name("btcpay"));
Assert.True(frameElement.Displayed);
var iframe = s.Driver.SwitchTo().Frame(frameElement);
iframe.WaitUntilAvailable(By.Id("Checkout-v2"));
await s.Server.ExplorerNode.SendToAddressAsync(BitcoinAddress.Create(invoice
.GetPaymentMethod(new PaymentMethodId("BTC", PaymentTypes.BTCLike))
.GetPaymentMethodDetails().GetPaymentDestination(), Network.RegTest),
@ -207,8 +213,6 @@ namespace BTCPayServer.Tests
IWebElement closebutton = null;
TestUtils.Eventually(() =>
{
var frameElement = s.Driver.FindElement(By.Name("btcpay"));
var iframe = s.Driver.SwitchTo().Frame(frameElement);
closebutton = iframe.FindElement(By.Id("close"));
Assert.True(closebutton.Displayed);
});

View File

@ -11,7 +11,7 @@
<img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon" v-if="scanDisplayQr"/>
<qrcode v-bind:value="scanDisplayQr" :options="{ width: 256, margin: 1, color: {dark:'#000', light:'#f5f5f7'} }" tag="svg" v-if="scanDisplayQr"></qrcode>
<div class="payment__spinner qr_currency_icon" style="padding-right: 20px;">
<partial name="Checkout-Spinner"/>
@await Html.PartialAsync("~/Views/UIInvoice/Checkout-Spinner.cshtml")
</div>
</div>
<div class="payment__details__instruction__open-wallet" v-if="srvModel.invoiceBitcoinUrl">

View File

@ -23,7 +23,7 @@
<img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon" v-if="scanDisplayQr"/>
<qrcode v-bind:value="scanDisplayQr" :options="{ width: 256, margin: 1, color: {dark:'#000', light:'#f5f5f7'} }" tag="svg" v-if="scanDisplayQr"></qrcode>
<div class="payment__spinner qr_currency_icon" style="padding-right: 20px;">
<partial name="Checkout-Spinner"/>
@await Html.PartialAsync("~/Views/UIInvoice/Checkout-Spinner.cshtml")
</div>
</div>
<div class="payment__details__instruction__open-wallet" v-if="srvModel.invoiceBitcoinUrl">

View File

@ -21,7 +21,7 @@
<div class="timer-row" v-bind:class="{ 'expiring-soon': expiringSoon }">
<div class="timer-row__progress-bar" v-bind:style="{ 'width': expirationPercentage+ '%' }"></div>
<div class="timer-row__spinner" v-if="!invoiceUnpayable && !invoicePaid">
<partial name="Checkout-Spinner" />
@await Html.PartialAsync("~/Views/UIInvoice/Checkout-Spinner.cshtml")
</div>
<div class="timer-row__message">
<span v-if="invoiceUnpayable">
@ -80,7 +80,7 @@
</div>
}
<div class="payment__spinner" v-show="changingCurrencies || loading">
<partial name="Checkout-Spinner" />
@await Html.PartialAsync("~/Views/UIInvoice/Checkout-Spinner.cshtml")
</div>
</div>
</div>
@ -176,7 +176,7 @@
<button type="submit" class="action-button" style="margin-top: 15px;" v-bind:disabled="emailAddressFormSubmitting" v-bind:class="{ 'loading': emailAddressFormSubmitting }">
<span class="button-text">{{$t("Continue")}}</span>
<div class="loader-wrapper">
<partial name="Checkout-Spinner" />
@await Html.PartialAsync("~/Views/UIInvoice/Checkout-Spinner.cshtml")
</div>
</button>
</bp-loading-button>

View File

@ -50,7 +50,7 @@
}
</head>
<body class="min-vh-100">
<div id="Checkout" class="wrap" v-cloak v-waitForT>
<div id="Checkout-v2" class="wrap" v-cloak v-waitForT>
<header>
@if (!string.IsNullOrEmpty(logoUrl))
{

View File

@ -80,7 +80,7 @@ const PaymentDetails = Vue.component('payment-details', {
function initApp() {
return new Vue({
i18n,
el: '#Checkout',
el: '#Checkout-v2',
components: {
PaymentDetails
},