Skip to content

Commit

Permalink
testing words
Browse files Browse the repository at this point in the history
  • Loading branch information
willmcgugan committed Sep 22, 2023
1 parent 9eb7b4c commit c6bda70
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 21 deletions.
29 changes: 12 additions & 17 deletions docs/guide/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -169,31 +169,26 @@ If you are interested in how we write tests, see the [tests/](https://github.com

## Snapshot testing

A _snapshot_ is a record of what an application looked like at a given point in time.
Snapshot testing is the process of recording the output of a test, and comparing it against the output from previous runs.

_Snapshot testing_ is the process of creating a snapshot of an application while a test runs, and comparing it to a historical version.
If there's a mismatch, the snapshot testing framework flags it for review.
Textual uses snapshot testing internally to ensure that the builtin widgets look and function correctly in every release.
We've made the pytest plugin we built available for public use.

This offers a simple, automated way of checking our application displays like we expect.
The [official pytest plugin](https://github.com/Textualize/pytest-textual-snapshot) can help you catch otherwise difficult to detect visual changes in your app.

### pytest-textual-snapshot
It works by generating an SVG _screenshot_ (such as the images in these docs) from your app.
If the screenshot changes in any test run, you will will have the opertunity to visually compare the new output against previous runs.

You can use [`pytest-textual-snapshot`](https://github.com/Textualize/pytest-textual-snapshot) to snapshot test your Textual app.
This is a plugin for pytest which adds support for snapshot testing Textual apps, and it's maintained by the developers of Textual.

A test using this package saves a snapshot (in this case, an SVG screenshot) of a running Textual app to disk.
The next time the test runs, it takes another snapshot and compares it to the previously saved one.
If the snapshots differ, the test fails, and you can view a side-by-side diff showing the visual change.

#### Installation
### Installing the plugin

You can install `pytest-textual-snapshot` using your favorite package manager (`pip`, `poetry`, etc.).

```
pip install pytest-textual-snapshot
```

#### Creating a snapshot test
### Creating a snapshot test

With the package installed, you now have access to the `snap_compare` pytest fixture.

Expand Down Expand Up @@ -248,7 +243,7 @@ pytest --snapshot-update
Now that our snapshot is saved, if we run `pytest` (with no arguments) again, the test will pass.
This is because the screenshot taken during this test run matches the one we saved earlier.

#### Catching a bug
### Catching a bug

The real power of snapshot testing comes from its ability to catch visual regressions which could otherwise easily be missed.

Expand All @@ -274,7 +269,7 @@ our new developer has also deleted the number 4!
report is just an HTML file which can be exported as a build artifact.


#### Pressing keys
### Pressing keys

You can simulate pressing keys before the snapshot is captured using the `press` parameter.

Expand All @@ -283,7 +278,7 @@ def test_calculator_pressing_numbers(snap_compare):
assert snap_compare("path/to/calculator.py", press=["1", "2", "3"])
```

#### Changing the terminal size
### Changing the terminal size

To capture the snapshot with a different terminal size, pass a tuple `(width, height)` as the `terminal_size` parameter.

Expand All @@ -292,7 +287,7 @@ def test_calculator(snap_compare):
assert snap_compare("path/to/calculator.py", terminal_size=(50, 100))
```

#### Running setup code
### Running setup code

You can also run arbitrary code before the snapshot is captured using the `run_before` parameter.

Expand Down
9 changes: 5 additions & 4 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,16 @@ hide:
- navigation
---

!!! tip inline end

# Welcome
See the navigation links in the header or side-bar.

Welcome to the [Textual](https://github.com/Textualize/textual) framework documentation.
Click :octicons-three-bars-16: (top left) on mobile.

!!! tip

See the navigation links in the header or side-bars. Click the :octicons-three-bars-16: button (top left) on mobile.
# Welcome

Welcome to the [Textual](https://github.com/Textualize/textual) framework documentation.

[Get started](./getting_started.md){ .md-button .md-button--primary } or go straight to the [Tutorial](./tutorial.md)

Expand Down

0 comments on commit c6bda70

Please sign in to comment.