@ fieldia/ 测试
测试 外地 应用程序中的窗体 当人们使用它们时:用其文字找到一个字段
标签,在其中键入并留下,从列表中选择,勾出一个框,用其词来按下一个按钮——然后读回一个人是什么
查看:一个字段的问题,它的警告,它的框显示什么. 同样的帮助者 测试库 (任何DOM: jsdom或
在Jest或Vitest, 或浏览器下快乐的境界)和用于 剧作家还有 fieldia-check,其中一行CI 保持
您的应用程序商店在升级后有效的页面.
npm install --save-dev @fieldia/testing
与测试库( Jest, Vitest)
import { mountViewer } from '@fieldia/viewer';
import { fieldia } from '@fieldia/testing';
test('a sign-up says what is missing', async () => {
const host = document.body.appendChild(document.createElement('div'));
const handle = mountViewer(host, { page, dataSource });
await handle.drawn; // the page drawn, every part it draws from in
const form = fieldia(host);
await form.fill('Email', 'mona@');
expect(form.errorsOf('Email')).toEqual(['Enter an email address, like [email protected]']);
await form.fill('Email', '[email protected]');
await form.pick('Country', 'Egypt');
await form.check('I agree to the terms');
await form.press('Submit');
expect(form.valueOf('Email')).toBe('[email protected]');
});
每一个步骤都会传递一个人会的事件——聚焦, beforeinput 每个密钥( 所以一个拒绝密钥的框, 字母)
在数字中,拒绝在这里, input, (中文(简体) ), change,然后离开盒子,在那里,菲尔迪亚说一个问题——并等待一个
打开窗体的事件循环。 不依赖任何测试库 : @testing-library/user-event手拿起来
框改为: await user.type(form.box('Email'), '[email protected]')。在假计时器下,告诉帮助者如何
等待时间 : fieldia(host, { settle: () => jest.advanceTimersByTimeAsync(0) })。 。 。 .
| 帮助 | 它会做什么 |
|---|---|
field(ref) | 字段的元素 (.fd-field) (中文(简体) ). 丢出, 命名显示的字段, 当没有或数个匹配时 . |
box(ref) | 人输入或选择的盒子. |
fill(ref, text) | 类型 text 代替盒子里的东西 一把钥匙 留下它. |
pick(ref, ...options) | 通过他们的单词来选择:列表的选项,收音机,在几个框中精确的这些框,Fieldia自己的列表或链接记录的选项(打出后再被按下). |
check(ref, on = true) | 滴答或不滴答一个"是"或"否"的盒子或开关. |
press(name) | 为屏幕阅读器按下按下单词或名称的按钮(Save, (中文(简体) ), Submit, (中文(简体) ), Add a line) (中文(简体) ). |
errorsOf(ref) 编号 : warningsOf(ref) | 问题/警告 球场说, 每一个字. |
valueOf(ref) | 它的框显示的是什么:它的文本;一个选择的单词(null ;每个框的词被勾选为若干个; true编号 :false 一个盒子。 从没有存储的值——从 handle.form.getState().values。 。 。 . |
read(ref) | 所有这一切一次: { label, value, errors, warnings }。 。 。 . |
labels() | 每个字段标签的字句都显示. |
一个字段被其标签的词命名为人们读取的字段——没有它所需要的标记,它的(?)或它的锁,或者,在哪里
两个字段共享标签, 按其字段: { field: 'email' }。 。 。 . fieldia(root) 取取该取景器挂入的元素,
或对话框,或默认整个文档.
与剧作家
import { expect, test } from '@playwright/test';
import { fieldia } from '@fieldia/testing/playwright';
test('a refused save lands on its field', async ({ page }) => {
await page.goto('/customers/42');
const form = fieldia(page); // or a dialog: fieldia(page.getByRole('dialog'))
await form.fill('Phone', '+20 2 1111 2222');
await form.press('Save');
await expect(await form.error('Email')).toHaveText('This email is already a customer’s');
await expect.poll(() => form.valueOf('Phone')).toBe('+20 2 1111 2222');
});
同样的帮助者,每一步 Playwright 自己的(fill, (中文(简体) ), selectOption, (中文(简体) ), check, (中文(简体) ), click),所以他们作为"剧作家"等待
等待时间; field, (中文(简体) ), box 财务报告和审定财务报表 error 给定定位器 expect。读取(errorsOf, (中文(简体) ), valueOf是时刻: 把它包起来
expect.poll。 。 。 . @playwright/test 是可选的对等点:帮助者只选择其类型.
fieldia-check 在 CI 语句中
npx fieldia-check pages/ # every .json in pages/ and the folders in it
npx fieldia-check pages/ --functions vat,fx # the names of your app's own functions its pages call
npx fieldia-check pages/ --strict # warnings fail too
每页都检查,因为Fieldia读它.. validatePage:格式的形状,每个字段都有布局名称,每个字段
及其警告。 它为每个文件打印出一个""或"",其中包含错误,缩进,
当拒绝时, 则退出 1 。 一个更古老的Fieldia保存的一页读作Fieldia读取,所以
升级后的检查显示您的存储页面是否还在绘制 。 在代码中 : checkPageFiles(pageFiles(['pages/']))
从 @fieldia/testing/pages。 。 。 .
许可证
麻省理工学院