docs: add testing-library-selector to ecosystem (testing-library#656)

domasx2 · web-flow · commit ef7a906eb840 · 2020-11-29T10:13:15.000-05:00
diff --git a/docs/ecosystem-testing-library-selector.md b/docs/ecosystem-testing-library-selector.md
@@ -0,0 +1,44 @@
+---
+id: ecosystem-testing-library-selector
+title: testing-library-selector
+---
+
+[`testing-library-selector`][gh] is a library for `@testing-library` that
+provides reusable selectors. Written in typescript.
+
+```
+npm install --save-dev testing-library-selector
+```
+
+```typescript
+import { byLabelText, byRole, byTestId } from './selector'
+
+// define reusable selectors
+const ui = {
+  container: byTestId('my-container'),
+  submitButton: byRole('button', { name: 'Submit' }),
+  usernameInput: byLabelText('Username:'),
+
+  // can encode more specific html element type
+  passwordInput: byLabelText<HTMLInputElement>('Password:'),
+}
+
+// reuse them in the same test or across multiple tests by calling
+// .get(), .getAll(), .find(), .findAll(), .query(), .queryAll()
+it('example test', async () => {
+  // by default elements will be queried against screen
+  await ui.submitButton.find()
+  expect(ui.submitButton.query()).not.toBeInDocument()
+  expect(ui.submitButton.get()).toBeInDocument()
+
+  const containers = ui.container.getAll()
+  expect(containers).toHaveLength(3)
+
+  // provide a container as first param to query element inside that container
+  const username = ui.usernameInput.get(containers[0])
+})
+```
+
+- [testing-library-selector on GitHub][gh]
+
+[gh]: https://github.com/domasx2/testing-library-selector
diff --git a/sidebars.js b/sidebars.js
@@ -105,6 +105,7 @@ module.exports = {
         'ecosystem-jasmine-dom',
         'ecosystem-query-extensions',
         'ecosystem-rtl-simple-queries',
+        'ecosystem-testing-library-selector',
       ],
     },
   ],
