Improve mount function type

[nnaydenow]

Hi,

Could you please enhance the template parameter description of mount command to have specific type instead of unknown?

Isn't it more correct to specific it as HTMLTemplateResult | string ?

Other possible solution for us is to provide export template result type into separate type which we can override.

Thanks!

[redfox-mx]

Hi @nnaydenow nice to meet you. Thank you for your PR 🚀

Hummm interesting 🤔. Is there some issue with unknown type?

I put unknown type since that's what lit render function does https://github.com/lit/lit/blob/1eb179f69d663440fd2ebd3589b6f2808d87494f/packages/lit-html/src/lit-html.ts#L2233

It was changed because lit cannot only render HTMLTemplateResult (and I add support for string). For example, you can pass a HTMLElement to it

cy.mount(MyCustomElement);
// behind the scenes 
render(MyCustomElement)

It's the same for arrays, arrays of elements, numbers, and other custom tagged templates.

[nnaydenow]

Hi @redfox-mx,

There is no issue and everything works really nice!

We just want to add strict types for this function and since lit is expecting these types I thought it would be nice to add them.

We are using your mount command implementation with some overwrites and since mount options are extracted in a type I was able to enhance the options types (as it is described here: https://docs.cypress.io/api/cypress-api/custom-commands#Overwrite-Existing-Commands). Probably here could be used similar approach?

[redfox-mx]

Hi @nnaydenow sorry for the delay, lately I have had a lot of work.

Probably remove/change unknow type is not the best option since lit not only render HTMLTemplate results, but of course, developers needs some way to change or extend mount command.

I remove in #65 the build in definition and update docs, in this way you can use your custom type

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Mount your template/component into Cypress sandbox
       * @param template
       * @param options render options for custom rendering
       */
      mount: <T>(template: HTMLTemplateResult | string): Cypress.Chainable<JQuery<HTMLElementTagNameMap[T]>> ;
    }
  }
}

or something like that, at least. What do u think?

[nnaydenow]

Hi @redfox-mx,

Currently, I'm enhancing the options by extending the interface with my custom options.

import { MountLitTemplateOptions as OriginalMountLitTemplateOptions } from "cypress-ct-lit";

declare module "cypress-ct-lit" {
	interface MountLitTemplateOptions extends OriginalMountLitTemplateOptions {
		customOption: boolean;
	}
}

Not sure if it's the best way to enhance a build in type so I think that something similar to the proposed would also work for us.

[redfox-mx]

That's ok 👍🏼

For example in #65 if you want to extend mount options or change mout definition it can be more easy

import { mount as litMount, MountLitTemplateOptions } from 'cypress-ct-lit'
import { HTMLTemplateResult } from 'lit';
import { isTemplateResult } from 'lit/directive-helpers.js'

interface MountOptions extends MountLitTemplateOptions {
  customOption: boolean
}

function mount(template: HTMLTemplateResult, options?: MountOptions) {
  if(!isTemplateResult(template)) {
    throw Error('failed to mount template')
  }
  litMount(template, options);
}

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Mount your template/component into Cypress sandbox
       * @param template
       * @param options render options for custom rendering
       */
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add('mount', mount);

[redfox-mx]

closed by #65

[nnaydenow]

Thanks!