Clean up sidebar (testing-library#35)

* condense sidebar elements with only one child to a single nav entry * add full titles for shorter lib docs * condense reason docs and add more links to reasonml docs * fix unreadable link color * fix homepage layout * fix broken svg * Update docs/bs-react-testing-library/examples.md Co-Authored-By: alexkrolick <alexkrolick@users.noreply.github.com>

Author: alexkrolick

docs/angular-testing-library/intro.md

@@ -1,6 +1,6 @@
 ---
 id: intro
-title: Introduction
+title: Angular Testing Library
 ---
 
 [`@angular-extensions/testing-library`][gh] is an [Angular][angular] adapter

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

@@ -1,13 +1,41 @@
 ---
-id: example-intro
-title: Example
+id: examples
+title: Examples
 ---
 
+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__).
+
+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__).
+
+## React Testing Library
+
+```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
+ |> container
+ |> expect
+ |> toMatchSnapshot
+);
+```
+
+## DOM Testing Library
+
 The below examples use
 [`bs-webapi`](https://github.com/reasonml-community/bs-webapi-incubator) to help
 with typings and creating events.
 
-## getByText
+### getByText
 
 ```reason
 /* __tests__/example_test.re */
@@ -104,8 +132,3 @@ describe("FireEvent", () => {
  });
 });
 ```
-
-## 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-react-testing-library/example-intro.md

@@ -1,27 +1,76 @@
 ---
 id: intro
-title: Introduction
+title: Reason Testing Library
+sidebar_label: Introduction
 ---
 
-[`bs-react-testing-library`][gh] contains
+Bindings for several testing libraries have been ported to [ReasonML][re].
+
+[`bs-react-testing-library`][gh-react] contains
 [BuckleScript](https://bucklescript.github.io/) bindings for
 `react-testing-library`.
 
+[`bs-dom-testing-library`][gh-dom] contains [BuckleScript][bs] bindings for
+`dom-testing-library`.
+
 ```
+npm install --save-dev bs-dom-testing-library
 npm install --save-dev bs-react-testing-library
 ```
 
-- [bs-react-testing-library on GitHub][gh]
+- [bs-react-testing-library on GitHub][gh-react]
+- [bs-dom-testing-library on GitHub][gh-dom]
 
-[gh]: https://github.com/wyze/bs-react-testing-library
+[gh-dom]: https://github.com/wyze/bs-dom-testing-library
+[gh-react]: https://github.com/wyze/bs-react-testing-library
 
 ## Setup
 
-After installation, you will need to add it to your `bsconfig.json` file like
-so:
+After installation, you will need the packages `bsconfig.json` file like so:
 
 ```json
 {
  "bs-dev-dependencies": ["bs-react-testing-library"]
 }
 ```
+
+_or_
+
+```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-dom-testing-library/example-intro.md renamed to docs/bs-react-testing-library/examples.md

@@ -1,6 +1,6 @@
 ---
 id: intro
-title: Introduction
+title: Cypress Testing Library
 ---
 
 [`cypress-testing-library`][gh] allows the use of dom-testing queries within

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

@@ -3,8 +3,10 @@ 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
+[`bs-jest-dom`][gh] is a companion library for
+[`bs-react-testing-library`](/docs/bs-react-testing-library/intro) that provides
+custom DOM element matchers for Jest in [ReasonML][re] via
+[BuckleScript][bucklescript].
 
 ```
 npm install --save-dev bs-jest-dom
@@ -57,3 +59,6 @@ test("renders with text", () =>
 
 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__).
+
+[re]: https://reasonml.github.io/
+[bucklescript]: https://bucklescript.github.io/

docs/cypress-testing-library/intro.md

@@ -1,6 +1,7 @@
 ---
 id: intro
-title: Introduction
+title: React Testing Library
+sidebar_label: Introduction
 ---
 
 [`react-testing-library`][gh] builds on top of `dom-testing-library` by adding

docs/ecosystem-bs-jest-dom.md

@@ -1,6 +1,6 @@
 ---
 id: intro
-title: Introduction
+title: Vue Testing Library
 ---
 
 [`vue-testing-library`][gh] is a lightweight adapter allowing

docs/react-testing-library/intro.md

@@ -182,41 +182,35 @@ class Index extends React.Component {
  )
 
  const Ecosystem = () => (
- <Block layout="fourColumn" background={null}>
+ <Block layout="threeColumn" background={null}>
  {[
  {
- content: 'For testing React Components',
  image: `${baseUrl}img/react-128x128.png`,
  imageAlign: 'top',
  title: '[React Testing Library](./react)',
  },
  {
- content: 'End-to-End Tests',
  image: `${baseUrl}img/evergreen-128x128.png`,
  imageAlign: 'top',
  title: '[Cypress Testing Library](./cypress)',
  },
  {
- content: 'For testing Vue Components',
  image: `${baseUrl}img/vue-400x400.png`,
  imageAlign: 'top',
  title: '[Vue Testing Library](./vue)',
  },
  {
- content: 'For testing Angular Components',
  image: `${baseUrl}img/angular-250x250.png`,
  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`,
  imageAlign: 'top',
  title: '[And more...](./docs/ecosystem-user-event)',