From 45904613ec69e316b4b429b1b1c089715ff03b34 Mon Sep 17 00:00:00 2001
From: Julien Fabre <julien.fabre.33@gmail.com>
Date: Wed, 13 Oct 2021 13:04:36 +0200
Subject: [PATCH] [GH-850] Add unit tests to textElement (#1520)

* chore[GH-#850]: Add unit tests to textElement

* fix: add test on elements array
---
 .../__snapshots__/textElement.test.tsx.snap   | 267 ++++++++++++++++++
 .../components/content/textElement.test.tsx   |  94 ++++++
 2 files changed, 361 insertions(+)
 create mode 100644 webapp/src/components/content/__snapshots__/textElement.test.tsx.snap
 create mode 100644 webapp/src/components/content/textElement.test.tsx

diff --git a/webapp/src/components/content/__snapshots__/textElement.test.tsx.snap b/webapp/src/components/content/__snapshots__/textElement.test.tsx.snap
new file mode 100644
index 000000000..c7ad7bd12
--- /dev/null
+++ b/webapp/src/components/content/__snapshots__/textElement.test.tsx.snap
@@ -0,0 +1,267 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/content/TextElement return a textElement 1`] = `
+<div>
+  <div
+    class="MarkdownEditor octo-editor  "
+  >
+    <div
+      class="octo-editor-preview octo-placeholder"
+    />
+    <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 CodeMirror-focused"
+          >
+            <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"
+              tabindex="-1"
+            >
+              <div
+                style="min-width: 1px;"
+              />
+            </div>
+            <div
+              class="CodeMirror-hscrollbar"
+              cm-not-content="true"
+              tabindex="-1"
+            >
+              <div
+                style="height: 100%; min-height: 1px;"
+              />
+            </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;"
+              >
+                <div
+                  style="position: relative;"
+                >
+                  <div
+                    class="CodeMirror-lines"
+                    role="presentation"
+                  >
+                    <div
+                      role="presentation"
+                      style="position: relative; outline: none;"
+                    >
+                      <div
+                        class="CodeMirror-measure"
+                      />
+                      <div
+                        class="CodeMirror-measure"
+                      >
+                        <pre
+                          class="CodeMirror-line"
+                          role="presentation"
+                        >
+                          <span
+                            role="presentation"
+                            style="padding-right: .1px;"
+                          >
+                            hello
+                          </span>
+                        </pre>
+                      </div>
+                      <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;"
+              />
+              <div
+                class="CodeMirror-gutters"
+                style="display: none;"
+              />
+            </div>
+          </div>
+          <div
+            class="editor-preview-side editor-preview"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/content/TextElement return a textElement and do a blur event 1`] = `
+<div>
+  <div
+    class="MarkdownEditor octo-editor  "
+  >
+    <div
+      class="octo-editor-preview octo-placeholder"
+    />
+    <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"
+              tabindex="-1"
+            >
+              <div
+                style="min-width: 1px;"
+              />
+            </div>
+            <div
+              class="CodeMirror-hscrollbar"
+              cm-not-content="true"
+              tabindex="-1"
+            >
+              <div
+                style="height: 100%; min-height: 1px;"
+              />
+            </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;"
+              >
+                <div
+                  style="position: relative;"
+                >
+                  <div
+                    class="CodeMirror-lines"
+                    role="presentation"
+                  >
+                    <div
+                      role="presentation"
+                      style="position: relative; outline: none;"
+                    >
+                      <div
+                        class="CodeMirror-measure"
+                      />
+                      <div
+                        class="CodeMirror-measure"
+                      >
+                        <pre
+                          class="CodeMirror-line"
+                          role="presentation"
+                        >
+                          <span
+                            role="presentation"
+                            style="padding-right: .1px;"
+                          >
+                            hello
+                          </span>
+                        </pre>
+                      </div>
+                      <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;"
+              />
+              <div
+                class="CodeMirror-gutters"
+                style="display: none;"
+              />
+            </div>
+          </div>
+          <div
+            class="editor-preview-side editor-preview"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/webapp/src/components/content/textElement.test.tsx b/webapp/src/components/content/textElement.test.tsx
new file mode 100644
index 000000000..bacbdc0e3
--- /dev/null
+++ b/webapp/src/components/content/textElement.test.tsx
@@ -0,0 +1,94 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+import {render, screen, fireEvent, act} from '@testing-library/react'
+
+import '@testing-library/jest-dom'
+
+import {mocked} from 'ts-jest/utils'
+
+import userEvent from '@testing-library/user-event'
+
+import {TextBlock} from '../../blocks/textBlock'
+
+import {mockDOM, wrapDNDIntl} from '../../testUtils'
+
+import {Utils} from '../../utils'
+
+import mutator from '../../mutator'
+
+import TextElement from './textElement'
+
+jest.mock('../../utils')
+jest.mock('../../mutator')
+const mockedUtils = mocked(Utils, true)
+const mockedMutator = mocked(mutator, true)
+mockedUtils.createGuid.mockReturnValue('test-id')
+const defaultBlock: TextBlock = {
+    id: 'test-id',
+    workspaceId: 'test-id',
+    parentId: 'test-id',
+    rootId: 'test-id',
+    modifiedBy: 'test-user-id',
+    schema: 0,
+    type: 'text',
+    title: '',
+    fields: {},
+    createdBy: 'test-user-id',
+    createAt: 0,
+    updateAt: 0,
+    deleteAt: 0,
+}
+describe('components/content/TextElement', () => {
+    beforeAll(() => {
+        mockDOM()
+    })
+
+    test('return a textElement', async () => {
+        const component = wrapDNDIntl(
+            <TextElement
+                block={defaultBlock}
+                readonly={false}
+            />,
+        )
+
+        let container: Element | undefined
+        await act(async () => {
+            const result = render(component)
+            container = result.container
+            const elementMarkDown = screen.getByRole('textbox', {hidden: true})
+            userEvent.click(elementMarkDown)
+        })
+        const elementsTextArea = screen.getAllByRole('textbox', {hidden: true})
+        expect(elementsTextArea).not.toBeNull()
+        expect(elementsTextArea.length).toBeGreaterThanOrEqual(2)
+        userEvent.type(elementsTextArea[1], 'hello')
+        expect(container).toMatchSnapshot()
+    })
+    test('return a textElement and do a blur event', async () => {
+        const component = wrapDNDIntl(
+            <TextElement
+                block={defaultBlock}
+                readonly={false}
+            />,
+        )
+
+        let container: Element | undefined
+        let elementMarkDown: Element | undefined
+
+        await act(async () => {
+            const result = render(component)
+            container = result.container
+            elementMarkDown = screen.getByRole('textbox', {hidden: true})
+            userEvent.click(elementMarkDown)
+        })
+        const elementsTextArea = screen.getAllByRole('textbox', {hidden: true})
+        expect(elementsTextArea).not.toBeNull()
+        expect(elementsTextArea.length).toBeGreaterThanOrEqual(2)
+        userEvent.type(elementsTextArea[1], 'hello')
+        fireEvent.blur(elementsTextArea[1])
+        expect(container).toMatchSnapshot()
+        expect(mockedMutator.changeTitle).toBeCalledTimes(1)
+    })
+})