Extract tests by queries

src/__tests__/byDisplayValue.test.js

@@ -0,0 +1,102 @@
+// @flow
+import * as React from 'react';
+import { View, TextInput } from 'react-native';
+
+import { render } from '..';
+
+const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
+const PLACEHOLDER_CHEF = 'Who inspected freshness?';
+const INPUT_FRESHNESS = 'Custom Freshie';
+const INPUT_CHEF = 'I inspected freshie';
+const DEFAULT_INPUT_CHEF = 'What did you inspect?';
+const DEFAULT_INPUT_CUSTOMER = 'What banana?';
+
+const Banana = () => (
+  <View>
+    <TextInput
+      testID="bananaCustomFreshness"
+      placeholder={PLACEHOLDER_FRESHNESS}
+      value={INPUT_FRESHNESS}
+    />
+    <TextInput
+      testID="bananaChef"
+      placeholder={PLACEHOLDER_CHEF}
+      value={INPUT_CHEF}
+      defaultValue={DEFAULT_INPUT_CHEF}
+    />
+    <TextInput defaultValue={DEFAULT_INPUT_CUSTOMER} />
+    <TextInput defaultValue={'hello'} value="" />
+  </View>
+);
+
+test('getByDisplayValue, queryByDisplayValue', () => {
+  const { getByDisplayValue, queryByDisplayValue } = render(<Banana />);
+  const input = getByDisplayValue(/custom/i);
+
+  expect(input.props.value).toBe(INPUT_FRESHNESS);
+
+  const sameInput = getByDisplayValue(INPUT_FRESHNESS);
+
+  expect(sameInput.props.value).toBe(INPUT_FRESHNESS);
+  expect(() => getByDisplayValue('no value')).toThrow(
+    'Unable to find an element with displayValue: no value'
+  );
+
+  expect(queryByDisplayValue(/custom/i)).toBe(input);
+  expect(queryByDisplayValue('no value')).toBeNull();
+  expect(() => queryByDisplayValue(/fresh/i)).toThrow(
+    'Found multiple elements with display value: /fresh/i'
+  );
+});
+
+test('getByDisplayValue, queryByDisplayValue get element by default value only when value is undefined', () => {
+  const { getByDisplayValue, queryByDisplayValue } = render(<Banana />);
+  expect(() => getByDisplayValue(DEFAULT_INPUT_CHEF)).toThrow();
+  expect(queryByDisplayValue(DEFAULT_INPUT_CHEF)).toBeNull();
+
+  expect(() => getByDisplayValue('hello')).toThrow();
+  expect(queryByDisplayValue('hello')).toBeNull();
+
+  expect(getByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
+  expect(queryByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
+});
+
+test('getAllByDisplayValue, queryAllByDisplayValue', () => {
+  const { getAllByDisplayValue, queryAllByDisplayValue } = render(<Banana />);
+  const inputs = getAllByDisplayValue(/fresh/i);
+
+  expect(inputs).toHaveLength(2);
+  expect(() => getAllByDisplayValue('no value')).toThrow(
+    'Unable to find an element with displayValue: no value'
+  );
+
+  expect(queryAllByDisplayValue(/fresh/i)).toEqual(inputs);
+  expect(queryAllByDisplayValue('no value')).toHaveLength(0);
+});
+
+test('findBy queries work asynchronously', async () => {
+  const options = { timeout: 10 }; // Short timeout so that this test runs quickly
+  const { rerender, findByDisplayValue, findAllByDisplayValue } = render(
+    <View />
+  );
+
+  await expect(
+    findByDisplayValue('Display Value', options)
+  ).rejects.toBeTruthy();
+  await expect(
+    findAllByDisplayValue('Display Value', options)
+  ).rejects.toBeTruthy();
+
+  setTimeout(
+    () =>
+      rerender(
+        <View>
+          <TextInput value="Display Value" />
+        </View>
+      ),
+    20
+  );
+
+  await expect(findByDisplayValue('Display Value')).resolves.toBeTruthy();
+  await expect(findAllByDisplayValue('Display Value')).resolves.toHaveLength(1);
+}, 20000);

src/__tests__/byPlaceholderText.test.js

@@ -0,0 +1,61 @@
+// @flow
+import * as React from 'react';
+import { View, TextInput } from 'react-native';
+import { render } from '..';
+
+const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
+const PLACEHOLDER_CHEF = 'Who inspected freshness?';
+const INPUT_FRESHNESS = 'Custom Freshie';
+const INPUT_CHEF = 'I inspected freshie';
+const DEFAULT_INPUT_CHEF = 'What did you inspect?';
+
+const Banana = () => (
+  <View>
+    <TextInput
+      testID="bananaCustomFreshness"
+      placeholder={PLACEHOLDER_FRESHNESS}
+      value={INPUT_FRESHNESS}
+    />
+    <TextInput
+      testID="bananaChef"
+      placeholder={PLACEHOLDER_CHEF}
+      value={INPUT_CHEF}
+      defaultValue={DEFAULT_INPUT_CHEF}
+    />
+  </View>
+);
+
+test('getByPlaceholderText, queryByPlaceholderText', () => {
+  const { getByPlaceholderText, queryByPlaceholderText } = render(<Banana />);
+  const input = getByPlaceholderText(/custom/i);
+
+  expect(input.props.placeholder).toBe(PLACEHOLDER_FRESHNESS);
+
+  const sameInput = getByPlaceholderText(PLACEHOLDER_FRESHNESS);
+
+  expect(sameInput.props.placeholder).toBe(PLACEHOLDER_FRESHNESS);
+  expect(() => getByPlaceholderText('no placeholder')).toThrow(
+    'Unable to find an element with placeholder: no placeholder'
+  );
+
+  expect(queryByPlaceholderText(/add/i)).toBe(input);
+  expect(queryByPlaceholderText('no placeholder')).toBeNull();
+  expect(() => queryByPlaceholderText(/fresh/)).toThrow(
+    'Found multiple elements with placeholder: /fresh/ '
+  );
+});
+
+test('getAllByPlaceholderText, queryAllByPlaceholderText', () => {
+  const { getAllByPlaceholderText, queryAllByPlaceholderText } = render(
+    <Banana />
+  );
+  const inputs = getAllByPlaceholderText(/fresh/i);
+
+  expect(inputs).toHaveLength(2);
+  expect(() => getAllByPlaceholderText('no placeholder')).toThrow(
+    'Unable to find an element with placeholder: no placeholder'
+  );
+
+  expect(queryAllByPlaceholderText(/fresh/i)).toEqual(inputs);
+  expect(queryAllByPlaceholderText('no placeholder')).toHaveLength(0);
+});

src/__tests__/byTestId.test.js

@@ -1,78 +1,33 @@
 // @flow
 import React from 'react';
-import { View, Text, TextInput, TouchableOpacity, Button } from 'react-native';
+import { View, Text, TextInput, Button } from 'react-native';
 import { render } from '..';
 
 const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
 const PLACEHOLDER_CHEF = 'Who inspected freshness?';
 const INPUT_FRESHNESS = 'Custom Freshie';
 const INPUT_CHEF = 'I inspected freshie';
 
-class MyButton extends React.Component<any> {
-  render() {
-    return (
-      <TouchableOpacity onPress={this.props.onPress}>
-        <Text>{this.props.children}</Text>
-      </TouchableOpacity>
-    );
-  }
-}
-
-class Banana extends React.Component<any, any> {
-  state = {
-    fresh: false,
-  };
-
-  componentDidUpdate() {
-    if (this.props.onUpdate) {
-      this.props.onUpdate();
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.props.onUnmount) {
-      this.props.onUnmount();
-    }
-  }
-
-  changeFresh = () => {
-    this.setState((state) => ({
-      fresh: !state.fresh,
-    }));
-  };
-
-  render() {
-    const test = 0;
-    return (
-      <View>
-        <Text>Is the banana fresh?</Text>
-        <Text testID="bananaFresh">
-          {this.state.fresh ? 'fresh' : 'not fresh'}
-        </Text>
-        <TextInput
-          testID="bananaCustomFreshness"
-          placeholder={PLACEHOLDER_FRESHNESS}
-          value={INPUT_FRESHNESS}
-        />
-        <TextInput
-          testID="bananaChef"
-          placeholder={PLACEHOLDER_CHEF}
-          value={INPUT_CHEF}
-        />
-        <MyButton onPress={this.changeFresh} type="primary">
-          Change freshness!
-        </MyButton>
-        <Text testID="duplicateText">First Text</Text>
-        <Text testID="duplicateText">Second Text</Text>
-        <Text>{test}</Text>
-      </View>
-    );
-  }
-}
-
-const MyComponent = () => {
-  return <Text>My Component</Text>;
-};
+const Banana = () => (
+  <View>
+    <Text>Is the banana fresh?</Text>
+    <Text testID="bananaFresh">not fresh</Text>
+    <TextInput
+      testID="bananaCustomFreshness"
+      placeholder={PLACEHOLDER_FRESHNESS}
+      value={INPUT_FRESHNESS}
+    />
+    <TextInput
+      testID="bananaChef"
+      placeholder={PLACEHOLDER_CHEF}
+      value={INPUT_CHEF}
+    />
+    <Text testID="duplicateText">First Text</Text>
+    <Text testID="duplicateText">Second Text</Text>
+  </View>
+);
+
+const MyComponent = () => <Text>My Component</Text>;
 
 test('getByTestId returns only native elements', () => {
   const { getByTestId, getAllByTestId } = render(