From 8b66243ca2160bdb249194f64feaa3bb4947e278 Mon Sep 17 00:00:00 2001
From: Nishant Mittal <mittalnishant14@outlook.com>
Date: Tue, 26 Oct 2021 16:58:53 +0530
Subject: [PATCH] [GH-839] Unit tests for viewTitle.tsx (#1662)

* test: unit tests for viewTitle.tsx

* readonly: false
---
 .../__snapshots__/viewTitle.test.tsx.snap     | 656 ++++++++++++++++++
 webapp/src/components/viewTitle.test.tsx      | 166 +++++
 2 files changed, 822 insertions(+)
 create mode 100644 webapp/src/components/__snapshots__/viewTitle.test.tsx.snap
 create mode 100644 webapp/src/components/viewTitle.test.tsx

diff --git a/webapp/src/components/__snapshots__/viewTitle.test.tsx.snap b/webapp/src/components/__snapshots__/viewTitle.test.tsx.snap
new file mode 100644
index 000000000..d70d7e209
--- /dev/null
+++ b/webapp/src/components/__snapshots__/viewTitle.test.tsx.snap
@@ -0,0 +1,656 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/viewTitle add random icon 1`] = `
+<div>
+  <div
+    class="ViewTitle"
+  >
+    <div
+      class="add-buttons add-visible"
+    >
+      <button
+        type="button"
+      >
+        <svg
+          class="EmojiIcon Icon"
+          viewBox="0 0 496 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"
+          />
+        </svg>
+        <span>
+          Add icon
+        </span>
+      </button>
+      <button
+        type="button"
+      >
+        <svg
+          class="ShowIcon Icon"
+          viewBox="0 0 576 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
+          />
+        </svg>
+        <span>
+          show description
+        </span>
+      </button>
+    </div>
+    <div
+      class="title"
+    >
+      <input
+        class="Editable title"
+        placeholder="Untitled board"
+        spellcheck="true"
+        title="board title"
+        value="board title"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/viewTitle hide description 1`] = `
+<div>
+  <div
+    class="ViewTitle"
+  >
+    <div
+      class="add-buttons add-visible"
+    >
+      <button
+        type="button"
+      >
+        <svg
+          class="ShowIcon Icon"
+          viewBox="0 0 576 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
+          />
+        </svg>
+        <span>
+          show description
+        </span>
+      </button>
+    </div>
+    <div
+      class="title"
+    >
+      <div
+        class="BlockIconSelector"
+      >
+        <div
+          aria-label="menuwrapper"
+          class="MenuWrapper"
+          role="button"
+        >
+          <div
+            class="octo-icon size-m"
+          >
+            <span>
+              i
+            </span>
+          </div>
+        </div>
+      </div>
+      <input
+        class="Editable title"
+        placeholder="Untitled board"
+        spellcheck="true"
+        title="board title"
+        value="board title"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/viewTitle should match snapshot 1`] = `
+<div>
+  <div
+    class="ViewTitle"
+  >
+    <div
+      class="add-buttons add-visible"
+    >
+      <button
+        type="button"
+      >
+        <svg
+          class="HideIcon Icon"
+          viewBox="0 0 640 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
+          />
+        </svg>
+        <span>
+          hide description
+        </span>
+      </button>
+    </div>
+    <div
+      class="title"
+    >
+      <div
+        class="BlockIconSelector"
+      >
+        <div
+          aria-label="menuwrapper"
+          class="MenuWrapper"
+          role="button"
+        >
+          <div
+            class="octo-icon size-m"
+          >
+            <span>
+              i
+            </span>
+          </div>
+        </div>
+      </div>
+      <input
+        class="Editable title"
+        placeholder="Untitled board"
+        spellcheck="true"
+        title="board title"
+        value="board title"
+      />
+    </div>
+    <div
+      class="description"
+    >
+      <div
+        class="MarkdownEditor octo-editor  "
+      >
+        <div
+          class="octo-editor-preview"
+        />
+        <div
+          class="octo-editor-active Editor"
+          style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
+        >
+          <div
+            id="test-id-wrapper"
+          >
+            <textarea
+              id="test-id"
+              style="display: none;"
+            />
+            <div
+              class="EasyMDEContainer"
+            >
+              <div
+                class="CodeMirror cm-s-easymde CodeMirror-wrap"
+              >
+                <div
+                  style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 0px;"
+                >
+                  <textarea
+                    autocapitalize="off"
+                    autocorrect="off"
+                    spellcheck="false"
+                    style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
+                    tabindex="0"
+                  />
+                </div>
+                <div
+                  class="CodeMirror-vscrollbar"
+                  cm-not-content="true"
+                  style="display: block; bottom: 0px;"
+                  tabindex="-1"
+                >
+                  <div
+                    style="min-width: 1px; height: 53px;"
+                  />
+                </div>
+                <div
+                  class="CodeMirror-hscrollbar"
+                  cm-not-content="true"
+                  tabindex="-1"
+                >
+                  <div
+                    style="height: 100%; min-height: 1px; width: 0px;"
+                  />
+                </div>
+                <div
+                  class="CodeMirror-scrollbar-filler"
+                  cm-not-content="true"
+                />
+                <div
+                  class="CodeMirror-gutter-filler"
+                  cm-not-content="true"
+                />
+                <div
+                  class="CodeMirror-scroll"
+                  style="min-height: 10px;"
+                  tabindex="-1"
+                >
+                  <div
+                    class="CodeMirror-sizer"
+                    style="margin-left: 0px; padding-right: 0px; padding-bottom: 0px;"
+                  >
+                    <div
+                      style="position: relative;"
+                    >
+                      <div
+                        class="CodeMirror-lines"
+                        role="presentation"
+                      >
+                        <div
+                          role="presentation"
+                          style="position: relative; outline: none;"
+                        >
+                          <div
+                            class="CodeMirror-measure"
+                          >
+                            <pre
+                              class="CodeMirror-line-like"
+                            >
+                              <span>
+                                xxxxxxxxxx
+                              </span>
+                            </pre>
+                          </div>
+                          <div
+                            class="CodeMirror-measure"
+                          />
+                          <div
+                            style="position: relative; z-index: 1;"
+                          />
+                          <div
+                            class="CodeMirror-cursors"
+                          />
+                          <div
+                            class="CodeMirror-code"
+                            role="presentation"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
+                  />
+                  <div
+                    class="CodeMirror-gutters"
+                    style="display: none;"
+                  />
+                </div>
+              </div>
+              <div
+                class="editor-preview-side editor-preview"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/viewTitle should match snapshot readonly 1`] = `
+<div>
+  <div
+    class="ViewTitle"
+  >
+    <div
+      class="add-buttons add-visible"
+    />
+    <div
+      class="title"
+    >
+      <div
+        class="BlockIconSelector"
+      >
+        <div
+          aria-label="menuwrapper"
+          class="MenuWrapper"
+          role="button"
+        >
+          <div
+            class="octo-icon size-m"
+          >
+            <span>
+              i
+            </span>
+          </div>
+        </div>
+      </div>
+      <input
+        class="Editable readonly title"
+        placeholder="Untitled board"
+        readonly=""
+        spellcheck="true"
+        title="board title"
+        value="board title"
+      />
+    </div>
+    <div
+      class="description"
+    >
+      <div
+        class="MarkdownEditor octo-editor  "
+      >
+        <div
+          class="octo-editor-preview"
+        />
+        <div
+          class="octo-editor-active Editor"
+          style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
+        >
+          <div
+            id="test-id-wrapper"
+          >
+            <textarea
+              id="test-id"
+              style="display: none;"
+            />
+            <div
+              class="EasyMDEContainer"
+            >
+              <div
+                class="CodeMirror cm-s-easymde CodeMirror-wrap"
+              >
+                <div
+                  style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 0px;"
+                >
+                  <textarea
+                    autocapitalize="off"
+                    autocorrect="off"
+                    spellcheck="false"
+                    style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
+                    tabindex="0"
+                  />
+                </div>
+                <div
+                  class="CodeMirror-vscrollbar"
+                  cm-not-content="true"
+                  style="display: block; bottom: 0px;"
+                  tabindex="-1"
+                >
+                  <div
+                    style="min-width: 1px; height: 53px;"
+                  />
+                </div>
+                <div
+                  class="CodeMirror-hscrollbar"
+                  cm-not-content="true"
+                  tabindex="-1"
+                >
+                  <div
+                    style="height: 100%; min-height: 1px; width: 0px;"
+                  />
+                </div>
+                <div
+                  class="CodeMirror-scrollbar-filler"
+                  cm-not-content="true"
+                />
+                <div
+                  class="CodeMirror-gutter-filler"
+                  cm-not-content="true"
+                />
+                <div
+                  class="CodeMirror-scroll"
+                  style="min-height: 10px;"
+                  tabindex="-1"
+                >
+                  <div
+                    class="CodeMirror-sizer"
+                    style="margin-left: 0px; padding-right: 0px; padding-bottom: 0px;"
+                  >
+                    <div
+                      style="position: relative;"
+                    >
+                      <div
+                        class="CodeMirror-lines"
+                        role="presentation"
+                      >
+                        <div
+                          role="presentation"
+                          style="position: relative; outline: none;"
+                        >
+                          <div
+                            class="CodeMirror-measure"
+                          >
+                            <pre
+                              class="CodeMirror-line-like"
+                            >
+                              <span>
+                                xxxxxxxxxx
+                              </span>
+                            </pre>
+                          </div>
+                          <div
+                            class="CodeMirror-measure"
+                          />
+                          <div
+                            style="position: relative; z-index: 1;"
+                          />
+                          <div
+                            class="CodeMirror-cursors"
+                          />
+                          <div
+                            class="CodeMirror-code"
+                            role="presentation"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
+                  />
+                  <div
+                    class="CodeMirror-gutters"
+                    style="display: none;"
+                  />
+                </div>
+              </div>
+              <div
+                class="editor-preview-side editor-preview"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/viewTitle show description 1`] = `
+<div>
+  <div
+    class="ViewTitle"
+  >
+    <div
+      class="add-buttons add-visible"
+    >
+      <button
+        type="button"
+      >
+        <svg
+          class="HideIcon Icon"
+          viewBox="0 0 640 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
+          />
+        </svg>
+        <span>
+          hide description
+        </span>
+      </button>
+    </div>
+    <div
+      class="title"
+    >
+      <div
+        class="BlockIconSelector"
+      >
+        <div
+          aria-label="menuwrapper"
+          class="MenuWrapper"
+          role="button"
+        >
+          <div
+            class="octo-icon size-m"
+          >
+            <span>
+              i
+            </span>
+          </div>
+        </div>
+      </div>
+      <input
+        class="Editable title"
+        placeholder="Untitled board"
+        spellcheck="true"
+        title="board title"
+        value="board title"
+      />
+    </div>
+    <div
+      class="description"
+    >
+      <div
+        class="MarkdownEditor octo-editor  "
+      >
+        <div
+          class="octo-editor-preview"
+        />
+        <div
+          class="octo-editor-active Editor"
+          style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
+        >
+          <div
+            id="test-id-wrapper"
+          >
+            <textarea
+              id="test-id"
+              style="display: none;"
+            />
+            <div
+              class="EasyMDEContainer"
+            >
+              <div
+                class="CodeMirror cm-s-easymde CodeMirror-wrap"
+              >
+                <div
+                  style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 0px;"
+                >
+                  <textarea
+                    autocapitalize="off"
+                    autocorrect="off"
+                    spellcheck="false"
+                    style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
+                    tabindex="0"
+                  />
+                </div>
+                <div
+                  class="CodeMirror-vscrollbar"
+                  cm-not-content="true"
+                  style="display: block; bottom: 0px;"
+                  tabindex="-1"
+                >
+                  <div
+                    style="min-width: 1px; height: 53px;"
+                  />
+                </div>
+                <div
+                  class="CodeMirror-hscrollbar"
+                  cm-not-content="true"
+                  tabindex="-1"
+                >
+                  <div
+                    style="height: 100%; min-height: 1px; width: 0px;"
+                  />
+                </div>
+                <div
+                  class="CodeMirror-scrollbar-filler"
+                  cm-not-content="true"
+                />
+                <div
+                  class="CodeMirror-gutter-filler"
+                  cm-not-content="true"
+                />
+                <div
+                  class="CodeMirror-scroll"
+                  style="min-height: 10px;"
+                  tabindex="-1"
+                >
+                  <div
+                    class="CodeMirror-sizer"
+                    style="margin-left: 0px; padding-right: 0px; padding-bottom: 0px;"
+                  >
+                    <div
+                      style="position: relative;"
+                    >
+                      <div
+                        class="CodeMirror-lines"
+                        role="presentation"
+                      >
+                        <div
+                          role="presentation"
+                          style="position: relative; outline: none;"
+                        >
+                          <div
+                            class="CodeMirror-measure"
+                          >
+                            <pre
+                              class="CodeMirror-line-like"
+                            >
+                              <span>
+                                xxxxxxxxxx
+                              </span>
+                            </pre>
+                          </div>
+                          <div
+                            class="CodeMirror-measure"
+                          />
+                          <div
+                            style="position: relative; z-index: 1;"
+                          />
+                          <div
+                            class="CodeMirror-cursors"
+                          />
+                          <div
+                            class="CodeMirror-code"
+                            role="presentation"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
+                  />
+                  <div
+                    class="CodeMirror-gutters"
+                    style="display: none;"
+                  />
+                </div>
+              </div>
+              <div
+                class="editor-preview-side editor-preview"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/webapp/src/components/viewTitle.test.tsx b/webapp/src/components/viewTitle.test.tsx
new file mode 100644
index 000000000..c32ae12d3
--- /dev/null
+++ b/webapp/src/components/viewTitle.test.tsx
@@ -0,0 +1,166 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import '@testing-library/jest-dom'
+import {act, render, screen, fireEvent} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import React from 'react'
+import {Provider as ReduxProvider} from 'react-redux'
+import {mocked} from 'ts-jest/utils'
+
+import mutator from '../mutator'
+import {Utils} from '../utils'
+import {TestBlockFactory} from '../test/testBlockFactory'
+import {mockDOM, mockStateStore, wrapIntl} from '../testUtils'
+
+import ViewTitle from './viewTitle'
+
+jest.mock('../mutator')
+jest.mock('../utils')
+const mockedMutator = mocked(mutator, true)
+const mockedUtils = mocked(Utils, true)
+mockedUtils.createGuid.mockReturnValue('test-id')
+
+beforeAll(() => {
+    mockDOM()
+})
+
+describe('components/viewTitle', () => {
+    const board = TestBlockFactory.createBoard()
+    board.id = 'test-id'
+    board.rootId = board.id
+
+    const store = mockStateStore([], {})
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    test('should match snapshot', async () => {
+        let container
+        await act(async () => {
+            const result = render(wrapIntl(
+                <ReduxProvider store={store}>
+                    <ViewTitle
+                        board={board}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+            container = result.container
+        })
+        expect(container).toMatchSnapshot()
+    })
+
+    test('should match snapshot readonly', async () => {
+        let container
+        await act(async () => {
+            const result = render(wrapIntl(
+                <ReduxProvider store={store}>
+                    <ViewTitle
+                        board={board}
+                        readonly={true}
+                    />
+                </ReduxProvider>,
+            ))
+            container = result.container
+        })
+        expect(container).toMatchSnapshot()
+    })
+
+    test('show description', async () => {
+        board.fields.showDescription = true
+        let container
+        await act(async () => {
+            const result = render(wrapIntl(
+                <ReduxProvider store={store}>
+                    <ViewTitle
+                        board={board}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+            container = result.container
+        })
+        expect(container).toMatchSnapshot()
+        const hideDescriptionButton = screen.getAllByRole('button')[0]
+        userEvent.click(hideDescriptionButton)
+        expect(mockedMutator.showDescription).toBeCalledTimes(1)
+    })
+
+    test('hide description', async () => {
+        board.fields.showDescription = false
+        let container
+        await act(async () => {
+            const result = render(wrapIntl(
+                <ReduxProvider store={store}>
+                    <ViewTitle
+                        board={board}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+            container = result.container
+        })
+        expect(container).toMatchSnapshot()
+        const showDescriptionButton = screen.getAllByRole('button')[0]
+        userEvent.click(showDescriptionButton)
+        expect(mockedMutator.showDescription).toBeCalledTimes(1)
+    })
+
+    test('add random icon', async () => {
+        board.fields.icon = ''
+        let container
+        await act(async () => {
+            const result = render(wrapIntl(
+                <ReduxProvider store={store}>
+                    <ViewTitle
+                        board={board}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+            container = result.container
+        })
+        expect(container).toMatchSnapshot()
+        const randomIconButton = screen.getAllByRole('button')[0]
+        userEvent.click(randomIconButton)
+        expect(mockedMutator.changeIcon).toBeCalledTimes(1)
+    })
+
+    test('change title', async () => {
+        await act(async () => {
+            render(wrapIntl(
+                <ReduxProvider store={store}>
+                    <ViewTitle
+                        board={board}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+        })
+        const titleInput = screen.getAllByRole('textbox')[0]
+        userEvent.type(titleInput, 'other title')
+        fireEvent.blur(titleInput)
+        expect(mockedMutator.changeTitle).toBeCalledTimes(1)
+    })
+
+    test('change description', async () => {
+        board.fields.showDescription = true
+        await act(async () => {
+            render(wrapIntl(
+                <ReduxProvider store={store}>
+                    <ViewTitle
+                        board={board}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+        })
+        const descriptionInput = screen.getAllByRole('textbox', {hidden: true})[2]
+        userEvent.type(descriptionInput, 'other description')
+        fireEvent.blur(descriptionInput)
+        expect(mockedMutator.changeDescription).toBeCalledTimes(1)
+    })
+})