Using nested include on an array - chai

I am trying to verify that an array has 2 elements with the following values:
expect([{
createdAt: 1545588925941,
updatedAt: 1545588925941,
id: '5c1fd0bdd38b1b2bb0875dd9',
readAt: null,
type: 'ResidentCreatedTask',
dataVersion: 0,
data: '{}',
user: '5c1fd0bdd38b1b2bb0875dd6',
home: '5c1fd0bdd38b1b2bb0875dd8'
},
{
createdAt: 1545588925941,
updatedAt: 1545588925941,
id: '5c1fd0bdd38b1b2bb0875dd9',
readAt: null,
type: 'ResidentCreatedTask',
dataVersion: 0,
data: '{}',
user: '5c1fd0bdd38b1b2bb0875dd6',
home: '5c1fd0bdd38b1b2bb0875dd8'
}
]).to.be.an('array').that.has.lengthOf(2).and.to.deep.nested.include({
0: {
type: 'ResidentCreatedTask'
},
1: {
type: 'ResidentCreatedTask'
},
});
But it's not working. I also tried changing the keys to strings with brackets like '[0]' and '[1]'.
I also tried removing the keys and making the val of includes an array like this:
.include([{ type: 'ResidentCreatedTask' }, { type: 'ResidentCreatedTask' }]);
But this also didn't work.

I don't like this solution, but you can wrap it an object.
So our payload is const payload = [{ id: 0 },{ id: 1 }]. Doing the following will not work, this is what I did in original post:
expect(payload).to.nested.include({ '[0].id': 0, '[1].id': 1 });
Work around is:
const wrappedPayload = { a: payload };
expect(wrappedPayload).to.nested.include({ 'a[0].id': 0, 'a[1].id': 1 });
This works, but I don't like having to wrap it. Very much still open to solutions. Is this a bug I should report to chai team?

Related

Issue with passing the data in Vue / EventBus

I have an issue that I do not understand regarding passing data in Vue.
In store I have the following data (six categories - wine, beer, whiskey, gin, vodka and rum):
state: {
shopItems: [
{
id: 1,
category: "wine",
price: 20,
image:
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//Z",
items: [
{
id: 1,
name: "Ruby",
price: 17,
image:
"https://images.freshop.com/1564405684707189696/e52a7445e17de485c0ae890de8762d57_medium.png"
},
{
id: 2,
name: "Sauvignon Blanc",
price: 23,
image:
"https://ipcdn.freshop.com/resize?url=https://images.freshop.com/00898322593368/2e0ad0dbe0ef46eded5590acdf43cae5_large.png&width=256&type=webp&quality=40"
},
{
id: 3,
name: "Dark Horse",
price: 25,
image:
"https://ipcdn.freshop.com/resize?url=https://images.freshop.com/00085000024218/680b13803f3203f3117eb69082f95cc2_large.png&width=256&type=webp&quality=40"
},
{
id: 4,
name: "Andree",
price: 35,
image:
"https://ipcdn.freshop.com/resize?url=https://images.freshop.com/00085000008287/17d49b2b92223defb638ca7b535dbab3_large.png&width=256&type=webp&quality=40"
}
]
},
{
id: 2,
category: "beer",
price: 3,
image:
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxIQEhAQEg8TFhEXExYSGRcVFRYSEhYVGBUYGBUVFRYcAAEAAgIDAQAAAAAAAAAAAAAABgcEBQEDCAL/",
items: [
{
id: 1,
name: "Banana",
price: 5,
image:
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAQDxIPEhIPFRAPEhcPEBYSEBgSDw8QFRIS0tLS0uLi0tLS8tLS8tLi0tLS0tLi0tLS8tLS0wLS0tLS0tLS0tLSstLf/AABEIAOEA4QMBEQACEQEDEQH/xAAcAAEAAgIDAQAAAAAAAAAAAAAABQYEBwECCAP/"
},
{
id: 2,
name: "Franziskaner Weissbier",
price: 6,
image:
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxIQEhAQEg8TFhEXExYSGRcVFRYSEhYVGBUDEQH/xAAcAAEAAgIDAQAAAAAAAAAAAAAABgcEBQEDCAL/xABIEAACAgECAgcEBwQFCgcAAAAAAQIDEQQhBRIGBxMiMUFRYXGBwRQjMnKRobFCUpLCJDNigtE0Q1 "
},
{
id: 3,
name: "Birra Moretti",
price: 5,
image:
"data:image/jpeg; QQFEiExBgcTIkFRYXGBFCMycpGhsdEkM0JSYsE1Q1OCkhUWJTREVIOTotLh8PH/xAAaAQEAAwEBAQAAAAAAAAAAAAAAAgMEAQUG/8QANBEBAAICAAQDBQcEAgMAAAAAAAECAxEEEiExE0FRBSIyYXGBkaGxwdHwFEJS4SPxFTOC/9oADAMBAAIRAxEAPwDuMBAQEBAQEBAQEBAQNHau1adKoe59wE7q91mLN5BVBJ+ "
}
]
},
.
.
.
In my application I am passing the data related to the index of the chosen category from ToBeBought component to ShowDetails component – using EventBus.
showDetails(item) {
console.log("#item.category");
console.log(item.category);
const chosenCategoryIndex = this.shopItems.findIndex(
i => i.category === item.category
);
// const chosenCategoryItems = this.shopItems[chosenCategoryIndex]
// .items;
console.log("#chosenCategoryIndex");
console.log(chosenCategoryIndex);
EventBus.$emit("chosenCategory", chosenCategoryIndex);
this.$router.push("/details");
I pass the index of the chosen category - e.g. for wine index is 0.
I run chosenCategoryItems method on mounted
(I tried running it on created as well but it did not help)
to get the data in ShowDetails component. In console.log from this method I get an array with detailed data e.g. wines but after that method in mounted I have another console log to show the array (console.log(this.detailedItemsToBeBought);) - I get undefined from it.
It looks like the data was cleared in the meantime - I do not get what is going on here.
I tried to add watcher on detailedItemsToBeBought data but it is not being triggered.
data() {
return {
itemsToBeBought: [],
detailedItemsToBeBought: []
};
},
mounted() {
this.chosenCategoryItems();
console.log("#detailedItemsToBeBought mounted");
console.log(this.detailedItemsToBeBought);
console.log("#this.shopItems[0].items");
console.log(this.shopItems[0].items);
},
methods: {
chosenCategoryItems() {
EventBus.$on("chosenCategory", data => {
const chosenCategoryIndex = data;
console.log("#chosenCategoryIndex");
console.log(chosenCategoryIndex);
this.detailedItemsToBeBought = this.shopItems[
chosenCategoryIndex
].items;
console.log("#detailedItemsToBeBought event bus");
console.log(this.detailedItemsToBeBought);
});
return this.detailedItemsToBeBought;
}
When I try to display the data I do not see anything but when hardcode this.shopItems[0].items I get the data I need - e.g. for wine category the array with wines;
I know it is not an easy issue but is anyone able and willing to take the challenge to explain me whot might had gone wrong here. Why I get the data from this.shopItems[0].items but when I pass index to this.detailedItemsToBeBought = this.shopItems[chosenCategoryIndex].items; - it works fine in the method chosenCategoryItems but after that the data this.detailedItemsToBeBought are undefined on mounted?
I attach screenshot from console.
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/30rk7.png
and the whole repository:
https://github.com/agnesliszka/alcohol_shop
It looks like your component needs to register for the listener BEFORE you emit the event.
You might want to simply store the chosen category in the store, instead of using an event.
If you really want to use an event (not recommended), you can delay the emit until after the component is ready, using nextTick or setTimer.
You will also want to register the listener in created or mounted.
this.$nextTick(()=>{
EventBus.$emit("chosenCategory", chosenCategoryIndex);
})
this.$router.push("/details");

I get different result from Graphql playground and front-end

I am using graphql and Vue.js and apollo
Here is my DateBank
const sensorsdb = [
{
name: "sensor 1",
id: "s-1",
timestamp: 1582021371,
value: 100
},
{
name: "sensor 1",
id: "s-1",
timestamp: 1579451703,
value: 150
},
{
name: "sensor 2-1",
id: "s-2-1",
timestamp: 1582021371,
value: 200
},
{
name: "sensor 2-2",
id: "s-2-2",
timestamp: 1579451703,
value: 350
},
{
name: "sensor 2-2",
id: "s-2-2",
timestamp: 1582021371,
value: 300
},
{
name: "sensor 3",
id: "s-3",
timestamp: 1582021371,
value: 400
},];
I want to get all objects according to object id. sensorId is an array. because I want to get multiple objects with multiple ids.
The following is my API function to get object.
async getDataById({ sensorId }) {
let sensorsData = [];
for (let i = 0; i < sensorId.length; i++) {
let sensorData = this.sensorDataStore.sensors.filter(sensor => sensor.id === sensorId[i]);
sensorsData = sensorsData.concat(sensorData);
}
return sensorsData;
}
In Front-end, gql file is following:
query sensorData($id: [String]){
sensorData(id: $id){
name
id
value
timestamp
}}
and with my apollo query code in vue.js, in this case selectedSensorId is ["s-2-1", "s-2-2"]
<ApolloQuery :query="require('../graphql/sensorDataById.gql')" :variables="{ id: selectedSensorId }">
<template v-slot="{ result: { loading, error, data } }">
<b-loading :is-full-page=true :active.sync=loading :can-cancel="false"/>
<div v-if="error">
<no-data-error />
</div>
<div v-if="data">
{{ data }}
<bar-chart-view :sensorInfo="data.sensorData"/>
</div>
</template>
</ApolloQuery>
But I got the following different result:
Graphql playground which has correct result
The front-end result with duplicated sensor-s-2
Apollo Client normalizes results according to the id and __typename fields as described in the docs. If an array returns multiple items with the same id, by default they will share the same cache key, which means what's returned by the client will be the same object.
You should provide a custom dataIdFromObject function to your InMemoryCache constructor that accommodates your specific use case. Something like:
const dataIdFromObject = object => {
switch (object.__typename) {
case 'SensorDataPoint': return `SensorDataPoint:${object.id}:{value}`;
default: return defaultDataIdFromObject(object);
}
}
Note that if you use the same type elsewhere, you may experience issues with the cache updated correctly after mutations because we are now keying off both the value and id. You might want to consider a different approach to your schema where the ids are actually unique :
type SensorDataPoint {
id: ID!
sensorId: ID!
sensorName: String!
value: Int!
timestamp: Int!
}
or even better
type SensorDataPoint {
id: ID!
value: Int!
timestamp: Int!
sensor: Sensor!
}
type Sensor {
id: ID!
name: String!
}
I know it its been a while but what Daniel Rearden mentioned above, I included the { addTypename: false } as options for InMemoryCache
const client = new ApolloClient({
link: ApolloLink.from([
onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.forEach(({ message, extensions }) => {
console.log(`[GraphQL error]: Message: ${message}, Code: ${extensions?.code}`)
})
if (networkError) {
console.log(`[Network error] ->: ${networkError}`)
Toast.show('Connection Error', {
position: Toast.positions.TOP,
type: 'danger',
duration: 3000,
})
}
}),
authMiddleware,
link,
]),
cache: new InMemoryCache({ addTypename: false }),
});

How to store multiple api's data with VueX and add properties to the response

Suppose i want to store data from multile Api requests - when the App is instantiated,
and i also want to add properties to each response
Here is the url of the api 'http://api.open-notify.org/iss-pass.json?lat=LAT&lon=LON'
Updated
I want to instantiated the app with all the data from a couple of get requests - so i'm looping all the requests - that part is works fine , but i also want to be able to add to response.data.response object properties from the cities array, so the finale result will be :
cities: [{
id: 0,
cityName: 'Select a city',
stuff from response.data...
},......
Here is the main part of the Api call
const store = new Vuex.Store({
state: {
satelliteData: [],
dataObj:[],
loading: true,
cities: [{
id: 0,
cityName: 'Select a city',
cityLocation: null
},
{
id: 1,
cityName: 'Tel Aviv',
cityLat: '32.0853',
cityLon: '34.7818'
},
{
id: 2,
cityName: 'London',
cityLat: '51.5074',
cityLon: '-0.1278'
},
{
id: 3,
cityName: 'New York',
cityLat: '40.7128',
cityLon: '-74.0060'
},
],
},
actions: {
loadData({commit}) {
for(var i=0; i<this.state.cities.length; i++){
var currData = this.state.cities[i];
if(!!this.state.cities[i].hasOwnProperty('cityLat'))
axios.get(URL, {
params: {
lat: this.state.cities[i].cityLat,
lon: this.state.cities[i].cityLon,
},
}).then((response) => {
Here is where i want to be able to access the Cities array
/* var cities = this.$store.state.cities;
console.log(cities) */
commit('updateSatelliteData', response.data.response)
commit('changeLoadingState', false)
})
}
}
},
Fiddle
Since i'm new to Vue - i'm sure that there are a couple of mistakes here. Thanks

Realm does not seems to working

I am trying to use realm in react-native android and I just wanted to test if it is working or not.
It seems to save data since it throws duplicated primaryKey error.
However, realm.objects('Person') does not return data but
Proxy
[[Handler]]
:
Object
[[Target]]
:
Results
[[IsRevoked]]
:
false
class Person {}
Person.schema = {
name: 'Person',
primaryKey: 'name',
properties: {
name: 'string',
age: {type: 'int', default: 0},
},
};
const realm = new Realm({schema: [Person],schemaVersion: 2});
// Write
realm.write(() => {
const savedPerson = realm.create('Person', {
name: 'Hal Incanden1za',
age: 17,
});
});
console.log(realm.objects('Person'))
The value you get from a realm.objects() call is not a normal array, so console.log may not be doing what you are expecting here. Try iterating through it instead.

Transform objects pointfree style with Ramda

Given the function below, how do I convert it to point-free style? Would be nice to use Ramda's prop and path and skip the data argument, but I just can't figure out the proper syntax.
const mapToOtherFormat = (data) => (
{
'Name': data.Name
'Email': data.User.Email,
'Foo': data.Foo[0].Bar
});
One option would be to make use of R.applySpec, which creates a new function that builds objects by applying the functions at each key of the supplied "spec" against the given arguments of the resulting function.
const mapToOtherFormat = R.applySpec({
Name: R.prop('Name'),
Email: R.path(['User', 'Email']),
Foo: R.path(['Foo', 0, 'Bar'])
})
const result = mapToOtherFormat({
Name: 'Bob',
User: { Email: 'bob#example.com' },
Foo: [{ Bar: 'moo' }, { Bar: 'baa' }]
})
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.min.js"></script>
Here's my attempt:
const mapToOtherFormat = R.converge(
(...list) => R.pipe(...list)({}),
[
R.pipe(R.view(R.lensProp('Name')), R.set(R.lensProp('Name'))),
R.pipe(R.view(R.compose(R.lensProp('User'), R.lensProp('Email'))), R.set(R.lensProp('Email'))),
R.pipe(R.view(R.compose(R.lensProp('Foo'), R.lensIndex(0), R.lensProp('Bar'))), R.set(R.lensProp('Foo')))
]
)
const obj = {Name: 'name', User: {Email: 'email'}, Foo: [{Bar: 2}]}
mapToOtherFormat(obj)
Ramda console
[Edit]
We can make it completely point-free:
const mapToOtherFormat = R.converge(
R.pipe(R.pipe, R.flip(R.call)({})),
[
R.pipe(R.view(R.lensProp('Name')), R.set(R.lensProp('Name'))),
R.pipe(R.view(R.compose(R.lensProp('User'), R.lensProp('Email'))), R.set(R.lensProp('Email'))),
R.pipe(R.view(R.compose(R.lensProp('Foo'), R.lensIndex(0), R.lensProp('Bar'))), R.set(R.lensProp('Foo')))
]
)
Ramda console