Skip to content

Commit 60d19f3

Browse files
alexkrolickalexkrolick
authored
Clean up sidebar (#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 <[email protected]>
1 parent 0490c45 commit 60d19f3

File tree

14 files changed

+112
-146
lines changed

14 files changed

+112
-146
lines changed

‎docs/angular-testing-library/intro.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: intro
3-
title: Introduction
3+
title: Angular Testing Library
44
---
55

66
[`@angular-extensions/testing-library`][gh] is an [Angular][angular] adapter

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

-59
This file was deleted.

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

-28
This file was deleted.

‎docs/bs-dom-testing-library/example-intro.md renamed to ‎docs/bs-react-testing-library/examples.md

+31-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,41 @@
11
---
2-
id: example-intro
3-
title: Example
2+
id: examples
3+
title: Examples
44
---
55

6+
You can find more bs-dom-testing-library examples at
7+
[wyze/bs-dom-testing-library/src/\_\_tests\_\_](https://github.com/wyze/bs-dom-testing-library/tree/master/src/__tests__).
8+
9+
You can find more bs-react-testing-library examples at
10+
[wyze/bs-react-testing-library/src/\_\_tests\_\_](https://github.com/wyze/bs-react-testing-library/tree/master/src/__tests__).
11+
12+
## React Testing Library
13+
14+
```reason
15+
/* Component_test.re */
16+
17+
open Jest;
18+
open Expect;
19+
open ReactTestingLibrary;
20+
21+
test("Component renders", () =>
22+
<div style=ReactDOMRe.Style.make(~color="rebeccapurple", ())>
23+
<h1> {ReasonReact.string("Heading")} </h1>
24+
</div>
25+
|> render
26+
|> container
27+
|> expect
28+
|> toMatchSnapshot
29+
);
30+
```
31+
32+
## DOM Testing Library
33+
634
The below examples use
735
[`bs-webapi`](https://github.com/reasonml-community/bs-webapi-incubator) to help
836
with typings and creating events.
937

10-
## getByText
38+
### getByText
1139

1240
```reason
1341
/* __tests__/example_test.re */
@@ -104,8 +132,3 @@ describe("FireEvent", () => {
104132
});
105133
});
106134
```
107-
108-
## More
109-
110-
You can find more bs-dom-testing-library examples at
111-
[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

+55-6
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,76 @@
11
---
22
id: intro
3-
title: Introduction
3+
title: Reason Testing Library
4+
sidebar_label: Introduction
45
---
56

6-
[`bs-react-testing-library`][gh] contains
7+
Bindings for several testing libraries have been ported to [ReasonML][re].
8+
9+
[`bs-react-testing-library`][gh-react] contains
710
[BuckleScript](https://bucklescript.github.io/) bindings for
811
`react-testing-library`.
912

13+
[`bs-dom-testing-library`][gh-dom] contains [BuckleScript][bs] bindings for
14+
`dom-testing-library`.
15+
1016
```
17+
npm install --save-dev bs-dom-testing-library
1118
npm install --save-dev bs-react-testing-library
1219
```
1320

14-
- [bs-react-testing-library on GitHub][gh]
21+
- [bs-react-testing-library on GitHub][gh-react]
22+
- [bs-dom-testing-library on GitHub][gh-dom]
1523

16-
[gh]: https://github.com/wyze/bs-react-testing-library
24+
[gh-dom]: https://github.com/wyze/bs-dom-testing-library
25+
[gh-react]: https://github.com/wyze/bs-react-testing-library
1726

1827
## Setup
1928

20-
After installation, you will need to add it to your `bsconfig.json` file like
21-
so:
29+
After installation, you will need the packages `bsconfig.json` file like so:
2230

2331
```json
2432
{
2533
"bs-dev-dependencies": ["bs-react-testing-library"]
2634
}
2735
```
36+
37+
_or_
38+
39+
```json
40+
{
41+
"bs-dev-dependencies": ["bs-dom-testing-library"]
42+
}
43+
```
44+
45+
## Other Dependencies
46+
47+
### bs-platform
48+
49+
This is what [BuckleScript][bs] uses to compile the [Reason][re] code to JS. If
50+
it is not in your project you can install it like so:
51+
52+
```
53+
npm install --save-dev bs-platform
54+
```
55+
56+
### bs-jest
57+
58+
This is the recommended test runner and is a wrapper around Jest. All of the
59+
examples here will be using it.
60+
61+
- [bs-jest on GitHub](https://github.com/glennsl/bs-jest)
62+
63+
```
64+
npm install --save-dev @glennsl/bs-jest
65+
```
66+
67+
Then update `bsconfig.json`:
68+
69+
```json
70+
{
71+
"bs-dev-dependencies": ["@glennsl/bs-jest"]
72+
}
73+
```
74+
75+
[bs]: https://bucklescript.github.io/
76+
[re]: https://reasonml.github.io/

‎docs/cypress-testing-library/intro.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: intro
3-
title: Introduction
3+
title: Cypress Testing Library
44
---
55

66
[`cypress-testing-library`][gh] allows the use of dom-testing queries within

‎docs/ecosystem-bs-jest-dom.md

+7-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ id: ecosystem-bs-jest-dom
33
title: bs-jest-dom
44
---
55

6-
[`bs-jest-dom`][gh] is a companion library for `bs-react-testing-library` that
7-
provides custom DOM element matchers for Jest
6+
[`bs-jest-dom`][gh] is a companion library for
7+
[`bs-react-testing-library`](/docs/bs-react-testing-library/intro) that provides
8+
custom DOM element matchers for Jest in [ReasonML][re] via
9+
[BuckleScript][bucklescript].
810

911
```
1012
npm install --save-dev bs-jest-dom
@@ -57,3 +59,6 @@ test("renders with text", () =>
5759

5860
You can find more bs-jest-dom examples at
5961
[wyze/bs-jest-dom/src/\_\_tests\_\_](https://github.com/wyze/bs-jest-dom/tree/master/src/__tests__).
62+
63+
[re]: https://reasonml.github.io/
64+
[bucklescript]: https://bucklescript.github.io/

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
id: intro
3-
title: Introduction
3+
title: React Testing Library
4+
sidebar_label: Introduction
45
---
56

67
[`react-testing-library`][gh] builds on top of `dom-testing-library` by adding

‎docs/vue-testing-library/intro.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: intro
3-
title: Introduction
3+
title: Vue Testing Library
44
---
55

66
[`vue-testing-library`][gh] is a lightweight adapter allowing

‎website/pages/en/index.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -182,41 +182,35 @@ class Index extends React.Component {
182182
)
183183

184184
const Ecosystem = () => (
185-
<Block layout="fourColumn" background={null}>
185+
<Block layout="threeColumn" background={null}>
186186
{[
187187
{
188-
content: 'For testing React Components',
189188
image: `${baseUrl}img/react-128x128.png`,
190189
imageAlign: 'top',
191190
title: '[React Testing Library](./react)',
192191
},
193192
{
194-
content: 'End-to-End Tests',
195193
image: `${baseUrl}img/evergreen-128x128.png`,
196194
imageAlign: 'top',
197195
title: '[Cypress Testing Library](./cypress)',
198196
},
199197
{
200-
content: 'For testing Vue Components',
201198
image: `${baseUrl}img/vue-400x400.png`,
202199
imageAlign: 'top',
203200
title: '[Vue Testing Library](./vue)',
204201
},
205202
{
206-
content: 'For testing Angular Components',
207203
image: `${baseUrl}img/angular-250x250.png`,
208204
imageAlign: 'top',
209205
title: '[Angular Testing Library](./angular)',
210206
},
211207
{
212-
content: 'For testing ReasonReact Components',
213208
image: `${baseUrl}img/reason-200x200.png`,
214209
imageAlign: 'top',
215210
title:
216211
'[ReasonReact Testing Library](./docs/bs-react-testing-library/intro)',
217212
},
218213
{
219-
content: 'Explore the ecosystem',
220214
image: `${baseUrl}img/construction-128x128.png`,
221215
imageAlign: 'top',
222216
title: '[And more...](./docs/ecosystem-user-event)',

‎website/sidebars.json

+4-24
Original file line numberDiff line numberDiff line change
@@ -32,35 +32,15 @@
3232
"react-testing-library/faq"
3333
]
3434
},
35-
{
36-
"type": "subcategory",
37-
"label": "Cypress Testing Library",
38-
"ids": ["cypress-testing-library/intro"]
39-
},
40-
{
41-
"type": "subcategory",
42-
"label": "Vue Testing Library",
43-
"ids": ["vue-testing-library/intro"]
44-
},
45-
{
46-
"type": "subcategory",
47-
"label": "Angular Testing Library",
48-
"ids": ["angular-testing-library/intro"]
49-
},
50-
{
51-
"type": "subcategory",
52-
"label": "Reason Testing Library",
53-
"ids": [
54-
"bs-dom-testing-library/intro",
55-
"bs-dom-testing-library/example-intro"
56-
]
57-
},
35+
"cypress-testing-library/intro",
36+
"vue-testing-library/intro",
37+
"angular-testing-library/intro",
5838
{
5939
"type": "subcategory",
6040
"label": "ReasonReact Testing Library",
6141
"ids": [
6242
"bs-react-testing-library/intro",
63-
"bs-react-testing-library/example-intro"
43+
"bs-react-testing-library/examples"
6444
]
6545
}
6646
],

‎website/siteConfig.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const siteConfig = {
9595
/* Colors for website */
9696
colors: {
9797
primaryColor: '#292422',
98-
secondaryColor: '#3344bb',
98+
secondaryColor: '#2468e5',
9999
},
100100

101101
// Add custom scripts here that would be placed in <script> tags.

0 commit comments

Comments
 (0)