Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat]: Prepare first stable release #65

Merged
merged 2 commits into from
Nov 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .changeset/brave-crabs-cheat.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
"cypress-ct-lit": major
---

Release 1.0.0 [cypress-ct-lit] Full support for lit and cypress component testing

- Remove internal types to allow custom mount command
- Update module export to disable typescript warning
- Update docs for mount type example
- Update docs to prevent set incorrect bundler
35 changes: 22 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export default defineConfig({
component: {
devServer: {
framework: 'cypress-ct-lit',
bundler: 'vite', // or 'webpack'
// more config here
}
}
Expand All @@ -41,25 +42,25 @@ framework: 'cypress-ct-lit' as any,
```
## Adding mount Command

Next, add the following lines to your `component.{js.ts}`
Next, add the following lines to your `component.ts`

```ts
import { mount } from 'cypress-ct-lit'

Cypress.Commands.add('mount', mount)
```
Optionally, this package brings its custom types definitions. Add the following to `tsconfig.json` or `jsconfig.json` in your project.

```json
{
"compilerOptions": {
// more compiler options...
"types": [
"cypress",
"cypress-ct-lit"
]
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)
```
## Usage notes

Expand All @@ -74,6 +75,13 @@ it('should display content', () => {

cy.get('#content').should('contain.text', text);
})

it('should display html', () => {
const text = 'strings templates are also allowed'
cy.mount(`<div id='content'>${text}</div>`);

cy.get('#content').should('contain.text', text);
})
```

Or find content inside your web component
Expand All @@ -100,6 +108,7 @@ For more examples and basic usages see ´cypress/component´ examples
> component: {
> devServer: {
> framework: 'cypress-ct-lit',
> bundler: 'vite', // or 'webpack'
> // more config here
> }
> }
Expand Down
Loading
Loading