Блог

Я пытаюсь написать testcase для выпадающего списка, который я сделал в stenciljs.

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>
  

где

 userItem:{userId: string, userValue: string} = {userId:"101" , userValue: "Dean"} and
dropdownList is array of above object
  

в тестовом примере я создал селектор запросов, но я не могу выбрать 2-й выпадающий список, чтобы я мог проверить .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');

  

Есть идеи, как выбрать 2-й выпадающий вариант, чтобы я мог проверить ожидаемое значение?

Я не думаю, что вы можете сделать это с помощью теста Jest spec, но вы можете сделать это с помощью теста e2e. Приведенный ниже код показывает, насколько .. интересен бит await page.find('your-component >>> .user-dropdown') . это >>> теневой dom-селектор, который позволяет запрашивать элементы в теневом корне вашего компонента.

 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');

  });
});