Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: translate browser #561

Merged
merged 2 commits into from
Dec 23, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions guide/browser/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ outline: deep
此页面提供有关 Vitest API 中实验性浏览器模式功能的信息,该功能允许你在浏览器中本地运行测试,提供对窗口和文档等浏览器全局变量的访问。此功能目前正在开发中,API 未来可能会更改。

::: tip
If you are looking for documentation for `expect`, `vi` or any general API like workspaces or type testing, refer to the ["Getting Started" guide](/guide/).
如果你正在寻找关于 `expect``vi` 或任何通用 API(如工作区或类型测试)的文档,请参阅 ["入门指南"](./guide/)
:::

<img alt="Vitest UI" img-light src="/ui-browser-1-light.png">
Expand Down Expand Up @@ -206,8 +206,8 @@ import { defineWorkspace } from 'vitest/config'
export default defineWorkspace([
{
test: {
// an example of file based convention,
// you don't have to follow it
// 文件约定的示例,
// 你不必遵循它。
include: [
'tests/unit/**/*.{test,spec}.ts',
'tests/**/*.unit.{test,spec}.ts',
Expand All @@ -218,8 +218,8 @@ export default defineWorkspace([
},
{
test: {
// an example of file based convention,
// you don't have to follow it
// 文件约定的示例,
// 你不必遵循它。
include: [
'tests/browser/**/*.{test,spec}.ts',
'tests/**/*.browser.{test,spec}.ts',
Expand Down Expand Up @@ -409,14 +409,14 @@ import { render } from './my-render-function.js'
test('properly handles form inputs', async () => {
render() // mount DOM elements

// Asserts initial state.
// 断言初始状态。
await expect.element(page.getByText('Hi, my name is Alice')).toBeInTheDocument()

// Get the input DOM node by querying the associated label.
// 通过查询关联的标签获取输入的 DOM 节点。
const usernameInput = page.getByLabelText(/username/i)

// Type the name into the input. This already validates that the input
// is filled correctly, no need to check the value manually.
// 将名称输入到输入框中。
// 这已经验证了输入框中的值是正确的,无需手动检查其值。
await usernameInput.fill('Bob')

await expect.element(page.getByText('Hi, my name is Bob')).toBeInTheDocument()
Expand Down Expand Up @@ -456,14 +456,14 @@ import Component from './Component.vue'
test('properly handles v-model', async () => {
const screen = render(Component)

// Asserts initial state.
// 断言初始状态。
await expect.element(screen.getByText('Hi, my name is Alice')).toBeInTheDocument()

// Get the input DOM node by querying the associated label.
// 通过查询关联的标签获取输入的 DOM 节点。
const usernameInput = screen.getByLabelText(/username/i)

// Type the name into the input. This already validates that the input
// is filled correctly, no need to check the value manually.
// 将名称输入到输入框中。
// 这已经验证了输入框中的值是正确的,无需手动检查其值。
await usernameInput.fill('Bob')

await expect.element(screen.getByText('Hi, my name is Bob')).toBeInTheDocument()
Expand All @@ -490,14 +490,14 @@ import { render } from 'vitest-browser-react'
import Fetch from './fetch'

test('loads and displays greeting', async () => {
// Render a React element into the DOM
// 将一个 React 元素渲染到 DOM 中。
const screen = render(<Fetch url="/greeting" />)

await screen.getByText('Load Greeting').click()
// wait before throwing an error if it cannot find an element
// 如果找不到元素,则等待一段时间后再抛出错误。
const heading = screen.getByRole('heading')

// assert that the alert message is correct
// 断言警告消息是正确的。
await expect.element(heading).toHaveTextContent('hello there')
await expect.element(screen.getByRole('button')).toBeDisabled()
})
Expand Down Expand Up @@ -538,12 +538,12 @@ test('shows the children when the checkbox is checked', async () => {

const screen = page.elementLocator(baseElement)

// .query() will return the element or null if it cannot be found.
// .element() will return the element or throw an error if it cannot be found.
// .query() 将返回找到的元素或在未找到时返回 null
// .element() 会返回该元素,如果找不到该元素则会抛出错误。
expect(screen.getByText(testMessage).query()).not.toBeInTheDocument()

// The queries can accept a regex to make your selectors more
// resilient to content tweaks and changes.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

尽量保持一样的行数,方便后期 diff

// 查询可以接受正则表达式,
// 使选择器更能适应内容的调整和变化。
await screen.getByLabelText(/show/i).click()

await expect.element(screen.getByText(testMessage)).toBeInTheDocument()
Expand Down