@reactful/create 0.0.92 → 0.0.95

package/templates/sampling/routes/system.tsx

@@ -0,0 +1,23 @@
+import OS from "os"
+import React from "react"
+import { seo, style } from '@reactful/web'
+
+const metatags: MetaTags = { 
+   charset:"UTF-16", 
+   rating:"general", 
+   keywords:"hello, hi" 
+}
+
+//@ts-ignore
+@seo('System', metatags)
+@style('/assets/system.css')
+export default function System() {
+   const [ type, arch, release ] = [OS.type(), OS.arch(), OS.release()]
+
+   return <>
+      <h1>Server OS</h1>
+      <h2>server side information</h2>
+      <pre>{type} | {arch} | {release} </pre>
+      <section shown={false}>DONT SHOW ME!</section>
+   </>
+}

package/templates/sampling/tests/access.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test'
+
+const cases = [
+   ['/about', 'About'],
+   ['/clock', 'World Clock'],
+   ['/htmlx', 'HTML-X'],
+   ['/system', 'Server OS'],
+   ['/quotes', 'My custom error component', 'Philosophy quote of the day'],
+   ['/counter', 'Counter'],
+   ['/hello', 'Hello Forms'],
+   ['/forms', 'Uncontrolled Components'],
+   ['/profile/123', 'Profile'],
+]
+
+cases.forEach(function(scenario) {
+   const [ href, head, that ] = scenario
+
+   test(href, async ({ page }) => {
+      await page.goto('http://localhost:3000/')
+      await page.goto(href)
+      await page.waitForTimeout(333)
+      await page.waitForURL(`http://localhost:3000${href}`);
+
+      const h1 = await page.locator(`h1`).innerHTML()    
+      const ok = [head,that].includes(h1)
+
+      if (!ok) expect(h1).toBe(that || head)      
+    })
+})

package/templates/sampling/tests/counter.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('counter: statefull props', async ({ page }) => {
+   await page.goto('http://localhost:3000/counter')
+   await page.waitForTimeout(99)   
+   await page.click('button', { delay:99 })
+   await page.click('button', { delay:99 })
+   await page.click('button', { delay:99 })
+   await page.waitForTimeout(99)
+
+   const btn = await page.locator('button').innerText()
+   expect(btn.trim()).toBe('COUNTED: 3')
+ })
+
+ test('counter: shown custom props directive', async ({ page }) => {
+   await page.goto('http://localhost:3000/counter')
+   const h2IsVisible = await page.locator('h6').isVisible()   
+   expect(h2IsVisible).toBe(false)
+ })

package/templates/sampling/tests/form.spec.ts

@@ -0,0 +1,51 @@
+// import { test, expect } from '@playwright/test'
+
+// async function goto(page) {
+//    await page.goto('http://localhost:3000/forms')
+//    await page.waitForTimeout(1500) 
+// }
+
+// test(`form validation: checkbox`, async function({ page }) {
+//    await goto(page)
+//    await page.click('button', { delay:333 })
+
+//    const check = await page.locator('[type="checkbox"]')
+//    const checkHandle = await check!.evaluateHandle(x => x['validationMessage'])
+//    const validationMessage = await checkHandle.jsonValue()
+
+//    expect(validationMessage).toBe('Please check this box if you want to proceed')
+// })
+
+// test(`form validation: input`, async function({ page }) {
+//    await goto(page)
+//    await page.click('[uid="14"]')
+//    await page.click('button', { delay:333 })
+
+//    const input = await page.evaluate(() => document.querySelector('[bind="mode"]'))
+//    const validationMessage = input && input['validationMessage']
+
+//    // const input = await page.$('[bind="mode"]');
+//    // const inputHandle = await input!.evaluateHandle(x => x['validationMessage'])
+//    // const validationMessage = await inputHandle.jsonValue()
+
+//    expect(validationMessage).toBe('Mode is required!')
+// })
+
+// test(`form action: errors feedback`, async function({ page }) {
+//    await goto(page)
+
+//    const checkbox = await page.getByLabel('Accepted?')
+//    await checkbox.click()
+
+//    await page.getByLabel('Accepted?').click()
+//    await page.fill('[bind="mode"]', 'ok', { timeout:99 })
+//    await page.click('button', { delay:333 })
+
+//    const progress = await page.locator('progress').isVisible()
+//    expect(progress).toBe(true)
+
+//    await page.waitForTimeout(333)
+
+//    const li = await page.locator('ul > li').innerHTML()
+//    expect(li).toContain('URL not found')
+// })

package/templates/sampling/tests/hello.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+const cases = [
+   ['local', 'hi!', '[id="1"]', '#l1'],
+   ['global (outer)', 'hi!', '[id="2"]', '#l2'],
+   ['global (inner)', 'hi!', '[id="3"]', '#l2'],
+]
+
+cases.forEach(function(scenario) {
+   const [ scope, text, inputId, labelId ] = scenario
+
+   test(`hello: ${scope} props binding`, async function({ page }) {
+      await page.goto('http://localhost:3000/hello')
+      await page.waitForTimeout(99) 
+
+      for await (const char of text.split('')) {
+         await page.waitForTimeout(99) 
+         await page.type(inputId, char, { delay: 99 })
+      }
+
+      await page.waitForTimeout(99) 
+      const result = await page.locator(labelId).innerText()
+      expect(result).toBe(text)
+   })
+})

package/templates/sampling/tests/path.test.ts

@@ -0,0 +1,20 @@
+import { test, expect } from 'bun:test'
+
+const scenarios = [
+   ['url', '/routes', '/'],
+   ['sub url', '/routes/sub', '/sub'],
+   ['http', 'http://domain.com/routes', '/'],
+   ['https', 'https://domain.com/routes', '/'],
+   ['https port', 'https://domain.com:3000/routes', '/'],
+   ['https port file', 'https://domain.com:3000/routes/file.tsx', '/file'],
+   ['https port index', 'https://domain.com:3000/routes/index', '/'],
+   ['https port sub file', 'https://domain.com:3000/routes/sub/file.tsx', '/sub/file'],
+]
+
+scenarios.forEach(function([ scenario, sampling, expected ]) {   
+   test(`new Path(url).href: ${scenario}`, function() {  
+      const resulted = new URL(sampling).pathname
+      expect(resulted).toBe(expected as any)
+      // console.log('sampling:', sampling)
+   })
+})