Merge pull request #52 from alexkrolick/examples-language-tabs

add code for different wrappers on query api page

Author: alexkrolick

.vscode/markdown.code-snippets

@@ -0,0 +1,53 @@
+{
+	// Place your testing-library-docs workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	// Example:
+	// "Print to console": {
+	// 	"scope": "javascript,typescript",
+	// 	"prefix": "log",
+	// 	"body": [
+	// 		"console.log('$1');",
+	// 		"$2"
+	// 	],
+	// 	"description": "Log output to console"
+	// },
+	"Multilanguage Code Block": {
+		"scope": "markdown",
+		"prefix": "docblock",
+		"body": [
+			"```html",
+			"$4",
+			"```",
+			"",
+			"<!--DOCUSAURUS_CODE_TABS-->",
+			"",
+			"<!--Native-->",
+			"```js",
+			"import { $1 } from 'dom-testing-library'",
+			"",
+			"const container = document.body",
+			"const $3 = $1(container, '$2')",
+			"```",
+			"",
+			"<!--React-->",
+			"```js",
+			"import { render } from 'react-testing-library'",
+			"",
+			"const { $1 } = render(<MyComponent />)",
+			"const $3 = $1('$2')",
+			"```",
+			"",
+			"<!--Cypress-->",
+			"```js",
+			"cy.$1('$2').should('exist')",
+			"```",
+			"",
+			"<!--END_DOCUSAURUS_CODE_TABS-->"
+		],
+		"description": "Create a Docusaurus multi-language code block"
+	}
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.rulers": [
+    60, // try to keep examples this long
+    80, // hard wrap
+  ]
+}

docs/api-configuration.md

@@ -17,3 +17,35 @@ Configuration options:
 
 `testIdAttribute`: The attribute used by `getByTestId` and related queries.
 Defaults to `data-testid`. See [`getByTestId`](#getbytestid).
+
+```html
+
+```
+
+<!--DOCUSAURUS_CODE_TABS-->
+
+<!--Native-->
+
+```js
+// setup-tests.js
+import { configure } from 'dom-testing-library'
+
+configure({testIdAttribute: 'my-data-test-id'})`
+```
+
+<!--React-->
+
+```js
+// setup-tests.js
+import { configure } from 'react-testing-library'
+
+configure({testIdAttribute: 'my-data-test-id'})`
+```
+
+<!--Cypress-->
+
+```
+The configuration object is not currently exposed to in Cypress Testing Library
+```
+
+<!--END_DOCUSAURUS_CODE_TABS-->

docs/api-helpers.md

@@ -50,6 +50,12 @@ module.exports = {
 }
 ```
 
+> **Note**
+>
+> Custom queries can be added to `react-testing-library`'s `render` method by
+> adding `queries` to the options config object. See the render
+> [options](/docs/react-testing-library/api#render-options).
+
 ### Using other assertion libraries
 
 If you're not using jest, you may be able to find a similar set of custom
@@ -105,13 +111,37 @@ in use in `react-testing-library` and `vue-testing-library`.
 Example: To get the text 'hello' only within a section called 'messages', you
 could do:
 
-```javascript
+<!--DOCUSAURUS_CODE_TABS-->
+
+<!--Native-->
+
+```js
 import { within } from 'dom-testing-library'
 
 const { getByText } = within(document.getElementById('messages'))
 const helloMessage = getByText('hello')
 ```
 
+<!--React-->
+
+```js
+import { render, within } from 'react-testing-library'
+
+const { getByLabelText } = render(<MyComponent />)
+const signinModal = getByLabelText('Sign In')
+within(signinModal).getByPlaceholderText('Username')
+```
+
+<!--Cypress-->
+
+```js
+cy.get('form').within(() => {
+  cy.getByText('Button Text').should('be.disabled')
+})
+```
+
+<!--END_DOCUSAURUS_CODE_TABS-->
+
 ## Debugging
 
 When you use any `get` calls in your test cases, the current state of the