cypress-harness: typing issues with strict mode in Angular

[Badisi]

Package: @jscutlery/cypress-harness
Version: 0.3.4

Using the datepicker example now gives the following ts errors:

Property 'invoke' does not exist on type 'Promise<MatCalendarHarness>'.
Property 'selectCell' does not exist on type 'Promise<MatCalendarHarness>'.
Property 'should' does not exist on type 'MatCalendarHarness'.

The first two are due to the fact that some material components methods have optional parameters.
Ex : getCalendar(filter?: CalendarHarnessFilters): Promise<MatCalendarHarness>;
They can be solved by replacing (...args: unknown[]) => unknown with (...args: any[]) => unknown in internals.ts#L7

I have not investigated further for the third one..

[edbzn]

Hi, I cannot reproduce the errors you describe and tests are passing. Could you elaborate more on how you get this?

[Badisi]

System info

Angular CLI: 12.0.5
Node: 14.17.0
Package Manager: npm 7.16.0
OS: darwin x64

Steps to reproduce

This is what I'm doing:

$ ng new cypress-test --routing=true --style=scss
$ cd cypress-test
$ ng add @angular/material --theme="Indigo/Pink" --typography=false --animations=true
> install 12.0.5 : Yes
$ ng add @cypress/schematic --e2eUpdate=true
> install 1.3.1 : Yes
$ npm install -D @jscutlery/cypress-harness cypress-pipe

Then:

• Add import '@jscutlery/cypress-harness/support'; in cypress/support/index.ts
• Copy/replace datepicker example in cypress/integration/spec.ts

  import { getHarness, getAllHarnesses } from '@jscutlery/cypress-harness';
  import { MatDatepickerInputHarness, MatCalendarHarness } from '@angular/material/datepicker/testing';
  
  describe('datepicker', () => {
      /* getHarness & getAllHarnesses are lazy so you can
       * initialize them wherever you want and reuse them. */
      const datepicker = getHarness(MatDatepickerInputHarness);
      const calendars = getAllHarnesses(MatCalendarHarness);
  
      it('should set date', () => {
          datepicker.setValue('1/1/2010');
          datepicker.openCalendar();
          datepicker.getCalendar().invoke('next'); // next method is already used
          datepicker.getCalendar().selectCell({ text: '10' });
          datepicker.getValue().should('equal', '2/10/2010');
          calendars.should('be.empty');
      });
  });

Issue

When opening the project in vscode I got the compiler errors in the screenshot above.

[Badisi]

@edbzn, you are right on one point though:
Even if vscode is complaining, if you try running the tests anyway through cypress, they are executing fine..

[Badisi]

When running @cypress/schematic it will create a ./cypress/tsconfig.json which extends from ./tsconfig.json (ie. the one from angular). And angular has compilerOptions.strict turned on by default. This is what's causing my issues.

So I guess you should enable strict mode on your side too.

[Badisi]

@edbzn, any chance you could look into this any time soon ?
Thanks 🙂

[edbzn]

Hi @Badisi, I published a fix for this issue, thanks for reporting!

[Badisi]

Hello @edbzn, thanks for the fix !

I can confirm that all the typing issues related to "getHarness" are fixed.

However, the one related to "getAllHarnesses" still exists :

describe('datepicker', () => {
    const calendars = getAllHarnesses(MatCalendarHarness);
    it('should set date', () => {
        calendars.should('be.empty'); <-- Property 'should' does not exist on type 'Promise<MatCalendarHarness[]>'.
    });
});

To fix this : get-all-harnesses.ts#L8 -> replace Promise<HARNESS[]> with ChainableHarness<HARNESS[]>