feat: support for within

* within first pass.  not the best, but it works

* within kept in window to avoid requerying the dom every time.

Author: benmonro

src/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-eval */
+/* eslint-disable no-new-func */
 import fs from 'fs'
 import path from 'path'
 import {ClientFunction, Selector} from 'testcafe'
@@ -11,20 +13,60 @@ const LIBRARY_UMD_CONTENT = fs.readFileSync(LIBRARY_UMD_PATH).toString()
 
 export const addTestcafeTestingLibrary = async t => {
   // eslint-disable-next-line
-  const inject = ClientFunction(() => window.eval(script), {
-    dependencies: {script: LIBRARY_UMD_CONTENT},
-  })
+  const inject = ClientFunction(
+    () => {
+      // eslint-disable-next-line no-undef
+      window.eval(script)
+      window.TestCafeTestingLibrary = {}
+    },
+    {
+      dependencies: {script: LIBRARY_UMD_CONTENT},
+    },
+  )
 
   await inject.with({boundTestRun: t})()
 }
 
 Object.keys(queries).forEach(queryName => {
   module.exports[queryName] = Selector(
-    // eslint-disable-next-line no-new-func
     new Function(
       `
       return DomTestingLibrary.${queryName}(document.body, ...arguments);
       `,
     ),
   )
 })
+
+export const within = async sel => {
+  await ClientFunction(
+    new Function(
+      ` 
+    const elem = document.querySelector("${sel}");
+    window.TestCafeTestingLibrary["within_${sel}"] = DomTestingLibrary.within(elem);
+
+    `,
+    ),
+  )()
+  const container = {}
+
+  Object.keys(queries).forEach(queryName => {
+    container[queryName] = Selector(
+      new Function(
+        `return window.TestCafeTestingLibrary["within_${sel}"].${queryName}(...arguments)`,
+      ),
+    )
+  })
+
+  return container
+  // const container = {}
+
+  // Object.keys(queries).forEach(queryName => {
+  //   container[queryName] = Selector(
+  //     new Function(
+  //       `return DomTestingLibrary.within(document.querySelector("${sel}")).${queryName}(...arguments)`,
+  //     ),
+  //   )
+  // })
+
+  // return container
+}

tests/testcafe/selectors.js

@@ -1,6 +1,5 @@
 /* eslint-disable jest/no-disabled-tests */
 /* eslint-disable import/named */
-import {Selector} from 'testcafe'
 import {
   getByText,
   getByPlaceholderText,
@@ -56,11 +55,6 @@ test('queryAllByText', async t => {
   await t.expect(queryAllByText('Non-existing Button Text').exists).notOk()
 })
 
-test.skip('getByText in container', async t => {
-  const nested = await Selector('#nested')
-  await t.click(getByText('Button Text', {container: nested}))
-})
-
 test.skip('getByTestId only throws the error message', async t => {
   const testId = 'Some random id'
   const errorMessage = `Unable to find an element by: [data-testid="${testId}"]`

tests/testcafe/within.js

@@ -0,0 +1,20 @@
+import {Selector} from 'testcafe'
+import {within, addTestcafeTestingLibrary} from '../../src'
+
+// eslint-disable-next-line babel/no-unused-expressions
+fixture`within`.beforeEach(addTestcafeTestingLibrary)
+  .page`http://localhost:13370`
+
+test('getByText within container', async t => {
+  const {getByText} = await within('#nested')
+  await t
+    .click(getByText('Button Text'))
+    .expect(Selector('button').withExactText('Button Clicked').exists)
+    .ok()
+})
+
+test("queryByPlaceholder doesn't find anything", async t => {
+  const {queryByPlaceholderText} = await within('#nested')
+
+  await t.expect(queryByPlaceholderText('Placeholder Text').exists).notOk()
+})

tests/unit/__snapshots__/selectors.test.js.snap

@@ -3,6 +3,7 @@
 exports[`exports expected selectors 1`] = `
 Array [
   "addTestcafeTestingLibrary",
+  "within",
   "queryAllByLabelText",
   "getAllByLabelText",
   "queryByLabelText",