@reactful/create 1.2.23 → 1.2.25
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/commons/package.json +4 -5
- package/package.json +2 -2
- package/templates/minimal/builds/about.html +30 -0
- package/templates/minimal/builds/bundle.js +34981 -0
- package/templates/minimal/builds/bundle.ts +20 -0
- package/templates/minimal/builds/clock.html +30 -0
- package/templates/minimal/builds/counter.html +37 -0
- package/templates/minimal/builds/forms/form.html +48 -0
- package/templates/minimal/builds/forms/index.html +48 -0
- package/templates/minimal/builds/hello.html +62 -0
- package/templates/minimal/builds/htmlx.html +27 -0
- package/templates/minimal/builds/htmlx.tsx +13 -0
- package/templates/minimal/builds/index.html +98 -11
- package/templates/minimal/builds/login.html +48 -0
- package/templates/minimal/builds/profile/index.html +55 -0
- package/templates/minimal/builds/quotes.html +27 -0
- package/templates/minimal/builds/shared.js +76 -0
- package/templates/minimal/builds/system.html +28 -0
- package/templates/minimal/components/index.ts +1 -2
- package/templates/minimal/components/label.tsx +7 -0
- package/templates/minimal/index.html +12 -11
- package/templates/minimal/index.ts +2 -2
- package/templates/minimal/routes/hello.tsx +6 -0
- package/templates/minimal/routes/index.tsx +4 -7
- package/templates/sampling/apis/auth/db.ts +14 -14
- package/templates/sampling/apis/auth/index.ts +27 -27
- package/templates/sampling/apis/hello.ts +2 -2
- package/templates/sampling/apis/quotes.ts +15 -15
- package/templates/sampling/apis/sub/index.ts +2 -2
- package/templates/sampling/apis/sub/sub.ts +2 -2
- package/templates/sampling/assets/bootstrap-icons.css +4 -4
- package/templates/sampling/assets/default.css +93 -93
- package/templates/sampling/assets/icon.svg +6 -6
- package/templates/sampling/assets/manifest.json +56 -56
- package/templates/sampling/assets/markdown.css +273 -273
- package/templates/sampling/assets/robots.txt +1 -1
- package/templates/sampling/assets/system.css +6 -6
- package/templates/sampling/builds/about.html +30 -0
- package/templates/sampling/builds/bundle.js +34981 -0
- package/templates/sampling/builds/bundle.ts +20 -0
- package/templates/sampling/builds/clock.html +30 -0
- package/templates/sampling/builds/counter.html +37 -0
- package/templates/sampling/builds/forms/form.html +48 -0
- package/templates/sampling/builds/forms/index.html +48 -0
- package/templates/sampling/builds/hello.html +62 -0
- package/templates/sampling/builds/htmlx.html +27 -0
- package/templates/sampling/builds/htmlx.tsx +13 -0
- package/templates/sampling/builds/index.html +98 -98
- package/templates/sampling/builds/login.html +48 -0
- package/templates/sampling/builds/profile/index.html +55 -0
- package/templates/sampling/builds/quotes.html +27 -0
- package/templates/sampling/builds/shared.js +76 -0
- package/templates/sampling/builds/system.html +28 -0
- package/templates/sampling/components/header.tsx +6 -6
- package/templates/sampling/components/hello.tsx +8 -8
- package/templates/sampling/components/icon.tsx +10 -10
- package/templates/sampling/components/index.ts +2 -2
- package/templates/sampling/index.html +20 -20
- package/templates/sampling/index.ts +18 -18
- package/templates/sampling/routes/about.html +12 -12
- package/templates/sampling/routes/clock.tsx +32 -36
- package/templates/sampling/routes/counter.tsx +16 -7
- package/templates/sampling/routes/forms/form.tsx +49 -50
- package/templates/sampling/routes/hello.tsx +57 -58
- package/templates/sampling/routes/htmlx.html +14 -14
- package/templates/sampling/routes/index.md +14 -14
- package/templates/sampling/routes/login.tsx +34 -35
- package/templates/sampling/routes/profile/detail.css +12 -12
- package/templates/sampling/routes/profile/detail.tsx +46 -47
- package/templates/sampling/routes/profile/index.tsx +13 -13
- package/templates/sampling/routes/profile/profile.css +8 -8
- package/templates/sampling/routes/profile/tester.tsx +10 -10
- package/templates/sampling/routes/quotes.tsx +1 -1
- package/templates/sampling/routes/system.tsx +1 -2
- package/templates/sampling/tests/access.spec.ts +29 -29
- package/templates/sampling/tests/counter.spec.ts +18 -18
- package/templates/sampling/tests/form.spec.ts +50 -50
- package/templates/sampling/tests/hello.spec.ts +24 -24
- package/templates/sampling/tests/path.test.ts +19 -19
- package/templates/minimal/components/hello.tsx +0 -9
- package/templates/minimal/components/icon.tsx +0 -11
@@ -1,59 +1,58 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
|
5
|
-
|
6
|
-
const
|
7
|
-
const
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
<
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
//
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
@
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
<
|
30
|
-
|
31
|
-
|
32
|
-
<
|
33
|
-
<input id='1'
|
34
|
-
<
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
<
|
40
|
-
<
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
<
|
46
|
-
<
|
47
|
-
<
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
<
|
52
|
-
<
|
53
|
-
|
54
|
-
<strong>
|
55
|
-
<strong>
|
56
|
-
|
57
|
-
|
58
|
-
</>
|
1
|
+
import React from 'react'
|
2
|
+
import { Header } from '../components/header'
|
3
|
+
import { seo, client, useStore } from '@reactful/client'
|
4
|
+
|
5
|
+
const state1 = useStore({ value:11 })
|
6
|
+
const state2 = useStore({ value:99 })
|
7
|
+
const styles = { textAlign: 'right' } as any
|
8
|
+
|
9
|
+
const SubGlobal = (props, { store }) => <input {...props} data={store} bind='value' />
|
10
|
+
|
11
|
+
const SubLocal= props => <>
|
12
|
+
<input {...props} style={styles} data={props} bind='value' />
|
13
|
+
<label> = {props.value}</label>
|
14
|
+
</>
|
15
|
+
|
16
|
+
//@ts-ignore
|
17
|
+
// @client(true, state1)
|
18
|
+
// TODO: inner component with same orbital state doesn't work ???
|
19
|
+
const SubOrbital = props => <input {...props} data={state1} bind='value' />
|
20
|
+
|
21
|
+
//@ts-ignore
|
22
|
+
@client(true, state1, state2)
|
23
|
+
@seo('Hello', 'Hello forms...')
|
24
|
+
export default function Hello(props, { store }: Feeds) {
|
25
|
+
if (globalThis.document) globalThis.props = props
|
26
|
+
|
27
|
+
return <>
|
28
|
+
<Header>Hello Forms</Header>
|
29
|
+
<main grid gaps='0 10px' cols={1} className='hello'>
|
30
|
+
<label>
|
31
|
+
<b>LOCAL state </b> <code>function(props)</code><br/>
|
32
|
+
<input id='1' data={props} bind="value" placeholder="{props}" />
|
33
|
+
<input id='1.1' bind="value" placeholder="default" />
|
34
|
+
<SubLocal id='1.1.1' placeholder="inner" />
|
35
|
+
</label>
|
36
|
+
|
37
|
+
<label>
|
38
|
+
<b>GLOBAL state</b> <code>function(props, {'{ store }'})</code><br/>
|
39
|
+
<input id='2' data={store} bind="value" placeholder="outer" />
|
40
|
+
<SubGlobal id='2.1' placeholder='inner' />
|
41
|
+
</label>
|
42
|
+
|
43
|
+
<label>
|
44
|
+
<b>ORBITAL state</b> <code>useStore(...) + @client(true, ...)</code><br/>
|
45
|
+
<input id='3' data={state1} bind="value" placeholder="outer" />
|
46
|
+
<SubOrbital id='3.1' placeholder='inner' />
|
47
|
+
<input id='3.2' style={styles} data={state2} bind="value" placeholder="other" /> = {state2.value}
|
48
|
+
</label>
|
49
|
+
</main>
|
50
|
+
<br />
|
51
|
+
<hr />
|
52
|
+
<code>
|
53
|
+
<strong>local</strong>: <label id='l1'>{ props.value }</label><br />
|
54
|
+
<strong>global</strong>: <label id='l2'>{ store.value }</label><br />
|
55
|
+
<strong>orbital</strong>: <label id='l3'>{ state1.value }</label>
|
56
|
+
</code>
|
57
|
+
</>
|
59
58
|
}
|
@@ -1,15 +1,15 @@
|
|
1
|
-
<head>
|
2
|
-
<title>Sample</title>
|
3
|
-
<meta name="description" content="Sample page">
|
4
|
-
<link type="component" href="../components/header.tsx" rel="Header" />
|
5
|
-
</head>
|
6
|
-
<body>
|
7
|
-
<!-- no {interpolation} -->
|
8
|
-
<Header title="HTML-X" />
|
9
|
-
<p>
|
10
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
11
|
-
Similique eum quaerat nesciunt est molestias accusantium
|
12
|
-
aut sit odit, vero voluptate iure vel aperiam modi libero
|
13
|
-
in praesentium nam obcaecati error!
|
14
|
-
</p>
|
1
|
+
<head>
|
2
|
+
<title>Sample</title>
|
3
|
+
<meta name="description" content="Sample page">
|
4
|
+
<link type="component" href="../components/header.tsx" rel="Header" />
|
5
|
+
</head>
|
6
|
+
<body>
|
7
|
+
<!-- no {interpolation} -->
|
8
|
+
<Header title="HTML-X" />
|
9
|
+
<p>
|
10
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
11
|
+
Similique eum quaerat nesciunt est molestias accusantium
|
12
|
+
aut sit odit, vero voluptate iure vel aperiam modi libero
|
13
|
+
in praesentium nam obcaecati error!
|
14
|
+
</p>
|
15
15
|
</body>
|
@@ -1,15 +1,15 @@
|
|
1
|
-
# Welcome
|
2
|
-
> with markdown (powered by marked)
|
3
|
-
|
4
|
-
| | |
|
5
|
-
| ----------------------: | ------------------------------------------------ |
|
6
|
-
| [About](/about) | Static generation (default) |
|
7
|
-
| [Clock](/clock) | Dynamic generation (with lazy) |
|
8
|
-
| [HTML-X](/htmlx) | HTML with JSX using link[type='component'] |
|
9
|
-
| [System](/system) | Server component |
|
10
|
-
| [Quotes](/quotes) | Periodic genreation |
|
11
|
-
| [Counter](/counter) | Client component |
|
12
|
-
| [Hello](/hello) | Stateful object + data bind props |
|
13
|
-
| [Forms](/forms) | reactful forms + validation API + RESTful action |
|
14
|
-
| [Login](/login) | reactful forms RESTful action authentication |
|
1
|
+
# Welcome
|
2
|
+
> with markdown (powered by marked)
|
3
|
+
|
4
|
+
| | |
|
5
|
+
| ----------------------: | ------------------------------------------------ |
|
6
|
+
| [About](/about) | Static generation (default) |
|
7
|
+
| [Clock](/clock) | Dynamic generation (with lazy) |
|
8
|
+
| [HTML-X](/htmlx) | HTML with JSX using link[type='component'] |
|
9
|
+
| [System](/system) | Server component |
|
10
|
+
| [Quotes](/quotes) | Periodic genreation |
|
11
|
+
| [Counter](/counter) | Client component |
|
12
|
+
| [Hello](/hello) | Stateful object + data bind props |
|
13
|
+
| [Forms](/forms) | reactful forms + validation API + RESTful action |
|
14
|
+
| [Login](/login) | reactful forms RESTful action authentication |
|
15
15
|
| [Profile](/profile/123) | Parametric (dynamic) routes with modular CSS |
|
@@ -1,36 +1,35 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
<label>
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
<
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
</fieldset>
|
1
|
+
import React from 'react'
|
2
|
+
import { Icon } from '../components'
|
3
|
+
import { client } from '@reactful/client'
|
4
|
+
|
5
|
+
//@ts-ignore
|
6
|
+
@client(true)
|
7
|
+
export default (props, feeds: Feeds) => <>
|
8
|
+
<h1><Icon id='user' />Login</h1>
|
9
|
+
|
10
|
+
<progress hidden={!feeds.await}>loading...</progress>
|
11
|
+
|
12
|
+
<form method="POST" data={props.user}
|
13
|
+
action="http://localhost:3000/api/auth"
|
14
|
+
bearer="access_token">
|
15
|
+
|
16
|
+
<section grid cols={1}>
|
17
|
+
<label>UserName<input bind="username" /></label>
|
18
|
+
<label>PassWord<input type="password" bind="password" /></label>
|
19
|
+
</section>
|
20
|
+
|
21
|
+
<button>Submit</button>
|
22
|
+
</form>
|
23
|
+
|
24
|
+
<fieldset shown={!!feeds.fails?.length}>
|
25
|
+
<legend>ERROR</legend>
|
26
|
+
<ul>{ feeds.fails?.map((x,i) => <li key={i}>{ x.error }</li>) }</ul>
|
27
|
+
</fieldset>
|
28
|
+
|
29
|
+
<br />
|
30
|
+
|
31
|
+
<fieldset style={{ wordBreak: 'break-all' }}>
|
32
|
+
<legend>token</legend>
|
33
|
+
{ sessionStorage.getItem("token") }
|
34
|
+
</fieldset>
|
36
35
|
</>
|
@@ -1,13 +1,13 @@
|
|
1
|
-
h1 {
|
2
|
-
color: dimgrey;
|
3
|
-
font-size: 1.7rem;
|
4
|
-
}
|
5
|
-
|
6
|
-
button {
|
7
|
-
padding: 10px 20px;
|
8
|
-
}
|
9
|
-
|
10
|
-
button.routed {
|
11
|
-
background: wheat;
|
12
|
-
font-weight: bolder;
|
1
|
+
h1 {
|
2
|
+
color: dimgrey;
|
3
|
+
font-size: 1.7rem;
|
4
|
+
}
|
5
|
+
|
6
|
+
button {
|
7
|
+
padding: 10px 20px;
|
8
|
+
}
|
9
|
+
|
10
|
+
button.routed {
|
11
|
+
background: wheat;
|
12
|
+
font-weight: bolder;
|
13
13
|
}
|
@@ -1,48 +1,47 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { client } from '@reactful/
|
3
|
-
import '
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
<
|
13
|
-
|
14
|
-
|
15
|
-
<
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
<button link='./
|
23
|
-
<button link='./
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
</>
|
1
|
+
import React from 'react'
|
2
|
+
import { client } from '@reactful/client'
|
3
|
+
import './detail.css'
|
4
|
+
|
5
|
+
const Tester = import('./tester').asLazyComponent("Tester")
|
6
|
+
|
7
|
+
//@ts-ignore
|
8
|
+
@client(true)
|
9
|
+
export function Detail(_, feeds: Feeds) {
|
10
|
+
return <>
|
11
|
+
<h3>Detail</h3>
|
12
|
+
Parametric value = <b>{ feeds.param.id }</b>
|
13
|
+
|
14
|
+
<hr />
|
15
|
+
<p>modular CSS keep original color</p>
|
16
|
+
|
17
|
+
<fieldset>
|
18
|
+
<legend>Mode</legend>
|
19
|
+
|
20
|
+
<section>
|
21
|
+
<button link='./developer'>developer</button>
|
22
|
+
<button link='./manager'>manager</button>
|
23
|
+
<button link='./tester'>tester (component)</button>
|
24
|
+
</section>
|
25
|
+
|
26
|
+
<hr/>
|
27
|
+
|
28
|
+
<section route='./developer'>
|
29
|
+
<b>DEVELOPER</b> is Lorem ipsum dolor sit amet consectetur
|
30
|
+
adipisicing elit. Aspernatur similique ipsa, molestiae
|
31
|
+
numquam laudantium quod, aliquid soluta cumque placeat
|
32
|
+
saepe mollitia sint consectetur labore consequatur
|
33
|
+
pariatur praesentium animi. Obcaecati, nihil?
|
34
|
+
</section>
|
35
|
+
|
36
|
+
<section route='./manager'>
|
37
|
+
<b>MANAGER</b> is Lorem ipsum dolor sit amet consectetur
|
38
|
+
adipisicing elit. Aspernatur similique ipsa, molestiae
|
39
|
+
numquam laudantium quod, aliquid soluta cumque placeat
|
40
|
+
saepe mollitia sint consectetur labore consequatur
|
41
|
+
pariatur praesentium animi. Obcaecati, nihil?
|
42
|
+
</section>
|
43
|
+
|
44
|
+
<Tester route='./tester' />
|
45
|
+
</fieldset>
|
46
|
+
</>
|
48
47
|
}
|
@@ -1,14 +1,14 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Detail } from './detail'
|
3
|
-
import { seo, route } from '@reactful/
|
4
|
-
import './profile.css'
|
5
|
-
|
6
|
-
//@ts-ignore
|
7
|
-
@route("/profile/:id")
|
8
|
-
@seo('Profile', 'Profile description')
|
9
|
-
export default () => <>
|
10
|
-
<h1>Profile</h1>
|
11
|
-
<Detail />
|
12
|
-
<hr/>
|
13
|
-
<p>modular CSS chainging to red</p>
|
1
|
+
import React from 'react'
|
2
|
+
import { Detail } from './detail'
|
3
|
+
import { seo, route } from '@reactful/client'
|
4
|
+
import './profile.css'
|
5
|
+
|
6
|
+
//@ts-ignore
|
7
|
+
@route("/profile/:id")
|
8
|
+
@seo('Profile', 'Profile description')
|
9
|
+
export default () => <>
|
10
|
+
<h1>Profile</h1>
|
11
|
+
<Detail />
|
12
|
+
<hr/>
|
13
|
+
<p>modular CSS chainging to red</p>
|
14
14
|
</>
|
@@ -1,8 +1,8 @@
|
|
1
|
-
h1 {
|
2
|
-
color: #ffb300;
|
3
|
-
}
|
4
|
-
|
5
|
-
p {
|
6
|
-
color:red;
|
7
|
-
}
|
8
|
-
|
1
|
+
h1 {
|
2
|
+
color: #ffb300;
|
3
|
+
}
|
4
|
+
|
5
|
+
p {
|
6
|
+
color:red;
|
7
|
+
}
|
8
|
+
|
@@ -1,11 +1,11 @@
|
|
1
|
-
import React from "react"
|
2
|
-
|
3
|
-
export function Tester() {
|
4
|
-
return <section>
|
5
|
-
<b>TESTER</b> is Lorem ipsum dolor sit amet consectetur
|
6
|
-
adipisicing elit. Aspernatur similique ipsa, molestiae
|
7
|
-
numquam laudantium quod, aliquid soluta cumque placeat
|
8
|
-
saepe mollitia sint consectetur labore consequatur
|
9
|
-
pariatur praesentium animi. Obcaecati, nihil?
|
10
|
-
</section>
|
1
|
+
import React from "react"
|
2
|
+
|
3
|
+
export function Tester() {
|
4
|
+
return <section>
|
5
|
+
<b>TESTER</b> is Lorem ipsum dolor sit amet consectetur
|
6
|
+
adipisicing elit. Aspernatur similique ipsa, molestiae
|
7
|
+
numquam laudantium quod, aliquid soluta cumque placeat
|
8
|
+
saepe mollitia sint consectetur labore consequatur
|
9
|
+
pariatur praesentium animi. Obcaecati, nihil?
|
10
|
+
</section>
|
11
11
|
}
|
@@ -1,29 +1,29 @@
|
|
1
|
-
import { test, expect } from '@playwright/test'
|
2
|
-
|
3
|
-
const cases = [
|
4
|
-
['/about', 'About'],
|
5
|
-
['/clock', 'World Clock'],
|
6
|
-
['/htmlx', 'HTML-X'],
|
7
|
-
['/system', 'Server OS'],
|
8
|
-
['/quotes', 'My custom error component', 'Philosophy quote of the day'],
|
9
|
-
['/counter', 'Counter'],
|
10
|
-
['/hello', 'Hello Forms'],
|
11
|
-
['/forms', 'Uncontrolled Components'],
|
12
|
-
['/profile/123', 'Profile'],
|
13
|
-
]
|
14
|
-
|
15
|
-
cases.forEach(function(scenario) {
|
16
|
-
const [ href, head, that ] = scenario
|
17
|
-
|
18
|
-
test(href, async ({ page }) => {
|
19
|
-
await page.goto('http://localhost:3000/')
|
20
|
-
await page.goto(href)
|
21
|
-
await page.waitForTimeout(333)
|
22
|
-
await page.waitForURL(`http://localhost:3000${href}`);
|
23
|
-
|
24
|
-
const h1 = await page.locator(`h1`).innerHTML()
|
25
|
-
const ok = [head,that].includes(h1)
|
26
|
-
|
27
|
-
if (!ok) expect(h1).toBe(that || head)
|
28
|
-
})
|
29
|
-
})
|
1
|
+
import { test, expect } from '@playwright/test'
|
2
|
+
|
3
|
+
const cases = [
|
4
|
+
['/about', 'About'],
|
5
|
+
['/clock', 'World Clock'],
|
6
|
+
['/htmlx', 'HTML-X'],
|
7
|
+
['/system', 'Server OS'],
|
8
|
+
['/quotes', 'My custom error component', 'Philosophy quote of the day'],
|
9
|
+
['/counter', 'Counter'],
|
10
|
+
['/hello', 'Hello Forms'],
|
11
|
+
['/forms', 'Uncontrolled Components'],
|
12
|
+
['/profile/123', 'Profile'],
|
13
|
+
]
|
14
|
+
|
15
|
+
cases.forEach(function(scenario) {
|
16
|
+
const [ href, head, that ] = scenario
|
17
|
+
|
18
|
+
test(href, async ({ page }) => {
|
19
|
+
await page.goto('http://localhost:3000/')
|
20
|
+
await page.goto(href)
|
21
|
+
await page.waitForTimeout(333)
|
22
|
+
await page.waitForURL(`http://localhost:3000${href}`);
|
23
|
+
|
24
|
+
const h1 = await page.locator(`h1`).innerHTML()
|
25
|
+
const ok = [head,that].includes(h1)
|
26
|
+
|
27
|
+
if (!ok) expect(h1).toBe(that || head)
|
28
|
+
})
|
29
|
+
})
|
@@ -1,19 +1,19 @@
|
|
1
|
-
import { test, expect } from '@playwright/test'
|
2
|
-
|
3
|
-
test('counter: statefull props', async ({ page }) => {
|
4
|
-
await page.goto('http://localhost:3000/counter')
|
5
|
-
await page.waitForTimeout(99)
|
6
|
-
await page.click('button', { delay:99 })
|
7
|
-
await page.click('button', { delay:99 })
|
8
|
-
await page.click('button', { delay:99 })
|
9
|
-
await page.waitForTimeout(99)
|
10
|
-
|
11
|
-
const btn = await page.locator('button').innerText()
|
12
|
-
expect(btn.trim()).toBe('COUNTED: 3')
|
13
|
-
})
|
14
|
-
|
15
|
-
test('counter: shown custom props directive', async ({ page }) => {
|
16
|
-
await page.goto('http://localhost:3000/counter')
|
17
|
-
const h2IsVisible = await page.locator('h6').isVisible()
|
18
|
-
expect(h2IsVisible).toBe(false)
|
1
|
+
import { test, expect } from '@playwright/test'
|
2
|
+
|
3
|
+
test('counter: statefull props', async ({ page }) => {
|
4
|
+
await page.goto('http://localhost:3000/counter')
|
5
|
+
await page.waitForTimeout(99)
|
6
|
+
await page.click('button', { delay:99 })
|
7
|
+
await page.click('button', { delay:99 })
|
8
|
+
await page.click('button', { delay:99 })
|
9
|
+
await page.waitForTimeout(99)
|
10
|
+
|
11
|
+
const btn = await page.locator('button').innerText()
|
12
|
+
expect(btn.trim()).toBe('COUNTED: 3')
|
13
|
+
})
|
14
|
+
|
15
|
+
test('counter: shown custom props directive', async ({ page }) => {
|
16
|
+
await page.goto('http://localhost:3000/counter')
|
17
|
+
const h2IsVisible = await page.locator('h6').isVisible()
|
18
|
+
expect(h2IsVisible).toBe(false)
|
19
19
|
})
|