@quilted/create 0.1.49 → 0.1.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/package.json +1 -1
- package/templates/app-basic/features/Start/Start.test.tsx +2 -2
- package/templates/app-basic/foundation/Head/Head.test.tsx +3 -3
- package/templates/app-basic/foundation/Http/Http.test.tsx +3 -3
- package/templates/app-basic/package.json +1 -1
- package/templates/app-basic/tests/{mount.tsx → render.tsx} +11 -11
- package/templates/app-empty/package.json +1 -1
- package/templates/app-graphql/features/Start/Start.test.tsx +3 -3
- package/templates/app-graphql/foundation/Head/Head.test.tsx +3 -3
- package/templates/app-graphql/foundation/Http/Http.test.tsx +3 -3
- package/templates/app-graphql/package.json +2 -2
- package/templates/app-graphql/tests/{mount.tsx → render.tsx} +13 -13
- package/templates/app-single-file/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @quilted/create
|
|
2
2
|
|
|
3
|
+
## 0.1.50
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`b378b4f4`](https://github.com/lemonmade/quilt/commit/b378b4f40906f9edc81d4283cf29e753255a0362) Thanks [@lemonmade](https://github.com/lemonmade)! - Update default build output locations
|
|
8
|
+
|
|
9
|
+
- [#518](https://github.com/lemonmade/quilt/pull/518) [`10574343`](https://github.com/lemonmade/quilt/commit/105743435ad7143acb50dfdee92f6d3422167888) Thanks [@lemonmade](https://github.com/lemonmade)! - Update testing functions from mount() => render()
|
|
10
|
+
|
|
3
11
|
## 0.1.49
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import {describe, it, expect} from '@quilted/quilt/testing';
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import {renderWithAppContext} from '~/tests/render';
|
|
4
4
|
|
|
5
5
|
import Start from './Start';
|
|
6
6
|
|
|
7
7
|
describe('<Start />', () => {
|
|
8
8
|
it('includes a welcome message', async () => {
|
|
9
|
-
const start = await
|
|
9
|
+
const start = await renderWithAppContext(<Start />);
|
|
10
10
|
expect(start).toContainReactText('Hello world!');
|
|
11
11
|
});
|
|
12
12
|
});
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import {Viewport, SearchRobots} from '@quilted/quilt/html';
|
|
2
2
|
import {describe, it, expect} from '@quilted/quilt/testing';
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import {renderWithAppContext} from '~/tests/render';
|
|
5
5
|
|
|
6
6
|
import {Head} from './Head';
|
|
7
7
|
|
|
8
8
|
describe('<Head />', () => {
|
|
9
9
|
it('includes a responsive viewport tag', async () => {
|
|
10
|
-
const head = await
|
|
10
|
+
const head = await renderWithAppContext(<Head />);
|
|
11
11
|
|
|
12
12
|
expect(head).toContainReactComponent(Viewport, {
|
|
13
13
|
cover: true,
|
|
@@ -15,7 +15,7 @@ describe('<Head />', () => {
|
|
|
15
15
|
});
|
|
16
16
|
|
|
17
17
|
it('prevents search robots from indexing the application', async () => {
|
|
18
|
-
const head = await
|
|
18
|
+
const head = await renderWithAppContext(<Head />);
|
|
19
19
|
|
|
20
20
|
expect(head).toContainReactComponent(SearchRobots, {
|
|
21
21
|
index: false,
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import {CacheControl, ContentSecurityPolicy} from '@quilted/quilt/http';
|
|
2
2
|
import {describe, it, expect} from '@quilted/quilt/testing';
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import {renderWithAppContext} from '~/tests/render';
|
|
5
5
|
|
|
6
6
|
import {Http} from './Http';
|
|
7
7
|
|
|
8
8
|
describe('<Http />', () => {
|
|
9
9
|
it('does not cache the response', async () => {
|
|
10
|
-
const http = await
|
|
10
|
+
const http = await renderWithAppContext(<Http />);
|
|
11
11
|
|
|
12
12
|
expect(http).toContainReactComponent(CacheControl, {
|
|
13
13
|
cache: false,
|
|
@@ -15,7 +15,7 @@ describe('<Http />', () => {
|
|
|
15
15
|
});
|
|
16
16
|
|
|
17
17
|
it('adds a content security policy with a strict default policy', async () => {
|
|
18
|
-
const http = await
|
|
18
|
+
const http = await renderWithAppContext(<Http />);
|
|
19
19
|
|
|
20
20
|
expect(http).toContainReactComponent(ContentSecurityPolicy, {
|
|
21
21
|
defaultSources: ["'self'"],
|
|
@@ -2,7 +2,7 @@ import '@quilted/quilt/matchers';
|
|
|
2
2
|
|
|
3
3
|
import {type PropsWithChildren} from '@quilted/quilt';
|
|
4
4
|
import {
|
|
5
|
-
|
|
5
|
+
createRender,
|
|
6
6
|
QuiltAppTesting,
|
|
7
7
|
createTestRouter,
|
|
8
8
|
} from '@quilted/quilt/testing';
|
|
@@ -11,7 +11,7 @@ type Router = ReturnType<typeof createTestRouter>;
|
|
|
11
11
|
|
|
12
12
|
export {createTestRouter};
|
|
13
13
|
|
|
14
|
-
export interface
|
|
14
|
+
export interface RenderOptions {
|
|
15
15
|
/**
|
|
16
16
|
* A custom router to use for this component test. You can use a
|
|
17
17
|
* custom router to simulate a particular URL, and you can spy on
|
|
@@ -26,23 +26,23 @@ export interface MountOptions {
|
|
|
26
26
|
locale?: string;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
export interface
|
|
29
|
+
export interface RenderContext {
|
|
30
30
|
/**
|
|
31
31
|
* The router used for this component test.
|
|
32
32
|
*/
|
|
33
33
|
router: Router;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
export interface
|
|
36
|
+
export interface RenderActions extends Record<string, never> {}
|
|
37
37
|
|
|
38
38
|
/**
|
|
39
|
-
*
|
|
39
|
+
* Renders a component with test-friendly versions of all global
|
|
40
40
|
* context available to the application.
|
|
41
41
|
*/
|
|
42
|
-
export const
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
export const renderWithAppContext = createRender<
|
|
43
|
+
RenderOptions,
|
|
44
|
+
RenderContext,
|
|
45
|
+
RenderActions,
|
|
46
46
|
true
|
|
47
47
|
>({
|
|
48
48
|
// Create context that can be used by the `render` function, and referenced by test
|
|
@@ -59,10 +59,10 @@ export const mountWithAppContext = createMount<
|
|
|
59
59
|
</QuiltAppTesting>
|
|
60
60
|
);
|
|
61
61
|
},
|
|
62
|
-
async
|
|
62
|
+
async afterRender() {
|
|
63
63
|
// If your components need to resolve data before they can render, you can
|
|
64
64
|
// use this hook to wait for that data to be ready. This will cause the
|
|
65
|
-
// `
|
|
65
|
+
// `render` function to return a promise, so that the component is only usable
|
|
66
66
|
// once the data is ready.
|
|
67
67
|
},
|
|
68
68
|
});
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {describe, it, expect} from '@quilted/quilt/testing';
|
|
2
2
|
|
|
3
3
|
import {
|
|
4
|
-
|
|
4
|
+
renderWithAppContext,
|
|
5
5
|
createGraphQLController,
|
|
6
6
|
fillGraphQL,
|
|
7
|
-
} from '~/tests/
|
|
7
|
+
} from '~/tests/render';
|
|
8
8
|
|
|
9
9
|
import Start from './Start';
|
|
10
10
|
import startQuery from './StartQuery.graphql';
|
|
@@ -14,7 +14,7 @@ describe('<Start />', () => {
|
|
|
14
14
|
const name = 'Winston';
|
|
15
15
|
const graphql = createGraphQLController(fillGraphQL(startQuery, {name}));
|
|
16
16
|
|
|
17
|
-
const start = await
|
|
17
|
+
const start = await renderWithAppContext(<Start />, {graphql});
|
|
18
18
|
|
|
19
19
|
expect(graphql).toHavePerformedGraphQLOperation(startQuery);
|
|
20
20
|
expect(start).toContainReactText(`Hello ${name}!`);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import {Viewport, SearchRobots} from '@quilted/quilt/html';
|
|
2
2
|
import {describe, it, expect} from '@quilted/quilt/testing';
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import {renderWithAppContext} from '~/tests/render';
|
|
5
5
|
|
|
6
6
|
import {Head} from './Head';
|
|
7
7
|
|
|
8
8
|
describe('<Head />', () => {
|
|
9
9
|
it('includes a responsive viewport tag', async () => {
|
|
10
|
-
const head = await
|
|
10
|
+
const head = await renderWithAppContext(<Head />);
|
|
11
11
|
|
|
12
12
|
expect(head).toContainReactComponent(Viewport, {
|
|
13
13
|
cover: true,
|
|
@@ -15,7 +15,7 @@ describe('<Head />', () => {
|
|
|
15
15
|
});
|
|
16
16
|
|
|
17
17
|
it('prevents search robots from indexing the application', async () => {
|
|
18
|
-
const head = await
|
|
18
|
+
const head = await renderWithAppContext(<Head />);
|
|
19
19
|
|
|
20
20
|
expect(head).toContainReactComponent(SearchRobots, {
|
|
21
21
|
index: false,
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import {CacheControl, ContentSecurityPolicy} from '@quilted/quilt/http';
|
|
2
2
|
import {describe, it, expect} from '@quilted/quilt/testing';
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import {renderWithAppContext} from '~/tests/render';
|
|
5
5
|
|
|
6
6
|
import {Http} from './Http';
|
|
7
7
|
|
|
8
8
|
describe('<Http />', () => {
|
|
9
9
|
it('does not cache the response', async () => {
|
|
10
|
-
const http = await
|
|
10
|
+
const http = await renderWithAppContext(<Http />);
|
|
11
11
|
|
|
12
12
|
expect(http).toContainReactComponent(CacheControl, {
|
|
13
13
|
cache: false,
|
|
@@ -15,7 +15,7 @@ describe('<Http />', () => {
|
|
|
15
15
|
});
|
|
16
16
|
|
|
17
17
|
it('adds a content security policy with a strict default policy', async () => {
|
|
18
|
-
const http = await
|
|
18
|
+
const http = await renderWithAppContext(<Http />);
|
|
19
19
|
|
|
20
20
|
expect(http).toContainReactComponent(ContentSecurityPolicy, {
|
|
21
21
|
defaultSources: ["'self'"],
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "template-app-
|
|
2
|
+
"name": "template-app-graphql",
|
|
3
3
|
"type": "module",
|
|
4
4
|
"version": "0.0.0",
|
|
5
5
|
"private": true,
|
|
6
6
|
"scripts": {
|
|
7
|
-
"start": "node ./build/server/
|
|
7
|
+
"start": "node ./build/server/server.js"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {},
|
|
10
10
|
"devDependencies": {
|
|
@@ -2,7 +2,7 @@ import '@quilted/quilt/matchers';
|
|
|
2
2
|
|
|
3
3
|
import {type Router} from '@quilted/quilt';
|
|
4
4
|
import {
|
|
5
|
-
|
|
5
|
+
createRender,
|
|
6
6
|
QuiltAppTesting,
|
|
7
7
|
createTestRouter,
|
|
8
8
|
} from '@quilted/quilt/testing';
|
|
@@ -17,7 +17,7 @@ import {
|
|
|
17
17
|
|
|
18
18
|
export {createTestRouter, fillGraphQL, createGraphQLController};
|
|
19
19
|
|
|
20
|
-
export interface
|
|
20
|
+
export interface RenderOptions {
|
|
21
21
|
/**
|
|
22
22
|
* A custom router to use for this component test. You can use a
|
|
23
23
|
* custom router to simulate a particular URL, and you can spy on
|
|
@@ -33,12 +33,12 @@ export interface MountOptions {
|
|
|
33
33
|
* by this module.
|
|
34
34
|
*
|
|
35
35
|
* ```tsx
|
|
36
|
-
* import {
|
|
36
|
+
* import {renderWithAppContext, fillGraphQL, createGraphQLController} from '~/tests/render';
|
|
37
37
|
*
|
|
38
38
|
* import {MyComponent} from './MyComponent';
|
|
39
39
|
* import myComponentQuery from './MyComponentQuery.graphql';
|
|
40
40
|
*
|
|
41
|
-
* const myComponent = await
|
|
41
|
+
* const myComponent = await renderWithAppContext(<MyComponent />, {
|
|
42
42
|
* graphql: createGraphQLController(
|
|
43
43
|
* fillGraphQL(myComponentQuery, {user: {name: 'Winston'}}),
|
|
44
44
|
* ),
|
|
@@ -53,7 +53,7 @@ export interface MountOptions {
|
|
|
53
53
|
locale?: string;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
export interface
|
|
56
|
+
export interface RenderContext {
|
|
57
57
|
/**
|
|
58
58
|
* The router used for this component test.
|
|
59
59
|
*/
|
|
@@ -70,16 +70,16 @@ export interface MountContext {
|
|
|
70
70
|
readonly queryClient: QueryClient;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
export interface
|
|
73
|
+
export interface RenderActions extends Record<string, never> {}
|
|
74
74
|
|
|
75
75
|
/**
|
|
76
|
-
*
|
|
76
|
+
* Renders a component with test-friendly versions of all global
|
|
77
77
|
* context available to the application.
|
|
78
78
|
*/
|
|
79
|
-
export const
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
79
|
+
export const renderWithAppContext = createRender<
|
|
80
|
+
RenderOptions,
|
|
81
|
+
RenderContext,
|
|
82
|
+
RenderActions,
|
|
83
83
|
true
|
|
84
84
|
>({
|
|
85
85
|
// Create context that can be used by the `render` function, and referenced by test
|
|
@@ -100,10 +100,10 @@ export const mountWithAppContext = createMount<
|
|
|
100
100
|
</QuiltAppTesting>
|
|
101
101
|
);
|
|
102
102
|
},
|
|
103
|
-
async
|
|
103
|
+
async afterRender(wrapper) {
|
|
104
104
|
// If your components need to resolve data before they can render, you can
|
|
105
105
|
// use this hook to wait for that data to be ready. This will cause the
|
|
106
|
-
// `
|
|
106
|
+
// `render` function to return a promise, so that the component is only usable
|
|
107
107
|
// once the data is ready.
|
|
108
108
|
|
|
109
109
|
await wrapper.act(async () => {
|