diff --git a/docs/angular-testing-library/intro.md b/docs/angular-testing-library/intro.md index b6db0d012..60d07de29 100644 --- a/docs/angular-testing-library/intro.md +++ b/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 diff --git a/docs/bs-dom-testing-library/intro.md b/docs/bs-dom-testing-library/intro.md deleted file mode 100644 index 4198a67c2..000000000 --- a/docs/bs-dom-testing-library/intro.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -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/ diff --git a/docs/bs-react-testing-library/example-intro.md b/docs/bs-react-testing-library/example-intro.md deleted file mode 100644 index 164da0e52..000000000 --- a/docs/bs-react-testing-library/example-intro.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: example-intro -title: Example ---- - -## Basic - -```reason -/* Component_test.re */ - -open Jest; -open Expect; -open ReactTestingLibrary; - -test("Component renders", () => -
-

{ReasonReact.string("Heading")}

-
- |> 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__). diff --git a/docs/bs-dom-testing-library/example-intro.md b/docs/bs-react-testing-library/examples.md similarity index 81% rename from docs/bs-dom-testing-library/example-intro.md rename to docs/bs-react-testing-library/examples.md index fdc152eb7..ce8d544a7 100644 --- a/docs/bs-dom-testing-library/example-intro.md +++ b/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", () => +
+

{ReasonReact.string("Heading")}

+
+ |> 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__). diff --git a/docs/bs-react-testing-library/intro.md b/docs/bs-react-testing-library/intro.md index 0ff7398c4..13a74fde1 100644 --- a/docs/bs-react-testing-library/intro.md +++ b/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/ diff --git a/docs/cypress-testing-library/intro.md b/docs/cypress-testing-library/intro.md index c0fd68b0a..c32b86a6e 100644 --- a/docs/cypress-testing-library/intro.md +++ b/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 diff --git a/docs/ecosystem-bs-jest-dom.md b/docs/ecosystem-bs-jest-dom.md index d0b49d3c5..cab12eed1 100644 --- a/docs/ecosystem-bs-jest-dom.md +++ b/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/ diff --git a/docs/react-testing-library/intro.md b/docs/react-testing-library/intro.md index 56d09b432..7404029f2 100644 --- a/docs/react-testing-library/intro.md +++ b/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 diff --git a/docs/vue-testing-library/intro.md b/docs/vue-testing-library/intro.md index 6740d79c2..7cbd746e3 100644 --- a/docs/vue-testing-library/intro.md +++ b/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 diff --git a/website/pages/en/index.js b/website/pages/en/index.js index f6c62b8c2..7f0cdedaf 100755 --- a/website/pages/en/index.js +++ b/website/pages/en/index.js @@ -182,41 +182,35 @@ class Index extends React.Component { ) const Ecosystem = () => ( - + {[ { - 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)', diff --git a/website/sidebars.json b/website/sidebars.json index ff964705e..cbeb06325 100755 --- a/website/sidebars.json +++ b/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" ] } ], diff --git a/website/siteConfig.js b/website/siteConfig.js index 0c30faf91..68f4e3465 100755 --- a/website/siteConfig.js +++ b/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