From cd261224c42f6a704949e40cf2db01075750d21d Mon Sep 17 00:00:00 2001
From: Julien Fabre <julien.fabre.33@gmail.com>
Date: Mon, 4 Oct 2021 06:23:27 +0200
Subject: [PATCH] [GH-868]: add unit tests viewHeaderSearch (#1406)

* chore[#868]: add unit tests viewHeaderSearch

* fix: review test and add testUtils
---
 .../viewHeaderSearch.test.tsx.snap            | 35 ++++++++++
 .../viewHeader/viewHeaderSearch.test.tsx      | 64 +++++++++++++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 webapp/src/components/viewHeader/__snapshots__/viewHeaderSearch.test.tsx.snap
 create mode 100644 webapp/src/components/viewHeader/viewHeaderSearch.test.tsx

diff --git a/webapp/src/components/viewHeader/__snapshots__/viewHeaderSearch.test.tsx.snap b/webapp/src/components/viewHeader/__snapshots__/viewHeaderSearch.test.tsx.snap
new file mode 100644
index 000000000..b2aa9a58b
--- /dev/null
+++ b/webapp/src/components/viewHeader/__snapshots__/viewHeaderSearch.test.tsx.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/viewHeader/ViewHeaderSearch return input after click on search button 1`] = `
+<div>
+  <input
+    class="Editable undefined"
+    placeholder="Search text"
+    value=""
+  />
+</div>
+`;
+
+exports[`components/viewHeader/ViewHeaderSearch return search menu 1`] = `
+<div>
+  <button
+    class="Button    "
+    type="button"
+  >
+    <span>
+      Search
+    </span>
+  </button>
+</div>
+`;
+
+exports[`components/viewHeader/ViewHeaderSearch search text after input after click on search button and search text 1`] = `
+<div>
+  <input
+    class="Editable undefined"
+    placeholder="Search text"
+    title="Hello"
+    value="Hello"
+  />
+</div>
+`;
diff --git a/webapp/src/components/viewHeader/viewHeaderSearch.test.tsx b/webapp/src/components/viewHeader/viewHeaderSearch.test.tsx
new file mode 100644
index 000000000..567b6a850
--- /dev/null
+++ b/webapp/src/components/viewHeader/viewHeaderSearch.test.tsx
@@ -0,0 +1,64 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import {Provider as ReduxProvider} from 'react-redux'
+
+import '@testing-library/jest-dom'
+import userEvent from '@testing-library/user-event'
+
+import {mockStateStore, wrapIntl} from '../../testUtils'
+
+import ViewHeaderSearch from './viewHeaderSearch'
+
+describe('components/viewHeader/ViewHeaderSearch', () => {
+    const state = {
+        users: {
+            me: {
+                id: 'user-id-1',
+                username: 'username_1'},
+        },
+        searchText: {
+        },
+    }
+
+    const store = mockStateStore([], state)
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+    test('return search menu', () => {
+        const {container} = render(
+            wrapIntl(
+                <ReduxProvider store={store}>
+                    <ViewHeaderSearch/>
+                </ReduxProvider>,
+            ),
+        )
+        expect(container).toMatchSnapshot()
+    })
+    test('return input after click on search button', () => {
+        const {container} = render(
+            wrapIntl(
+                <ReduxProvider store={store}>
+                    <ViewHeaderSearch/>
+                </ReduxProvider>,
+            ),
+        )
+        const buttonElement = screen.getByRole('button')
+        userEvent.click(buttonElement)
+        expect(container).toMatchSnapshot()
+    })
+    test('search text after input after click on search button and search text', () => {
+        const {container} = render(
+            wrapIntl(
+                <ReduxProvider store={store}>
+                    <ViewHeaderSearch/>
+                </ReduxProvider>,
+            ),
+        )
+        userEvent.click(screen.getByRole('button'))
+        const elementSearchText = screen.getByPlaceholderText('Search text')
+        userEvent.type(elementSearchText, 'Hello')
+        expect(container).toMatchSnapshot()
+    })
+})