From 1eda1eebc37db40d94181cb434f0f5e19f6a6462 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Sun, 18 Aug 2019 13:41:37 +0200
Subject: [PATCH] Add within() test example

---
 tests/__tests__/within.js | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 tests/__tests__/within.js

diff --git a/tests/__tests__/within.js b/tests/__tests__/within.js
new file mode 100644
index 00000000..e23a0085
--- /dev/null
+++ b/tests/__tests__/within.js
@@ -0,0 +1,34 @@
+import { render, within } from '@testing-library/vue'
+
+test('within() returns an object with all queries bound to the DOM node', () => {
+  const { getByTestId, getByText } = render({
+    template: `
+      <div>
+        <p>repeated text</p>
+        <div data-testid="div">repeated text</div>
+      </div>
+    `
+  })
+
+  // getByText() provided by render() fails because it finds multiple elements
+  // with the same text (as expected).
+  expect(() => getByText('repeated text')).toThrow(
+    'Found multiple elements with the text: repeated text'
+  )
+
+  const divNode = getByTestId('div')
+
+  // within() returns queries bound to the provided DOM node, so the following
+  // assertion passes. Notice how we are not using the getByText() function
+  // provided by render(), but the one coming from within().
+  within(divNode).getByText('repeated text')
+
+  // Here, proof that there's only one match for the specified text.
+  expect(divNode).toMatchInlineSnapshot(`
+    <div
+      data-testid="div"
+    >
+      repeated text
+    </div>
+  `)
+})