How to use harness for hosted dropdown

[loxy]

Hi!

I'm not sure how the harness for the hosted dropdown is helpful for me. Currently I try to create some kind of integration test. I want to assert that a click on a button inside of it triggers a call to specific service.

Here is a snippet:

<tui-hosted-dropdown test-id="dropdown-actions" [content]="menu">
  <button tuiIconButton type="button" size="s" icon="more_vert"></button>
</tui-hosted-dropdown>
<ng-template #menu>
  <tui-data-list>
    <button
      test-id="btn-unlock"
      (click)="unlockConnector()"
      tuiOption
    >
      {{ "GENERAL.UNLOCK" | translate }}
    </button>
  </tui-data-list>
</ng-template>

// --- somewhere in tests
it('should unlock', async () => {
  const spy = jest.spyOn(stationManagement, 'unlock');
  await harness.clickUnlock(); // Find something simple like this to trigger click...
  expect(spy).toHaveBeenCalledWith(hostComponent.mockChargePoint.evseId);
});

So I want to simulate the click on that option. I thought the harness is maybe helpful here (to open the menu before finding the button I want to click). Is that possible? Or how would you test that scenario? Is a harness not the correct way?

Best regards,
Kersten

[zarghamkhandev]

I believe you need a dataListHarness, if such an harness existed you could do something like:

            const dropdown = await accordion.getHarness(TuiAccordionItemHarness);
            const dataList = await dropdown.getHarness(TuiDataListHarness);
            await accordionItem.click();

[loxy]

Thanks. But you mean:

const dropdown = await accordion.getHarness(TuiAccordionItemHarness);
const dataList = await dropdown.getHarness(TuiDataListHarness);
await dropdown.click();

Unfortunately, there is no Harness like that...