test: form field test improvements (#112)

* test: added support for theme provider in rerender method * test(form-field): added inverted test cases
adaptui · Apr 9, 2021 · 4574e1c · 4574e1c · vercel · Apr 9, 2021
1 parent 47e0c05
commit 4574e1c
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,6 @@ React UI built with renderleskit-react & tailwind
 
 [Documentation & Getting Started](https://renderlesskit-react-tailwind-docs.vercel.app/docs/getting-started)
 
-
 ## Storybook
 
 > Start the development server

diff --git a/src/form-field/__tests__/FormField.test.tsx b/src/form-field/__tests__/FormField.test.tsx
@@ -48,54 +48,75 @@ describe("<FormField />", () => {
   });
 
   it("should render FormErrorText when isInvalid is true", () => {
-    render(<FormFieldComponent isInvalid id="email" />);
+    const { rerender } = render(<FormFieldComponent isInvalid id="email" />);
+    expect(screen.queryByTestId(ERROR_TESTID)).toBeInTheDocument();
 
-    expect(screen.getByTestId(ERROR_TESTID)).toBeInTheDocument();
+    rerender(<FormFieldComponent id="email" />);
+    expect(screen.queryByTestId(ERROR_TESTID)).not.toBeInTheDocument();
   });
 
   it("should render RequiredText when isRequired is true", () => {
-    render(<FormFieldComponent isRequired id="email" />);
+    const { rerender } = render(<FormFieldComponent isRequired id="email" />);
 
-    expect(screen.getByTestId(REQUIRED_TESTID)).toBeInTheDocument();
+    expect(screen.queryByTestId(REQUIRED_TESTID)).toBeInTheDocument();
+
+    rerender(<FormFieldComponent id="email" />);
+    expect(screen.queryByTestId(REQUIRED_TESTID)).not.toBeInTheDocument();
   });
 
   it("should set proper aria attributes to input on isDisabled", () => {
-    render(<FormFieldComponent isDisabled id="email" />);
+    const { rerender } = render(<FormFieldComponent isDisabled id="email" />);
 
-    expect(screen.getByTestId(INPUT_TESTID)).toHaveAttribute("disabled");
-    expect(screen.getByTestId(INPUT_TESTID)).toHaveAttribute(
+    expect(screen.queryByTestId(INPUT_TESTID)).toHaveAttribute("disabled");
+    expect(screen.queryByTestId(INPUT_TESTID)).toHaveAttribute(
       "aria-disabled",
       "true",
     );
+
+    rerender(<FormFieldComponent id="email" />);
+    expect(screen.queryByTestId(INPUT_TESTID)).not.toHaveAttribute("disabled");
   });
 
   it("should set proper aria attributes to input on isRequired", () => {
-    render(<FormFieldComponent isRequired id="email" />);
+    const { rerender } = render(<FormFieldComponent isRequired id="email" />);
 
-    expect(screen.getByTestId(INPUT_TESTID)).toHaveAttribute("required");
-    expect(screen.getByTestId(INPUT_TESTID)).toHaveAttribute(
+    expect(screen.queryByTestId(INPUT_TESTID)).toHaveAttribute("required");
+    expect(screen.queryByTestId(INPUT_TESTID)).toHaveAttribute(
       "aria-required",
       "true",
     );
+
+    rerender(<FormFieldComponent id="email" />);
+    expect(screen.queryByTestId(INPUT_TESTID)).not.toHaveAttribute("required");
   });
 
   it("should set proper aria attributes to input on isInvalid", () => {
-    render(<FormFieldComponent isInvalid id="email" />);
+    const { rerender } = render(<FormFieldComponent isInvalid id="email" />);
 
-    expect(screen.getByTestId(INPUT_TESTID)).toHaveAttribute(
+    expect(screen.queryByTestId(INPUT_TESTID)).toHaveAttribute(
       "aria-invalid",
       "true",
     );
+
+    rerender(<FormFieldComponent id="email" />);
+    expect(screen.queryByTestId(INPUT_TESTID)).not.toHaveAttribute(
+      "aria-invalid",
+    );
   });
 
   it("should set proper aria attributes to input on isReadOnly", () => {
-    render(<FormFieldComponent isReadOnly id="email" />);
+    const { rerender } = render(<FormFieldComponent isReadOnly id="email" />);
 
-    expect(screen.getByTestId(INPUT_TESTID)).toHaveAttribute("readonly");
-    expect(screen.getByTestId(INPUT_TESTID)).toHaveAttribute(
+    expect(screen.queryByTestId(INPUT_TESTID)).toHaveAttribute("readonly");
+    expect(screen.queryByTestId(INPUT_TESTID)).toHaveAttribute(
       "aria-readonly",
       "true",
     );
+
+    rerender(<FormFieldComponent id="email" />);
+    expect(screen.queryByTestId(INPUT_TESTID)).not.toHaveAttribute(
+      "aria-readonly",
+    );
   });
 
   it("should support render props", () => {

diff --git a/src/utils/testUtils.tsx b/src/utils/testUtils.tsx
@@ -18,10 +18,18 @@ type Render = (
 ) => RenderResult;
 
 export const render: Render = (children, options = {}) => {
-  return RtlRender(
+  const result = RtlRender(
     <RenderlesskitProvider theme={theme}>{children}</RenderlesskitProvider>,
     options,
   );
+
+  const _rerender = (rerenderUi: any) => {
+    result.rerender(
+      <RenderlesskitProvider theme={theme}>{rerenderUi}</RenderlesskitProvider>,
+    );
+  };
+
+  return { ...result, rerender: _rerender };
 };
 
 export const axe = configureAxe({
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,7 +6,6 @@ React UI built with renderleskit-react & tailwind

		[Documentation & Getting Started](https://renderlesskit-react-tailwind-docs.vercel.app/docs/getting-started)


		## Storybook

		> Start the development server
Expand Down