jscutlery/devkit

Method of harness not always working

Heines1983 opened this issue · 1 comments

I'm starting to use Cypress and the harness devkit because of the deprecation of Protractor. I'm currently facing the following issue when invoking methods on a harness.

This is my test:

`describe('Test with harness', () => {

before(() => {
    cy.login()
  });
  
it('should go to the properties page', () => {
    cy.visit('/admin/content-properties').then(() => {
        cy.wait(6000);
    });
})

it('should click a menu item but fails', () => {
    const list = getHarness(ItemMenuComponentHarness);
    list.getItems({label: 'Category'})[0].clickOnItem();
})

it('should click a menu item and succeeds', () => {
    const item = getHarness(ItemMenuItemComponentHarness.with({label: 'Category'}));
    item.clickOnItem();
})

it('should select a tab but fails', () => {

    const tab = getHarness(MatTabHarness.with({label: 'Type specific settings'}));
    tab.select();
})

it('should select a tab and succeeds with the use of pipe', () => {
    const tab = getHarness(MatTabHarness.with({label: 'Type specific settings'}));
    tab.pipe(t => t.select());
})

})`

There are 2 cases in which the method is not working the way I would expect.

The first case is when i'm getting a harness, invoke a method on it (getItems) and on that result I also invoke a method. This throws an error:

image

If I use the same method directly on the harness (2nd test case) it works as expected.

The second case is when the method is also a cypress method like click or select. I get this error:

image

In both cases I can use pipe to make it work, but I would be better if it just works without also.

Hi @Heines1983, sorry for responding so late.
Concerning your first issue, this is actually related to the fact that you are using a synchronous access [0] on getItems() return value... while the return value is not an array. It's a cypress wrapper.

I've got to check this but this could work with .eq(0) instead of [0].
Otherwise, you can use the pipe method to chain operations.

...getItems().pipe(items => items[0]).clickOnItem()

Concerning the second issue, Cypress methods gain precendency so you have a collision between cypress's select and the harness's select. Could you try replacing select with .invoke('select') or simply .pipe(el => el.select()) as the previous issue.