javascript - 比较具有 2 个参数的列表

标签 javascript angular-material2 angular6 cypress

我希望你能帮助我..

我想写一个“ Cypress 命令”,它允许测试包含名称和 ID 的列表是否显示良好。

模板:

<mat-option 
  *ngFor="let user of filteredUsers$ | async" 
  [value]="user.id" 
  class="option-ldap-user-content"
>
  <span 
    class="ldap-user-name"
    classToApply="bold"
    appColorSearchedLetters 
    [text]="user.name" 
    [search]="addLdapUserForm.get('userSearchCtrl').value"
  ></span> |
  <small
    class="ldap-user-id"
    classToApply="bold" 
    appColorSearchedLetters 
    [text]="user.id" 
    [search]="addLdapUserForm.get('userSearchCtrl').value"
  ></small>
</mat-option>

命令.js:

Cypress.Commands.add('expectLdapUsersListToBe', (list1, list2) => {
  const ldapUserNames = cy.get(ADD_LDAP_USER_DOM.texts.ldapUserNames);

  ldapUserNames.should('have.length', list1.length);

  ldapUserNames.each(($item, index) => {
    cy.wrap($item).contains(list1[index]);
  });
  const ldapUserIds = cy.get(ADD_LDAP_USER_DOM.texts.ldapUserIds);

  ldapUserIds.should('have.length', list2.length);

  ldapUserIds.each(($item, index) => {
    cy.wrap($item).contains(list2[index]);
  });
});

e2e-spec.js:

it.only(`should display filtered list according to search string`, () => {
  cy.get(ADMINISTRATION_DOM.expPanel.expPanelAddUser).click();

  cy
    .get(ADD_LDAP_USER_DOM.inputs.userSearchCtrl)
    .should('be.empty')
    .type(`e`);

  cy
    .get(`.multi-match`)
    .contains('7 people are matching this search.')
    .should('be.visible');

      // cy.expectLdapUsersListToBe(expected7LdapUsers); NOT WORKS
  cy.expectLdapUsersListToBe(expected7LdapUsersIds, expected7LdapUsersName);

...

  const expected7LdapUsers = [
    ['id1', 'UserName1'],
    ['id2', 'UserName2'],
    ['id3', 'UserName3'],
    ['id4', 'UserName4'],
    ['id5', 'UserName5'],
    ['id6', 'UserName6'],
    ['id7', 'UserName7'],
  ];

  const expected7LdapUsersIds = [
    'id1',
    'id2',
    'id3',
    'id4',
    'id5',
    'id6',
    'id7',
  ];

  const expected7LdapUsersName = [
    'UserName1',
    'UserName2',
    'UserName3',
    'UserName4',
    'UserName5',
    'UserName6',
    'UserName7',
  ];

我已经编写了一个暂时可用的命令,用于验证名称和 ID 是否正确显示。除了我用 2 个列表测试它。 我希望只有一个。 有人可以帮助我吗?

我测试了类似的东西,但它不起作用:

Cypress.Commands.add('expectLdapUsersListToBe', listOptions => {
  const ldapUserNames = cy.get(ADD_LDAP_USER_DOM.texts.ldapUserNames);
  const ldapUserIds = cy.get(ADD_LDAP_USER_DOM.texts.ldapUserIds);

  ldapUserNames.should('have.length', listOptions.length);
  ldapUserIds.should('have.length', listOptions.length);

  listOptions.forEach(($item, index) => {
    const item = cy.wrap($item);

    expect(item).to.contain(cy.wrap(ldapUserNames)[index]);
    expect(item).to.contain(cy.wrap(ldapUserIds)[index]);
  });
});

谢谢。

最佳答案

我更新了我现在使用的命令。

Cypress.Commands.add(
  'expectLdapUsersListToBe',
  (listUserNames, listUserIds) => {
    const ldapUserNames = cy.get(ADD_LDAP_USER_DOM.texts.ldapUserNames);

    ldapUserNames.should('have.length', listUserNames.length);

    ldapUserNames.each(($item, index) => {
      cy.wrap($item).contains(listUserNames[index]);
    });
    const ldapUserIds = cy.get(ADD_LDAP_USER_DOM.texts.ldapUserIds);

    ldapUserIds.should('have.length', listUserIds.length);

    ldapUserIds.each(($item, index) => {
      cy.wrap($item).contains(listUserIds[index]);
    });
  }
);

测试:

cy.expectLdapUsersListToBe(expected7LdapUsersName, expected7LdapUsersIds);

但正如我在最初的问题中所说,我希望有一个列表而不是 2 个。 这意味着需要一个带有 id 和 name 的列表。
我的第一个示例已弃用。

同样感谢您的这次强化拍摄,这是一个演示错误..

关于javascript - 比较具有 2 个参数的列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51262446/

相关文章:

javascript - 如何在mdtable angular material2中单击行添加左边框

angular - mat-datepicker 只显示月份和年份

angular - 如何过滤垫树组件Angular Material 6.0.1

angular - 如何动态更改 Angular 6 中使用的类中的样式?

javascript - 将数据从一页发送到 HTML 中的另一页

javascript - 谷歌标签管理器 : Configuration and publication ok but not able to display tag on website

ngx-daterangepicker 的 Angular6 问题

angular - 隐藏特定路线上的标题 - Angular 6

javascript - 根据当前日期在下拉列表中设置默认值

javascript - 如何打印带有 Angular 6分页的表格中的记录。(所有记录不仅是当前页)