Skip to main content

Dash snapshot testing package

Project description


# dash-snapshot-testing
Use snapshot testing, inspired by Jest snapshot testing, to test [Dash][] components.

See the project [README](https://github.com/StratoDem/dash-snapshot-testing/blob/master/README.md) for more detailed information.

## Inspiration
Testing a long HTML component output for a Dash application is difficult.
It typically requires hardcoding data or setting up a dummy database.
Using snapshot tests that JSON serialize the Dash component output provide another
easy testing layer to ensure that code refactors/changes do not change the
output unexpectedly.

To learn more about snapshot testing in general, see a much more elaborate explanation from the [Facebook Jest site](https://facebook.github.io/jest/docs/en/snapshot-testing.html)

## Installation and usage
```bash
$ pip install dash-snapshot-testing
```

```python
import dash_html_components as html

from dash_snapshot_testing.snapshot_test import DashSnapshotTestCase


class MyUnitTestCase(DashSnapshotTestCase):
def test_component(self):
my_component = html.Div([html.P('wow'), html.Span('this works')], id='test-id')

self.assertSnapshotEqual(my_component, 'my-test-unique-id')
```

This outputs/checks this JSON at `__snapshots__/MyUnitTestCase-my-test-unique-id.json`:
```json
{
"type": "Div",
"props": {
"id": "test-id",
"children": [
{
"type": "P",
"props": {"children": "wow"},
"namespace": "dash_html_components"
},
{
"type": "Span",
"props": {"children": "this works"},
"namespace": "dash_html_components"
}
]
},
"namespace": "dash_html_components"
}
```

### Setting a custom `snapshots_dir` for the class
```python
class MyOtherUnitTestCase(DashSnapshotTestCase):
snapshots_dir = '__snapshots_2__'

def test_component(self):
my_component = html.Div([html.P('wow'), html.Span('another one')], id='test-id')

self.assertSnapshotEqual(my_component, 'my-test-unique-id')
```

This outputs/checks this JSON at `__snapshots_2__/MyOtherUnitTestCase-my-test-unique-id.json`:
```json
{
"type": "Div",
"props": {
"id": "test-id",
"children": [
{
"type": "P",
"props": {"children": "wow"},
"namespace": "dash_html_components"
},
{
"type": "Span",
"props": {"children": "another one"},
"namespace": "dash_html_components"
}
]
},
"namespace": "dash_html_components"
}
```

### Overwriting snapshots
To overwrite pre-existing snapshots, [like in Jest](https://facebook.github.io/jest/docs/en/snapshot-testing.html#updating-snapshots), set an environment variable as `UPDATE_DASH_SNAPSHOTS=TRUE`:
```bash
# This will run and make new snapshots
> UPDATE_DASH_SNAPSHOTS=TRUE python -m unittest my_test_module
# This will run against the previous snapshots
> python -m unittest my_test_module
```

### How this works
At its core, this `unittest.TestCase` compares a JSON-serialized Dash component
against a previously stored JSON-serialized Dash component, and checks if the `dict`
objects from `json.loads` are equivalent using `assertEqual`.

[Dash]: https://github.com/plotly/dash


Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

dash-snapshot-testing-1.2.2.tar.gz (4.2 kB view hashes)

Uploaded Source

Built Distributions

dash_snapshot_testing-1.2.2-py3-none-any.whl (6.7 kB view hashes)

Uploaded Python 3

dash_snapshot_testing-1.2.2-py2.py3-none-any.whl (6.7 kB view hashes)

Uploaded Python 2 Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page