[英]Jest testcase for dropdown on 2nd item selection
I am trying to write testcase for dropdown which I have done in stenciljs.我正在尝试为我在 stenciljs 中完成的下拉列表编写测试用例。
HTML HTML
<div>
<select class="form-control user-dropdown">
<option value="" disabled selected={this.userItem === undefined}>
Choose option</option>
{this.dropdownList.map(items =>
<option value={items.userId}>{items.userValue)</option>}
</select>
</div>
where在哪里
userItem:{userId: string, userValue: string} = {userId:"101" , userValue: "Dean"} and
dropdownList is array of above object
in the test case I have created a query selector but I am not able to select 2nd dropdown so that I can check .toEqual()在测试用例中,我创建了一个查询选择器,但我无法选择第二个下拉列表,以便我可以检查 .toEqual()
const page = await newSpecPage({
component: [MyComponent],
html: '<my-component></my-component>'
});
page.rootInstance.userItem= {userId:"101" , userValue: "Dean"}
page.rootInstance.dropdownList= [{userId:"101" , userValue: "Dean"}, {userId:"102" , userValue: "Maze"}....];
await.page.waitForChange();
const ele=page.root.querySelector('select[name="dropdown"]');
// here I want to change dropdown so that I can check value
expect(ele......).toEqual('102');
Any idea how to select 2nd dropdown option so that I can test expected value?知道如何选择第二个下拉选项以便我可以测试预期值吗?
I don't think you can do that with a Jest spec test, but you can do it with an e2e test.我不认为你可以通过 Jest 规范测试做到这一点,但你可以通过 e2e 测试做到这一点。 The code below shows how.. The interesting bit is
await page.find('your-component >>> .user-dropdown')
.下面的代码展示了如何.. 有趣的是
await page.find('your-component >>> .user-dropdown')
。 the >>>
is a shadow dom piercing selector which lets you query for elements within your component's shadow root . >>>
是一个 shadow dom 穿孔选择器,它允许您查询组件 shadow root 中的元素。
import { newE2EPage } from '@stencil/core/testing';
describe('conponent e2e test', () => {
it('renders', async () => {
const page = await newE2EPage();
await page.setContent('<your-component></your-component>');
const userItem = {userId:'101' , userValue: 'Dean'}
const dropdownList = [{userId:'101' , userValue: 'Dean'}, {userId:'102' , userValue: 'Maze'}];
await page.$eval('your-component', (elm: any, {userItem, dropdownList}) => {
// within the browser's context
// let's set new property values on the component
elm.userItem = userItem;
elm.dropdownList = dropdownList;
}, {userItem, dropdownList});
await page.waitForChanges();
const element = await page.find('your-component');
expect(element).toHaveClass('hydrated');
const selectList = await page.find('your-component >>> .user-dropdown');
const options = await selectList.findAll('option');
expect(options.length).toBe(3);
expect(options[2].getAttribute('value')).toBe('102');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.