@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.
Files changed (81) hide show
  1. package/commons/package.json +4 -5
  2. package/package.json +2 -2
  3. package/templates/minimal/builds/about.html +30 -0
  4. package/templates/minimal/builds/bundle.js +34981 -0
  5. package/templates/minimal/builds/bundle.ts +20 -0
  6. package/templates/minimal/builds/clock.html +30 -0
  7. package/templates/minimal/builds/counter.html +37 -0
  8. package/templates/minimal/builds/forms/form.html +48 -0
  9. package/templates/minimal/builds/forms/index.html +48 -0
  10. package/templates/minimal/builds/hello.html +62 -0
  11. package/templates/minimal/builds/htmlx.html +27 -0
  12. package/templates/minimal/builds/htmlx.tsx +13 -0
  13. package/templates/minimal/builds/index.html +98 -11
  14. package/templates/minimal/builds/login.html +48 -0
  15. package/templates/minimal/builds/profile/index.html +55 -0
  16. package/templates/minimal/builds/quotes.html +27 -0
  17. package/templates/minimal/builds/shared.js +76 -0
  18. package/templates/minimal/builds/system.html +28 -0
  19. package/templates/minimal/components/index.ts +1 -2
  20. package/templates/minimal/components/label.tsx +7 -0
  21. package/templates/minimal/index.html +12 -11
  22. package/templates/minimal/index.ts +2 -2
  23. package/templates/minimal/routes/hello.tsx +6 -0
  24. package/templates/minimal/routes/index.tsx +4 -7
  25. package/templates/sampling/apis/auth/db.ts +14 -14
  26. package/templates/sampling/apis/auth/index.ts +27 -27
  27. package/templates/sampling/apis/hello.ts +2 -2
  28. package/templates/sampling/apis/quotes.ts +15 -15
  29. package/templates/sampling/apis/sub/index.ts +2 -2
  30. package/templates/sampling/apis/sub/sub.ts +2 -2
  31. package/templates/sampling/assets/bootstrap-icons.css +4 -4
  32. package/templates/sampling/assets/default.css +93 -93
  33. package/templates/sampling/assets/icon.svg +6 -6
  34. package/templates/sampling/assets/manifest.json +56 -56
  35. package/templates/sampling/assets/markdown.css +273 -273
  36. package/templates/sampling/assets/robots.txt +1 -1
  37. package/templates/sampling/assets/system.css +6 -6
  38. package/templates/sampling/builds/about.html +30 -0
  39. package/templates/sampling/builds/bundle.js +34981 -0
  40. package/templates/sampling/builds/bundle.ts +20 -0
  41. package/templates/sampling/builds/clock.html +30 -0
  42. package/templates/sampling/builds/counter.html +37 -0
  43. package/templates/sampling/builds/forms/form.html +48 -0
  44. package/templates/sampling/builds/forms/index.html +48 -0
  45. package/templates/sampling/builds/hello.html +62 -0
  46. package/templates/sampling/builds/htmlx.html +27 -0
  47. package/templates/sampling/builds/htmlx.tsx +13 -0
  48. package/templates/sampling/builds/index.html +98 -98
  49. package/templates/sampling/builds/login.html +48 -0
  50. package/templates/sampling/builds/profile/index.html +55 -0
  51. package/templates/sampling/builds/quotes.html +27 -0
  52. package/templates/sampling/builds/shared.js +76 -0
  53. package/templates/sampling/builds/system.html +28 -0
  54. package/templates/sampling/components/header.tsx +6 -6
  55. package/templates/sampling/components/hello.tsx +8 -8
  56. package/templates/sampling/components/icon.tsx +10 -10
  57. package/templates/sampling/components/index.ts +2 -2
  58. package/templates/sampling/index.html +20 -20
  59. package/templates/sampling/index.ts +18 -18
  60. package/templates/sampling/routes/about.html +12 -12
  61. package/templates/sampling/routes/clock.tsx +32 -36
  62. package/templates/sampling/routes/counter.tsx +16 -7
  63. package/templates/sampling/routes/forms/form.tsx +49 -50
  64. package/templates/sampling/routes/hello.tsx +57 -58
  65. package/templates/sampling/routes/htmlx.html +14 -14
  66. package/templates/sampling/routes/index.md +14 -14
  67. package/templates/sampling/routes/login.tsx +34 -35
  68. package/templates/sampling/routes/profile/detail.css +12 -12
  69. package/templates/sampling/routes/profile/detail.tsx +46 -47
  70. package/templates/sampling/routes/profile/index.tsx +13 -13
  71. package/templates/sampling/routes/profile/profile.css +8 -8
  72. package/templates/sampling/routes/profile/tester.tsx +10 -10
  73. package/templates/sampling/routes/quotes.tsx +1 -1
  74. package/templates/sampling/routes/system.tsx +1 -2
  75. package/templates/sampling/tests/access.spec.ts +29 -29
  76. package/templates/sampling/tests/counter.spec.ts +18 -18
  77. package/templates/sampling/tests/form.spec.ts +50 -50
  78. package/templates/sampling/tests/hello.spec.ts +24 -24
  79. package/templates/sampling/tests/path.test.ts +19 -19
  80. package/templates/minimal/components/hello.tsx +0 -9
  81. package/templates/minimal/components/icon.tsx +0 -11
@@ -1,59 +1,58 @@
1
- import React from 'react'
2
- import { seo, client, useStore } from '@reactful/web'
3
- import { Header } from '../components/header'
4
- import '@reactful/extensions'
5
-
6
- const state1 = useStore({ value:11 })
7
- const state2 = useStore({ value:99 })
8
- const styles = { textAlign: 'right' } as any
9
-
10
- const SubGlobal = (props, { store }) => <input {...props} data={store} bind='value' />
11
-
12
- const SubLocal= props => <>
13
- <input {...props} style={styles} data={props} bind='value' />
14
- <label> = {props.value}</label>
15
- </>
16
-
17
- //@ts-ignore
18
- // @client(true, state1)
19
- // TODO: inner component with same orbital state doesn't work ???
20
- const SubOrbital = props => <input {...props} data={state1} bind='value' />
21
-
22
- //@ts-ignore
23
- @client(true, state1, state2)
24
- @seo('Hello', 'Hello forms...')
25
- export default function Hello(props, { store }: Feeds) {
26
- if (globalThis.document) globalThis.props = props
27
-
28
- return <>
29
- <Header>Hello Forms</Header>
30
- <main grid gaps='0 10px' cols={1} className='hello'>
31
- <label>
32
- <b>LOCAL state </b> <code>function(props)</code><br/>
33
- <input id='1' data={props} bind="value" placeholder="{props}" />
34
- <input id='1.1' bind="value" placeholder="default" />
35
- <SubLocal id='1.1.1' placeholder="inner" />
36
- </label>
37
-
38
- <label>
39
- <b>GLOBAL state</b> <code>function(props, {'{ store }'})</code><br/>
40
- <input id='2' data={store} bind="value" placeholder="outer" />
41
- <SubGlobal id='2.1' placeholder='inner' />
42
- </label>
43
-
44
- <label>
45
- <b>ORBITAL state</b> <code>useStore(...) + @client(true, ...)</code><br/>
46
- <input id='3' data={state1} bind="value" placeholder="outer" />
47
- <SubOrbital id='3.1' placeholder='inner' />
48
- <input id='3.2' style={styles} data={state2} bind="value" placeholder="other" /> = {state2.value}
49
- </label>
50
- </main>
51
- <br />
52
- <hr />
53
- <code>
54
- <strong>local</strong>: <label id='l1'>{ props.value }</label><br />
55
- <strong>global</strong>: <label id='l2'>{ store.value }</label><br />
56
- <strong>orbital</strong>: <label id='l3'>{ state1.value }</label>
57
- </code>
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 { client } from '@reactful/web'
3
- import { Icon } from '../components'
4
- import '@reactful/extensions'
5
-
6
- //@ts-ignore
7
- @client(true)
8
- export default (props, feeds: Feeds) => <>
9
- <h1><Icon id='user' />Login</h1>
10
-
11
- <progress hidden={!feeds.await}>loading...</progress>
12
-
13
- <form method="POST" data={props.user}
14
- action="http://localhost:3000/api/auth"
15
- bearer="access_token">
16
-
17
- <section grid cols={1}>
18
- <label>UserName<input bind="username" /></label>
19
- <label>PassWord<input type="password" bind="password" /></label>
20
- </section>
21
-
22
- <button>Submit</button>
23
- </form>
24
-
25
- <fieldset shown={!!feeds.fails?.length}>
26
- <legend>ERROR</legend>
27
- <ul>{ feeds.fails?.map((x,i) => <li key={i}>{ x.error }</li>) }</ul>
28
- </fieldset>
29
-
30
- <br />
31
-
32
- <fieldset style={{ wordBreak: 'break-all' }}>
33
- <legend>token</legend>
34
- { sessionStorage.getItem("token") }
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/web'
3
- import '@reactful/extensions'
4
- import './detail.css'
5
-
6
- const Tester = import('./tester').asLazyComponent("Tester")
7
-
8
- //@ts-ignore
9
- @client(true)
10
- export function Detail(_, feeds: Feeds) {
11
- return <>
12
- <h3>Detail</h3>
13
- Parametric value = <b>{ feeds.param.id }</b>
14
-
15
- <hr />
16
- <p>modular CSS keep original color</p>
17
-
18
- <fieldset>
19
- <legend>Mode</legend>
20
-
21
- <section>
22
- <button link='./developer'>developer</button>
23
- <button link='./manager'>manager</button>
24
- <button link='./tester'>tester (component)</button>
25
- </section>
26
-
27
- <hr/>
28
-
29
- <section route='./developer'>
30
- <b>DEVELOPER</b> is Lorem ipsum dolor sit amet consectetur
31
- adipisicing elit. Aspernatur similique ipsa, molestiae
32
- numquam laudantium quod, aliquid soluta cumque placeat
33
- saepe mollitia sint consectetur labore consequatur
34
- pariatur praesentium animi. Obcaecati, nihil?
35
- </section>
36
-
37
- <section route='./manager'>
38
- <b>MANAGER</b> is Lorem ipsum dolor sit amet consectetur
39
- adipisicing elit. Aspernatur similique ipsa, molestiae
40
- numquam laudantium quod, aliquid soluta cumque placeat
41
- saepe mollitia sint consectetur labore consequatur
42
- pariatur praesentium animi. Obcaecati, nihil?
43
- </section>
44
-
45
- <Tester route='./tester' />
46
- </fieldset>
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/web'
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,5 +1,5 @@
1
1
  import React from 'react'
2
- import { seo, server, error } from '@reactful/web'
2
+ import { seo, server, error } from '@reactful/client'
3
3
 
4
4
  //@ts-ignore
5
5
  @server("periodic", "30min")
@@ -1,7 +1,6 @@
1
1
  import OS from "os"
2
2
  import React from "react"
3
- import { seo, style } from '@reactful/web'
4
- import '@reactful/extensions'
3
+ import { seo, style } from '@reactful/client'
5
4
 
6
5
  const metatags: MetaTags = {
7
6
  charset:"UTF-16",
@@ -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
  })