We Keep Coding

Iterate through array in Cypress with assertions JavaScript

I have an array from API call response that looks like this:
[
{
"IsDatalakeEnabled": true,
"RecoveryHr": {
"IsRecoveryHREnabled": false,
"RecoveryHeartRateInterval": 120,
"RecoveryHeartRateSessionTime": 300
}
}
]
I need to get each key:value pair and make assertion that each one exists in other API call response body that looks like this:
...
"StudioAddress": null,
"StudioProfileLanguage": {
"LanguageName": "English",
"LanguageCode": "en"
},
"IsDiversityChannel": true,
"TotalDiversityRadios": 2,
"IsDatalakeEnabled": false,
"IsNetpulse": false,
"RecoveryHeartRateInterval": 120,
"RecoveryHeartRateSessionTime": 300,
"IsRecoveryHREnabled": false,
"StudioPhysicalLocationId": null,
"StudioLocation": null,
"IsIntroCapacityEnabled": false,
"Status": null,
"IsWeb": false,
"OrangeBook": null,
"IsFeReservationEnabled": true,
"TimeZone": "America/New_York",
"IsModifyMaxHr": false,
"IsRunRowEnabled": false,
"WeightMeasure": "LB",
...
Tried cy.each(), but it treats it like one object:
{
"TotalDiversityRadios": "0",
"IsDatalakeEnabled": true
}
Any suggestions/hints would be greatly appreciated. thank you!
tried to convert response body object into array using _.castArray()
Also, tried Object.entries()
Update 01/14/2023
#adoff This is how my test looks like:
validateStudioSettings() {
cy.intercept('POST', '**/studio-settings').as('post')
cy.contains('APPLY').should('be.enabled').click()
cy.get('.dialog-content').should('be.visible').and('have.text', 'Are you sure you want to apply these settings?')
cy.contains('AGREE').click()
cy.get('.notification').should('be.visible').and('contain', 'Success').and('contain', 'Update studio settings successfully.')
cy.wait('#post').then(post => {
expect(post.response.statusCode).equal(200)
expect(post.response.statusMessage).equal('OK')
expect(post.response.body).equal('Update studio settings successfully.')
let studios = _.castArray(post.request.body.StudioIds)
let settings = _.castArray(post.request.body.Settings)//.map(([key, val]) => key + ': ' + val);
console.log('Studios: ', studios)
console.log('Settings: ', settings)
cy.wrap(studios).each((studioId, index) => {
console.log('StudioId: ', studioId, index)
let idToken = localStorage.getItem("idToken")
cy.request({
method: "GET",
url: `/` + studioId,
headers: {
'authorization-cognito': idToken
}
}).then(response => {
cy.wrap(settings).each((setting) => {
console.log('Setting: ', setting)
cy.wrap(response).its('body').then(body => {
let el = _.castArray(body)
console.log('Body: ', el)
expect(el).to.contain(setting)
})
})
})
})
})
}
With this code I'm getting error in Cypress runner:
Cypress Error
Console

This could be done by checking key/value using Object.entries(obj) to give an array of key/value which would be compared to the expected object's key/value.
But there is nesting in the response.
Perhaps you could flatten the response first?
Here's a sample function that would help
const object = {
IsDatalakeEnabled: true,
RecoveryHr: {
IsRecoveryHREnabled: false,
RecoveryHeartRateInterval: 120,
RecoveryHeartRateSessionTime: 300,
},
};
function keyValues(obj) {
return Object.entries(obj).reduce((acc, [key, value]) => {
if (typeof value === "object") {
const kvs = keyValues(value);
acc = acc.concat(kvs);
} else {
acc.push([key, value]);
}
return acc;
}, []);
}
console.log(keyValues(object))
/*
(4) [Array(2), Array(2), Array(2), Array(2)]
0: (2) ['IsDatalakeEnabled', true]
1: (2) ['IsRecoveryHREnabled', false]
2: (2) ['RecoveryHeartRateInterval', 120]
3: (2) ['RecoveryHeartRateSessionTime', 300]
length: 4
*/
In the test:
const expected = {
...
"IsDatalakeEnabled": false,
"IsNetpulse": false,
"RecoveryHeartRateInterval": 120,
"RecoveryHeartRateSessionTime": 300,
...
}
function keyValues(obj) {
return Object.entries(obj).reduce((acc, [key, value]) => {
if (typeof value === "object") {
const kvs = keyValues(value);
acc = acc.concat(kvs);
} else {
acc.push([key, value]);
}
return acc;
}, []);
}
cy.request(...)
.then(response => response.json())
.then(data => {
const obj = data[0]
const kvs = keyValues(obj)
kvs.forEach([key, value] => {
expect(expected(key)).to.eq(value)
})
})

Getting response headers for a get request in angular

I am trying to do a get request using basic auth and need to fetch the token from the response headers. I've gone through similar questions and am doing what was suggested there however I'm still not able to get the required header. Thanks in advance for your help.
Here is my code:
testLogin(): Observable < any > {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Basic ' + btoa('username:password')
}),
observe: 'response'
as 'body'
};
return this.http.get < any[] > ('/login', httpOptions);
}
...
this.service.testLogin().subscribe(r => {
console.log(r.headers);
});
The following is printed on the console:
HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
lazyInit: () => {…}
lazyUpdate: null
normalizedNames: Map(0)
[[Entries]]
No properties
size: (...)
__proto__: Map
__proto__:
append: ƒ append(name, value)
applyUpdate: applyUpdate(update) { const key = update.name.toLowerCase(); switch (update.op) { case 'a': case 's': let value = update.value; if (typeof value === 'string') { value = [value]; } if (value.length === 0) { return; } this.maybeSetNormalizedName(update.name, key); const base = (update.op === 'a' ? this.headers.get(key) : undefined) || []; base.push(...value); this.headers.set(key, base); break; case 'd': const toDelete = update.value; if (!toDelete) { this.headers.delete(key); this.normalizedNames.delete(key); } else { let existing = this.headers.get(key); if (!existing) { return; } existing = existing.filter(value => {…}
clone: ƒ clone(update)
constructor: class HttpHeaders
copyFrom: copyFrom(other) { other.init(); Array.from(other.headers.keys()).forEach(key => {…}
delete: ƒ delete(name, value)
forEach: forEach(fn) { this.init(); Array.from(this.normalizedNames.keys()) .forEach(key => {…}
get: ƒ get(name)
getAll: ƒ getAll(name)
has: ƒ has(name)
init: init() { if (!!this.lazyInit) { if (this.lazyInit instanceof HttpHeaders) { this.copyFrom(this.lazyInit); } else { this.lazyInit(); } this.lazyInit = null; if (!!this.lazyUpdate) { this.lazyUpdate.forEach(update => {…}
keys: ƒ keys()
maybeSetNormalizedName: ƒ maybeSetNormalizedName(name, lcName)
set: ƒ set(name, value)
__proto__: Object

Have you exposed the token from server-side? In your console log, there is no token I have seen. If there is a token then you can access it as like r.headers.get('token_name'). If you don't expose it from the server-side please see this problem. I may think the first two solutions can help you.

You have to set observe to response:
const httpOptions = {
headers: new HttpHeaders({
"Content-Type": "application/json",
Authorization: "Basic " + btoa("username:password")
}),
observe: "response"
};
Plus, I don't think you can read all the response headers.
You can check the ones that you can read by using the response.headers.keys() method.
this.service.testLogin().subscribe(response => {
response.headers
.keys()
.forEach(keyName =>
console.log(
`The value of the ${keyName} header is: ${response.headers.get(
keyName
)}`
)
);
});
Here's a working Sample Code on StackBlitz for your ref.

Typescript reducer issue

I have the following:
...
type RepairsState = {
data: Property[] /* Property is an object coming from another file */
}
type RepairsPropertyLoadAction = {
type: typeof REPAIRS_PROPERTY_LOAD
payload: { models: Property[] } /* the payload will return an object that has a models property of an array of objects that match my property type */
}
/* Reducer */
export const initialState: RepairsState = {
data: [
{
id: '',
jobNo: '',
trade: '',
priority: '',
status: '',
raisedDate: new Date(),
appointmentDate: new Date(),
completedDate: new Date(),
description: ''
}
]
}
export default function reducer(state = initialState, action: RepairsPropertyLoadAction): RepairsState {
switch (action.type) {
case REPAIRS_PROPERTY_LOAD:
console.log(action.payload)
return {
...state,
data: action.payload
}
default:
return state
}
}
export const getRepairsProperty = (state: AppState) => state.repairs.data
...
Property class:
export default class Property {
id: string = ''
jobNo: string = ''
trade: string = ''
priority: string = ''
status: string = ''
raisedDate: Date = new Date()
appointmentDate: Date = new Date()
completedDate: Date = new Date()
description: string = ''
}
however I am getting the following error:
Type '{ models: Property[]; }' is missing the following properties from type 'Property[]': length, pop, push, concat, and 28 more. TS2740

The action returns an {models: Property []} object for the data, but the state has data: Property []
return {
...state,
data: action.payload.model
}

You are missing the models property, which is defined as part of RepairsPropertyLoadAction. The reducer should be returning this instead:
return {
...state,
data: action.payload.models,
}

why es6 decorator in mobx can't work well?

mobx#3.1.9 use es6 decorator，#log('some_log'), this -> context is Store but don't have model.
decorator is not worl well.
// mobx#3.1.9
const log = type => (target, name, descriptor) => {
console.log(target);
const method = descriptor.value;
descriptor.value = (...args) => {
console.log(type);
let ret;
ret = method.apply(target, args);
};
};
class Store {
#observable age = 20;
model = observable.map({
name: 'Alex',
});
#action
#log('start_log')
setData() {
const res = { name: 'Bob' }
this.age = 30;
this.model.merge(res)
}
}
error log
{constructor: ƒ, setData: ƒ, __mobxLazyInitializers: Array(1)}
age: (...)
$mobx: e {target: {…}, name: "ObservableObject#4", values: {…}, changeListeners: null, interceptors: null}
constructor: ƒ e()
setData: ƒ ()
__mobxDidRunLazyInitializers: true
__mobxLazyInitializers: [ƒ]
get age: ƒ ()
set age: ƒ (t)
__proto__: Object
}
TypeError: Cannot read property 'merge' of undefined
target only have age, no model. why?

the problem is your logger. The target is Store.prototype not the current instance of Store. And this prototype has no property model.
So Store.prototype.model.merge(res) will fail because there is no Store.prototype.model.
const log = type => (target, name, descriptor) => {
console.log(target);
const method = descriptor.value;
descriptor.value = function(...args) {
console.log(type);
console.log(this === target, this, target);
const ret = method.apply(this, args);
};
};

Jest mocked spy function, not being called in test

The component:
The Input component with the onChange handler:
<Field
component={FormattedTextInput}
className={colMd113}
name={NAMES.VEHICLE_YEAR}
label={constants.VEHICLE_YEAR}
validate={[required, validator.validateYearOfVehicle]}
formatting="9999"
onChange={this.yearOnChange}
/>
The method:
constructor(props) {
super(props);
this.yearOnChange = this.yearOnChange.bind(this)
}
yearOnChange(event) {
if (event.target && event.target.value) {
const value = event.target.value;
this.setState({
year: value
});
}
}
The Test
it('yearOnChange method is called', function() {
const spy = jest.spyOn(wrapper.instance(), 'yearOnChange');
wrapper.update();
// const instance = wrapper.instance();
// console.log('instance', instance);
wrapper.simulate('change', {
target: {
name: 'vehicleYear',
value: '1999'
}
});
expect(spy).toHaveBeenCalled();
});
The Error
Vehicle Picker Component › yearOnChange method is called
expect(jest.fn()).toBeCalled()
Expected mock function to have been called, but it was not called.
50 | console.log(wrapper.instance())
51 |
> 52 | expect(spy).toBeCalled();
| ^
53 | });
This is what we see when I log the wrapper.instance()
VehiclePicker {
props: {},
context: {},
refs: {},
updater:
Updater {
_renderer:
ReactShallowRenderer {
_context: {},
_element: [Object],
_instance: [Circular],
_newState: null,
_rendered: [Object],
_rendering: false,
_forcedUpdate: false,
_updater: [Circular],
_dispatcher: [Object],
_workInProgressHook: null,
_firstWorkInProgressHook: null,
_isReRender: false,
_didScheduleRenderPhaseUpdate: false,
_renderPhaseUpdates: null,
_numberOfReRenders: 0 },
_callbacks: [] },
state:
{ year: '',
make: '',
makeArray: [],
model: '',
modelArray: [],
token: '' },
yearOnChange: [Function: bound yearOnChange],
makeOnChange: [Function: bound makeOnChange],
setState: [Function] }
UPDATE
With the following code, the expect(result).toEqual('1999') test works! But still the expect(spy).toHaveBeenCalled() does not :( How is it that when I instantiate the method yearOnChange and actually change the state in the component, that the spy still isn't detected to have been called?
it('yearOnChange method is called', function() {
const spy = jest.spyOn(VehiclePicker.prototype, 'yearOnChange');
wrapper.instance().forceUpdate();
const event = {
target: {
value: '1999'
}
};
wrapper.instance().yearOnChange(event);
wrapper.simulate('change', event);
const result = wrapper.state('year');
console.log('result', result); // result = 1999
expect(result).toEqual('1999');
expect(spy).toHaveBeenCalled();
});

Found great help from the answer here: Jest spyOn function called
This was the important step I was missing:
const instance = wrapper.instance()
const spy = jest.spyOn(instance, 'yearOnChange')
Updated working test with 2 working expects.
it('yearOnChange method is called', function() {
const instance = wrapper.instance(); // <-- Needed to do this here
const spy = jest.spyOn(instance, 'yearOnChange'); // <-- Then use instance here
wrapper.instance().forceUpdate();
const event = {
target: {
value: '1999'
}
};
wrapper.instance().yearOnChange(event);
wrapper.simulate('change', event);
const result = wrapper.state('year');
console.log('result', result); // result = 1999
expect(result).toEqual('1999');
expect(spy).toHaveBeenCalled();
});

You are spying and calling yearOnChange manually.
Try not calling wrapper.instance().yearOnChange(event);
Call the wrapper.instance().onChange event, or like you did, run the simulate('change') will be enough.
You could also try VehiclePicker.prototype.yearOnChange = jest.fn()
expect(VehiclePicker.prototype.yearOnChange).toBeCalled();