When running Cypress tests in headless mode, getting "before each" hook for error - testing

When I run cypress automation tests in headless mode, I sometimes get this "before each" hook for "test_case_name". But sometimes it works fine. I can't figure what is the actual reason for this. Could anyone give me any suggestions?
These are the test scripts I am running.
context("Update inquiries", () => {
describe("Customer updating inquiries", () => {
beforeEach(() => {
cy.intercept('GET', '**/api/inquiries?**', {
statusCode: 200,
fixture: 'customer_updating_inquiries_inquiry_list.json'
}).as('getInquiryList');
cy.intercept("GET", "**/api/inquiries/**",
{
statusCode: 200,
fixture: "customer_updating_inquiries_single_inquiry.json"
}).as('getSingleInquiry');
cy.intercept("GET", "**/api/inquiries/new/tech_pack", {
fixture: "get_tech_pack_for_create_inquiry.json"
}).as('getTechPack');
cy.intercept("GET", "**/api/inquiries/new/fabric_form", {
fixture: "get_fabric_form.json"
}).as('getFabricForm');
cy.intercept("GET", "**/api/inquire_categories", {
fixture: "inquiry_categories.json"
}).as('getCategories');
cy.intercept("GET", "**/api/inquire_materials", {
fixture: "inquiry_materials.json"
}).as('getMaterials');
cy.intercept("GET", "**/api/inquire_services", {
fixture: "inquire_services.json"
}).as('getServices');
cy.intercept("GET", "**/api/inquire_product_types", {
fixture: "inquiry_product_types.json"
}).as('getProductTypes');
cy.intercept("GET", "**/api/inquire_currencies", {
fixture: "inquire_currencies.json"
});
cy.intercept("GET", "**/api/inquiries_packages", {
fixture: "inquiry_packages_for_create_inquiry.json"
}).as('getInquiryPackage');
cy.intercept("GET", "**/api/suppliers?**", {
fixture: "display_approved_suppliers.json"
}).as('getApprovedSuppliers');
cy.intercept("GET", "**/api/view_activity_log", {
fixture: "activity_log.json"
}).as('getActivityLog');
cy.intercept("GET", "**/api/is_approved_supplier", {
fixture: "is_approved_suppliers.json"
}).as('isApprovedSuppliers');
cy.intercept("GET", "**/api/feature_notifications", {
fixture: "feature_notifications.json"
}).as('featureNotifications');
cy.intercept("GET", "**/api/inquiry/*/trace/status", {
fixture: "trace_status.json"
}).as('getTraceStatus');
cy.intercept("GET", "**/api/chats/*", {
statusCode: 200,
fixture: "customer_create_inquiry_chat_view.json"
}).as('getChatView');
cy.intercept("GET", "**/api/chats/**", {
statusCode: 200,
fixture: "customer_create_inquiry_view_chat_page1.json"
}).as('getChatViewPage');
cy.intercept("GET", "**/api/chats/*/unread_count", {
statusCode: 200,
fixture: "customer_create_inquiry_chat_unread_count.json"
}).as('getUnreadCount');
cy.visit(Cypress.env('login_url'));
/*comment out one of environments first and then check other one*/
//local environment
cy.login('nelsonuser6#gmail.com', 'testS1234#', 'customer_login_token.json');
//staging environment
// cy.get("#email").type('ravitestb1371#gmail.com');
// cy.get("#password").type('testS1234#');
// cy.get("#login").click();
// cy.hash().should("eq", "#/app");
cy.contains('My Inquiries').click();
cy.hash().should("eq", "#/app/inquiries/own?inquiry_type=own&query=%20");
cy.wait(8500);
cy.contains('230105038WIA').click();
cy.wait(8000);
cy.contains('Options').click();
cy.wait(3000);
cy.get('#editInquiryButton').click();
cy.wait(3000);
cy.contains('Back to Inquiry').should('be.visible');
});
it('Navigating to Edit Inquiry page successfully', function (){
});
it('Update product type', function (){
cy.intercept('PUT', '**/api/inquiries/*', {
statusCode: 200,
fixture: 'customer_update_inquiry.json'
}).as('updateInquiry');
cy.intercept('GET', '**/api/inquiries?**', {
statusCode: 200,
fixture: 'customer_inquiry_list_after_updating_product_type.json'
}).as('getUpdatedInquiryList');
cy.contains('Bridalwear').click();
cy.contains('Denim').click();
cy.contains('Continue').click();
cy.wait(3000);
cy.xpath('//div[#class=\'md-stepper-content md-active\']//button[#type=\'button\']')
.click();
cy.get('#saveButton').click();
cy.wait(3000);
cy.contains('You Have Updated Inquiry Successfully').should('be.visible');
});
it('Update category', function (){
cy.intercept('PUT', '**/api/inquiries/*', {
statusCode: 200,
fixture: 'customer_update_inquiry.json'
}).as('updateInquiry');
cy.intercept('GET', '**/api/inquiries?**', {
statusCode: 200,
fixture: 'customer_inquiry_list_after_updating_category.json'
}).as('getUpdatedInquiryList');
cy.contains('Menswear').click();
cy.contains('Unisexwear').click();
cy.contains('Continue').click();
cy.wait(3000);
cy.xpath('//div[#class=\'md-stepper-content md-active\']//button[#type=\'button\']')
.click();
cy.get('#saveButton').click();
cy.wait(3000);
cy.contains('You Have Updated Inquiry Successfully').should('be.visible');
});
it('Update Material and continue', function (){
cy.intercept('PUT', '**/api/inquiries/*', {
statusCode: 200,
fixture: 'customer_update_inquiry.json'
}).as('updateInquiry');
cy.intercept('GET', '**/api/inquiries?**', {
statusCode: 200,
fixture: 'customer_inquiry_list_after_creating_new_inquiry.json'
}).as('getUpdatedInquiryList');
cy.contains('Continue').click();
cy.wait(3000);
cy.xpath('(//div[#role=\'button\'])[3]').click();
cy.contains('Knit fabric').click();
cy.xpath('//div[#class=\'md-stepper-content md-active\']//button[#type=\'button\']')
.click();
cy.get('#saveButton').click();
cy.wait(3000);
cy.contains('You Have Updated Inquiry Successfully').should('be.visible');
});
it('Update current package', function (){
cy.intercept('PUT', '**/api/inquiries/*', {
statusCode: 200,
fixture: 'customer_update_inquiry.json'
}).as('updateInquiry');
cy.intercept('GET', '**/api/inquiries?**', {
statusCode: 200,
fixture: 'customer_inquiry_list_after_creating_new_inquiry.json'
}).as('getUpdatedInquiryList');
cy.contains('Continue').click();
cy.wait(3000);
cy.contains('High-speed production - 8 weeks').click();
cy.contains('This action will add new critical path and remove current critical path.')
.should('be.visible');
cy.contains('Ok').click();
cy.xpath('//div[#class=\'md-stepper-content md-active\']//button[#type=\'button\']')
.click();
cy.get('#saveButton').click();
cy.wait(3000);
cy.contains('You Have Updated Inquiry Successfully').should('be.visible');
});
it('Update current currency', function (){
cy.intercept('PUT', '**/api/inquiries/*', {
statusCode: 200,
fixture: 'customer_update_inquiry.json'
}).as('updateInquiry');
cy.intercept('GET', '**/api/inquiries?**', {
statusCode: 200,
fixture: 'customer_inquiry_list_after_creating_new_inquiry.json'
}).as('getUpdatedInquiryList');
cy.contains('Continue').click();
cy.wait(3000);
cy.xpath('//div[#class=\'md-stepper-content md-active\']//button[#type=\'button\']')
.click();
cy.xpath('//div[#class=\'md-stepper-content md-active\']//div[#role=\'button\']')
.click();
cy.contains('Euro').click();
cy.get('#saveButton').click();
cy.wait(3000);
cy.contains('You Have Updated Inquiry Successfully').should('be.visible');
});
});
});

Related

react native laravel echo: can not find variable pusher

i have imported laravel-echo and #pusher/pusher-websocket-react-native in react native but error occur:can not find variable pusher
please tell me solution will be thankfully
import Echo from "laravel-echo";
import {
Pusher,
PusherMember,
PusherChannel,
PusherEvent,
} from '#pusher/pusher-websocket-react-native';
let echo = new Echo({
broadcaster: "pusher",
key: "123",
wsHost: "my-domain",
wsPort: 6001,
forceTLS: false,
cluster: "mt1",
disableStats: true,
authorizer: (channel, options) => {
console.log(options);
return {
authorize: async (socketId, callback) => {
console.log('socketId, callback',channel,socketId, callback)
const response = await fetch(`http://my-domain/api/broadcasting/auth`, {
method: 'POST',
headers: {
Authorization: `Bearer ${token}`,
ContentType: 'application/json'
},
data: {
socket_id: socketId,
channel_name: channel.name,
},
})
.then((response) => {
console.log('fd',response);
callback(false, response.data);
})
.catch((error) => {
console.log('test',error)
callback(true, error);
});
},
};
},
});
=============================================================================================================================================
You must define Pusher to window
window.Pusher = Pusher;
Just write this line below the import

TypeError: stripe.redirectToCheckout is not a function in nuxt.js

I am trying to integrate stripe payment gateway. I have a nuxt.js for front-end and adonis.js for backend.
From front-end I am calling an api to backend to create checkoutSession and return the sessionID. I am able to create checkoutSession and return the sessionID and in api response I am calling the
stripe.redirectToCheckout but it is not redirecting rather gives error as stripe.redirectToCheckout is not a function. How can I redirect users to checkout Page?
I have install the stripe-js file also.
import { loadStripe } from '#stripe/stripe-js'
const stripe = loadStripe(process.env.STRIPE_PK)
<button class="btn btn-primary btn-block text-center rounded" #click="checkout()">Buy</button>
import { loadStripe } from '#stripe/stripe-js'
const stripe = loadStripe(process.env.STRIPE_PK)
export default {
methods: {
checkout() {
let params = {
payment_method_types: ['card'],
line_items: [
{
name: 'Buy Now',
images: ['image.jpg'],
amount: 100 + '00',
currency: 'usd',
quantity: 1,
},
],
mode: 'payment',
success_url: `${process.env.URL}/success`,
cancel_url: window.location.href,
}
axios
.post(`${process.env.API_BASE_URL}/stripe/session`, params, {
'Content-type': 'application/json',
Accept: 'application/json',
})
.then((response) => {
this.stripeSession = response.data.data
stripe.redirectToCheckout({sessionId: this.stripeSession})
})
.catch((e) => {
console.log(e)
})
}
},
}
</script>
According to tyhe doc, loadStripe is an async function, try adding await in stripe assignement:
const stripe = await loadStripe(process.env.STRIPE_PK)
Edit:
To get rid of Module parse failed: Cannot use keyword 'await' outside an async function error you just need to add async before your function declaration :
async function myAsyncFunction() {
const test = await myPromise();
}
As I do not have the full definition of your function I cannot show it to you in your code :-(
But a weird solution (mixing 'await' and 'then') would be :
import { loadStripe } from '#stripe/stripe-js';
axios
.post(`${process.env.API_BASE_URL}/stripe/session`, params, {
'Content-type': 'application/json',
Accept: 'application/json',
})
.then(async response => {
this.stripeSession = response.data.data;
const stripe = await loadStripe(process.env.STRIPE_PK);
stripe.redirectToCheckout({ sessionId: this.stripeSession });
})
.catch(e => {
console.log(e);
});
This should work:
import { loadStripe } from '#stripe/stripe-js';
export default {
methods: {
async checkout() {
let params = {
payment_method_types: ['card'],
line_items: [
{
name: 'Buy Now',
images: ['image.jpg'],
amount: 100 + '00',
currency: 'usd',
quantity: 1,
},
],
mode: 'payment',
success_url: `${process.env.URL}/success`,
cancel_url: window.location.href,
};
try {
const { data } = await axios.post(`${process.env.API_BASE_URL}/stripe/session`, params, {
'Content-type': 'application/json',
Accept: 'application/json',
});
this.stripeSession = data.data;
const stripe = await loadStripe(process.env.STRIPE_PK);
stripe.redirectToCheckout({ sessionId: this.stripeSession });
} catch (error) {
console.error(error);
}
},
},
};

Fetch virtual payment address of users in my react native app

I have integrated react-native-upi-payment in my app. The RNUpiPayment Component calls initializePayment method here which gives only vpa for a default user. How can I give vpa address for many users in my database by fecth api or any other methods? Any methods or suggestions please.
My code is here
<TouchableOpacity
style={styles.payBtn}
activeOpacity={0.5}
onPress={() => {
RNUpiPayment.initializePayment(
{
vpa: '8856452125#ybl', // or can be john#ybl or mobileNo#upi
payeeName: 'Stanlee',
amount: '20',
transactionRef: 'aasf-332-aoei-fn',
},
() => {
console.log('Success');
},
() => {
console.log('Failed');
},
);
}}>
<Text style={styles.payBtnTxt}>PAY</Text>
</TouchableOpacity>
Finally got it!
DriverPaymentFunction = () => {
const {DriverUPI} = this.state;
const {DriverName} = this.state;
fetch('http://ip/appname/payment.php', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
upi_id: DriverUPI,
driver: DriverName,
}),
})
.then((response) => response.json())
.then((responseJson) => {
// If server response message same as Data Matched
if (responseJson === 'Data Matched') {
RNUpiPayment.initializePayment( //Payment API
{
vpa: DriverUPI, // or can be john#ybl or mobileNo#upi
payeeName: DriverName,
amount: '0',
transactionRef: 'AppName Ride Transaction',
},
() => {
console.log('Success');
},
() => {
console.log('Failed');
},
);
} else {
Alert.alert(responseJson);
}
})
.catch((error) => {
console.error(error);
});
};

React Native app closing after Razorpay sucessCallBack()

The entire payment is done properly. Here is the code:
'''
const that = this;
function makePayment(){
var options = {
description: 'Bank payment',
currency: 'INR',
key: 'xxx',
amount: that.state.amount_razorpay,
name: 'xyz',
order_id: that.state.id,
prefill: {
email: 'xxx#gmail.con',
contact: '123',
name: 'XYZ'
},
theme: {color: '#53a20e'}
}
RazorpayCheckout.open(options,razr_successCallback,razr_errorCallback)
}
function razr_successCallback(data){
console.log('success',data.razorpay_payment_id);
that.setState({razr_Status:"SUCCESS"});
that.setState({razr_txnId:data.razorpay_payment_id});
// that.props.navigation.navigate('Secured');
}
function razr_errorCallback(data){
console.log('failure',data);
}
'''
The console at razr_successCallback() is giving proper result {"razorpay_payment_id": "pay_Eby2FPTakKuSrz"} but the app is exiting immediately without navigation back to the payment page. I even tried that.props.navigation.navigate('Secured') but still the payment page is not redirected. What is the problem?
Edit 1 :
'''
RazorpayCheckout.open(options)
.then(async data =>
await razr_successCallback(data);
})
.catch(error => {
console.log("payment error", error);
});
async function razr_successCallback(data){
console.log(data);
that.props.navigation.goBack();
}
'''
Still facing same problem
This returns a promise, try it this way :
RazorpayCheckout.open(options)
.then(data => {
// handle success
razr_successCallback(data);
})
.catch(error => {
console.log("payment error", error);
});
in My Case :
const razorpayOpenModal = (razorpay_id, currency) => {
let options = {
description: "Credits towards consultation",
image: images.logo,
currency: currency,
order_id: razorpay_id,
key: RAZOPAY_KEY,
amount: totalAmount * 100,
external: {
wallets: ["paytm"]
},
name: "MyApp.jo",
prefill: {
email: userFromCtxt && userFromCtxt.email,
contact: userFromCtxt && userFromCtxt.phone,
name: userFromCtxt
? userFromCtxt.first_name + " " + userFromCtxt.last_name
: ""
},
theme: { color: color.primaryHeaderColor }
};
RazorpayCheckout.open(options)
.then(async data => {
setPaymentId(data.razorpay_payment_id);
await setShowModel(true);
})
.catch(error => {
console.log("payment error", error)
});
};
and then on model :
<MessageModal
button={true}
primaryMessage={primaryText}
secondaryMessage={secondaryText}
visible={modalVisible}
transactionResp={transactionResp}
closeModal={async () => {
setModalVisible(false);
await props.navigation.navigate("Home");
}}
buttonText={"Continue"}
image={transactionResp ? images.success : null}
onPressButton={async () => {
setModalVisible(false);
await props.navigation.navigate("Home");
}}
/>

How to invoke component method from store.js

I have Login.vue component which has method postData()
postData() {
this.$store.dispatch('doLogin', fdata)
},
doLogin is in store.js
actions: {
doLogin({ commit }, loginData) {
commit('loginStart');
axios.post(this.state.apiURL+'/login', {
...loginData
})
.then(response => {
commit('loginStop', null);
commit('updateAccessToken', response.data.access_token);
})
.catch(error => {
commit('loginStop', error);
})
},
how to invoke back from router.js a method in other component, let say again from Login.vue?
I want in general invoke Toast which is bootstrap thing in Login.vue methods.
Any idea?
Login.vue component method
this.$store.dispatch('doLogin', fdata).then(response => {
console.log("response from promise:",response)
}, error => {
this.makeToast(true, error, 'danger', 'b-toaster-top-center')
console.error("Got error:",error)
})
store.js Actions
doLogin({ commit }, loginData) {
return new Promise((resolve, reject) => {
console.log("store - doLogin", loginData)
commit('loginStart');
axios.post(this.state.apiURL+'/login', {
...loginData
})
.then(response => {
localStorage.setItem('accessToken', response.data.access_token);
commit('loginStop', null);
commit('updateAccessToken', response.data.access_token);
router.push('/profile');
resolve(response);
})
.catch(error => {
console.log('error', error)
commit('loginStop', error);
commit('updateAccessToken', null);
reject(error)
})
})
},