dash-snapshot-testing 1.2.2
Dash snapshot testing package
License: MIT
Requires Python: >=3
Keywords: dash snapshot plotly testing unittest


# 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