From 3aed3cd9321c39453e9ea3cc6a943a05931c9188 Mon Sep 17 00:00:00 2001
From: Scott Gould <sbg@elastic.co>
Date: Thu, 27 Apr 2023 16:02:03 +1200
Subject: [PATCH 1/5] Add custom queries to within

---
 src/test/rtl/custom_render.test.tsx | 76 ++++++++++++++++++++++++++++-
 src/test/rtl/custom_render.ts       | 13 +++++
 2 files changed, 88 insertions(+), 1 deletion(-)

diff --git a/src/test/rtl/custom_render.test.tsx b/src/test/rtl/custom_render.test.tsx
index bc37f190278..8cea8e72cbb 100644
--- a/src/test/rtl/custom_render.test.tsx
+++ b/src/test/rtl/custom_render.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { render, screen } from './custom_render';
+import { render, screen, within } from './custom_render';
 
 describe('render returns the ByTestSubject custom queries', () => {
   test('queryByTestSubject', () => {
@@ -84,3 +84,77 @@ describe('screen has the ByTestSubject custom queries', () => {
     await expect(screen.findAllByTestSubject('test')).resolves.toHaveLength(1);
   });
 });
+
+describe('within has the ByTestSubject custom queries', () => {
+  test('queryByTestSubject', () => {
+    render(
+      <div data-testid="outer">
+        <div data-test-subj="inner" />
+      </div>
+    );
+
+    expect(
+      within(screen.getByTestId('outer')).queryByTestSubject('inner')
+    ).not.toBeNull();
+  });
+
+  test('queryAllByTestSubject', () => {
+    render(
+      <div data-testid="outer">
+        <div data-test-subj="inner" />
+      </div>
+    );
+
+    expect(
+      within(screen.getByTestId('outer')).queryAllByTestSubject('inner')
+    ).toHaveLength(1);
+  });
+
+  test('getByTestSubject', () => {
+    render(
+      <div data-testid="outer">
+        <div data-test-subj="inner" />
+      </div>
+    );
+
+    expect(
+      within(screen.getByTestId('outer')).getByTestSubject('inner')
+    ).toBeTruthy();
+  });
+
+  test('getAllByTestSubject', () => {
+    render(
+      <div data-testid="outer">
+        <div data-test-subj="inner" />
+      </div>
+    );
+
+    expect(
+      within(screen.getByTestId('outer')).getAllByTestSubject('inner')
+    ).toHaveLength(1);
+  });
+
+  test('findByTestSubject', async () => {
+    render(
+      <div data-testid="outer">
+        <div data-test-subj="inner" />
+      </div>
+    );
+
+    await expect(
+      within(screen.getByTestId('outer')).findByTestSubject('inner')
+    ).resolves.toBeTruthy();
+  });
+
+  test('findAllByTestSubject', async () => {
+    render(
+      <div data-testid="outer">
+        <div data-test-subj="inner" />
+      </div>
+    );
+
+    await expect(
+      within(screen.getByTestId('outer')).findAllByTestSubject('inner')
+    ).resolves.toHaveLength(1);
+  });
+});
diff --git a/src/test/rtl/custom_render.ts b/src/test/rtl/custom_render.ts
index a8a2b51f6ea..98bd66773a1 100644
--- a/src/test/rtl/custom_render.ts
+++ b/src/test/rtl/custom_render.ts
@@ -55,3 +55,16 @@ const customScreen: Screen<typeof queries & typeof dataTestSubjQueries> = {
 };
 
 export { customScreen as screen };
+
+/**
+ * Custom within util with EUI query helpers
+ *
+ * @see https://testing-library.com/docs/dom-testing-library/api-within/
+ */
+const customWithin = (element: HTMLElement) =>
+  within<typeof queries & typeof dataTestSubjQueries>(element, {
+    ...queries,
+    ...dataTestSubjQueries,
+  });
+
+export { customWithin as within };

From 72d4a3f2c892247156ba50582b6f431ecb119c5a Mon Sep 17 00:00:00 2001
From: Scott Gould <sbg@elastic.co>
Date: Thu, 27 Apr 2023 18:41:51 +1200
Subject: [PATCH 2/5] Add changelog

---
 upcoming_changelogs/6736.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 upcoming_changelogs/6736.md

diff --git a/upcoming_changelogs/6736.md b/upcoming_changelogs/6736.md
new file mode 100644
index 00000000000..af6f0295032
--- /dev/null
+++ b/upcoming_changelogs/6736.md
@@ -0,0 +1 @@
+- Added the RTL `*ByTestSubj` custom commands to `within()`.

From 106dbfc97808268a0c1dbab3c85bbc379902711b Mon Sep 17 00:00:00 2001
From: Scott Gould <sbg@elastic.co>
Date: Thu, 27 Apr 2023 18:43:48 +1200
Subject: [PATCH 3/5] Rename

---
 upcoming_changelogs/{6736.md => 6737.md} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename upcoming_changelogs/{6736.md => 6737.md} (100%)

diff --git a/upcoming_changelogs/6736.md b/upcoming_changelogs/6737.md
similarity index 100%
rename from upcoming_changelogs/6736.md
rename to upcoming_changelogs/6737.md

From 03890704010564b6237c48656fe9d9a7e4e38f19 Mon Sep 17 00:00:00 2001
From: Scott Gould <zinckiwi@gmail.com>
Date: Fri, 28 Apr 2023 10:42:57 +1200
Subject: [PATCH 4/5] Update upcoming_changelogs/6737.md

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
---
 upcoming_changelogs/6737.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/upcoming_changelogs/6737.md b/upcoming_changelogs/6737.md
index af6f0295032..6c1065901b1 100644
--- a/upcoming_changelogs/6737.md
+++ b/upcoming_changelogs/6737.md
@@ -1 +1 @@
-- Added the RTL `*ByTestSubj` custom commands to `within()`.
+- Added React Testing Library `*ByTestSubject` custom commands to `within()`. RTL utilities can be imported from `@elastic/eui/lib/test/rtl`.

From 76f8ac5d3a9efe6189d6607a5c5ad669f07f239a Mon Sep 17 00:00:00 2001
From: Scott Gould <sbg@elastic.co>
Date: Fri, 28 Apr 2023 10:44:40 +1200
Subject: [PATCH 5/5] Add exports

---
 src/test/rtl/index.d.ts | 2 +-
 src/test/rtl/index.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/test/rtl/index.d.ts b/src/test/rtl/index.d.ts
index 74c4ed7b7bf..50b7ae137b4 100644
--- a/src/test/rtl/index.d.ts
+++ b/src/test/rtl/index.d.ts
@@ -1,3 +1,3 @@
 export * from './component_helpers';
 export { queryByTestSubject, queryAllByTestSubject, getByTestSubject, getAllByTestSubject, findAllByTestSubject, findByTestSubject, } from './data_test_subj_queries';
-export { render, screen } from './custom_render';
+export { render, screen, within } from './custom_render';
diff --git a/src/test/rtl/index.ts b/src/test/rtl/index.ts
index 226741d1053..c896c7c1896 100644
--- a/src/test/rtl/index.ts
+++ b/src/test/rtl/index.ts
@@ -15,4 +15,4 @@ export {
   findAllByTestSubject,
   findByTestSubject,
 } from './data_test_subj_queries';
-export { render, screen } from './custom_render';
+export { render, screen, within } from './custom_render';