How to fix succes Call Back not executing - ionic-framework

I am integrating payment gateway to my ionic 3 project. It has successcallback function when the payment made successful. But inside the successcallback function i can only able to alert the result nothing else is working.
RazorpayCheckout.open(options, this.successCallback, this.cancelCallback);
//this works
successCallback(payment_id)
{
alert(pament_id);
}
//this not working
successCallback(payment_id)
{
let loading = this.loadingController.create({
spinner: 'circles'
});
loading.present();
this.update[ayment(payment_id);
loading.dismiss();
}

Use arrow functions so that the context of this gets properly binded.
successCallback = (payment_id) => {
let loading = this.loadingController.create({
spinner: 'circles'
});
loading.present();
this.updatePayment(payment_id);
loading.dismiss();
}

Related

react testing, button not clicking from userevent

im trying to do a write a test where i can click a button in a react component but its not working and i don't know why. as far as i can tell this should be working. im expecting the callback to be called once.
it("should work", () => {
var mockCallback = jest.fn();
render(<button onClick={mockCallback}>hello world</button>);
act(() => {
let test = screen.getByRole("button");
console.log(test);
userEvent.click(test);
});
expect(mockCallback).toHaveBeenCalledTimes(1);
});
here is a link to a codesandbox
what am i doing wrong?
userEvent.click returns a Promise<void> as you can see here. So, to your test work you need to make your test async and await the click event:
it("should work", async () => {
var mockCallback = jest.fn();
render(<button onClick={mockCallback}>hello world</button>);
const button = screen.getByRole("button");
screen.debug();
await userEvent.click(button);
expect(mockCallback).toHaveBeenCalledTimes(1);
});
* Also, you donĀ“t need the act in this case. Check more about it here.

Protractor not waiting for modal

I have a modal that shows up in a protractor test. When I run the test case solo, it works perfectly, but when I run it as part of the larger file (currently 10 cases, some lengthy) it slows things down and, as a result, the modal is slower to open and close. The chain effect is that, when I try to click on a button on the page, it crashes since the modal (which was supposed to be closed by now) is still there and blocking the button.
How can I properly sense when the modal is open/closed so that I can work around this?
Thanks!
(Also, this is an AngularJS application)
These are my helper functions for manual waiting:
static async forElementAbsent(element) {
return await new Promise<any>((resolve) => {
browser.driver.wait(ExpectedConditions.stalenessOf(element), 10000,
`Timed out waiting for element to be absent`).then(() => {
resolve();
});
});
}
static async forElementPresent(element) {
return await new Promise<any>((resolve) => {
browser.driver.wait(ExpectedConditions.presenceOf(element), 10000,
`Timed out waiting for element to be present`).then(() => {
resolve();
});
});
}
In our tests, we are waiting for modals to be displayed manually. We have helper functions such as
export async function forCondition(condition: () => boolean | PromiseLike<boolean>, timeout = 20000): Promise<boolean> {
try {
return await browser.wait(condition, timeout);
} catch (err) {
return false;
}
}
Given function waits for a condition to fullfill. So in your particular case you would have to find out the css selector of the modal which is displayed.
Let's say the selector is by.css('.modal.visible'), then we would have to write something like the following if we wanted to wait for the modal to be displayed:
t.it('modal should be displayed', async function() {
// wait for modal to be displayed
var result = await forCondition(function() {
return element(by.css('.modal.visible')).isDisplayed();
});
expect(result).toBeTruthy();
});

Changed values are lost after returning from promise

I am doing E2E Test with protractor, using cucumber for test scenarios.
I face a strange problem: I lost the values I set inside of the promise.
What am I doing wrong?
My step-file.js:
var loggedUser = new User("dummyname", "dummyrole");
this.When(/^I click on a user name$/, function(){
userelem.element(by.className('username')).getText().then(function (txt) {
loggedUser.username = txt;
});
});
this.Then(/^The username of the object "loggedUser" is set to a new value$/, function(){
var answer = "dummyname" != loggedUser.username;
assert.isOk(answer, "username is still dummyname!"); //this line fails since usrname is set back to dummyname again!
});
Thank you #yong for your suggestion on my first post (which I have deleted meanwhile). Finally I understood what you meant. Here is the solution:
(Instead of upgrading to cucumber 2,) I "return" the promise from within the "When-Step", so that protractor waits until it is fullfilled before it executes the next step-function:
var loggedUser = new User("dummyname", "dummyrole");
this.When(/^I click on a user name$/, function(){
return userelem.element(by.className('username')).getText().then(function (txt) {
loggedUser.username = txt;
});
});
Now in the next step-functions, the username is the updated username.
The root cause is you need to make each step definition return a promise, I write a simple code for you and it worked well.
Make step definition return a promise is the key point.
For Cucumber 2:
var { defineSupportCode } = require("cucumber");
defineSupportCode(function({ Given, When, Then }) {
let title = 'test';
Given(/^open npmjs.com$/, function() {
browser.get("http://www.npmjs.com");
return browser.getTitle().then(function(title1){
title = title1;
console.log('title: ' + title);
});
});
Then(/^verify page title$/, function() {
return expect(title).to.equal('npm');
});
});
For Cucumber 1:
module.exports = function() {
let title = 'test';
this.Given(/^open npmjs.com$/, function() {
browser.get("http://www.npmjs.com");
return browser.getTitle().then(function(title1){
title = title1;
console.log('title: ' + title);
});
});
this.Then(/^verify page title$/, function() {
return expect(title).to.equal('npm');
});
};

Protractor - Unable to switch to twitter authorization pop-up from my angular js application

I am using Page object model where I am calling the below function written in a page_object.js from my spec. I have tried all possible ways but it always fails on switch. Please help
var Twitter_Actions = function (){
this.authorizeAccount = function(username,pswd){
browser.ignoreSynchronization = true;
return browser.getAllWindowHandles().then(function (handles) {
var popUpHandle = handles[1];
expect(popUpHandle).toBeDefined();// Asrton to cnfrm pop-up is defined
browser.switchTo().window(popUpHandle); // Failing on Switch
var windowtitle = browser.getTitle().then(function(webpagetitle){
return webpagetitle;
});
console.log(windowtitle);// Printing title on the console to debug
browser.executeScript('window.focus();');
element(by.name("session[username_or_email]")).sendKeys(username);
element(by.name("session[password]")).sendKeys(pswd);
element(by.id('allow')).click();
});
}
}

function to take screenshots for cucumber-html-reporter generates "function timed out after 5000.." error

I am using protractor-cucumber-framework and I wanted to generate html report for the tests I wrote. I decided to use cucumber-html-reporter to achieve it. In my hooks.js I wrote a this.After object to take screenshot on test failure:
this.After(function(scenario, callback) {
if (scenario.isFailed()) {
browser.takeScreenshot().then(function(buffer) {
return scenario.attach(new Buffer(buffer, 'base64'), function(err) {
callback(err);
});
});
}
else {
callback();
}
});
Everything works just fine, the report is generated and the screenshots are taken and attached only on test failure. But I also got an error message when After step is proceeded (so when there is some failure):
function timed out after 5000 milliseconds
I would like to get rid of this message as it also appears on my html report. Can anyone provide me solution to do that?
Below code is working for me. I have added this in step definition js file. At the end of scenario in the report, it adds the screenshot.
defineSupportCode(({After}) => {
After(function(scenario) {
if (scenario.isFailed()) {
var attach = this.attach;
return browser.takeScreenshot().then(function(png) {
var decodedImage = new Buffer(png, "base64");
return attach(decodedImage, "image/png");
});
}
});
});
I had similar problem and it failed even after waiting for 60 seconds. The issue was that i didn't had proper callback implemented.
The below code worked for me. ( I am new to JavaScript and so my callback usage might be the right way. Please feel free to educate me if there is better way to do it. :))
After(function(scenario,done)
{
const world = this;
if (scenario.result.status === 'failed') {
browser.takeScreenshot().then(function (stream) {
let decodedImage = new Buffer(stream.replace(/^data:image\/(png|gif|jpeg);base64,/, ''), 'base64');
world.attach(decodedImage, 'image/png');
}).then(function () {
done();
});
}else {
done();
}
});
Your code seems absolutely fine.
Perhaps, it just needs longer timeouts?
You can set a timeout on hooks like this:
this.After({ timeout: 20 * 1000 }, function (scenario, callback) {
if (scenario.isFailed()) {
browser.takeScreenshot().then(function(buffer) {
return scenario.attach(new Buffer(buffer, 'base64'), function(err) {
callback(err);
});
});
}
else {
callback();
}
});