Autocompletion for TypeScript does not work if I("Actor") has extensions in IntelliJ IDEA Ultimate

[frixatrix]

What are you trying to achieve?

Auto-complete in Intellij IDEA Ultimate for codeceptjs/typescript/puppeteer/mochawesome setup when "Actor"(I) is extended with custom steps file.
I did extension as described here: https://codecept.io/pageobjects/#actor

What do you get instead?

Auto-complete stoops working for parent methods and for custom ones.

STR

Example done with https://github.com/codeceptjs/typescript-boilerplate

I commented out in loginPage.ts method link:

  // async link () {
  //   await I.waitForVisible(this.locator)
  // }

and added same code to steps_file.ts

export = function (): any {
  return actor({
    // Define custom steps here, use 'this' to access default methods of I.
    // It is recommended to place a general 'login' function here.
	link: async function (): Promise<void> {
		  await this.waitForVisible(this.locator)
	  }
  });
};

Then added include to codeceptjs.conf.js:

  include: {
	I: 'steps_file.ts',

Then run codeceptjs def .

> codeceptjs def .
TypeScript Definitions provide autocompletion in Visual Studio Code and other IDEs
Definitions were generated in steps.d.ts

Then opened Typescript_Example_test.ts
And pointer mouse on any methods called from 'I'.

Result:

0 methods of I available for TS for autocomplete.

And if I don't do those changes - everything works as expected:

Details

• CodeceptJS version: 3.0.0
• NodeJS Version:14.15.1
• Operating System:MacOSX
• puppeteer
• Configuration file:

require('ts-node/register')
const { setHeadlessWhen } = require('@codeceptjs/configure');
const { bootstrap } = require('./presettings.ts');

// turn on headless mode when running with HEADLESS=true environment variable
// HEADLESS=true npx codecept run
setHeadlessWhen(process.env.HEADLESS);

exports.config = {
  tests: './tests/**_test.ts',
  output: './output',
  helpers: {
    // Playwright: {
    //   url: 'https://github.com',
    //   show: false,
    //   windowSize: '1200x900',
    //   browser: 'chromium'
    // },
	  Puppeteer: {
		  url: './',
		  basicAuth: { username: 'user', password: 'pass' },
		  show: true,
		  windowSize: '1280x900',
		  waitForNavigation: "networkidle0"
	  },
    CustomHelper: {
      require: './CustomHelper.ts'
    }
  },
  bootstrap,
  include: {
	// I: 'steps_file.ts',
    loginPage: './loginPage.ts',
    homePage: './homePage.ts'
  },
  name: 'typescript-boilerplate',
  plugins: {
    retryFailedStep: {
      enabled: true
    },
    screenshotOnFail: {
      enabled: true
    }
  }
}

[frixatrix]

Any review or feedback please?

[daigo75]

I noticed the same issue with Visual Studio Code (VS Code), in the same scenario. If the actor is extended with custom steps, the autocomplete stops working altogether. It looks like the configuration setting

include: {
	I: './steps_file.ts'
}

replaces the declaration of I, changing it from interface I extends WithTranslation<Methods> {} to interface I extends ReturnType<steps_file> {}, and the latter doesn't resolve correctly.

[angelov-a]

I am have the same observation as @daigo75.

Adding WithTranslation<Methods> manually to I definition fixes the issue to some extent.

Update: Make sure not to use any as a return type of the steps_file.ts export. The type should be inferred instead.

export = function () {
   return actor({})
}