To avoid going crazy again, is it possible to get the value of the htmlTemplateof this element?
<rect x="303" y="28" height="53" width="10" htmlTemplate="foo: 115" class="foo"></rect>
I would like to get the number of that foo, so just the number 115
If you just want to assert the value foo: 115 then you can do this.
cy.get('rect').invoke('attr', 'htmlTemplate').should('equal', 'foo: 115')
Now if you want to extract the number part, you can do something like this:
cy.get('rect')
.invoke('attr', 'htmlTemplate')
.then((val) => {
cy.log(val.split(' ')[1]) //prints 115
expect(val.split(' ')[1]).to.equal('115')
})
If you have more than one rect and you want to access the first one you can use eq(0)
cy.get('rect').eq(0).invoke('attr', 'htmlTemplate').should('equal', 'foo: 115')
If you want to get the value of all the rects, you can use each(), something like:
cy.get('rect').each(($ele) => {
cy.wrap($ele)
.invoke('attr', 'htmlTemplate')
.then((val) => {
cy.log(val.split(' ')[1]) //prints value one by one
})
})
Related
Is it possible within Quasar Form rules to pass extra parameter?
This had to do with the following template code:
<q-field outlined v-else-if="prop.component === 'checkbox'"
class="q-gutter-sm"
v-model="dataRef[key]"
:label="prop.label"
:rules="[isCheckLimit]"
>
<q-option-group
style="margin-top:20px;"
:options="prop.options"
type="checkbox"
v-model="dataRef[key]"
/>
</q-field>
The function:
const isCheckLimit = (v) => {
return v.length > 2 || t('checked-to-much')
}
I want that number 2 to be dynamic instead of static, is it possible to pass for example a number to that function? I cant find any clear information about that?
Thank you in advance.
You have to define your rule as function in your rules array, first lets update your validation function to accept second argument, I will also set it to default value of 2:
const isCheckLimit = (v, minLength = 2) => {
return v.length > minLength || t('checked-to-much');
};
Now if you use this for your rules:
:rules="[(value) => isCheckLimit(value, 4)]"
Your validation function will use 4 for minLength instead of default 2.
Original way will also work:
:rules="[isCheckLimit]"
But will use the default value of 2 for minLength
I have a function called updateAnswer with multiple dynamic parameters.
updateAnswer(key, answer, array = false) {
if (array) {
if(this.answers.contains.find(element => element === answer)) {
//Delete item from array if already element already exists in this.answers.contains array.
} else {
Vue.set(this.answers, key, [...this.answers.contains, answer]);
}
} else {
Vue.set(this.answers, key, answer);
}
},
I'd like to know how delete an item in the array if the value already exists in the array.
You can use method called splice:
Just reference on your array and set values in the brackets the first is referenced on the position, the second is how many datas you want to splice/delete.
The function looks like this:
this.array.splice(value, value)
Lets see on an example - you have array food= [apple, banana, strawberry] than I'm using this.food.splice(1,1)..
my array looks now like this food = [apple, strawberry] - first value in my brackets are the position, the second one is the amount of "numbers" you want to delete.
Hopefully this helps you out!
I suppose each value in this.answers.contains is unique?
Anyways, if you just want to delete the item if already exists, I suggest filter(). It should look like below:
if(this.answers.contains.find(element => element === answer)) {
this.answers.contains = this.answers.contains.filter(c => c !== answer)
}
Also, the if condition if(this.answers.contains.find(element => element === answer)) could also be replaced by if(this.answers.contains.includes(answer))
Hope that could help you.
I am using a v-chip-group with v-chips to represent a tag cloud for records in my database. I have an object array with records that look something like { key:'device', count:100}. A record could have multiple tags, so as you click on a tag, a new query is made that filters on that tag, the result will then have a new tag cloud with a subset of the previous.
It looks something like this:
tag1 (1000), tag2 (100), tag3 (100)
When you click on tag1 you end up with:
tag1 (1000), tag3 (15) (no tag2 because there is no overlap between tag1 and tag2).
Here is the relevant template code:
<v-chip-group v-model="selectedTag" multiple #change="refresh">
<v-chip v-for="tag in tags" :key="tag.key" active-class="primary">
<v-avatar left class="grey">{{ tag.count }}</v-avatar>
{{ tag.key }}
</v-chip>
</v-chip-group>
The problem I have is that in the typescript I do something like this:
refresh() {
// get simple array of tag strings
const selectedTags = this.selectedTag.map((value: any) => {
if (this.tags && this.tags[value]) {
return this.tags[value].key
} else {
return null
}
}).filter((value: any) => {
return value != null
})
Promise.all([
...
ApiCall('GET', 'tags', {limit: 1000, tags: selectedTags}),
...
).then((values) => {
// decode response from server into new tags
this.tags = values[2].series['0'].values.map((item: any) => {
return {key: item.bucket, count: item.doc_count}
})
const newTags: number[] = []
this.tags.forEach((tag, index) => {
// find the new index of the previously selected tags and save them
if (selectedTags.find(st => {
return st === tag.key
})) {
newTags.push(index)
}
})
// update selectedTag with the new value
this.$set(this, 'selectedTag', newTags)
// did not work this.selectedTag = newTags
})
}
What I'm seeing is that when I click a chip, it correctly fires the #change event and calls refresh, but then when the refresh finishes, I see an additional refresh get called with an empty selectedTag, which clears my filters and recalls the above functionality.
Is there a way to get #change to fire when a chip is changed, but not fire (or filter it out) when the event is generated by changing the data referenced by v-model?
I was able to implement the react-native-countdown-component successfully, but tried getting the value of the countdown-timer as it ticks from the onChange which i couldent get.
FIND MY CODE BELLOW
<CountDown
until={60 * this.state.assessmentDurationMain + 2}
size={20}
onChange={(time)=>{
console.warn(time)
//AsyncStorage.setItem('startTest_'+this.state.assessmentID,time)
}}
onFinish={() => alert('Finished')}
digitStyle={{backgroundColor: '#f2f2f1'}}
digitTxtStyle={{color: '#80146D'}}
timeToShow={['H','M', 'S']}
timeLabels={{h:'HR',m: 'MM', s: 'SS'}}
/>
the function on the onChange returns null on the console.warn(time) output
.
So my question is, how can i return the time value as it ticks using the react-native-countdown-component package ?
Taking a look at the source code talalmajali/react-native-countdown, you'll notice that it simply calls your callback...
if (this.props.onChange) {
this.props.onChange();
}
So if you need the time to be passed back, you could fork the repo and updated as so (in both places it's called)...
if (this.props.onChange) {
this.props.onChange(this.state.until);
}
Is there any way to provide the translate-default value while using the filter instead of directive?
e.g:
How to achieve the same results as this
<h3 translate="TEST" translate-default="Not present"></h3>
with filter format
{{ 'TEST' | translate }}
How do i put the "translate-default" attribute when using the translate filter?
What i need to do is show the original text if the key is not present.
I have created a wrapping filter for that purpose:
.filter('txf', ['$translate', ($translate: angular.translate.ITranslateService) => {
return (input: string, stringIfNotAvailable: string = '') => {
const translation = $translate.instant(input);
return translation === input ? stringIfNotAvailable : translation;
};
}]);