Add reason testing library documentation (testing-library#29)

* Add reason testing library documentation * Split reason docs into separate sections

Author: wyze

docs/api-queries.md

@@ -283,8 +283,8 @@ const usernameInputElement = getByTestId(container, 'username-input')
 > case. Using data-testid attributes do not resemble how your software is used
 > and should be avoided if possible. That said, they are _way_ better than
 > querying based on DOM structure or styling css class names. Learn more about
-> `data-testid`s from the blog post ["Making your UI tests resilient to
-> change"](https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269)
+> `data-testid`s from the blog post
+> ["Making your UI tests resilient to change"](https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269)
 
 #### Overriding `data-testid`
 

docs/bs-dom-testing-library/example-intro.md

@@ -0,0 +1,111 @@
+---
+id: example-intro
+title: Example
+---
+
+The below examples use
+[`bs-webapi`](https://github.com/reasonml-community/bs-webapi-incubator) to help
+with typings and creating events.
+
+## getByText
+
+```reason
+/* __tests__/example_test.re */
+open Jest;
+open DomTestingLibrary;
+open Expect;
+
+type parser;
+
+[@bs.new]
+external domParser : unit => parser = "DOMParser";
+
+[@bs.send.pipe : parser]
+external parseFromString : ( string, [@bs.as "text/html"] _) => Dom.element = "";
+
+[@bs.get]
+external body : Dom.element => Dom.element = "";
+
+[@bs.get]
+external firstChild : Dom.element => Dom.element = "";
+
+let div = domParser()
+ |> parseFromString({j|
+ <div>
+ <b title="greeting">Hello,</b>
+ <p data-testid="world"> World!</p>
+ <input type="text" placeholder="Enter something" />
+ <input type="text" value="Some value" />
+ <img src="" alt="Alt text" />
+ </div>
+ |j})
+ |> body
+ |> firstChild;
+
+describe("getByText", () => {
+ test("works with string matcher", () => {
+ let actual = div |> getByText(~matcher=`Str("Hello,"));
+
+ expect(actual) |> toMatchSnapshot;
+ });
+
+ test("works with regex matcher", () => {
+ let actual = div |> getByText(~matcher=`RegExp([%bs.re "/\\w!/"]));
+
+ expect(actual) |> toMatchSnapshot;
+ });
+
+ test("works with function matcher", () => {
+ let matcher = ( _text, node ) => (node |> tagName) === "P";
+ let actual = div |> getByText(~matcher=`Func(matcher));
+
+ expect(actual) |> toMatchSnapshot;
+ });
+});
+```
+
+## FireEvent
+
+```reason
+open Jest;
+open DomTestingLibrary;
+open Expect;
+
+describe("FireEvent", () => {
+ test("click works", () => {
+ open Webapi.Dom;
+
+ let node = document |> Document.createElement("button");
+ let spy = JestJs.inferred_fn();
+ let fn = spy |> MockJs.fn;
+ let clickHandler = _ => [@bs] fn("clicked!") |> ignore;
+
+ node |> Element.addEventListener("click", clickHandler);
+
+ FireEvent.click(node);
+
+ expect(spy |> MockJs.calls) |> toEqual([|"clicked!"|]);
+ });
+
+ test("change works", () => {
+ open Webapi.Dom;
+
+ let node = document |> Document.createElement("input");
+ let spy = JestJs.inferred_fn();
+ let fn = spy |> MockJs.fn;
+ let changeHandler = _ => [@bs] fn("changed!") |> ignore;
+ let event = Event.makeWithOptions("change", { "target": { "value": "1" } });
+
+ node |> Element.addEventListener("change", changeHandler);
+
+ FireEvent.change(node, event);
+
+ expect(spy |> MockJs.calls) |> toEqual([|"changed!"|]);
+ });
+});
+```
+
+## More
+
+You can find more bs-dom-testing-library examples at
+[wyze/bs-dom-testing-library/src/\_\_tests\_\_](https://github.com/wyze/bs-dom-testing-library/tree/master/src/__tests__).

docs/bs-dom-testing-library/intro.md

@@ -0,0 +1,59 @@
+---
+id: intro
+title: Introduction
+---
+
+[`bs-dom-testing-library`][gh] contains [BuckleScript][bs] bindings for
+`dom-testing-library`.
+
+```
+npm install --save-dev bs-dom-testing-library
+```
+
+- [bs-dom-testing-library on GitHub][gh]
+
+[gh]: https://github.com/wyze/bs-dom-testing-library
+
+## Setup
+
+After installation, you will need to add it to your `bsconfig.json` file like
+so:
+
+```json
+{
+ "bs-dev-dependencies": ["bs-dom-testing-library"]
+}
+```
+
+## Other Dependencies
+
+### bs-platform
+
+This is what [BuckleScript][bs] uses to compile the [Reason][re] code to JS. If
+it is not in your project you can install it like so:
+
+```
+npm install --save-dev bs-platform
+```
+
+### bs-jest
+
+This is the recommended test runner and is a wrapper around Jest. All of the
+examples here will be using it.
+
+- [bs-jest on GitHub](https://github.com/glennsl/bs-jest)
+
+```
+npm install --save-dev @glennsl/bs-jest
+```
+
+Then update `bsconfig.json`:
+
+```json
+{
+ "bs-dev-dependencies": ["@glennsl/bs-jest"]
+}
+```
+
+[bs]: https://bucklescript.github.io/
+[re]: https://reasonml.github.io/

docs/bs-react-testing-library/example-intro.md

@@ -0,0 +1,28 @@
+---
+id: example-intro
+title: Example
+---
+
+## Basic
+
+```reason
+/* Component_test.re */
+
+open Jest;
+open Expect;
+open ReactTestingLibrary;
+
+test("Component renders", () =>
+ <div style=ReactDOMRe.Style.make(~color="rebeccapurple", ())>
+ <h1> {ReasonReact.string("Heading")} </h1>
+ </div>
+ |> render
+ |> expect
+ |> toMatchSnapshot
+);
+```
+
+## More
+
+You can find more bs-react-testing-library examples at
+[wyze/bs-react-testing-library/src/\_\_tests\_\_](https://github.com/wyze/bs-react-testing-library/tree/master/src/__tests__).

docs/bs-react-testing-library/intro.md

@@ -0,0 +1,27 @@
+---
+id: intro
+title: Introduction
+---
+
+[`bs-react-testing-library`][gh] contains
+[BuckleScript](https://bucklescript.github.io/) bindings for
+`react-testing-library`.
+
+```
+npm install --save-dev bs-react-testing-library
+```
+
+- [bs-react-testing-library on GitHub][gh]
+
+[gh]: https://github.com/wyze/bs-react-testing-library
+
+## Setup
+
+After installation, you will need to add it to your `bsconfig.json` file like
+so:
+
+```json
+{
+ "bs-dev-dependencies": ["bs-react-testing-library"]
+}
+```

docs/ecosystem-bs-jest-dom.md

@@ -0,0 +1,59 @@
+---
+id: ecosystem-bs-jest-dom
+title: bs-jest-dom
+---
+
+[`bs-jest-dom`][gh] is a companion library for `bs-react-testing-library` that
+provides custom DOM element matchers for Jest
+
+```
+npm install --save-dev bs-jest-dom
+```
+
+- [bs-jest-dom on GitHub][gh]
+
+Check out [jest-dom's documentation](https://github.com/gnapse/jest-dom) for a
+full list of available matchers.
+
+[gh]: https://github.com/wyze/bs-jest-dom
+
+## Setup
+
+```json
+{
+ "bs-dev-dependencies": ["bs-jest-dom"]
+}
+```
+
+## Example
+
+```reason
+/* A_test.re */
+
+open Jest;
+open JestDom;
+open ReactTestingLibrary;
+
+module Heading = {
+ let component = ReasonReact.statelessComponent("Heading");
+
+ let make = (~text, _children) => {
+ ...component,
+ render: _self =>
+ <h1> {ReasonReact.string(text)} </h1>,
+ };
+};
+
+test("renders with text", () =>
+ <Heading text="Hello, World!" />
+ |> render
+ |> getByText(~matcher=`Str("Hello, World!"))
+ |> expect
+ |> toBeInTheDocument
+);
+```
+
+## More Examples
+
+You can find more bs-jest-dom examples at
+[wyze/bs-jest-dom/src/\_\_tests\_\_](https://github.com/wyze/bs-jest-dom/tree/master/src/__tests__).

docs/example-input-event.md

@@ -6,7 +6,9 @@ sidebar_label: Input Event
 
 > **Note**
 >
-> If you want to simulate a more natural typing behaviour while testing your component, consider the companion library [`user-event`](ecosystem-user-event.md)
+> If you want to simulate a more natural typing behaviour while testing your
+> component, consider the companion library
+> [`user-event`](ecosystem-user-event.md)
 
 ```jsx
 import React from 'react'

docs/learning.md

@@ -4,7 +4,9 @@ title: Learning Material
 sidebar_label: Learning Material
 ---
 
-- [TestingJavaScript.com](https://testingjavascript.com) A HUGE course all about testing JavaScript applications (See also the [course material with many examples using react-testing-library](https://github.com/kentcdodds/react-testing-library-course))
+- [TestingJavaScript.com](https://testingjavascript.com) A HUGE course all about
+ testing JavaScript applications (See also the
+ [course material with many examples using react-testing-library](https://github.com/kentcdodds/react-testing-library-course))
  by [Kent C. Dodds](https://github.com/kentcdodds)
 - [Migrating from Enzyme shallow rendering to explicit component mocks](https://www.youtube.com/watch?v=LHUdxkThTM0&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u)
 - [Confident React](https://www.youtube.com/watch?v=qXRPHRgcXJ0&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf)

website/pages/en/index.js

@@ -208,6 +208,13 @@ class Index extends React.Component {
  imageAlign: 'top',
  title: '[Angular Testing Library](./angular)',
  },
+ {
+ content: 'For testing ReasonReact Components',
+ image: `${baseUrl}img/reason-200x200.png`,
+ imageAlign: 'top',
+ title:
+ '[ReasonReact Testing Library](./docs/bs-react-testing-library/intro)',
+ },
  {
  content: 'Explore the ecosystem',
  image: `${baseUrl}img/construction-128x128.png`,

website/sidebars.json

@@ -45,9 +45,29 @@
  "type": "subcategory",
  "label": "Angular Testing Library",
  "ids": ["angular-testing-library/intro"]
+ },
+ {
+ "type": "subcategory",
+ "label": "Reason Testing Library",
+ "ids": [
+ "bs-dom-testing-library/intro",
+ "bs-dom-testing-library/example-intro"
+ ]
+ },
+ {
+ "type": "subcategory",
+ "label": "ReasonReact Testing Library",
+ "ids": [
+ "bs-react-testing-library/intro",
+ "bs-react-testing-library/example-intro"
+ ]
  }
  ],
- "Ecosystem": ["ecosystem-user-event", "ecosystem-jest-dom"],
+ "Ecosystem": [
+ "ecosystem-user-event",
+ "ecosystem-jest-dom",
+ "ecosystem-bs-jest-dom"
+ ],
  "Help": ["faq", "learning"]
  }
 }