Add better examples of automated tests

thibaudcolas · thibaudcolas · commit c7e6bea81528 · 2020-11-02T22:29:39.000Z
diff --git a/docs/guides/automated-tests.md b/docs/guides/automated-tests.md
@@ -28,8 +28,68 @@ One of the advantages of `render_patterns` is the ability for you to test the pa
 
 ## Visual regression testing
 
-Pattern libraries are a natural fit for automated visual regression tests. Check out [BackstopJS](https://github.com/garris/BackstopJS) to get started.
+Pattern libraries are a natural fit for automated visual regression tests. Here is an example [BackstopJS](https://github.com/garris/BackstopJS) configuration file:
+
+```json
+{
+  "viewports": [
+    {
+      "label": "tablet",
+      "width": 1024,
+      "height": 768
+    }
+  ],
+  "scenarios": [
+    {
+      "label": "accordion.html",
+      "url": "https://torchbox.github.io/django-pattern-library/dpl-rendered-patterns/molecules/accordion/accordion.html"
+    },
+    {
+      "label": "person_page.html",
+      "url": "https://torchbox.github.io/django-pattern-library/dpl-rendered-patterns/pages/people/person_page.html"
+    }
+  ],
+  "paths": {
+    "bitmaps_reference": "backstop_data/bitmaps_reference",
+    "bitmaps_test": "backstop_data/bitmaps_test",
+    "engine_scripts": "backstop_data/engine_scripts",
+    "html_report": "backstop_data/html_report",
+    "ci_report": "backstop_data/ci_report"
+  },
+  "engine": "puppeteer"
+}
+```
+
+Try this out by saving the file as `backstop.json`, then:
+
+```sh
+npm install -g backstopjs
+backstop test
+```
 
 ## Accessibility testing
 
 Here as well, pattern libraries are a natural fit, due to them providing the test data, and making it possible to test components in isolation. Have a look at [Pa11y](https://pa11y.org/) or [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) to get started.
+
+Here is an example Pa11y configuration:
+
+```js
+module.exports = {
+  defaults: {
+    standard: "WCAG2AAA",
+    runners: ["axe"],
+  },
+
+  urls: [
+    "https://torchbox.github.io/django-pattern-library/dpl-rendered-patterns/molecules/accordion/accordion.html",
+    "https://torchbox.github.io/django-pattern-library/dpl-rendered-patterns/pages/people/person_page.html",
+  ],
+};
+```
+
+Try this out by saving the file as `pa11y.config.js`, then:
+
+```sh
+npm install -g pa11y-ci
+pa11y-ci --config pa11y.config.js
+```
diff --git a/tests/templates/patterns/base.html b/tests/templates/patterns/base.html
@@ -11,7 +11,9 @@
     <body>
         {% include "patterns/atoms/sprites/sprites.html" %}
 
-        {% block content %}{{ pattern_library_rendered_pattern }}{% endblock %}
+        <main>
+            {% block content %}{{ pattern_library_rendered_pattern }}{% endblock %}
+        </main>
         <script src="{% static 'main.js' %}"></script>
     </body>
 </html>
diff --git a/tests/tests/test_commands.py b/tests/tests/test_commands.py
@@ -56,6 +56,7 @@ def test_shows_wrap_fragment(self):
     <use xlink:href="#close"></use>
 </svg>
 
+        </main>
         <script src="/static/main.js"></script>
     </body>
 </html>""", stdout.getvalue())
