Currently, I am working on unit testing an API call to verify it has been executed with the correct properties. The API call is reliant on Stripe's external library that is connected to the window through index.html src="http://stripe[...]". However, when trying to execute the function, I encounter an error stating that window.[...] is not recognized as a function.
While I was able to successfully mock the $http.post request, I faced some challenges in dealing with the redirection triggered by Stripe's payment callback which involves calling window.Stripe().redirectToCheckout(). Although mocking window.Stripe was feasible, handling .redirectToCheckout() proved to be more complex and ambiguous for me.
The structure of index.html:
<script src="https://js.stripe.com/v3/"></script>
<link rel="preconnect" href="https://q.stripe.com">
<link rel="preconnect" href="https://checkout.stripe.com">
Code snippet from StripePayment.vue:
async stripe () {
await this.$http.post(process.env.VUE_APP_PAYMENTAPI + 'api/session/', {
amount: this.cost,
}).then(response => {
// Redirecting to the main page using the sessionId provided by Stripe's response.
window.Stripe(process.env.VUE_APP_STRIPE_KEY).redirectToCheckout({
sessionId: response.body
})
}, response => {
this.paymentFailed(response)
})
}
Snippet from StripePayment.spec.js:
let stripeSpy = sinon.spy(StripePayment.methods, 'stripe')
sinon.assert.calledOnce(stripeSpy)
My goal is to validate the successful execution of the API call. Unfortunately, I keep encountering the following error message - "UnhandledPromiseRejectionWarning: TypeError: window.Stripe is not a function". When attempting to stub window.Stripe, a similar error involving .redirectToCheckout() arises, leading me to face difficulties in properly incorporating the stub.
For reference, there is another piece of code similar to mine available at - https://repl.it/@AndrewReinlieb/Checkout-Test.