I'm trying call a Vue component for unit test with Jest, I want do it set value a input text field. this is my "file.vue"
<el-form-item label="Nombre" data-test="id-form">
<el-input
v-model="data.nombre"
maxlength="45"
#blur="v$.data.nombre.$touch()"
data-test="nombre_caja"
></el-input>
<div v-if="v$.data.nombre.$error" class="text-danger text-xs">
<small
v-for="error in v$.data.nombre.$errors"
:key="error.index"
>{{ error.$message }}</small
>
</div>
</el-form-item>
My test code is
it('Set value',async()=> {
const wrapper = shallowMount(ModalNuevaCaja)
const input = wrapper.find('[data-test="nombre_caja"]')
await input.setValue({nombre:'New value'})
expect(input.element.value).toBe('New Value')
And the error message is:
wrapper.setValue() cannot be called on EL-INPUT
26 | const input = wrapper.find('[data-test="nombre_caja"]')
27 |
> 28 | await input.setValue({nombre:'New value'})
| ^
29 |
30 | expect(input.element.value).toBe('New value')
31 |
I'm new doing this and would appreciate any advice. Thank!!
wrapper.find() returns a DOMWrapper. The setValue() implementation on the DOMWrapper only allows you to use it on input, textarea, 'select`, etc.
You should use findComponent() in order to retrieve a VUEWrapper, on which you can call setValue().
it('Set value', async () => {
const wrapper = shallowMount(ModalNuevaCaja)
const input = wrapper.findComponent('[data-test="nombre_caja"]')
await input.setValue('New value')
expect(input.element.value).toBe('New Value')
})
Related
status context:
import * as React from "react";
export const StatusContext = React.createContext({});
export function StatusProvider({ children }:React.PropsWithChildren) {
const value = React.useState("set a status");
return (
<StatusContext.Provider value={value}>
{children}
</StatusContext.Provider>
); }
when assign the value:
function SetStatus() {
const [status, setStatus ] = React.useContext(StatusContext);
return (
<input value={status} onChange={(e) => setStatus(e.target.value)} />
)
}
getting an error as :
TS2461: Type '{}' is not an array type.
4 |
5 | function SetStatus() {
> 6 | const [status, setStatus ] = React.useContext(StatusContext);
| ^^^^^^^^^^^^^^^^^^^^
7 | return (
8 | <input value={status} onChange={(e) => setStatus(e.target.value)} />
9 | )
Not able to get the fix. any one help me please?
When you use the useState hook, you get back an array containing the value and a function to set the value. You currently pass this array in as the value in your context. Try modifying your code like the snippet below, and see if the error goes away.
export function StatusProvider({ children }:React.PropsWithChildren) {
const [value, setValue] = React.useState("set a status");
return (
<StatusContext.Provider value={{status: value, setStatus: setValue}}>
{children}
</StatusContext.Provider>
);
}
Edit: I changed the way you supply the value to the context provider here, so that now the context will be an object with status and setStatus as keys. Now you can read this in the consuming component, like this:
import { StatusContext } from '..path/to/file';
function SetStatus() { // assuming SetStatus is a component
const { status, setStatus } = React.useContext(StatusContext);
return (
<input value={status} onChange={(e) => setStatus(e.target.value)} />
)
}
Inside every tr I want to get the date from td:nth-child(2) and compare it with today's date. If they are equal I want to click td:nth-child(5) . I want to do the same process for several tr.
I tried to use loop but I received errors like
>Error: ... 'tbody > tr:nth-child(undefined) > td:nth-child(2)' is not a valid selector. OR >ReferenceError: i is not defined
Can anyone help me with this please?
const data = await page.evaluate(() => {
const date = document.querySelector('tbody > tr:nth-child('+i+') > td:nth-child(2)').innerText;
return date;
});
if (data === today) {
await page.click('tbody > tr:nth-child('+i+') > td:nth-child(5)');
}
})();
Your i variable is not available inside evaluate function.
You need to pass it as an pageFunction argument.
const data = await page.evaluate((i) => {
const date = document.querySelector('tbody > tr:nth-child('+i+') > td:nth-child(2)').innerText;
return date;
}, i);
page.evaluate documentation
See also How can I pass variable into an evaluate function?
I'm getting this error while tring to render the class. I didn't get any errors when I rendered App js which has this page as a part of it. I have used Jest JS for testing. Can someone please help me out?
//Page1.js
<CustomRadioGroup
label="What would you like to use the loan for?"
name="loan"
value={this.props.formikProps.values.loan}
type="radio"
options={[
"abc",
"def",
"ghi"
]}
/>
//Page1.test.js
it("render without crashing", () => {
const {debug} = render(<Page1/>)
debug();
})
Error:
26 | label="What would you like to use the loan for?"
27 | name="loan"
> 28 | value={this.props.formikProps.values.loan}
| ^
I am trying to update the count of the participants in a field in firebase realtime database.
My database looks like this:
root
|_course
| |_Course1
| |_descr: "some text"
| |_lect: "someUID"
|_groups
| |_Course1
| |_Group1
| |_current: 5
| |_others -//-
|_participation
| |_Course1
| |_someUID: "Group1"
So now I'm trying to listen for writings on participation/Course1/someUID and when some record shows up I want to update the 'current' field to 6 in groups/Course1/Group1.
So far I've come with:
exports.afterGroupJoined = functions.database.ref('/participation/{courseId}/{uid}').onWrite((change, context) => {
const writtenContent = change.after.val(); // groupId
const courseId = context.params.courseId;
const uid = context.auth ? context.auth.uid : null;
admin.database().ref('/groups/' + courseId + '/' + writtenContent).once('value').then(snapshot => {
const count = snapshot.val();
const current = count+1;
console.log('User ' + uid + ' joined group ' + writtenContent + ' in course ' + courseId);
const promise1 = admin.database().ref('/groups/' + courseId + '/' + writtenContent + '/current').set(parseInt(current));
return Promise.all([promise1]);
}).catch(err => {
console.log(err);
});
});
But what I get is a new child in groups/Course1/Group1 named 'null' with child 'current' having value '0':
root
|_groups
| |_Course1
| |_Group1
| | |_current: 5
| | |_others -//-
| |_null
| |_current: 0
The value of 'current' should've been 6, but I get a new child.
This is from the log:
User fNhAVZUo9QeSbYt0TwBIQmL2mYq1 joined group Group1 in course Course1
Error: Reference.set failed: First argument contains NaN in property 'groups.Course1.Group1.current' at validateFirebaseData
Any help is appreciated.
It seems like you're reading this JSON:
"Group1": {
"current": 5
}
Which means you need this code to get the actual count:
const count = snapshot.val().current;
But you're not using anything else from the group, so you might as well just read the count itself. The Promise.all() call also seems unneeded, since you have only one promise. So the entire block could be:
let ref = admin.database().ref('/groups/' + courseId + '/' + writtenContent+'/current');
ref.once('value').then(snapshot => {
const count = snapshot.val();
return ref.set(count+1);
}).catch(err => {
console.log(err);
});
Finally: this approach is susceptible to race conditions if multiple users run the above at almost the same time. You might want to consider using a transaction.
Writing some unit tests for an app and hitting a wall in the describe block.
/* eslint-env mocha */
const React = require('react')
const chai = require('chai')
const { expect } = chai
const Search = require('../js/Search')
const ShowCard = require('../js/ShowCard')
const enzyme = require('enzyme')
const { shallow } = enzyme
const data = require('../public/data')
describe('<Search />', () => {
it('should render as many shows as there are data for', () => {
const wrapper = shallow(<Search />)
expect(wrapper.find(ShowCard).length).to.equal(data.shows.length)
console.log(wrapper.debug())
})
})
The code in the Search component is rendering ShowCard like this:
<div className='shows'>
{data.shows
.filter((show) => `${show.title} ${show.description}`.toUpperCase().indexOf(this.state.searchTerm.toUpperCase()) >= 0)
.map((show, index) => (
<ShowCard {...show} key={index} id={index} />
))}
</div>
(wrapper.find(ShowCard).length) should equal (data.shows.length), but it's giving this error:
<Search /> should render as many shows as there are data for:
AssertionError: expected 0 to equal 21
+ expected - actual
-0
+21
at Context.<anonymous> (App.spec.js:19:45)
According to the above error, the problem starts at the expectation equal(data.shows.length) but I see nothing wrong with that. Can anyone point me in the right direction?
wow, how embarrassing. i had the state of the Search constructor's input value set to "default search term" - thus preventing any search results from appearing until that string was manually removed from the input.
replacing with an empty string solved the problem. all tests now pass.