Support for Markojs Component Testing

vallme2003 commented 2 years ago

What would you like?

For component tests, cypress currently supports the list in https://docs.cypress.io/guides/component-testing/component-framework-configuration#Automatic-Configuration-Recommended and would like to get support for Markojs(https://markojs.com/) framework components.

Why is this needed?

There is a wide variety of applications using Markojs for js size (https://markojs.com/docs/marko-vs-react/) and would be very useful for the developer community.

Other

No response

lmiller1990 commented 2 years ago

Hi!

Sounds like a fun project, I've been wanting to try Marko for a while. I cannot commit to a time frame for support in core (eg, import { mount } from 'cypress/marko' but we can definitely work on this without needing to make changes in the core repo.

We expose some useful internals in @cypress/mount-utils: https://github.com/cypress-io/cypress/tree/develop/npm/mount-utils that can let us build this as a third party library, that we can eventually consider including once it's mature.

Adapters are generally just a function that can take an element and render/mount it. Here's React. We could likely reuse some of the code in the Marko Testing Library.

The only real difference between a third party adapter and one in core would be configuration. The official ones are like this:

component: {
  devServer: {
    library: 'react',
    bundler: 'vite'
  }
}

A third party would one be configured like this.

I'd be interested in working on this. If anyone would like to try, please link your repo here and I can help out. I'm not sure how much time I can commit right now, but I'd like to help with more resources to let people build their own third party adapters, and eventually support more things in core.

lmiller1990 commented 1 year ago

Here's a simple example showing how to make a mount function for Web Components: https://github.com/lmiller1990/cypress-web-components-example

We can no doubt do something similar for Marko!

lmiller1990 commented 1 year ago

Hi, we have a public API for this feature for this in Cypress 12.7+.

Docs https://docs.cypress.io/guides/component-testing/third-party-definitions
Example implementation for Solid.js https://github.com/lmiller1990/cypress-ct-solid-js
Template: https://github.com/cypress-io/cypress-ct-definition-template

If either of you is interested, you could either make your own one for Markojs extension now. If you want to work on it together or have any questions, please let me know.

cypress-io / cypress