From a3e382f56ec5100024c29b14eaccd102adb54f86 Mon Sep 17 00:00:00 2001
From: Emma Jiang <31319479+emmayjiang@users.noreply.github.com>
Date: Thu, 29 Jun 2023 16:23:35 -0700
Subject: [PATCH] Add tests to SearchBox (#28300)

* wrote SearchBox tests

* removing style tests
---
 .../components/SearchBox/SearchBox.test.tsx   | 108 +++++++++++++++++-
 1 file changed, 105 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/react-search/src/components/SearchBox/SearchBox.test.tsx b/packages/react-components/react-search/src/components/SearchBox/SearchBox.test.tsx
index cd06bc56cd110..bfa34201119d9 100644
--- a/packages/react-components/react-search/src/components/SearchBox/SearchBox.test.tsx
+++ b/packages/react-components/react-search/src/components/SearchBox/SearchBox.test.tsx
@@ -1,19 +1,121 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render, RenderResult, fireEvent, screen } from '@testing-library/react';
 import { SearchBox } from './SearchBox';
 import { isConformant } from '../../testing/isConformant';
+import { resetIdsForTests } from '@fluentui/react-utilities';
+import { searchBoxClassNames } from './useSearchBoxStyles.styles';
+
+function getSearchBox(): HTMLInputElement {
+  return screen.getByRole('searchbox') as HTMLInputElement;
+}
 
 describe('SearchBox', () => {
+  beforeEach(() => {
+    resetIdsForTests();
+  });
+
+  let renderedComponent: RenderResult | undefined;
+
+  afterEach(() => {
+    if (renderedComponent) {
+      renderedComponent.unmount();
+      renderedComponent = undefined;
+    }
+  });
+
   isConformant({
     Component: SearchBox,
     displayName: 'SearchBox',
     primarySlot: 'input',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            contentBefore: 'Test ContentBefore',
+            contentAfter: 'Test ContentAfter',
+            dismiss: 'Test Dismiss',
+          },
+          expectedClassNames: {
+            root: searchBoxClassNames.root,
+            contentAfter: searchBoxClassNames.contentAfter,
+            dismiss: searchBoxClassNames.dismiss,
+          },
+        },
+      ],
+    },
   });
 
-  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
   it('renders a default state', () => {
     const result = render(<SearchBox />);
     expect(result.container).toMatchSnapshot();
   });
+
+  // Tests from Input, added here since they were reimplemented for SearchBox
+  it('respects value', () => {
+    renderedComponent = render(<SearchBox value="hello" />);
+    expect(getSearchBox().value).toEqual('hello');
+  });
+
+  it('respects updates to value', () => {
+    renderedComponent = render(<SearchBox value="hello" />);
+    expect(getSearchBox().value).toEqual('hello');
+
+    renderedComponent.rerender(<SearchBox value="world" />);
+    expect(getSearchBox().value).toEqual('world');
+  });
+
+  it('respects defaultValue', () => {
+    renderedComponent = render(<SearchBox defaultValue="hello" />);
+    expect(getSearchBox().value).toEqual('hello');
+  });
+
+  it('ignores updates to defaultValue', () => {
+    renderedComponent = render(<SearchBox defaultValue="hello" />);
+    expect(getSearchBox().value).toEqual('hello');
+
+    renderedComponent.rerender(<SearchBox defaultValue="world" />);
+    expect(getSearchBox().value).toEqual('hello');
+  });
+
+  it('prefers value over defaultValue', () => {
+    renderedComponent = render(<SearchBox value="hello" defaultValue="world" />);
+    expect(getSearchBox().value).toEqual('hello');
+  });
+
+  it('with value, calls onChange but does not update on text entry', () => {
+    const onChange = jest.fn();
+    renderedComponent = render(<SearchBox value="hello" onChange={onChange} />);
+    const searchBox = getSearchBox();
+    fireEvent.change(searchBox, { target: { value: 'world' } });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][1]).toEqual({ value: 'world' });
+    expect(searchBox.value).toBe('hello');
+  });
+
+  it('with defaultValue, calls onChange and updates value on text entry', () => {
+    const onChange = jest.fn();
+    renderedComponent = render(<SearchBox defaultValue="hello" onChange={onChange} />);
+    const searchBox = getSearchBox();
+    fireEvent.change(searchBox, { target: { value: 'world' } });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][1]).toEqual({ value: 'world' });
+    expect(searchBox.value).toBe('world');
+  });
+
+  it('does not call onChange when value prop updates', () => {
+    const onChange = jest.fn();
+    renderedComponent = render(<SearchBox value="hello" onChange={onChange} />);
+    renderedComponent.rerender(<SearchBox value="world" onChange={onChange} />);
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+
+  it('clears value when dismiss is clicked', () => {
+    const onClick = jest.fn();
+    renderedComponent = render(<SearchBox defaultValue="hello" dismiss={{ onClick }} />);
+
+    userEvent.click(renderedComponent.getByRole('button'));
+    expect(getSearchBox().value).toBe('');
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
 });