From 5055c9b75522845e336cf946d0e2b49d0560db8a Mon Sep 17 00:00:00 2001 From: xupea Date: Wed, 12 Oct 2022 14:38:16 +0800 Subject: [PATCH] feat: support zh-Hans --- .gitignore | 1 - docusaurus.config.js | 9 + i18n/zh-Hans/code.json | 471 ++++++++++++++ .../options.json | 14 + .../current.json | 82 +++ .../current/angular-testing-library/api.mdx | 455 +++++++++++++ .../angular-testing-library/examples.mdx | 131 ++++ .../current/angular-testing-library/faq.mdx | 107 ++++ .../current/angular-testing-library/intro.mdx | 45 ++ .../bs-react-testing-library/examples.mdx | 133 ++++ .../bs-react-testing-library/intro.mdx | 72 +++ .../current/contributing.mdx | 49 ++ .../current/cypress-testing-library/intro.mdx | 69 ++ .../dom-testing-library/api-accessibility.mdx | 82 +++ .../current/dom-testing-library/api-async.mdx | 124 ++++ .../dom-testing-library/api-configuration.mdx | 113 ++++ .../api-custom-queries.mdx | 111 ++++ .../dom-testing-library/api-debugging.mdx | 123 ++++ .../dom-testing-library/api-events.mdx | 157 +++++ .../dom-testing-library/api-within.mdx | 52 ++ .../current/dom-testing-library/api.mdx | 14 + .../dom-testing-library/cheatsheet.mdx | 154 +++++ .../dom-testing-library/example-intro.mdx | 71 +++ .../current/dom-testing-library/faq.mdx | 121 ++++ .../current/dom-testing-library/install.mdx | 60 ++ .../current/dom-testing-library/intro.mdx | 34 + .../current/dom-testing-library/setup.mdx | 31 + .../current/ecosystem-bs-jest-dom.mdx | 58 ++ .../ecosystem-eslint-plugin-jest-dom.mdx | 18 + ...cosystem-eslint-plugin-testing-library.mdx | 22 + .../current/ecosystem-jasmine-dom.mdx | 30 + .../current/ecosystem-jest-dom.mdx | 38 ++ .../current/ecosystem-jest-native.mdx | 32 + .../current/ecosystem-query-extensions.mdx | 14 + .../current/ecosystem-react-select-event.mdx | 41 ++ .../ecosystem-riot-testing-library.mdx | 32 + .../current/ecosystem-rtl-simple-queries.md | 25 + .../ecosystem-testing-library-selector.md | 43 ++ .../current/ecosystem-user-event.mdx | 598 ++++++++++++++++++ .../current/example-codesandbox.mdx | 26 + .../current/example-drag.mdx | 102 +++ .../current/example-external.mdx | 28 + .../current/example-findByText.md | 135 ++++ .../current/example-formik.md | 82 +++ .../current/example-input-event.mdx | 67 ++ .../current/example-reach-router.mdx | 106 ++++ .../current/example-react-context.mdx | 78 +++ .../example-react-hooks-useReducer.mdx | 70 ++ .../current/example-react-intl.mdx | 144 +++++ .../current/example-react-modal.mdx | 55 ++ .../current/example-react-redux.mdx | 7 + .../current/example-react-router.mdx | 215 +++++++ .../example-react-transition-group.mdx | 102 +++ .../current/example-update-props.mdx | 37 ++ .../current/guide-disappearance.mdx | 94 +++ .../current/guide-events.mdx | 56 ++ .../current/guides-using-fake-timers.mdx | 43 ++ .../current/guiding-principles.mdx | 29 + .../current/intro.mdx | 56 ++ .../current/learning.mdx | 62 ++ .../current/marko-testing-library/api.mdx | 271 ++++++++ .../current/marko-testing-library/intro.mdx | 41 ++ .../current/marko-testing-library/setup.mdx | 74 +++ .../nightwatch-testing-library/intro.mdx | 127 ++++ .../current/pptr-testing-library/intro.mdx | 75 +++ .../current/preact-testing-library/api.mdx | 151 +++++ .../preact-testing-library/example.mdx | 59 ++ .../current/preact-testing-library/intro.mdx | 39 ++ .../current/preact-testing-library/learn.mdx | 27 + .../current/queries/about.mdx | 368 +++++++++++ .../current/queries/byalttext.mdx | 71 +++ .../current/queries/bydisplayvalue.mdx | 152 +++++ .../current/queries/bylabeltext.mdx | 129 ++++ .../current/queries/byplaceholdertext.mdx | 67 ++ .../current/queries/byrole.mdx | 306 +++++++++ .../current/queries/bytestid.mdx | 77 +++ .../current/queries/bytext.mdx | 87 +++ .../current/queries/bytitle.mdx | 72 +++ .../react-hooks-testing-library/api.mdx | 346 ++++++++++ .../react-hooks-testing-library/install.mdx | 33 + .../react-hooks-testing-library/intro.mdx | 31 + .../react-hooks-testing-library/usage.mdx | 0 .../example-intro.mdx | 50 ++ .../react-native-testing-library/intro.mdx | 46 ++ .../react-native-testing-library/setup.mdx | 72 +++ .../current/react-testing-library/api.mdx | 394 ++++++++++++ .../react-testing-library/cheatsheet.mdx | 174 +++++ .../react-testing-library/example-intro.mdx | 288 +++++++++ .../current/react-testing-library/faq.mdx | 259 ++++++++ .../current/react-testing-library/intro.mdx | 66 ++ .../migrate-from-enzyme.mdx | 306 +++++++++ .../current/react-testing-library/setup.mdx | 474 ++++++++++++++ .../current/recipes.mdx | 6 + .../current/svelte-testing-library/api.mdx | 141 +++++ .../svelte-testing-library/example.mdx | 54 ++ .../current/svelte-testing-library/intro.mdx | 40 ++ .../current/svelte-testing-library/setup.mdx | 167 +++++ .../testcafe-testing-library/intro.mdx | 180 ++++++ .../current/user-event/api-clipboard.mdx | 42 ++ .../current/user-event/api-convenience.mdx | 83 +++ .../current/user-event/api-keyboard.mdx | 74 +++ .../current/user-event/api-pointer.mdx | 125 ++++ .../current/user-event/api-utility.mdx | 180 ++++++ .../current/user-event/install.mdx | 33 + .../current/user-event/intro.mdx | 75 +++ .../current/user-event/options.mdx | 129 ++++ .../current/user-event/setup.mdx | 41 ++ .../current/vue-testing-library/api.mdx | 215 +++++++ .../vue-testing-library/cheatsheet.mdx | 108 ++++ .../current/vue-testing-library/examples.mdx | 105 +++ .../current/vue-testing-library/faq.mdx | 162 +++++ .../current/vue-testing-library/intro.mdx | 57 ++ .../current/vue-testing-library/setup.mdx | 16 + .../webdriverio-testing-library/intro.mdx | 220 +++++++ .../docusaurus-theme-classic/footer.json | 58 ++ .../docusaurus-theme-classic/navbar.json | 22 + package.json | 2 +- src/pages/help.js | 137 ++-- src/pages/index.js | 100 ++- 119 files changed, 12672 insertions(+), 62 deletions(-) create mode 100644 i18n/zh-Hans/code.json create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-blog/options.json create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current.json create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/api.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/examples.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/faq.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/examples.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/contributing.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/cypress-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-accessibility.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-async.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-configuration.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-custom-queries.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-debugging.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-events.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-within.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/cheatsheet.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/example-intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/faq.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/install.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/setup.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-bs-jest-dom.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-eslint-plugin-jest-dom.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-eslint-plugin-testing-library.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-jasmine-dom.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-jest-dom.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-jest-native.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-query-extensions.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-react-select-event.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-riot-testing-library.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-rtl-simple-queries.md create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-testing-library-selector.md create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/ecosystem-user-event.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-codesandbox.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-drag.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-external.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-findByText.md create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-formik.md create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-input-event.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-reach-router.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-react-context.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-react-hooks-useReducer.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-react-intl.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-react-modal.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-react-redux.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-react-router.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-react-transition-group.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/example-update-props.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/guide-disappearance.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/guide-events.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides-using-fake-timers.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/guiding-principles.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/learning.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/marko-testing-library/api.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/marko-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/marko-testing-library/setup.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/nightwatch-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/pptr-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/preact-testing-library/api.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/preact-testing-library/example.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/preact-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/preact-testing-library/learn.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/queries/about.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/queries/byalttext.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/queries/bydisplayvalue.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/queries/bylabeltext.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/queries/byplaceholdertext.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/queries/byrole.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/queries/bytestid.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/queries/bytext.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/queries/bytitle.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-hooks-testing-library/api.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-hooks-testing-library/install.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-hooks-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-hooks-testing-library/usage.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-native-testing-library/example-intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-native-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-native-testing-library/setup.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-testing-library/api.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-testing-library/cheatsheet.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-testing-library/example-intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-testing-library/faq.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-testing-library/migrate-from-enzyme.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/react-testing-library/setup.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/recipes.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/svelte-testing-library/api.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/svelte-testing-library/example.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/svelte-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/svelte-testing-library/setup.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/testcafe-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-event/api-clipboard.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-event/api-convenience.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-event/api-keyboard.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-event/api-pointer.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-event/api-utility.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-event/install.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-event/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-event/options.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/user-event/setup.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/vue-testing-library/api.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/vue-testing-library/cheatsheet.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/vue-testing-library/examples.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/vue-testing-library/faq.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/vue-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/vue-testing-library/setup.mdx create mode 100644 i18n/zh-Hans/docusaurus-plugin-content-docs/current/webdriverio-testing-library/intro.mdx create mode 100644 i18n/zh-Hans/docusaurus-theme-classic/footer.json create mode 100644 i18n/zh-Hans/docusaurus-theme-classic/navbar.json diff --git a/.gitignore b/.gitignore index 5c447595..0a9a8aab 100755 --- a/.gitignore +++ b/.gitignore @@ -8,7 +8,6 @@ lib/core/MetadataBlog.js translated_docs build/ -i18n/* .docusaurus .cache-loader diff --git a/docusaurus.config.js b/docusaurus.config.js index 8357abc0..6500bde8 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -215,6 +215,7 @@ module.exports = { remarkPlugins: [ [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }], ], + editLocalizedFiles: true, editUrl: 'https://github.com/testing-library/testing-library-docs/edit/main/', path: './docs', @@ -263,6 +264,10 @@ module.exports = { label: 'Examples', position: 'left', }, + { + type: 'localeDropdown', + position: 'right', + }, { to: '/help', label: 'Help', @@ -356,4 +361,8 @@ module.exports = { indexName: 'testing-library', }, }, + i18n: { + defaultLocale: 'en', + locales: ['en', 'zh-Hans'] + } } diff --git a/i18n/zh-Hans/code.json b/i18n/zh-Hans/code.json new file mode 100644 index 00000000..db1cc877 --- /dev/null +++ b/i18n/zh-Hans/code.json @@ -0,0 +1,471 @@ +{ + "theme.ErrorPageContent.title": { + "message": "页面已崩溃。", + "description": "The title of the fallback page when the page crashed" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "重试", + "description": "The label of the button to try again when the page crashed" + }, + "theme.NotFound.title": { + "message": "找不到页面", + "description": "The title of the 404 page" + }, + "theme.NotFound.p1": { + "message": "我们找不到您要找的页面。", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "请联系原始链接来源网站的所有者，并告知他们链接已损坏。", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "关闭", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.admonition.note": { + "message": "备注", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "提示", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.danger": { + "message": "危险", + "description": "The default label used for the Danger admonition (:::danger)" + }, + "theme.admonition.info": { + "message": "信息", + "description": "The default label used for the Info admonition (:::info)" + }, + "theme.admonition.caution": { + "message": "警告", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "回到顶部", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.archive.title": { + "message": "历史博文", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "历史博文", + "description": "The page & hero description of the blog archive page" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "博文列表分页导航", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "较新的博文", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "较旧的博文", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "博文分页导航", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "较新一篇", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "较旧一篇", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.blog.post.plurals": { + "message": "{count} 篇博文", + "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.blog.tagTitle": { + "message": "{nPosts} 含有标签「{tagName}」", + "description": "The title of the page for a blog tag" + }, + "theme.tags.tagsPageLink": { + "message": "查看所有标签", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel": { + "message": "切换浅色/暗黑模式（当前为{mode}）", + "description": "The ARIA label for the navbar color mode toggle" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "暗黑模式", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "浅色模式", + "description": "The name for the light color mode" + }, + "theme.docs.breadcrumbs.home": { + "message": "主页面", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "页面路径", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.DocCard.categoryDescription": { + "message": "{count} 个项目", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "文档分页导航", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "上一页", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "下一页", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "{count} 篇文档带有标签", + "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.docs.tagDocListPageTitle": { + "message": "{nDocsTagged}「{tagName}」", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versionBadge.label": { + "message": "版本：{versionLabel}" + }, + "theme.common.editThisPage": { + "message": "编辑此页", + "description": "The link label to edit the current page" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "此为 {siteTitle} {versionLabel} 版尚未发行的文档。", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "此为 {siteTitle} {versionLabel} 版的文档，现已不再积极维护。", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "最新的文档请参阅 {latestVersionLink} ({versionLabel})。", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "最新版本", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.headingLinkTitle": { + "message": "标题的直接链接", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": "于 {date} ", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": "由 {user} ", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "最后{byUser}{atDate}更新", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "选择版本", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.common.skipToMainContent": { + "message": "跳到主要内容", + "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation" + }, + "theme.tags.tagsListLabel": { + "message": "标签：", + "description": "The label alongside a tag list" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "最近博文导航", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.CodeBlock.copied": { + "message": "复制成功", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "复制代码到剪贴板", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.copy": { + "message": "复制", + "description": "The copy button label on code blocks" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "切换自动换行", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": { + "message": "打开/收起侧边栏菜单「{label}」", + "description": "The ARIA label to toggle the collapsible sidebar category" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "选择语言", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "本页总览", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readMore": { + "message": "阅读更多", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "阅读 {title} 的全文", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.blog.post.readingTime.plurals": { + "message": "阅读需 {readingTime} 分钟", + "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "收起侧边栏", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "收起侧边栏", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "展开侧边栏", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "展开侧边栏", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← 回到主菜单", + "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "找到 {count} 份文件", + "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.SearchPage.existingResultsTitle": { + "message": "「{query}」的搜索结果", + "description": "The search page title for non-empty query" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "在文档中搜索", + "description": "The search page title for empty query" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "在此输入搜索字词", + "description": "The placeholder for search page input" + }, + "theme.SearchPage.inputLabel": { + "message": "搜索", + "description": "The ARIA label for search page input" + }, + "theme.SearchPage.algoliaLabel": { + "message": "通过 Algolia 搜索", + "description": "The ARIA label for Algolia mention" + }, + "theme.SearchPage.noResultsText": { + "message": "未找到任何结果", + "description": "The paragraph for empty search result" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "正在获取新的搜索结果...", + "description": "The paragraph for fetching new search results" + }, + "theme.SearchBar.seeAll": { + "message": "查看全部 {count} 个结果" + }, + "theme.SearchBar.label": { + "message": "搜索", + "description": "The ARIA label and placeholder for search button" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "清除查询", + "description": "The label and ARIA label for search box reset button" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "取消", + "description": "The label and ARIA label for search box cancel button" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "最近搜索", + "description": "The title for recent searches" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "没有最近搜索", + "description": "The text when no recent searches" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "保存这个搜索", + "description": "The label for save recent search button" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "从历史记录中删除这个搜索", + "description": "The label for remove recent search button" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "收藏", + "description": "The title for favorite searches" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "从收藏列表中删除这个搜索", + "description": "The label for remove favorite search button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "无法获取结果", + "description": "The title for error screen of search modal" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "你可能需要检查网络连接。", + "description": "The help text for error screen of search modal" + }, + "theme.SearchModal.footer.selectText": { + "message": "选中", + "description": "The explanatory text of the action for the enter key" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "Enter 键", + "description": "The ARIA label for the Enter key button that makes the selection" + }, + "theme.SearchModal.footer.navigateText": { + "message": "导航", + "description": "The explanatory text of the action for the Arrow up and Arrow down key" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "向上键", + "description": "The ARIA label for the Arrow up key button that makes the navigation" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "向下键", + "description": "The ARIA label for the Arrow down key button that makes the navigation" + }, + "theme.SearchModal.footer.closeText": { + "message": "关闭", + "description": "The explanatory text of the action for Escape key" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Esc 键", + "description": "The ARIA label for the Escape key button that close the modal" + }, + "theme.SearchModal.footer.searchByText": { + "message": "搜索提供", + "description": "The text explain that the search is making by Algolia" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "没有结果：", + "description": "The text explains that there are no results for the following search" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "试试搜索", + "description": "The text for the suggested query when no results are found for the following search" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "认为这个查询应该有结果？", + "description": "The text for the question where the user thinks there are missing results" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "请告知我们。", + "description": "The text for the link to report missing results" + }, + "theme.SearchModal.placeholder": { + "message": "搜索文档", + "description": "The placeholder of the input of the DocSearch pop-up modal" + }, + "pages.index.tagline": { + "message": "简单且完整的测试工具有助于鼓励好的测试实践" + }, + "pages.index.Get Started": { + "message": "快速上手" + }, + "pages.index.Write Maintainable Tests.title": { + "message": "编写可维护的测试" + }, + "pages.index.Write Maintainable Tests.content": { + "message": "测试仅在你的应用程序中断时中断，而不是取决于实现细节" + }, + "pages.index.Develop with Confidence.title": { + "message": "充满信心地开发" + }, + "pages.index.Develop with Confidence.content": { + "message": "以与用户相同的方式与你的应用交互" + }, + "pages.index.Accessible by Default.title": { + "message": "默认无障碍访问" + }, + "pages.index.Accessible by Default.content": { + "message": "内置的选择器查找元素的方式和真正用户操作类似，写出更具包容性的测试代码" + }, + "pages.index.The Problem": { + "message": "## 问题 \n - 你希望你的 UI 测试可以避免包含实现细节，并且专注于提升开发者的信心。 \n - 你希望你的测试代码是可维护的，因此重构 _(对实现的更改但不是功能的更改)_ 不会破坏你的测试并减慢团队的开发速度。" + }, + "pages.index.The Solution": { + "message": "## 解决方案 \n Testing Library 系列包是一个轻量级的解决方案，无需所有的实现细节。它提供的元素查询功能和真正用户查找类似。通过这种方式，testing-library 有助于确保你的测试让你对 UI 代码充满信心。" + }, + "pages.index.Guiding Principle": { + "message": "指导原则" + }, + "pages.index.Guiding Principle.content": { + "message": "测试代码与你的软件使用方式越相似，它们能给你的信心就越大。" + }, + "pages.index.Who is Using This": { + "message": "谁在使用？" + }, + "pages.index.More Users": { + "message": "更多使用 {title} 的用户" + }, + "pages.index.Awards": { + "message": "荣获奖项" + }, + "pages.help.Need help": { + "message": "需要帮助？" + }, + "pages.help.stackOverflow": { + "message": "在 [Stack Overflow](https://stackoverflow.com/questions/tagged/react-testing-library) 上提问" + }, + "pages.help.spectrum": { + "message": "在 [Spectrum](https://spectrum.chat/testing-library) 上与社区成员讨论问题" + }, + "pages.help.discord": { + "message": "在 [Discord](https://discord.gg/testing-library) 上讨论" + }, + "pages.help.blog": { + "message": "关注 [博客]({baseUrl}blog)，获取最新动态" + }, + "pages.help.resources": { + "message": "浏览 [学习资料](/docs/learning)" + }, + "pages.help.github": { + "message": "在 [GitHub]({repoUrl}) 上获得支持" + }, + "pages.help.Buy a Course": { + "message": "购买在线课程" + }, + "pages.help.Buy a Course.content": { + "message": "在 {testingjavascript} 上和 Testing Library 的作者 {kentcdodds} 一起学习如何测试 JavaScript。" + }, + "pages.help.Want to help": { + "message": "想要提供帮助？" + }, + "pages.help.Help maintain": { + "message": "谢谢！Testing Library 的维护者们很乐意与你以及社区一起维护这个库。我们不是在寻找资金资助，但我们需要每个人都能参与进来，使这个项目和社区取得成功，并从长远地改善每个人的测试能力。" + }, + "pages.help.Help answer question": { + "message": "你可以通过上面的帮助链接帮助我们回答社区问题并更新文档内容。您还可以通过购买 {kentcdodds} 的 {courses} 或 {workshops} 来帮助支持他的财务。" + }, + "pages.help.courses": { + "message": "在线课程" + }, + "pages.help.remote workshops": { + "message": "远程工作坊" + } +} diff --git a/i18n/zh-Hans/docusaurus-plugin-content-blog/options.json b/i18n/zh-Hans/docusaurus-plugin-content-blog/options.json new file mode 100644 index 00000000..9239ff70 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current.json b/i18n/zh-Hans/docusaurus-plugin-content-docs/current.json new file mode 100644 index 00000000..deb56731 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current.json @@ -0,0 +1,82 @@ +{ + "version.label": { + "message": "Next", + "description": "The label for version current" + }, + "sidebar.recipes.category.Examples": { + "message": "示例", + "description": "The label for category Examples in sidebar recipes" + }, + "sidebar.recipes.category.Help": { + "message": "帮助", + "description": "The label for category Help in sidebar recipes" + }, + "sidebar.docs.category.Getting Started": { + "message": "快速上手", + "description": "The label for category Getting Started in sidebar docs" + }, + "sidebar.docs.category.Core API": { + "message": "核心 API", + "description": "The label for category Core API in sidebar docs" + }, + "sidebar.docs.category.Queries": { + "message": "查询", + "description": "The label for category Queries in sidebar docs" + }, + "sidebar.docs.category.User Actions": { + "message": "用户动作", + "description": "The label for category User Actions in sidebar docs" + }, + "sidebar.docs.category.Advanced": { + "message": "高级", + "description": "The label for category Advanced in sidebar docs" + }, + "sidebar.docs.category.Frameworks": { + "message": "框架", + "description": "The label for category Frameworks in sidebar docs" + }, + "sidebar.docs.category.DOM Testing Library": { + "message": "DOM Testing Library", + "description": "The label for category DOM Testing Library in sidebar docs" + }, + "sidebar.docs.category.React Testing Library": { + "message": "React Testing Library", + "description": "The label for category React Testing Library in sidebar docs" + }, + "sidebar.docs.category.Reason Testing Library": { + "message": "Reason Testing Library", + "description": "The label for category Reason Testing Library in sidebar docs" + }, + "sidebar.docs.category.Native Testing Library": { + "message": "Native Testing Library", + "description": "The label for category Native Testing Library in sidebar docs" + }, + "sidebar.docs.category.Vue Testing Library": { + "message": "Vue Testing Library", + "description": "The label for category Vue Testing Library in sidebar docs" + }, + "sidebar.docs.category.Marko Testing Library": { + "message": "Marko Testing Library", + "description": "The label for category Marko Testing Library in sidebar docs" + }, + "sidebar.docs.category.Angular Testing Library": { + "message": "Angular Testing Library", + "description": "The label for category Angular Testing Library in sidebar docs" + }, + "sidebar.docs.category.Preact Testing Library": { + "message": "Preact Testing Library", + "description": "The label for category Preact Testing Library in sidebar docs" + }, + "sidebar.docs.category.Svelte Testing Library": { + "message": "Svelte Testing Library", + "description": "The label for category Svelte Testing Library in sidebar docs" + }, + "sidebar.docs.category.User Interactions": { + "message": "用户交互", + "description": "The label for category User Interactions in sidebar docs" + }, + "sidebar.docs.category.Ecosystem": { + "message": "生态", + "description": "The label for category Ecosystem in sidebar docs" + } +} diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/api.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/api.mdx new file mode 100644 index 00000000..6f7ffcfd --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/api.mdx @@ -0,0 +1,455 @@ +--- +id: api +title: API +sidebar_label: API +--- + +`Angular Testing Library`重新导出了 `DOM Testing Library` 的所有内容以及 `render` 方法。 + +以下的重新导出是经过 patch 的，使其更容易与Angular一起使用： + +- `fireEvent` 上的事件在事件被触发后自动调用一个变化检测周期 +- `findBy` 查询会在调用函数之前自动调用一个变化检测周期 +- `waitFor` 函数在调用回调函数之前自动调用一个变化检测周期 + +## `render` + +通过Angular Testing Library，可以用两种方式渲染组件，通过组件的类型或用模板。 + +> 默认情况下，`render` 也会导入 `NoopAnimationsModule`。 + +## `Type` + +要渲染一个组件，你需要将组件的类型传递给 `render` 方法。对于不使用你的应用程序的其他部分的组件（例如设计模块或服务）， +渲染一个组件可以像下面的例子一样简单。 + +```typescript +await render(AppComponent) +``` + +## `template` + +你也可以提供一个模板，而不是把组件的类型作为第一个参数传递。这种做法是渲染指令所需要的， +但也可以应用于组件，它甚至可能更有用。然后，指令的（或组件的）类型必须被添加到 `declarations` 中。 + +**指令示例**: + +```typescript +await render('
', { + declarations: [SpoilerDirective], +}) +``` + +**组件示例**: + +```typescript +await render( + '', + { + declarations: [AppComponent], + componentProperties: { + anotherValue: 'valueOfAnotherProperty', + sendValue: jest.fn(), + }, + }, +) +``` + +```typescript +export async function render( + component: Type, + renderOptions?: RenderComponentOptions, +): Promise> +export async function render( + template: string, + renderOptions?: RenderTemplateOptions, +): Promise> +``` + +## Component RenderOptions + +### `componentInputs` + +用于设置组件的`@Input`属性的对象。使用`setInput`设置输入属性。如果组件属性未使用`@Input`属性进行注释，则抛出。 + +**默认值** : `{}` + +**示例**: + +```typescript +await render(AppComponent, { + componentInputs: { + counterValue: 10, + }, +}) +``` + +### `componentOutputs` + +用于设置组件的`@Output`属性的对象。 + +**默认值** : `{}` + +**示例**: + +```typescript +await render(AppComponent, { + componentOutputs: { + clicked: (value) => { ... } + } +}) +``` + +### `componentProperties` + +一个用于设置组件的 `@Input` 和 `@Output` 属性的对象。没有像 `componentInputs`和`componentOutputs`那样的细粒度控制。 + +**默认** : `{}` + +**示例**: + +```typescript +await render(AppComponent, { + // an input + counterValue: 10, + // an output + send: (value) => { ... } + // a public property + name: 'Tim' +}) +``` + +### `declarations` + +渲染该组件所需的组件、指令和管道的集合。例如，组件的嵌套组件。 + +更多信息见[Angular文档](https://angular.io/api/core/Directive#providers)。 + +**默认** : `[]` + +**示例**: + +```typescript +await render(AppComponent, { + declarations: [CustomerDetailComponent, ButtonComponent], +}) +``` + +### `componentProviders` + +通过依赖注入渲染组件所需的提供者的集合。 + +这些将在组件级别上提供。要想在模块层面上注入依赖关系，请使用[`providers`](#providers)。 + +更多信息请参见[Angular文档](https://angular.io/api/core/Directive#providers)。 + +**默认** : `[]` + +**示例**: + +```typescript +await render(AppComponent, { + componentProviders: [AppComponentService], +}) +``` + +### `ɵcomponentImports` + +一个导入的集合，用来覆盖一个独立组件的导入。 + +**默认** : `undefined` + +**示例**: + +```typescript +await render(AppComponent, { + ɵcomponentImports: [ + componentImports: [MockChildComponent], + ] +}) +``` + +### `childComponentOverrides` + +用于覆盖的子组件指定提供者的集合。 + +**默认** : `undefined` + +**示例**: + +```typescript +await render(AppComponent, { + childComponentOverrides: [ + { + component: ChildOfAppComponent, + providers: [{provide: ChildService, useValue: {hello: 'world'}}], + }, + ], +}) +``` + +### `detectChangesOnRender` + +当组件被渲染时，将调用 `detectChanges`。 + +**默认** : `true` + +**示例**: + +```typescript +await render(AppComponent, {detectChangesOnRender: false}) +``` + +### `autoDetectChanges` + +像“实际”运行的组件一样自动检测更改。例如，在发生事件时运行更改检测周期。 + +**默认** : `true` + +**示例**: + +```typescript +await render(AppComponent, { + autoDetectChanges: false, +}) +``` + +### `excludeComponentDeclaration` + +排除被自动添加为声明的组件。当组件在导入的模块中被声明时需要这样做，例如用SCAMs。 + +**默认** : `false` + +**示例**: + +```typescript +await render(AppComponent, { + imports: [AppModule], // a module that includes AppComponent + excludeComponentDeclaration: true, +}) +``` + +### `imports` + +渲染组件所需的导入集合，例如，共享模块。如果 `BrowserAnimationsModule` 没有被添加到集合中，默认会添加 `NoopAnimationsModule`。 + +更多信息见[Angular文档](https://angular.io/api/core/NgModule#imports)。 + +**默认** : `[NoopAnimationsModule]` + +**示例**: + +```typescript +await render(AppComponent, { + imports: [AppSharedModule, MaterialModule], +}) +``` + +### `providers` + +通过依赖性注入渲染组件所需的提供者集合。 + +这些将在模块级别上提供。要在组件级别上注入依赖关系，请使用 [`componentProviders`](#componentProviders) + +更多信息请参见[Angular文档](https://angular.io/api/core/NgModule#providers)。 + +**默认** : `[]` + +**示例**: + +```typescript +await render(AppComponent, { + providers: [ + CustomersService, + { + provide: MAX_CUSTOMERS_TOKEN, + useValue: 10, + }, + ], +}) +``` + +### `queries` + +要绑定的查询。覆盖DOM测试库的默认设置，除非合并。 + +**默认** : `undefined` + +**示例**: + +```typescript +await render(AppComponent, { + queries: {...queries, ...customQueries}, +}) +``` + +### `routes` + +通过 `RouterTestingModule.withRoutes` 设置路由器服务的路由配置。 +更多信息见[Angular Routes文档](https://angular.io/api/router/Routes)。 + +**默认** : `[]` + +**示例**: + +```typescript +await render(AppComponent, { + declarations: [ChildComponent], + routes: [ + { + path: '', + children: [ + { + path: 'child/:id', + component: ChildComponent, + }, + ], + }, + ], +}) +``` + +### `schemas` + +渲染该组件所需的模式集合。允许的值是 `NO_ERRORS_SCHEMA` 和 `CUSTOM_ELEMENTS_SCHEMA`。 + +更多信息见[Angular文档](https://angular.io/api/core/NgModule#schemas)。 + +**默认** : `[]` + +**示例**: + +```typescript +await render(AppComponent, { + schemas: [NO_ERRORS_SCHEMA], +}) +``` + +### `removeAngularAttributes` + +移除夹具中的Angular属性（ng-version和root-id）。 + +**默认** : `false` + +**示例**: + +```typescript +await render(AppComponent, { + removeAngularAttributes: true, +}) +``` + +## `RenderResult` + +### `container` + +你渲染的Angular Component的包含DOM节点。这是一个普通的DOM节点，所以你可以调用 `container.querySelector` 等来检查子节点。 + +### `debug` + +打印出组件的DOM，并有语法高亮显示。接受一个可选的参数，以打印出一个特定的DOM节点。 + +```typescript +const {debug} = await render(AppComponent) + +debug() +``` + +### `change` + +改变组件的输入。这在道具更新后调用 `detectChanges`。 + +```typescript +const {change} = await render(Counter, { + componentProperties: {count: 4, name: 'Sarah'}, +}) + +expect(screen.getByTestId('count-value').textContent).toBe('4') +expect(screen.getByTestId('name-value').textContent).toBe('Sarah') + +change({count: 7}) + +// count updated to 7 +expect(screen.getByTestId('count-value').textContent).toBe('7') +// name keeps the same value +expect(screen.getByTestId('name-value').textContent).toBe('Sarah') +``` + +### `rerender` + +创建并渲染一个新的组件实例。没有定义的输入属性会被清除。要保留它们，请使用[change](#change)。 + +```typescript +const {rerender} = await render(Counter, { + componentProperties: {count: 4, name: 'Sarah'}, +}) + +expect(screen.getByTestId('count-value').textContent).toBe('4') +expect(screen.getByTestId('name-value').textContent).toBe('Sarah') + +await rerender({count: 7}) + +// count updated to 7 +expect(screen.getByTestId('count-value').textContent).toBe('7') +// name is undefined because it's not provided in rerender +expect(screen.getByTestId('name-value').textContent).toBeUndefined() +``` + +### `detectChanges` + +触发该组件的变化检测周期。 + +更多信息见[Angular文档](https://angular.io/api/core/testing/ComponentFixture#detectChanges)。 + +### `debugElement` + +该组件的Angular `DebugElement`。 + +更多信息请参见[Angular文档](https://angular.io/api/core/DebugElement)。 + +### `fixture` + +该组件的Angular `ComponentFixture`。 + +更多信息请参见[Angular文档](https://angular.io/api/core/testing/ComponentFixture)。 + +```typescript +const {fixture} = await render(AppComponent) + +// componentInstance is typed as AppComponent +const componentInstance = fixture.componentInstance +``` + +> 🚨 如果你发现自己使用 `fixture` 来访问组件的内部值，你应该重新考虑！ +> 这可能意味着你正在测试实现细节。 + +### `navigate` + +接受一个DOM元素或一个路径作为参数。如果一个元素被传递，`navigate` 将导航到该元素的 `href` 值。 +如果传递了一个路径，`navigate` 将导航到该路径。 + +```typescript +const { navigate } = await render(AppComponent, { + routes: [...] +}) + +await navigate(component.getByLabelText('To details')) +await navigate('details/3') +``` + +### `...queries` + +`render` 最重要的特点是，[DOM Testing Library](/docs/dom-testing-library/intro) 的查询会自动返回，其第一个参数与被测组件绑定。 + +完整的列表见[查询](queries/about.mdx)。 + +**示例**: + +```typescript +const {getByText, queryByLabelText} = await render(AppComponent) + +screen.getByRole('heading', { + name: /api/i, +}) +queryByLabelText(/First name/i') +``` diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/examples.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/examples.mdx new file mode 100644 index 00000000..29c614b2 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/examples.mdx @@ -0,0 +1,131 @@ +--- +id: examples +title: Examples +sidebar_label: 示例 +--- + +> 阅读 +> [最佳实践](https://timdeschryver.dev/blog/good-testing-practices-with-angular-testing-library), +> 或遵循 +> [指导性的例子](https://timdeschryver.dev/blog/getting-the-most-value-out-of-your-angular-component-tests) + +```ts title="counter.component.ts" +@Component({ + selector: 'counter', + template: ` + + Current Count: {{ counter }} + + `, +}) +export class CounterComponent { + @Input() counter = 0 + + increment() { + this.counter += 1 + } + + decrement() { + this.counter -= 1 + } +} +``` + +```ts title="counter.component.spec.ts" +import {render, screen, fireEvent} from '@testing-library/angular' +import {CounterComponent} from './counter.component.ts' + +describe('Counter', () => { + test('should render counter', async () => { + await render(CounterComponent, { + componentProperties: {counter: 5}, + }) + + expect(screen.getByText('Current Count: 5')).toBeInTheDocument() + }) + + test('should increment the counter on click', async () => { + await render(CounterComponent, { + componentProperties: {counter: 5}, + }) + + fireEvent.click(screen.getByText('+')) + + expect(screen.getByText('Current Count: 6')).toBeInTheDocument() + }) +}) +``` + +## 使用独立的组件 + +Angular Testing Library 也可以测试你的独立组件。事实上，它甚至变得更容易， +因为你不需要设置整个Angular TestBed。 +这在以前只有当你[使用单组件Angular模块（SCAMs）时才能实现](https://timdeschryver.dev/blog/single-component-angular-modules-and-component-tests-go-hand-in-hand)。 + +让我们把计数器组件迁移到一个独立的组件，让我们看看这对测试有什么影响。 + +```ts title="counter.component.ts" +@Component({ + selector: 'counter', + template: ` + + Current Count: {{ counter }} + + `, + standalone: true, +}) +export class CounterComponent { + @Input() counter = 0 + + increment() { + this.counter += 1 + } + + decrement() { + this.counter -= 1 + } +} +``` + +正如你所期望的，这并不影响测试案例。编写独立组件的测试与 "常规"组件的测试相同。 + +```ts title="counter.component.spec.ts" +import {render, screen, fireEvent} from '@testing-library/angular' +import {CounterComponent} from './counter.component.ts' + +describe('Counter', () => { + test('should render counter', async () => { + await render(CounterComponent, { + componentProperties: {counter: 5}, + }) + + expect(screen.getByText('Current Count: 5')).toBeInTheDocument() + }) + + test('should increment the counter on click', async () => { + await render(CounterComponent, { + componentProperties: {counter: 5}, + }) + + fireEvent.click(screen.getByText('+')) + + expect(screen.getByText('Current Count: 6')).toBeInTheDocument() + }) +}) +``` + +要为你的组件测试覆盖一个独立组件的导入，你可以使用[`ɵcomponentImports` 属性](api.mdx#ɵcomponentImports])。 + +## 更多示例 + +更多的例子可以在 +[GitHub项目](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/src/app/examples). +中找到。这些例子包括： + +- `@Input` 和 `@Output` 属性 +- 表单 +- 服务集成 +- 和 [更多](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/src/app/examples) + +如果你正在寻找一个不在清单上的例子，请随时创建一个新问题 +[新问题](https://github.com/testing-library/angular-testing-library/issues/new)。 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/faq.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/faq.mdx new file mode 100644 index 00000000..ba97fe9d --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/faq.mdx @@ -0,0 +1,107 @@ +--- +id: faq +title: FAQ +--- + +对于不针对Angular测试的问题，也请参见[主要的FAQ](dom-testing-library/faq.mdx)。 + +
+ +我可以用这个库写单元测试吗？ + +Definitely yes! You can write unit and integration tests with this library. See +below for more on how to mock dependencies (because this library intentionally +does NOT support shallow rendering) if you want to unit test a high level +component. The tests in this project show several examples of unit testing with +this library. + +As you write your tests, keep in mind: + +> The more your tests resemble the way your software is used, the more +> confidence they can give you. - [17 Feb 2018][guiding-principle] + +
+ +
+ + + 如果我不能使用浅层渲染，我如何在测试中模拟出组件？ + + +In general, you should avoid mocking out components (see +[the Guiding Principles section](guiding-principles.mdx)). However, if you need +to, then try to use [ng-mocks](https://ng-mocks.sudo.eu/) and its [`MockBuilder`](https://ng-mocks.sudo.eu/extra/with-3rd-party#testing-libraryangular-and-mockbuilder). + +```typescript +import {Component, NgModule} from '@angular/core' +import {render, screen} from '@testing-library/angular' +import {MockBuilder} from 'ng-mocks' + +@Component({ + selector: 'app-parent-component', + template: '', +}) +class ParentComponent {} + +@Component({ + selector: 'app-child-component', + template: '

Child component

', +}) +class ChildComponent {} + +@NgModule({ + declarations: [ParentComponent, ChildComponent], +}) +export class AppModule {} + +describe('ParentComponent', () => { + it('should not render ChildComponent when shallow rendering', async () => { + // all imports, declarations and exports of AppModule will be mocked. + const dependencies = MockBuilder(ParentComponent, AppModule).build(); + + await render(ParentComponent, dependencies) + + expect(screen.queryByText('Child component')).toBeNull() + }) +}) +``` + +
+ +
+ + + 我应该测试组件树的哪一层？子组件，父组件，还是两者？ + + +Following the guiding principle of this library, it is useful to break down how +tests are organized around how the user experiences and interacts with +application functionality rather than around specific components themselves. In +some cases, for example for reusable component libraries, it might be useful to +include developers in the list of users to test for and test each of the +reusable components individually. Other times, the specific break down of a +component tree is just an implementation detail and testing every component +within that tree individually can cause issues (see +https://kentcdodds.com/blog/avoid-the-test-user). + +In practice this means that it is often preferable to test high enough up the +component tree to simulate realistic user interactions. The question of whether +it is worth additionally testing at a higher or lower level on top of this comes +down to a question of tradeoffs and what will provide enough value for the cost +(see https://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests on more info +on different levels of testing). + +For a more in-depth discussion of this topic see +[this video](https://youtu.be/0qmPdcV-rN8). + +
+ + + + + +[guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106 + + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/intro.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/intro.mdx new file mode 100644 index 00000000..a2c4fb05 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/angular-testing-library/intro.mdx @@ -0,0 +1,45 @@ +--- +id: intro +title: Angular Testing Library +sidebar_label: 简介 +--- + +[`Angular Testing Library`](https://github.com/testing-library/angular-testing-library) +建立在 +[`DOM Testing Library`](https://github.com/testing-library/dom-testing-library) +的基础上，增加了用于处理Angular组件的API。 + +```bash npm2yarn +npm install --save-dev @testing-library/angular +``` + +- [`@testing-library/angular-testing-library` on GitHub](https://github.com/testing-library/angular-testing-library) + +## 问题 + +你想为你的 Angular 组件编写可维护的测试。作为这个目标的一部分，**你希望你的测试能避免包括组件的实现细节**。 +你应该把重点放在让你的测试给你带来信心上，这也是他们的目的。作为其中的一部分，你希望你的测试库从长远来看是可维护的， +所以你的组件的重构（对实现的改变，但不是功能的改变）不会破坏你的测试，使你和你的团队慢下来。 + +## 解决方案 + +`Angular Testing Library` 是一个非常轻量级的解决方案，用于测试Angular组件。 +它在 +[`DOM Testing Library`](https://github.com/testing-library/dom-testing-library) +的基础上提供轻量级的实用功能，以鼓励更好的测试实践。它的主要指导原则是: + +> [你的测试越像你的软件的使用方式，他们就越能给你信心](guiding-principles.mdx) + +因此，你的测试将与实际的DOM节点一起工作，而不是处理渲染的Angular组件实例。 +这个库所提供的工具便于用户以同样的方式查询DOM。通过标签文本找到表单元素（就像用户一样）， +通过文本找到链接和按钮（就像用户一样）。它还提供了一种推荐的方法，即通过 `data-testid` 来寻找元素， +作为元素的 "逃生舱门"，在这种情况下，文本内容和标签没有意义或不实用。 + +这个库鼓励你的应用程序更容易访问，并允许你让你的测试更接近于以用户的方式使用你的组件， +这使得你的测试给你更多的信心，当真正的用户使用它时，你的应用程序会工作。 + +`Angular Testing Library`: + +- 重新导出 [`DOM Testing Library`](https://github.com/testing-library/dom-testing-library) 中的 `query` 和 `fireEvent` 实用函数。 +- 封装你的组件的 `fireEvent` 函数，在事件发生后自动调用 `detectChanges()` +- 与测试框架无关，它可以在每个测试框架上运行。 diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/examples.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/examples.mdx new file mode 100644 index 00000000..17e2ec16 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/examples.mdx @@ -0,0 +1,133 @@ +--- +id: examples +title: 示例 +--- + +你可以在 +[wyze/bs-dom-testing-library/src/\_\_tests\_\_](https://github.com/wyze/bs-dom-testing-library/tree/master/src/__tests__) +找到更多bs-dom-testing-library的例子。 + +你可以在 +[wyze/bs-react-testing-library/src/\_\_tests\_\_](https://github.com/wyze/bs-react-testing-library/tree/master/src/__tests__) +找到更多bs-react-testing-library的例子。 + +## React Testing Library + +```reason title="Component_test.re" +open Jest; +open Expect; +open ReactTestingLibrary; + +test("Component renders", () => +
+

{ReasonReact.string("Heading")}

+
+ |> render + |> container + |> expect + |> toMatchSnapshot +); +``` + +## DOM Testing Library + +下面的例子使用 +[`bs-webapi`](https://github.com/reasonml-community/bs-webapi-incubator) +来帮助打字和创建事件。 + +### getByText + +```reason title="__tests__/example_test.re" +open Jest; +open DomTestingLibrary; +open Expect; + +type parser; + +[@bs.new] +external domParser : unit => parser = "DOMParser"; + +[@bs.send.pipe : parser] +external parseFromString : ( string, [@bs.as "text/html"] _) => Dom.element = ""; + +[@bs.get] +external body : Dom.element => Dom.element = ""; + +[@bs.get] +external firstChild : Dom.element => Dom.element = ""; + +let div = domParser() + |> parseFromString({j| +
+ Hello, +

World!

+ + + Alt text +
+ |j}) + |> body + |> firstChild; + +describe("getByText", () => { + test("works with string matcher", () => { + let actual = div |> getByText(~matcher=`Str("Hello,")); + + expect(actual) |> toMatchSnapshot; + }); + + test("works with regex matcher", () => { + let actual = div |> getByText(~matcher=`RegExp([%bs.re "/\\w!/"])); + + expect(actual) |> toMatchSnapshot; + }); + + test("works with function matcher", () => { + let matcher = ( _text, node ) => (node |> tagName) === "P"; + let actual = div |> getByText(~matcher=`Func(matcher)); + + expect(actual) |> toMatchSnapshot; + }); +}); +``` + +## FireEvent + +```reason +open Jest; +open DomTestingLibrary; +open Expect; + +describe("FireEvent", () => { + test("click works", () => { + open Webapi.Dom; + + let node = document |> Document.createElement("button"); + let spy = JestJs.inferred_fn(); + let fn = spy |> MockJs.fn; + let clickHandler = _ => [@bs] fn("clicked!") |> ignore; + + node |> Element.addEventListener("click", clickHandler); + + FireEvent.click(node); + + expect(spy |> MockJs.calls) |> toEqual([|"clicked!"|]); + }); + + test("change works", () => { + open Webapi.Dom; + + let node = document |> Document.createElement("input"); + let spy = JestJs.inferred_fn(); + let fn = spy |> MockJs.fn; + let changeHandler = _ => [@bs] fn("changed!") |> ignore; + let event = Event.makeWithOptions("change", { "target": { "value": "1" } }); + + node |> Element.addEventListener("change", changeHandler); + + FireEvent.change(node, event); + + expect(spy |> MockJs.calls) |> toEqual([|"changed!"|]); + }); +}); +``` diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/intro.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/intro.mdx new file mode 100644 index 00000000..0fbf613b --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/bs-react-testing-library/intro.mdx @@ -0,0 +1,72 @@ +--- +id: intro +title: Reason Testing Library +sidebar_label: 简介 +--- + +几个 testing-library 的绑定已经被移植到 [ReasonML][re]。 + +[`bs-react-testing-library`][gh-react] 包含 `React Testing Library` 的 [BuckleScript](https://bucklescript.github.io/) 绑定。 + +[`bs-dom-testing-library`][gh-dom] 包含 `DOM Testing Library` 的 [BuckleScript] 绑定。 + +```bash npm2yarn +npm install --save-dev bs-dom-testing-library +npm install --save-dev bs-react-testing-library +``` + +- [bs-react-testing-library on GitHub][gh-react] +- [bs-dom-testing-library on GitHub][gh-dom] + +[gh-dom]: https://github.com/wyze/bs-dom-testing-library +[gh-react]: https://github.com/wyze/bs-react-testing-library + +## 设置 + +安装后，你需要让你的包 bsconfig.json 文件如下配置： + +```json +{ + "bs-dev-dependencies": ["bs-react-testing-library"] +} +``` + +_or_ + +```json +{ + "bs-dev-dependencies": ["bs-dom-testing-library"] +} +``` + +## 其它依赖 + +### bs-platform + +这就是 [BuckleScript][bs] 用来将 [Reason][re] 代码编译成JS的工具。 +如果你的项目中没有它，你可以像这样安装它： + +```bash npm2yarn +npm install --save-dev bs-platform +``` + +### bs-jest + +这是推荐的测试运行器，是一个围绕Jest的封装器。这里所有的例子都将使用它。 + +- [bs-jest on GitHub](https://github.com/glennsl/bs-jest) + +```bash npm2yarn +npm install --save-dev @glennsl/bs-jest +``` + +然后，更新 `bsconfig.json`: + +```json +{ + "bs-dev-dependencies": ["@glennsl/bs-jest"] +} +``` + +[bs]: https://bucklescript.github.io/ +[re]: https://reasonml.github.io/ diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/contributing.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/contributing.mdx new file mode 100644 index 00000000..8e51701f --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/contributing.mdx @@ -0,0 +1,49 @@ +--- +id: contributing +title: 贡献 +sidebar_label: 贡献 +--- + +## License + +`React Testing Library` is distributed under the open-source MIT license + +## Issues + +_Looking to contribute? Look for the [Good First Issue][good-first-issue] +label._ + +### 🐛 Bugs + +Please file an issue for bugs, missing documentation, or unexpected behavior. + +[**See Bugs**][bugs] + +### 💡 Feature Requests + +Please file an issue to suggest new features. Vote on feature requests by adding +a 👍. This helps maintainers prioritize what to work on. + +[**See Feature Requests**][requests] + +### ❓ Questions + +For questions related to using the library, please visit a support community +instead of filing an issue on GitHub. + +- [Discord][discord] +- [Stack Overflow][stackoverflow] + + + + + +[bugs]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc +[requests]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen +[good-first-issue]: https://github.com/testing-library/react-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+ +[discord]: https://discord.gg/testing-library +[stackoverflow]: https://stackoverflow.com/questions/tagged/react-testing-library + + diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/cypress-testing-library/intro.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/cypress-testing-library/intro.mdx new file mode 100644 index 00000000..49536c57 --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/cypress-testing-library/intro.mdx @@ -0,0 +1,69 @@ +--- +id: intro +title: Cypress Testing Library +--- + +[`Cypress Testing Library`][gh]允许在[Cypress](https://cypress.io)端到端浏览器测试中使用dom-testing查询。 + +```bash npm2yarn +npm install --save-dev cypress @testing-library/cypress +``` + +- [Cypress Testing Library on GitHub][gh] + +## 使用 + +`Cypress Testing Library` 扩展了Cypress的 `cy` 命令。 + +在你项目的 `cypress/support/commands.js` 中添加这一行: + +```js +import '@testing-library/cypress/add-commands' +``` + +你现在可以使用 `DOM Testing Library`' 的所有`findBy`, `findAllBy`, `queryBy`和`queryAllBy`命令， +离开全局 `cy` 对象。请参阅[关于查询]((/docs/queries/about))的文档以获得参考。 + +> 注意：不支持 `get*` 查询，因为对于合理的Cypress测试，你需要重试，而 `find*` 查询已经支持了。 +> `query*` 查询从v5开始就不再支持了，将在v6删除。`find*` 完全支持内置的Cypress断言（删除了`query*`的唯一用例）。 + +## 使用 TypeScript + +应在 `tsconfig.json` 中添加以下类型: + +```json +{ + "compilerOptions": { + "types": ["cypress", "@testing-library/cypress"] + } +} +``` + +你可以在这里找到所有的 +[库定义](https://github.com/testing-library/cypress-testing-library/blob/master/types/index.d.ts)。 + +## 示例 + +为了展示一些简单的例子（来自[cypress/integration/find.spec.js](https://github.com/testing-library/cypress-testing-library/blob/97939da7d4707a71049884c0324c0eda56e26fc2/cypress/integration/find.spec.js)): +）。 + +```javascript +cy.findByRole('button', {name: /Jackie Chan/i}).click() +cy.findByRole('button', {name: /Button Text/i}).should('exist') +cy.findByRole('button', {name: /Non-existing Button Text/i}).should('not.exist') +cy.findByLabelText(/Label text/i, {timeout: 7000}).should('exist') + +// findByRole _inside_ a form element +cy.get('form') + .findByRole('button', {name: /Button Text/i}) + .should('exist') +cy.findByRole('dialog').within(() => { + cy.findByRole('button', {name: /confirm/i}) +}) +``` + +`Cypress Testing Library` 同时支持jQuery元素和DOM节点。这是必要的，因为Cypress使用jQuery元素， +而 `Cypress Testing Library` 期望DOM节点。当你传递一个jQuery元素作为容器时，它将从集合中获得第一个DOM节点， +并将其作为 `DOM Testing Library` 函数的 `container` 参数。 + +[gh]: https://github.com/testing-library/cypress-testing-library diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-accessibility.mdx b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-accessibility.mdx new file mode 100644 index 00000000..5dd421db --- /dev/null +++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/dom-testing-library/api-accessibility.mdx @@ -0,0 +1,82 @@ +--- +id: api-accessibility +title: 无障碍访问 +--- + +## 无障碍测试 + +Testing Library API 的指导原则之一是，它们应使你能够以用户使用的方式来测试你的应用程序，包括通过屏幕阅读器等无障碍界面。 + +关于如何使用语义HTML查询来确保你的应用程序与浏览器的可访问性API一起工作的细节， +请参见[查询](queries/about.mdx#priority)页面。 + +## `getRoles` + +这个函数允许在一个给定的DOM节点树中，遍历其上的隐式 ARIA 角色。 + +它返回一个对象，以角色名称为键，每个值是一个具有该隐式ARIA角色的元素数组。 + +关于隐式的ARIA角色的更多信息，请参见[HTML中的ARIA](https://www.w3.org/TR/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html)。 + +```javascript +import {getRoles} from '@testing-library/dom' + +const nav = document.createElement('nav') +nav.innerHTML = ` +
    +
  • Item 1
    • +
  • Item 2
    • +
` +console.log(getRoles(nav)) + +// Object { +// navigation: [