I have this block of code in a function:
this.apiService.fetchCategories(!this.cacheData).subscribe(
response => {
if(this._jsnValService.valCategories(response)) {
this.customerMap.categories = this.formatCategories(response["categories"]);
} else {
alert("Categories failed the schema validation. Please contact support if this happens again.");
}
},
error => {
this.notification.title = "Oops, there's a problem.";
this.notification.content = "Seems there's an issue getting the provider categories.";
this.notification.show("provider_categories_api");
}
);
It fetches some data and then runs a validation on the data (if(this._jsnValService.valCategories(response)) {).
However, my validation of the data is actually async too, because it validates it against a json schema which is in a seperate json file so it has to read the file first.
I have used a promise to read the file contents and then do the validation:
#Injectable()
export class ValidateJSONSchemaService {
constructor(private http: Http) {}
public valCategories(json) {
this._getSchema("./jsonSchema.categories.json").then((schema) => {
this._valSchema(json, schema);
});
};
private _valSchema(json, schema): any {
var ajv = new Ajv();
var valid = ajv.validate(schema, json);
if (!valid) {
console.log(ajv.errors);
return false;
} else {
console.log(valid);
return true;
};
};
private _getSchema(fileName): any {
return new Promise((resolve, reject) => {
this.http.get(fileName)
.map(this._extractData)
.catch(this._handleError)
.subscribe(schema => resolve(schema));
});
};
private _extractData(res: Response) {
let body = res.json();
return body.data || {};
};
How can I edit the top code block in this question to account for the asynchronous function inside the if statement (if(this._jsnValService.valCategories(response)) {)?
if you are using ES6 you could use async/await like this:
async function _validateCategories() {
this.apiService.fetchCategories(!this.cacheData).subscribe(
response => {
const valid = await this._jsnValService.valCategories(response)
if(valid) {
this.customerMap.categories = this.formatCategories(response["categories"]);
} else {
alert("Categories failed the schema validation. Please contact support if this happens again.");
}
},
error => {
this.notification.title = "Oops, there's a problem.";
this.notification.content = "Seems there's an issue getting the provider categories.";
this.notification.show("provider_categories_api");
}
);
}
if not, your function fetchCategories should return a promise or allow you to pass a callback to do something like this:
async function _validateCategories() {
this.apiService.fetchCategories(!this.cacheData).subscribe(
response => {
this._jsnValService.valCategories(response).then((error, valid)=> {
if(error) {
alert("Categories failed the schema validation. Please contact support if this happens again.");
}
this.customerMap.categories = this.formatCategories(response["categories"]);
})
},
error => {
this.notification.title = "Oops, there's a problem.";
this.notification.content = "Seems there's an issue getting the provider categories.";
this.notification.show("provider_categories_api");
}
);
}
Related
I'm new to a course of Angular with rxjs and our group have received a challenge.
They've sent us a chunk of code and said that althought it works fine, the code is not clean and the function "getUserLogin" has some duplicity in comparison with the "login" method. So, the challenge is to identify it and remove this duplicity.
Here is the code:
login(): Observable<UserModel> {
if (!sessionStorage["userCredentials"]){
return this.http.get<UserModel>(`${environment.apiLogin}/user/login?sistema=${enviroment.system}`,
{ withCredentials: true })
.pipe(
tap((res: UserModel) => {
sessionStorage["userCredentials"] = JSON.stringify(res);
})
);
} else {
return Observable.of(<UserModel>JSON.parse(sessionStorage["userCredentials"]));
}
}
getUserLogin(): Observable<string> {
if (sessionStorage["userCredentials"]){
const userData = <UserModel>JSON.parse(sessionStorage["userCredentials"])
return Observable.of(userData.login);
}
return Observable.of("");
}
Any help in solving this challenge would be very appreciated. Thanks in advance!
Something like this:
login(): Observable<UserModel> {
const cred = this.getUserCredentialsFromStorage();
if (!cred){
return this.http.get<UserModel>(`${environment.apiLogin}/user/login?sistema=${enviroment.system}`,
{ withCredentials: true })
.pipe(
tap((res: UserModel) => {
sessionStorage["userCredentials"] = JSON.stringify(res);
}));
}
return Observable.of(cred);
}
getUserCredentialsFromStorage(): UserModel {
if (sessionStorage["userCredentials"]) {
const userData = <UserModel>JSON.parse(sessionStorage["userCredentials"]);
return userData;
}
return null;
}
getUserLogin(): Observable<string> {
const cred = getUserCredentialsFromStorage();
return Observable.of(cred ? cred.login : '');
}
Note that in refactoring this, you need to pay careful attention to types.
Both getUserLogin and login parse the sessionStorage object to get a UserModel, then do different things with it. One returns an Observable<UserModel> and the other extracts the login string and returns an Observable<string>. So we can refactor out a function that parses the UserModel and have both functions call that.
From the question, the only thing I can infer is that there are duplicate checks for sessionStorage value in both the functions.
IMO below should be the revised code
login(): Observable<UserModel> {
this.getUserLogin().mergeMap(res => {
if (res === '') {
return this.http.get<UserModel>(`${environment.apiLogin}/user/login?sistema=${enviroment.system}`,
{ withCredentials: true })
.pipe(
tap((res: UserModel) => {
sessionStorage["userCredentials"] = JSON.stringify(res);
this.userData(sessionStorage["userCredentials"])
})
);
} else {
this.userData(sessionStorage["userCredentials"])
}
})
}
getUserLogin(): Observable<string> {
if (sessionStorage["userCredentials"]) {
this.userData(sessionStorage["userCredentials"])
}
return Observable.of("");
}
userData(data) {
const userData = <UserModel>JSON.parse(data)
return Observable.of(userData.login);
}
I have this function that uses validate from yup and it has async function in it.
If I want to use the whole function how can I wait for it to finish
here is code
const handleSubmit = () => {
companyRef.handleProfileFormSubmit();
setModal(true);
setIsSubmitting(true);
console.log(companyRef.handleFocusOnError());
if (!companyRef.handleFocusOnError() && !isButtonValid) {
console.log('first if in handlesubmut', companyRef.handleFocusOnError());
handleBankDetailsClick();
}
if (isButtonValid && !companyRef.handleFocusOnError()) {
bankRef.handleBankFormSubmit();
history.push(DASHBOARD);
} else if (isButtonValid && companyRef.handleFocusOnError()) {
setIsBankDetailsOpen(true);
}
};
I want to wait for the first sentence to finish which is
companyRef.handleProfileFormSubmit();
the async function is here
handleProfileFormSubmit = () => {
const { profile } = this.state;
const { errorValues } = this.state;
let errorExists = false;
let urls = url.format(profile.website.value);
if (!startsWith(urls, 'http://') && !isEmpty(urls)) {
urls = 'http://' + urls;
}
console.log(urls);
this.schema
.validate(
{
name: profile.name.value,
industry: profile.industry.value,
address: profile.address.value,
crn: profile.crn.value,
website: urls,
employeesNbr: profile.employeesNbr.value,
phoneNumber: profile.phoneNumber.value,
userRole: profile.userRole.value,
personCheck: profile.personCheck.value,
},
{ abortEarly: false },
)
.catch(err => {
errorExists = true;
const errors = {};
for (const i of err.inner) {
errors[i.path] = i.message;
}
const sortedErrors = Object.keys(errors);
sortedErrors.forEach(key => {
profile[key].hasError = true;
profile[key].errorMessage = errors[key];
errorValues.inputErrors.value.push(key);
this.setState({ errorValues });
});
})
.then(() => {
console.log('while submitting', errorValues);
this.handleModalError();
if (errorExists) {
this.props.handleCompanyError();
}
});
};
How can I do this?
You're mixing concerns by putting your validation and submit handler into one, but it's still possible (and fine, extract stuff into functions to make it less complicated).
Below example shows where to handle validation errors and submission errors (if submission is async, which it usually is):
handleProfileFormSubmit = async () => {
try {
await this.schema.validate({...});
// now you know your form is valid - move on to submission
try {
await processSubmission(...);
// submission successful!
} catch(err) {
// error occurred while submitting
}
} catch(err) {
// error occurred while validating
}
};
I have a Product model with property: { _id, name, code }
I have a product document:
{ "5d2eece48d04bc796b51d07d", "old name", "old code" }
I want to update my product document with { "5d2eece48d04bc796b51d07d", "new name", "new code" } and return new document when finished. But it's not working, it's return old document.
I do not want use Product.findByIdAndUpdate() because it's run longer than product.update().
Can you help me?
const upTest = async (id, updatedProduct) => {
let { name, code} = updatedProduct
try {
let product = await Product.findById(id)
const query = {
...(name && {name}),
...(code && {code}),
}
product.update(query)
return product
} catch (error) {
throw error
}
}
You don't wait for the update() to complete and update() doesn't have an option to return the updated document.
use findByIdAndUpdate
If you don't do anything with the document before you return it there is no need for it to be an async function just return the operation and handle the errors when you call the function
const upTest = (id, updatedProduct) => {
const { name, code } = updatedProduct;
const query = {
...(name && { name }),
...(code && { code })
};
return Product.findByIdAndUpdate(id, query, { new: true });
};
I'm writing unit-tests, where I need to set a mock response for a function within a function.
This is the function I want to mock:
cassandraDriver.js
module.exports = ({
cassandra_user,
cassandra_password,
cassandra_address
}) => {
if (!cassandra_address.length) throw Error('Cassandra address is not valid')
return new Promise((resolve, reject) => {
try {
const client = new driver.Client({
contactPoints: cassandra_address.split(','),
authProvider: authProvider(cassandra_user, cassandra_password),
queryconfig: {
consistency: driver.types.consistencies.quorum
}
})
return resolve(client)
} catch (e) {
reject(e)
}
})
}
This is the file that uses it:
const {
cassandraDriver
} = require('./lib')
module.exports = async ({
username = 'cassandra', //default values
password = 'cassandra', //default values
address,
keyspace,
replication_factor = 1,
migration_script_path,
logger = require('bunyan').createLogger({name: 'BuildCassandra'})
} = {}) => {
try {
const client = await cassandraDriver(username, password, address)
}).catch(err => {
throw Error(err)
})
} catch (e) {
logger.error(e)
throw e
}
}
How can I mock the call to 'cassandraDriver' in unit-tests? I tried using rewire, but the method is not exposed as it normally would be.
Thanks in advance.
let's modify your function so that it can accept a mock driver instead of cassandraDriver
const {
cassandraDriver
} = require('./lib')
module.exports = async ({
username = 'cassandra',
password = 'cassandra',
address,
keyspace,
replication_factor = 1,
migration_script_path,
logger = require('bunyan').createLogger({
name: 'BuildCassandra'
}),
driver = cassandraDriver
} = {}) => {
try {
const client = await driver(
username,
password,
address
})
} catch (e) {
logger.error(e)
throw e
}
}
(i also removed a superfluous .catch block)
next, you should create a "cassandra-driver-mock.js" which emulates the behaviour of the cassandra driver for your unit tests
the unit tests, of course, would pass the mock instead of the real driver as an option parameter
You can stub the module which exports cassandraDriver in your test file:
import cassandraDriver from "<path-to-cassandraDriver.js>";
jest.mock("<path-to-cassandraDriver.js>", () => jest.mock());
cassandraDriver.mockImplementation(() => {
// Stub implementation and return value
});
See Manual Mocks for more information.
Below is my code, I want login() and authenticated() functions to wait for getProfile() function to finish its execution. I tried several ways like promise etc. but I couldn't implement it. Please suggest me the solution.
import { Injectable } from '#angular/core';
import { tokenNotExpired } from 'angular2-jwt';
import { myConfig } from './auth.config';
// Avoid name not found warnings
declare var Auth0Lock: any;
#Injectable()
export class Auth {
// Configure Auth0
lock = new Auth0Lock(myConfig.clientID, myConfig.domain, {
additionalSignUpFields: [{
name: "address", // required
placeholder: "enter your address", // required
icon: "https://example.com/address_icon.png", // optional
validator: function(value) { // optional
// only accept addresses with more than 10 chars
return value.length > 10;
}
}]
});
//Store profile object in auth class
userProfile: any;
constructor() {
this.getProfile(); //I want here this function to finish its work
}
getProfile() {
// Set userProfile attribute if already saved profile
this.userProfile = JSON.parse(localStorage.getItem('profile'));
// Add callback for lock `authenticated` event
this.lock.on("authenticated", (authResult) => {
localStorage.setItem('id_token', authResult.idToken);
// Fetch profile information
this.lock.getProfile(authResult.idToken, (error, profile) => {
if (error) {
// Handle error
alert(error);
return;
}
profile.user_metadata = profile.user_metadata || {};
localStorage.setItem('profile', JSON.stringify(profile));
this.userProfile = profile;
});
});
};
public login() {
this.lock.show();
this.getProfile(); //I want here this function to finish its work
};
public authenticated() {
this.getProfile(); //I want here this function to finish its work
return tokenNotExpired();
};
public logout() {
// Remove token and profile from localStorage
localStorage.removeItem('id_token');
localStorage.removeItem('profile');
this.userProfile = undefined;
};
}
Like you saw in the comments, you have to use Promise or Observable to achieve this, since your behaviour is pretty simple, you should use Promise because Observable will have a lot of features you don't need in this case.
Here is the Promise version of your service:
import { Injectable } from '#angular/core';
import { tokenNotExpired } from 'angular2-jwt';
import { myConfig } from './auth.config';
// Avoid name not found warnings
declare var Auth0Lock: any;
#Injectable()
export class Auth {
// Configure Auth0
lock = new Auth0Lock(myConfig.clientID, myConfig.domain, {
additionalSignUpFields: [{
name: "address", // required
placeholder: "enter your address", // required
icon: "https://example.com/address_icon.png", // optional
validator: function(value) { // optional
// only accept addresses with more than 10 chars
return value.length > 10;
}
}]
});
//Store profile object in auth class
userProfile: any;
constructor() {
this.getProfile(); //I want here this function to finish its work
}
getProfile():Promise<void> {
return new Promise<void>(resolve => {
// Set userProfile attribute if already saved profile
this.userProfile = JSON.parse(localStorage.getItem('profile'));
// Add callback for lock `authenticated` event
this.lock.on("authenticated", (authResult) => {
localStorage.setItem('id_token', authResult.idToken);
// Fetch profile information
this.lock.getProfile(authResult.idToken, (error, profile) => {
if (error) {
// Handle error
alert(error);
return;
}
profile.user_metadata = profile.user_metadata || {};
localStorage.setItem('profile', JSON.stringify(profile));
this.userProfile = profile;
resolve()
});
});
})
};
public login(): Promise<void>{
this.lock.show();
return this.getProfile(); //I want here this function to finish its work
};
public authenticated():void{
this.getProfile().then( () => {
return tokenNotExpired();
});
};
public logout():void {
// Remove token and profile from localStorage
localStorage.removeItem('id_token');
localStorage.removeItem('profile');
this.userProfile = undefined;
};
}
More on Promise here
I would recommend that you set up getProfile to return an observable. Then your other functions can subscribe to that function and do their actions in the subscribe function. The Angular 2 HTTP tutorial gives an example of this