Setting the content of TinyMCE Editor in Cypress and Typescript

user_4675736 0
Viewed 282

I am building a React Js application using Typescript. I am writing integration tests for my application using Cypress. I am also using Typescript for writing Cypress tests. I am now trying to set the content of the tiny MCE editor in the Cypress test. I am trying to use this library, https://github.com/ForeachOS/cypress-tinymce. But I cannot use that library with TypeScript as it is only for JavaScript. So I had a look at the underlying code that sets the value of the editor. It is as follow.

Cypress.Commands.add('setTinyMceContent', (tinyMceId, content) => {
  cy.window().then((win) => {
    const editor = win.tinymce.editors[tinyMceId];
    editor.setContent(content);
  });
});

So I tried to create the TypeScript version of that command in my support/index.js file as follow.

Cypress.Commands.add('setTinyMceContent', (tinyMceId: string, content: any) => {
    cy.window().then((win) => {
        const editor = win.tinymce.editors[tinyMceId];
        editor.setContent(content);
    })
})

But it is complaining as follow.

Property 'tinymce' does not exist on type 'AUTWindow'.

enter image description here

How can I fix it?

cypress-custom-commands cypress typescript tinymce
1 Answers

If you take a look in cypress.d.ts there's a declaration for AUTWindow

/**
  * Window type for Application Under Test(AUT)
*/
type AUTWindow = Window & typeof globalThis & ApplicationWindow

and underneath that is ApplicationWindow for user-defined properties

/**
 * The interface for user-defined properties in Window object under test.
*/
interface ApplicationWindow { } // tslint:disable-line

You can add your own properties via declaration merging.

In your /cypress/support/e2e.d.ts (Cypress v10) or /cypress/support/index.d.ts (Cypress v9)

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable<Subject> {
    setTinyMceContent(tinyMceId: string, content: any): void
  }
}

declare namespace Cypress {
  interface ApplicationWindow { 
    tinymce: any
  } 
}

There's also @types/tinymce which may be useful down the line.

user_169977070
Related