Skip to content

Commit fb08e38

Browse files
shairezshairez
authored
Merge pull request #8 from jordanpowell88/fix-qwik-loader
2 parents 81820e9 + 59c6ada commit fb08e38

File tree

9 files changed

+2190
-6105
lines changed

9 files changed

+2190
-6105
lines changed

‎README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,15 @@ npm install -D cypress-ct-qwik
4747

4848
2. Follow the configuration wizard
4949

50+
3. Add `addQwikLoader` to the `cypress/support/component.ts` file -
51+
52+
```ts
53+
// component.ts
54+
import { addQwikLoader } from 'cypress-ct-qwik';
55+
addQwikLoader();
56+
57+
```
58+
5059
Pretty easy... 😊
5160

5261
## Usage

‎apps/qwik-app/cypress/support/commands.ts

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
/// <reference types="cypress" />
2-
3-
import { mount } from "cypress-ct-qwik";
4-
52
// ***********************************************
63
// This example commands.ts shows you how to
74
// create various custom commands and overwrite
@@ -11,30 +8,30 @@ import { mount } from "cypress-ct-qwik";
118
// commands please read more here:
129
// https://on.cypress.io/custom-commands
1310
// ***********************************************
14-
15-
// eslint-disable-next-line @typescript-eslint/no-namespace
16-
declare namespace Cypress {
17-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
18-
interface Chainable<Subject> {
19-
login(email: string, password: string): void;
20-
mount: typeof mount
21-
}
22-
}
11+
//
2312
//
2413
// -- This is a parent command --
25-
Cypress.Commands.add('login', (email, password) => {
26-
console.log('Custom command example: Login', email, password);
27-
});
28-
29-
Cypress.Commands.add('mount', mount)
14+
// Cypress.Commands.add('login', (email, password) => { ... })
15+
//
3016
//
3117
// -- This is a child command --
32-
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18+
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
3319
//
3420
//
3521
// -- This is a dual command --
36-
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22+
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
3723
//
3824
//
3925
// -- This will overwrite an existing command --
40-
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
26+
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
27+
//
28+
// declare global {
29+
// namespace Cypress {
30+
// interface Chainable {
31+
// login(email: string, password: string): Chainable<void>
32+
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
33+
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
34+
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
35+
// }
36+
// }
37+
// }

‎apps/qwik-app/cypress/support/component-index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7-
<title>qwik-app Components App</title>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title>Components App</title>
88
</head>
99
<body>
1010
<div data-cy-root></div>
1111
</body>
12-
</html>
12+
</html>

‎apps/qwik-app/cypress/support/component.ts

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,30 @@
1313
// https://on.cypress.io/configuration
1414
// ***********************************************************
1515

16-
// Import commands.ts using ES2015 syntax:
17-
import './commands';
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')
21+
22+
import { addQwikLoader, mount } from 'cypress-ct-qwik'
23+
24+
addQwikLoader()
25+
26+
// Augment the Cypress namespace to include type definitions for
27+
// your custom command.
28+
// Alternatively, can be defined in cypress/support/component.d.ts
29+
// with a <reference path="./component" /> at the top of your spec.
30+
declare global {
31+
// eslint-disable-next-line @typescript-eslint/no-namespace
32+
namespace Cypress {
33+
interface Chainable {
34+
mount: typeof mount
35+
}
36+
}
37+
}
38+
39+
Cypress.Commands.add('mount', mount)
40+
41+
// Example use:
42+
// cy.mount(MyComponent)

‎apps/qwik-app/src/components/header/header.cy.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ describe(`header component test`, () => {
1111
cy.mount(<Header />);
1212

1313
cy.contains(/opened/i).should('not.exist');
14+
cy.contains('Closed')
1415
cy.contains(/click me/i).click();
1516
cy.contains(/opened/i).should('exist');
17+
cy.contains('Opened')
1618
});
1719
});

‎apps/qwik-app/src/components/header/header.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@ export default component$(() => {
1717
<div>
1818
<button
1919
onClick$={() => {
20-
isOpenSignal.value = true;
20+
isOpenSignal.value = !isOpenSignal.value;
2121
}}
2222
>
2323
Click Me
2424
</button>
2525

26-
{isOpenSignal.value && <div>Opened</div>}
26+
<div>{isOpenSignal.value ? 'Opened' : 'Closed' }</div>
2727
</div>
2828
<ul>
2929
<li>

‎packages/cypress-ct-qwik/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from './lib/mount';
2+
export * from './lib/add-qwik-loader';

‎packages/cypress-ct-qwik/src/lib/mount.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { JSXNode, RenderResult } from '@builder.io/qwik';
22
import { render } from '@builder.io/qwik';
33
import { getContainerEl, setupHooks } from '@cypress/mount-utils';
4-
import { addQwikLoader } from './add-qwik-loader';
54

65
let destroy: () => void | undefined;
76

@@ -10,8 +9,6 @@ function cleanup() {
109
}
1110

1211
export function mount(element: JSXNode) {
13-
addQwikLoader();
14-
1512
const root = getContainerEl();
1613

1714
const renderResultPromise = render(root, element);

0 commit comments

Comments
 (0)