fix: change filter prop to selector for queries (#76)

* feat: formatting options for render() to remove options from debug output

* update name -- propsToRemove to just removeProps

* omitProps: remove prettyPrint plugin in favour of removing props in toJSON() call

* update options in render() to destructure debug config

* update filter fn to be named selector to match testing library API

BREAKING CHANGE: The filter option has been renamed to selector to maintain compatibility with the rest of the Testing Library API.

Author: ajsmth

src/lib/__tests__/misc.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Picker, Switch, View } from 'react-native';
+import { Picker, Switch, View, Text, TextInput, Button } from 'react-native';
 
 import { render, queryByProp, queryByTestId, cleanup } from '../../';
 
@@ -33,3 +33,47 @@ it('should render test', () => {
 
   expect(getByDisplayValue(true)).toBeTruthy();
 });
+
+test('selector option in queries filter out elements', () => {
+  function filterByLabel(label) {
+    return {
+      selector: ({ props }) => props.accessibilityLabel === label,
+    };
+  }
+
+  const { getByText, getByRole, getByDisplayValue, getByTitle } = render(
+    <>
+      <Text>hello world</Text>
+      <Text accessibilityLabel="labelled">hello world</Text>
+
+      <View accessibilityRole="link" />
+      <View accessibilityRole="link" accessibilityLabel="labelled" />
+
+      <TextInput value="hello joe" />
+      <TextInput value="hello joe" accessibilityLabel="labelled" />
+
+      <Button title="hello joe" />
+      <Button title="hello joe" accessibilityLabel="labelled" />
+    </>,
+  );
+
+  // more than one match:
+  expect(() => getByText(/hello world/i)).toThrow();
+  // filtered
+  getByText(/hello world/i, filterByLabel('labelled'));
+
+  // more than one match:
+  expect(() => getByRole('link')).toThrow();
+  // filtered
+  getByRole('link', filterByLabel('labelled'));
+
+  // more than one match:
+  expect(() => getByDisplayValue(/hello joe/i)).toThrow();
+  // filtered
+  getByDisplayValue(/hello joe/i, filterByLabel('labelled'));
+
+  // more than one match:
+  expect(() => getByTitle(/hello joe/i)).toThrow();
+  // filtered
+  getByTitle(/hello joe/i, filterByLabel('labelled'));
+});

src/lib/queries/display-value.js

@@ -9,13 +9,13 @@ import {
 function queryAllByDisplayValue(
   container,
   value,
-  { filter = n => n, exact = true, collapseWhitespace, trim, normalizer } = {},
+  { selector = n => n, exact = true, collapseWhitespace, trim, normalizer } = {},
 ) {
   const matcher = exact ? matches : fuzzyMatches;
   const matchNormalizer = makeNormalizer({ collapseWhitespace, trim, normalizer });
 
   return Array.from(container.findAll(node => validComponentFilter(node, 'displayValueComponents')))
-    .filter(filter)
+    .filter(selector)
     .filter(node => {
       if (node.type === 'Picker') {
         return matcher(node.getProp('selectedValue'), node, value, matchNormalizer);

src/lib/queries/role.js

@@ -50,11 +50,11 @@ const validTraits = [
   'text',
 ];
 
-function queryAllByRole(container, value, { filter = n => n } = {}) {
+function queryAllByRole(container, value, { selector = n => n } = {}) {
   const roleElements = container.findAll(c => c.getProp('accessibilityRole'));
   const traitElements = container.findAll(c => c.getProp('accessibilityTraits'));
 
-  return [...roleElements, ...traitElements].filter(filter).filter(node => {
+  return [...roleElements, ...traitElements].filter(selector).filter(node => {
     const role = node.getProp('accessibilityRole');
     const traits = node.getProp('accessibilityTraits');
 

src/lib/queries/text.js

@@ -10,13 +10,13 @@ import {
 function queryAllByText(
   container,
   text,
-  { filter = n => n, exact = true, collapseWhitespace, trim, normalizer } = {},
+  { selector = n => n, exact = true, collapseWhitespace, trim, normalizer } = {},
 ) {
   const matcher = exact ? matches : fuzzyMatches;
   const matchNormalizer = makeNormalizer({ collapseWhitespace, trim, normalizer });
 
   return Array.from(container.findAll(node => validComponentFilter(node, 'textComponents')))
-    .filter(filter)
+    .filter(selector)
     .filter(node => matcher(getNodeText(node), node, text, matchNormalizer));
 }
 

src/lib/queries/title.js

@@ -9,13 +9,13 @@ import {
 function queryAllByTitle(
   container,
   value,
-  { filter = n => n, exact = true, collapseWhitespace, trim, normalizer } = {},
+  { selector = n => n, exact = true, collapseWhitespace, trim, normalizer } = {},
 ) {
   const matcher = exact ? matches : fuzzyMatches;
   const matchNormalizer = makeNormalizer({ collapseWhitespace, trim, normalizer });
 
   return Array.from(container.findAll(node => validComponentFilter(node, 'titleComponents')))
-    .filter(filter)
+    .filter(selector)
     .filter(node => matcher(node.getProp('title'), node, value, matchNormalizer));
 }
 

src/lib/query-helpers.js

@@ -104,13 +104,13 @@ function queryAllByProp(
   prop,
   container,
   match,
-  { filter = n => n, exact = true, collapseWhitespace, trim, normalizer } = {},
+  { selector = n => n, exact = true, collapseWhitespace, trim, normalizer } = {},
 ) {
   const matcher = exact ? matches : fuzzyMatches;
   const matchNormalizer = makeNormalizer({ collapseWhitespace, trim, normalizer });
 
   return Array.from(container.findAll(c => c.getProp(prop)))
-    .filter(filter)
+    .filter(selector)
     .filter(node => {
       const value = node.getProp(prop);