Clean up sidebar

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/example-intro.md → docs/bs-react-testing-library/examples.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/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/cypress-testing-library/intro.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/ecosystem-bs-jest-dom.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/react-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/vue-testing-library/intro.md

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

website/pages/en/index.js

@@ -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)',

website/sidebars.json

@@ -32,35 +32,15 @@
           "react-testing-library/faq"
         ]
       },
-      {
-        "type": "subcategory",
-        "label": "Cypress Testing Library",
-        "ids": ["cypress-testing-library/intro"]
-      },
-      {
-        "type": "subcategory",
-        "label": "Vue Testing Library",
-        "ids": ["vue-testing-library/intro"]
-      },
-      {
-        "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"
-        ]
-      },
+      "cypress-testing-library/intro",
+      "vue-testing-library/intro",
+      "angular-testing-library/intro",
       {
         "type": "subcategory",
         "label": "ReasonReact Testing Library",
         "ids": [
           "bs-react-testing-library/intro",
-          "bs-react-testing-library/example-intro"
+          "bs-react-testing-library/examples"
         ]
       }
     ],

website/siteConfig.js

@@ -95,7 +95,7 @@ const siteConfig = {
   /* Colors for website */
   colors: {
     primaryColor: '#292422',
-    secondaryColor: '#3344bb',
+    secondaryColor: '#2468e5',
   },
 
   // Add custom scripts here that would be placed in <script> tags.