diff --git a/src/index.js b/src/index.js
index fd98cb9..57c23bf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,102 +21,44 @@ export function configure(options) {
`;
return { content: configFunction };
}
+const withinSelectors = {};
+Object.keys(queries).forEach(withinQueryName => {
+
+ withinSelectors[withinQueryName] =
+ new Function(`
+ const els = arguments[0];
+ if(els.length > 1) {
+ throw new Error("within() only works with a single element, found " + els.length);
+ }
+ const el = els[0];
+ const args = Array.from(arguments).slice(1);
+ return window.TestingLibraryDom.within(el).${withinQueryName}.apply(null, args);
+ `)
+});
Object.keys(queries).forEach(queryName => {
+
module.exports[queryName] = Selector(
- new Function(
- `
- 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;
- `,
- ),
- );
+ (...args) => window.TestingLibraryDom[queryName](document.body, ...args)
+ , { dependencies: { queryName } });
+
})
-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());
+export const within = sel => {
+ if (sel instanceof Function) {
+ return within(sel());
}
-
- if (selector.constructor.name === SELECTOR_TYPE) {
- const count = await selector.count;
- if (count > 1) {
- throw new Error(`within() requires a single element, found ${count}`);
- }
- const el = await selector;
- const withinQueryName = el.getAttribute('data-tctl-queryname');
-
- 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 withinSelectors = {};
-
- Object.keys(queries).forEach(queryName => {
- withinSelectors[queryName] = Selector(
- new Function(
- `
- const {within} = TestingLibraryDom;
- return within(document.querySelector("${sanitizedSelector}")).${queryName}(...arguments);
- `),
- )
- })
-
- return withinSelectors;
+ if (isSelector(sel)) {
+ return (sel).addCustomMethods(withinSelectors, { returnDOMNodes: true })
+ } else if (typeof (sel) === 'string') {
+ return within(Selector(sel));
} else {
- throw new Error(`"within" only accepts a string or another testing-library query as a parameter. ${selector} is not one of those`)
+ throw new Error(`"within" only accepts a query (getBy, queryBy, etc), string or testcafe Selector`)
}
}
+function isSelector(sel) {
+ return sel.constructor.name === SELECTOR_TYPE;
+}
+
diff --git a/test-app/index.html b/test-app/index.html
index b2e8ac7..2978bbc 100644
--- a/test-app/index.html
+++ b/test-app/index.html
@@ -39,6 +39,8 @@ getByText within
getByText within
+ text only in 2nd nested
+ another thing only in 2nd nested
diff --git a/tests/testcafe/within.js b/tests/testcafe/within.js
index b0bb486..b1db078 100644
--- a/tests/testcafe/within.js
+++ b/tests/testcafe/within.js
@@ -39,17 +39,18 @@ test('still works after browser page reload', async t => {
test('works with nested selectors', async t => {
- const nested = await within(getByTestId('nested'));
- await t.expect(nested.getByText('Button Text').exists).ok()
-
+ await t.expect(within(getByTestId('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));
+ const nested = within(nestedDivs.nth(1));
+
+ await t
+ .expect(nested.getByText('Button Text').exists).ok()
+ .expect(nested.getByText('text only in 2nd nested').exists).ok()
- await t.expect(nested.getByText('Button Text').exists).ok();
});
test('works with nested selector from "All" query with index - exact:false', async t => {
@@ -71,6 +72,22 @@ test('works with nested selector from "All" query with index - function', async
await t.expect(nested.getByText('Button Text').exists).ok();
});
+test('works on a standard testcafe nested selector', async (t) => {
+ const nested = Selector('#nested');
+
+ await t.expect(within(nested).getByText('Button Text').exists).ok()
+});
+
+test('should throw if invalid param', async t => {
+ let didThrow = false;
+ try {
+ await t.expect(within({ 'foo': 'bar' }).getByText('baz').exists).ok();
+
+ } catch (e) {
+ didThrow = true;
+ }
+ await t.expect(didThrow).ok();
+});
test('should throw error if count > 1', async t => {
const nestedDivs = getAllByTestId(/nested/);
@@ -78,7 +95,7 @@ test('should throw error if count > 1', async t => {
await t.expect(nestedDivs.count).eql(2);
let didThrow = false;
try {
- await within(nestedDivs);
+ await t.expect(within(nestedDivs).getByText('blah'));
} catch (e) {
didThrow = true;
}