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: improve tabs and package manager scripts #1339

Merged
merged 6 commits into from
Nov 3, 2023
Merged
Show file tree
Hide file tree
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
3 changes: 3 additions & 0 deletions docs/bs-react-testing-library/intro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ Bindings for several testing libraries have been ported to [ReasonML][re].

```bash npm2yarn
npm install --save-dev bs-dom-testing-library
```

```bash npm2yarn
npm install --save-dev bs-react-testing-library
```

Expand Down
3 changes: 0 additions & 3 deletions docs/dom-testing-library/api-custom-queries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@ id: api-custom-queries
title: Custom Queries
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'

`DOM Testing Library` exposes many of the helper functions that are used to
implement the default queries. You can use the helpers to build custom queries.
For example, the code below shows a way to override the default `testId` queries
Expand Down
4 changes: 2 additions & 2 deletions docs/dom-testing-library/api-debugging.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ value is `7000`. You will see `...` in the console, when the DOM content is
stripped off, because of the length you have set or due to default size limit.
Here's how you might increase this limit when running tests:

```
```bash npm2yarn
DEBUG_PRINT_LIMIT=10000 npm test
```

Expand All @@ -46,7 +46,7 @@ colors, such as in cases where the output is written to a log file for debugging
purposes. You can use the environment variable `COLORS` to explicitly force the
colorization off or on. For example:

```
```bash npm2yarn
COLORS=false npm test
```

Expand Down
18 changes: 1 addition & 17 deletions docs/ecosystem-user-event.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@ id: ecosystem-user-event
title: user-event v13
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'

[`user-event`][gh] is a companion library for Testing Library that provides more
advanced simulation of browser interactions than the built-in
[`fireEvent`](dom-testing-library/api-events.mdx#fireevent) method.
Expand All @@ -21,23 +18,10 @@ fixes and new features.

## Installation

<Tabs defaultValue="npm" values={[{ label: 'npm', value: 'npm' }, { label: 'Yarn', value: 'yarn' }]}>
<TabItem value="npm">

```sh
```bash npm2yarn
npm install --save-dev @testing-library/user-event @testing-library/dom
```

</TabItem>
<TabItem value="yarn">

```sh
yarn add --dev @testing-library/user-event @testing-library/dom
```

</TabItem>
</Tabs>

Now simply import it in your tests:

```js
Expand Down
2 changes: 1 addition & 1 deletion docs/example-react-intl.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -141,4 +141,4 @@ the component in a way that will simulate the user behavior as much as posible.
| Use strings from the default language | Test is easy to read, and asserts expected default output. If you have variables in your strings, you can test that they work properly with correct output. | 1. Strings hardcoded into tests mean you have to update both tests and code for any copy changes. 2. If multiple elements have the same string/substring text, find-and-replace may be hard to use reliably. |
| Mock the translation library | If your library is difficult to use in the test environment, you can mock it so it is easier. For example, you can add the message ID as a data-attribute to the text so you can query by that. | Test code deviates from what runs in production. Tests may assert about message IDs but not enough about content, so errors are possible. |
| Use translation library in tests | Decouples strings from tests, so you can update the message files in one place without worrying about breaking tests. Can run tests in another language or multiple languages. `const buttonText = getNodeText(<FormattedMessage id="buttonText" defaultMessage="Hello Button" />);` | Overhead - it takes more lines of code to write the test, and you need to know the variables and message IDs to create the right strings. It's not obvious what the text actually is when you read the test code, making maintaining it harder. |
| Use translation library + inline snapshots | Same as above, but by adding an inline snapshot of the string, you can read the test code and see what strings are in use, but easily update them with `jest -u` if the messages change. `expect(buttonText).toMatchInlineSnapshot("'My button text'")` | Tests are longer because of the extra lines. You can wrap up some of the translation-related code into a helper function to make it a little more inline-able and avoid repeating yourself, but you still need to know the message IDs and variables inside the test. |
| Use translation library + inline snapshots | Same as above, but by adding an inline snapshot of the string, you can read the test code and see what strings are in use, but easily update them with `jest --updateSnapshot` if the messages change. `expect(buttonText).toMatchInlineSnapshot("'My button text'")` | Tests are longer because of the extra lines. You can wrap up some of the translation-related code into a helper function to make it a little more inline-able and avoid repeating yourself, but you still need to know the message IDs and variables inside the test. |
4 changes: 2 additions & 2 deletions docs/marko-testing-library/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -294,8 +294,8 @@ You can turn off the automatic test cleanup by importing the following module:
import '@marko/testing-library/dont-cleanup-after-each'
```

With mocha you can use `mocha -r @marko/testing-library/dont-cleanup-after-each`
as a shorthand.
With mocha you can use
`mocha --require @marko/testing-library/dont-cleanup-after-each` as a shorthand.

If you are using Jest, you can include
`setupFilesAfterEnv: ["@marko/testing-library/dont-cleanup-after-each"]` in your
Expand Down
2 changes: 1 addition & 1 deletion docs/marko-testing-library/setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ To run server-side Marko tests with `mocha` you can simply run the following
command:

```console
mocha -r marko/node-require
mocha --require marko/node-require
```

This enables the
Expand Down
2 changes: 1 addition & 1 deletion docs/nightwatch-testing-library/intro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ in [Nightwatch](https://nightwatchjs.org) for end-to-end web testing.
then just

```bash npm2yarn
npm install -D @testing-library/nightwatch
npm install --save-dev @testing-library/nightwatch
```

- [nightwatch-testing-library on GitHub][gh]
Expand Down
4 changes: 2 additions & 2 deletions docs/react-testing-library/setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,7 @@ do this with Jest's `setupFiles` configuration:
Or with mocha's `-r` flag:

```
mocha -r @testing-library/react/dont-cleanup-after-each
mocha --require @testing-library/react/dont-cleanup-after-each
```

Alternatively, you could import `@testing-library/react/pure` in all your tests
Expand Down Expand Up @@ -508,5 +508,5 @@ exports.mochaHooks = {
And register it using mocha's `-r` flag:

```
mocha -r ./mocha-watch-cleanup-after-each.js
mocha --require ./mocha-watch-cleanup-after-each.js
```
6 changes: 3 additions & 3 deletions docs/svelte-testing-library/setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ npm install --save-dev @vitest/ui
how) and run the following command to run the tests.

```bash npm2yarn
npm run test
npm test
```

## Jest
Expand All @@ -104,7 +104,7 @@ npm install --save-dev @vitest/ui
{
"scripts": {
"test": "jest src",
"test:watch": "npm run test -- --watch"
"test:watch": "jest src --watch"
}
}
```
Expand Down Expand Up @@ -180,7 +180,7 @@ npm install --save-dev @vitest/ui
and run it

```bash npm2yarn
npm run test
npm test
```

### TypeScript
Expand Down
21 changes: 1 addition & 20 deletions docs/user-event/install.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,10 @@ id: install
title: Installation
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'

<Tabs defaultValue="npm" values={[
{ label: 'npm', value: 'npm' },
{ label: 'Yarn', value: 'yarn' },
]}>
<TabItem value="npm">

```sh
```bash npm2yarn
npm install --save-dev @testing-library/user-event
```

</TabItem>
<TabItem value="yarn">

```sh
yarn add --dev @testing-library/user-event
```

</TabItem>
</Tabs>

Note that `@testing-library/user-event` requires `@testing-library/dom`.

If you use one of the
Expand Down
2 changes: 1 addition & 1 deletion docs/webdriverio-testing-library/intro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ queries in [WebdriverIO](https://webdriver.io/) for end-to-end web testing.
then just

```bash npm2yarn
npm install -D @testing-library/webdriverio
npm install --save-dev @testing-library/webdriverio
```

- [webdriverio-testing-library on GitHub][gh]
Expand Down