Add reason testing library documentation (#29)

* Add reason testing library documentation

* Split reason docs into separate sections

Author: superT999

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"]
   }
 }