issue when cypress executes code asynchronously - cypress

i have this method that returns an object. if i run the code below i find that the second console.log() hits first and the object returns undefined
private routeAndPassengerDataObject: undefined | RouteAndPassenger;
public getDataFromRouteAndPassengerObject(fileName?: string): RouteAndPassenger {
if (this.routeAndPassengerDataObject) {
return this.routeAndPassengerDataObject;
}
if (typeof fileName !== 'string') {
throw new Error(`${fileName} has to be a string`);
}
cy.fixture(fileName).then((data: unknown) => {
if (!isValidRouteAndPassengerObject(data)) {
throw new Error(`${data} is not valid`);
}
console.log(`this is first`);
this.routeAndPassengerDataObject = data;
});
console.log(`this is second`);
return this.routeAndPassengerDataObject!;
}
}
const routeAndPassengerData = getDataFromRouteAndPassengerObject()
console.log(routeAndPassengerData);
result-
this is second
this is first
undefined
would like to know how to handle this please.

returing the object as cypress.chainable like below has worked for me-
public getDataFromRouteAndPassengerObject(fileName?: string): Cypress.Chainable<RouteAndPassenger> {
if (this.routeAndPassengerDataObject) {
return cy.wrap(this.routeAndPassengerDataObject);
}
if (typeof fileName !== 'string') {
throw new Error(`${fileName} has to be a string`);
}
return cy.fixture(fileName).then((data: unknown) => {
if (!isValidRouteAndPassengerObject(data)) {
throw new Error(`${data} is not valid`);
}
console.log(`this is first`);
this.routeAndPassengerDataObject = data;
return cy.wrap(this._routeAndPassengerDataObject);
});
}
and then calling the object like so-
const routeAndPassengerData = getDataFromRouteAndPassengerObject().then((routeAndPassenger)=>{
console.log(routeAndPassenger)
})

Related

Angular 11 wait until subscribe finishes getting data

I have a auth.service and data.service. auth.service getting data from data.service but it checks before data arrives. So it returns undefined.
auth.service getting data like this;
get isLoggedIn(): boolean {
const user = JSON.parse(localStorage.getItem('user'));
const emailVerify = this.dataservice.userStatService(user.uid);
console.warn(emailVerify)
return (user !== null && emailVerify !== false && emailVerify !== undefined ) ? true : false;
}
data.service check user status function like this;
userStatService(uid: any): any{
console.error(uid)
this.get(uid)
.subscribe(
data => {
console.warn('status set', data.status)
this.statData = data.status;
},
error => {
console.log(error);
});
return this.statData;
}
and this code works like this now;
See console logs
I'm waiting for your code examples, thank you.
Update:
auth.guard code;
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (this.authService.isLoggedIn() !== true) {
this.router.navigate(['/auth/login'], { queryParams: { returnUrl: 'dashboard' } })
.then(() => {
this.authService.SignOut();
});
}else{
return true;
}
}
observables execute asynchronously, you need to return the observable and subscribe in the consumer to use it correctly:
// return observable
userStatService(uid: any): any{
console.error(uid)
return this.get(uid)
}
isLoggedIn() {
const user = JSON.parse(localStorage.getItem('user'));
this.dataservice.userStatService(user.uid).subscribe(emailVerify => {
console.warn(emailVerify)
})
// really can't do this while working with async execution. doesn't work.
//return (user !== null && emailVerify !== false && emailVerify !== undefined ) ? true : false;
}
if this is for a guard, use the map operator and return the whole observable, angular expects either a boolean or an observable:
isLoggedIn(): Observable<boolean> {
const user = JSON.parse(localStorage.getItem('user'));
if (!user)
return of(false); // null guard and slight performance improvement
return this.dataservice.userStatService(user.uid).pipe(map(emailVerify => {
console.warn(emailVerify)
return (emailVerify !== false && emailVerify !== undefined ) ? true : false;
}))
}
and in your guard you need to again, RETURN THE OBSERVABLE:
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.authService.isLoggedIn().pipe(
map(isLoggedIn => {
if (!isLoggedIn) {
this.router.navigate(['/auth/login'], { queryParams: { returnUrl: 'dashboard' } }).then(() => {
this.authService.SignOut();
});
}
return isLoggedIn;
})
)
}
angular guards will handle the subscribing, but you must return the observable to the guard.

Call multiple ajax and wait for result Angular2

I have problem with my Angular. I have this functions:
private callUserInfo(): any {
this.isLoading = true;
return this._ajaxService.getService('/system/ping')
.map(
result => {
this.userId =
result.participant.substring(result.participant.indexOf('#'));
this.isLoading = false;
}
)
.catch(error => {
return Observable.throw(error);
});
}
public loadUserData(userName: string): any {
this.isLoading = true;
return this._ajaxService.getService('/User/' + userName)
.map(
result => {
const data = result[0];
this.user = new User(
data.id,
data.contacts[0].email,
data.name,
data.surname,
data.address.street,
data.address.city,
data.address.state,
data.address.country,
data.address.postCode,
data.address.timeZone);
this.isLoading = false;
})
.catch(error => {
return Observable.throw(error);
});
}
public getUser(): any {
if (this.user == null) {
this.callUserInfo().subscribe(() => {
this.loadUserData(this.userId).subscribe(() => {
return this.user;
});
});
} else {
return this.user;
}
}
In my component I call this service functions like this (auth service is service with functions defined up):
constructor(private _auth: AuthService) {
this.user = _auth.getUser();
}
But it stills return null (because Ajax calls are not finished?) Can someone explain me, how to call this two calls (first is system/ping service and based on return (userId) I need to call second ajax call (/user/id). After this two calls I have defined user in my service and I can return it to other components. Can someone expllain me, what am i doing wrong, or how I can do it better? I´m using newest version of angular.
P.S. Get service is from my wrapper service:
getService(url: string): Observable<any> {
return this.http
.get(this.base + url, this.options)
.map(this.extractData)
.catch(this.handleError);
}
You are not returning anything in case this.user==null
Change your function as following:
userObservabel=new BehaviourSubject(null);
public getUser(): any {
if (this.user == null) {
this.callUserInfo().subscribe(() => {
this.loadUserData(this.userId).subscribe(() => {
this.userObservabel.next(this.user);
});
});
return this.userObservabel.asObservable();
} else {
return this.userObservabel.asObservable();
}
}
and then you need to subscribe it
constructor(private _auth: AuthService) {
_auth.getUser().subscribe(user => this.user = user);
}
You need to call the second service in the subscribe or in the map method i.e. the Observable has returned a promise and that is resolved. Once that is resolved u should call your chained service.
A sample snipped from my POC might help you
this._accountListService.getAccountsFromBE().subscribe(
response => {
this.response = response;
this._accountListService.getAccountSorting().subscribe(
response => {
this.acctSort = response;
if (response.prodCode) {
this._accountListService.getAccountOrder().subscribe(
response => {
this.acctOrder = response;
this.response = this.setAccountOrder(this.response);
this.response.sort(this.myComparator);
this.acctFlag = true;
if (this.prodDesc) {
this.loader = false;
this.accountDetl = this.response[0];
this.accountDetl.entCdeDesc = this.prodDesc[this.accountDetl.entProdCatCde];
}
},
err => console.log(err)
);
}
},
err => console.log(err)
);
},
err => console.log(err)
);

Not all code paths return a value in Typescript Promise

I have a method that returns a Typescript promise. I am tightening up my code by enabling TSLint and it says that "Not all code paths return a value" for this method.
Please critique my code - I cannot work out what path it is referring to:
public getExtendedProfile(): Promise<any> {
//only do this if they are authenticated
if (this.authenticated()) {
if (typeof this.userProfile.user_id !== 'undefined') {
if (typeof this.user == 'undefined') {
this.profileService.getExtendedUserProfile(this.userProfile.user_id)
.then(data => {
return Promise.resolve(data);
})
.catch((error: any) => {
return Promise.reject(error)
});
}
else {
return Promise.resolve(this.user);
}
}
else {
return Promise.reject("No user stored");
}
}
else {
return Promise.reject("Not Authenticated");
}
}
// una alternativa podria ser
:Promise<any>
// cambiar a
:Promise<any|void>
docs typescript funciones: https://www.typescriptlang.org/docs/handbook/functions.html

How can I override jasmine's buildExpectationResult in order to modify message() function?

I am using protractor for my e2e tests and jasmine2 as framework. I am using a plugin for html reporter with screenshots ( html-report for protractor ).
In these reports there will be shown a list of all failed/passed expects. When the expect fails I get a descriptive message of the expectation. However when the expect passes I only see the word: Passed. The reason behind that is that jasmine overrides the message when the expect passes.
That is done in the following file:
node_modules/protractor/node_modules/jasmine/node_modules/jasmine-core/lib/jasmine-core/jasmine.js
getJasmineRequireObj().buildExpectationResult = function () {
function buildExpectationResult(options) {
var messageFormatter = options.messageFormatter || function () {
},
stackFormatter = options.stackFormatter || function () {
};
var result = {
matcherName: options.matcherName,
message: message(),
stack: stack(),
passed: options.passed
};
if (!result.passed) {
result.expected = options.expected;
result.actual = options.actual;
}
return result;
function message() {
if (options.passed) {
// Here is the message overriden
return 'Passed.';
} else if (options.message) {
return options.message;
} else if (options.error) {
return messageFormatter(options.error);
}
return '';
}
function stack() {
if (options.passed) {
return '';
}
var error = options.error;
if (!error) {
try {
throw new Error(message());
} catch (e) {
error = e;
}
}
return stackFormatter(error);
}
}
return buildExpectationResult;
};
What I wanted is to override this function in my protractor protractor.conf.js file. And replace it with one with the desired behaviour.
I've tried to do so unsuccessfully doing the following:
onPrepare: function () {
jasmine.buildExpectationResult = function () {
function buildExpectationResult(options) {
var messageFormatter = options.messageFormatter || function () {
},
stackFormatter = options.stackFormatter || function () {
};
return {
matcherName: options.matcherName,
expected: options.expected,
actual: options.actual,
message: message(),
stack: stack(),
passed: options.passed
};
function message() {
if (options.message) {
return options.message;
} else if (options.error) {
return messageFormatter(options.error);
}
return "";
}
function stack() {
if (options.passed) {
return "";
}
var error = options.error;
if (!error) {
try {
throw new Error(message());
} catch (e) {
error = e;
}
}
return stackFormatter(error);
}
}
return buildExpectationResult;
};
}
Then my questions is: What is the right way to override a jasmine method?
Since we use gulp task to run protractor tests, we override the lib (like jasmine lib) as one of the gulp task with custom copy. We do that as part of installation or every test execution.
I didn't find any good way to override it unless we create another npm module.
I had the same issue, I'm not sure if my solution
onPrepare: function () {
// ...
jasmine.Spec.prototype.addExpectationResult = function(passed, data, isError) {
var buildExpectationResult = function(options) {
var messageFormatter = options.messageFormatter || function() {},
stackFormatter = options.stackFormatter || function() {};
var result = {
matcherName: options.matcherName,
message: message(),
stack: stack(),
passed: options.passed
};
if(!result.passed) {
result.expected = options.expected;
result.actual = options.actual;
}
return result;
function message() {
if (options.passed) {
return options.message ? options.message : 'Passed';
} else if (options.message) {
return options.message;
} else if (options.error) {
return messageFormatter(options.error);
}
return '';
}
function stack() {
if (options.passed) {
return '';
}
var error = options.error;
if (!error) {
try {
throw new Error(message());
} catch (e) {
error = e;
}
}
return stackFormatter(error);
}
}
var exceptionFormatter = jasmine.ExceptionFormatter;
var expectationResultFactory = function(attrs) {
attrs.messageFormatter = exceptionFormatter.message;
attrs.stackFormatter = exceptionFormatter.stack;
return buildExpectationResult(attrs);
}
var expectationResult = expectationResultFactory(data);
if (passed) {
this.result.passedExpectations.push(expectationResult);
} else {
this.result.failedExpectations.push(expectationResult);
if (this.throwOnExpectationFailure && !isError) {
throw new j$.errors.ExpectationFailed();
}
}
};
// ...
}

Future functions in DART working with ORACLE DART pub

I'm using oracledart pub, and need to get the results returned as Map to the main function, I know it is a FUTURE function, and read about FUTURE, but looks still not clear for me, or I'm doing something wrong in my code, my function is as below:
void main() {
var ORAresults = <Map>[];
ORA()
.then((results) => ORAresults = results)
.catchError((e) => 'Sorry, something wrong!');
}
ORA() {
var results = <Map>[];
connect(
"SYSTEM","pswd",
"(DESCRIPTION="
"(ADDRESS=(PROTOCOL=TCP)(HOST=localhost)(PORT=1521))"
"(CONNECT_DATA=(SERVICE_NAME=XE)(SERVER=DEDICATED)))")
.then(
(oracleConnection) {
var resultset = oracleConnection.select("select * from vendors");
while(resultset.next()) {
results.add({"code":"vCode 1","name": "${resultset.getStringByName('NAME')}"});
}
print('the results inside $results'); // this works very well
return results;
},
onError: (error) {
print("Failed to connect: $error");
});
}
When I run the above, I get this error:
Breaking on exception: object of type NoSuchMethodError
the file dart:core-patch_object_patch.dart is opening, and pointing to:
noSuchMethod(Invocation invocation) {
=> return _noSuchMethod(invocation.isMethod, // this line is being highlighted!
internal.Symbol.getName(invocation.memberName),
invocation._type,
invocation.positionalArguments,
_symbolMapToStringMap(invocation.namedArguments));
}
I thing the error is due to something wrong here, because if I removed these lines, the error disappear.:
ORA()
.then((results) => ORAresults = results)
.catchError((e) => 'Sorry, something wrong!');
any help pls.
Your ORA() function does not return the Future it uses. Change the connect( line to return connect(, and it should work.
When you do ORA().then(...), you're using ORA()'s return value as a Future, but your ORA() function returns null (it has no return statement, so it returns null by default). What you really want to do is return the Future you're building on with the connect().
Thanks #Tonio and #Robert, I think now I understood the meaning of the FUTURE better :)
I was able to solve the issue, based on your hints and explanations, as below:
in the server.dart
void handlePost(HttpRequest req) {
HttpResponse res = req.response;
switch (req.uri.path) {
...
case '/getVendors':
getVendors(req);
break;
default:
break;
}
}
void getVendors(HttpRequest req) {
HttpResponse res = req.response;
addCorsHeaders(res);
print('${req.method}: ${req.uri.path}');
var vendors = <Map>[];
connect(
"SYSTEM",
"pswrd",
"(DESCRIPTION="
"(ADDRESS=(PROTOCOL=TCP)(HOST=localhost)(PORT=1521))"
"(CONNECT_DATA=(SERVICE_NAME=XE)(SERVER=DEDICATED)))")
.then(
(oracleConnection) {
var resultset = oracleConnection.select("select * from vendors");
while(resultset.next()) {
vendors.add({"code":"${resultset.getStringByName('CODE')}","name": "${resultset.getStringByName('NAME')}"});
}
res.write(JSON.encode(vendors));
res.close();
},
onError: (error) {
print("Failed to connect: $error");
});
}
and in the client.dart
main(){
HttpRequest request;
String serverResponse = '';
...
}
void submit(){
request = new HttpRequest();
request.onReadyStateChange.listen(onData_getvendors);
var url = 'http://127.0.0.1:8004/getVendors';
request.open('POST', url);
request.send('');
}
onData_getvendors(_){
if (request.readyState == HttpRequest.DONE && request.status == 200) { // Data saved OK.
for(Map vendor in JSON.decode(request.responseText)){
vendor..children.add(new OptionElement(value: vendor['code'], data: vendor['name']));
}
else if (request.readyState == HttpRequest.DONE &&
request.status == 0) { // Status is 0...most likely the server isn't running.
serverResponse=request.responseText;
}
}

Resources