feat: 'within' using another query (#34)

* feat: within using another querty

* within for. 'All' queries

* supports regex in within queries

* functions in within queries

Author: benmonro

.testcaferc.json

@@ -7,5 +7,5 @@
     "chrome:headless",
     "firefox:headless"
   ],
-  "concurrency": 1
+  "concurrency": 3
 }

src/index.js

@@ -3,6 +3,8 @@
 import { ClientFunction, Selector } from 'testcafe'
 import { queries } from '@testing-library/dom'
 
+const SELECTOR_TYPE = (Selector(new Function())()).constructor.name;
+
 
 
 export async function configureOnce(options) {
@@ -25,28 +27,92 @@ Object.keys(queries).forEach(queryName => {
   module.exports[queryName] = Selector(
     new Function(
       `
-      return TestingLibraryDom.${queryName}(document.body, ...arguments);
+      if(!window.tctlReplacer) {
+        window.tctlReplacer = function tctlReplacer(key, value) {
+          if (value instanceof RegExp)  
+            return ("__REGEXP " + value.toString());
+          else if (typeof value === 'function') 
+            return ("__FUNCTION " + value.toString());
+          else
+            return value;
+        }
+      }
+      const els = TestingLibraryDom.${queryName}(document.body, ...arguments);
+      if(!Array.isArray(els)) {
+        els.setAttribute('data-tctl-args', JSON.stringify(Array.from(arguments), window.tctlReplacer, 0));
+        els.setAttribute('data-tctl-queryname', '${queryName}');  
+      } else {
+        els.forEach((el,i) => {
+          el.setAttribute('data-tctl-args', JSON.stringify(Array.from(arguments), window.tctlReplacer, 0));
+          el.setAttribute('data-tctl-queryname', '${queryName}');  
+          el.setAttribute('data-tctl-index', i);     
+        });
+      }
+      return els;
       `,
     ),
-  )
+  );
 })
+function reviver(key, value) {
+  if (value.toString().indexOf('__REGEXP ') == 0) {
+    const m = value.split('__REGEXP ')[1].match(/\/(.*)\/(.*)?/);
+    return new RegExp(m[1], m[2] || '');
+  } else
+    return value;
+}
+
+export const within = async selector => {
+  if (selector instanceof Function) {
+    return within(selector());
+  }
+
+  if (selector.constructor.name === SELECTOR_TYPE) {
+    const el = await selector;
+    const withinQueryName = el.getAttribute('data-tctl-queryname');
 
-export const within = selector => {
-  const sanitizedSelector = selector.replace(/"/g, "'")
+    const withinArgs = JSON.parse(el.getAttribute('data-tctl-args'), reviver)
+      .map(arg => {
+        if (arg instanceof RegExp) {
+          return arg.toString();
+        } else if (arg.toString().indexOf('__FUNCTION ') == 0) {
+          return (arg.replace('__FUNCTION ', ''))
+        } else {
+          return JSON.stringify(arg);
+        }
+      }).join(', ');
+
+    const withinIndexer = el.hasAttribute('data-tctl-index') ? `[${el.getAttribute('data-tctl-index')}]` : '';
+
+    const withinSelectors = {};
+    Object.keys(queries).forEach(queryName => {
+      withinSelectors[queryName] = Selector(
+        new Function(`
+
+        const {within, ${withinQueryName}} = TestingLibraryDom;
+        const el = ${withinQueryName}(document.body, ${withinArgs})${withinIndexer};
+        return within(el).${queryName}(...arguments);
+    `
+        ));
+    });
+    return withinSelectors;
+  } else if (typeof (selector) === 'string') {
+    const sanitizedSelector = selector.replace(/"/g, "'");
 
-  const container = {}
+    const withinSelectors = {};
 
-  Object.keys(queries).forEach(queryName => {
-    container[queryName] = Selector(
-      new Function(
-        `
-        window.TestcafeTestingLibrary = window.TestcafeTestingLibrary || {}
-        window.TestcafeTestingLibrary["within_${sanitizedSelector}"] = window.TestcafeTestingLibrary["within_${sanitizedSelector}"] || TestingLibraryDom.within(document.querySelector("${sanitizedSelector}"))
-        return window.TestcafeTestingLibrary["within_${sanitizedSelector}"].${queryName}(...arguments)`,
-      ),
-    )
-  })
+    Object.keys(queries).forEach(queryName => {
+      withinSelectors[queryName] = Selector(
+        new Function(
+          `
+        const {within} = TestingLibraryDom;
+        return within(document.querySelector("${sanitizedSelector}")).${queryName}(...arguments);
+       `),
+      )
+    })
 
-  return container
+    return withinSelectors;
+  } else {
+    throw new Error(`"within" only accepts a string or another testing-library query as a parameter. ${selector} is not one of those`)
+  }
 }
 

test-app/index.html

@@ -32,7 +32,11 @@ <h2>getByPlaceholderText</h2>
   <section>
     <h2>getByText</h2>
     <button onclick="this.innerText = 'Button Clicked'">Button Text</button>
-    <div id="nested">
+    <div id="nested" data-testid="nested">
+      <h3>getByText within</h3>
+      <button onclick="this.innerText = 'Button Clicked'">Button Text</button>
+    </div>
+    <div id="nested2" data-testid="nested2">
       <h3>getByText within</h3>
       <button onclick="this.innerText = 'Button Clicked'">Button Text</button>
     </div>

tests/testcafe/within.js

@@ -1,5 +1,6 @@
 import { Selector } from 'testcafe'
-import { within } from '../../src'
+// eslint-disable-next-line import/named
+import { within, getAllByTestId, getByTestId } from '../../src'
 
 // eslint-disable-next-line babel/no-unused-expressions
 fixture`within`
@@ -34,4 +35,38 @@ test('still works after browser page reload', async t => {
 
   await t.eval(() => location.reload(true));
   await t.expect(nested.getByText('Button Text').exists).ok()
-})
+});
+
+
+test('works with nested selectors', async t => {
+  const nested = await within(getByTestId('nested'));
+  await t.expect(nested.getByText('Button Text').exists).ok()
+
+});
+
+test('works with nested selector from "All" query with index - regex', async t => {
+  const nestedDivs = getAllByTestId(/nested/);
+  await t.expect(nestedDivs.count).eql(2);
+  const nested = await within(nestedDivs.nth(0));
+
+  await t.expect(nested.getByText('Button Text').exists).ok();
+});
+
+test('works with nested selector from "All" query with index - exact:false', async t => {
+  const nestedDivs = getAllByTestId('nested', { exact: false });
+  await t.expect(nestedDivs.count).eql(2);
+  const nested = await within(nestedDivs.nth(0));
+
+  await t.expect(nested.getByText('Button Text').exists).ok();
+});
+
+test('works with nested selector from "All" query with index - function', async t => {
+  const nestedDivs = getAllByTestId(
+    (content, element) =>
+      element.getAttribute('data-testid').startsWith('nested')
+  );
+  await t.expect(nestedDivs.count).eql(2);
+  const nested = await within(nestedDivs.nth(0));
+
+  await t.expect(nested.getByText('Button Text').exists).ok();
+});

typings/index.d.ts

@@ -12,7 +12,7 @@ export function configure(
 export type TestcafeBoundFunction<T> = (...params: Parameters<BoundFunction<T>>) => Selector;
 export type TestcafeBoundFunctions<T> = { [P in keyof T]: TestcafeBoundFunction<T[P]> };
 
-export function within(selector: string): Promise<TestcafeBoundFunctions<typeof queries>>;
+export function within(selector: string | TestcafeBoundFunction): Promise<TestcafeBoundFunctions<typeof queries>>;
 
 export const getByLabelText: TestcafeBoundFunction<typeof queries.getByLabelText>;
 export const getAllByLabelText: TestcafeBoundFunction<typeof queries.getAllByLabelText>;