From e5e7501efb04b8f695eedaa90edc4f2d70b08d45 Mon Sep 17 00:00:00 2001
From: Julien Fabre <julien.fabre.33@gmail.com>
Date: Wed, 20 Oct 2021 04:39:53 +0200
Subject: [PATCH] [GH-827] Add tests for cardDialog (#1592)

---
 .../__snapshots__/cardDialog.test.tsx.snap    | 1312 +++++++++++++++++
 webapp/src/components/cardDialog.test.tsx     |  211 +++
 2 files changed, 1523 insertions(+)
 create mode 100644 webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
 create mode 100644 webapp/src/components/cardDialog.test.tsx

diff --git a/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap b/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
new file mode 100644
index 000000000..46e42e1b7
--- /dev/null
+++ b/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
@@ -0,0 +1,1312 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/cardDialog return a cardDialog readonly 1`] = `
+<div>
+  <div
+    class="Dialog dialog-back undefined"
+  >
+    <div
+      class="wrapper"
+    >
+      <div
+        class="dialog"
+      >
+        <div
+          class="toolbar"
+        >
+          <div
+            aria-label="Close dialog"
+            class="Button IconButton IconButton--large"
+            role="button"
+            title="Close dialog"
+          >
+            <i
+              class="CompassIcon icon-close CloseIcon"
+            />
+          </div>
+          <div
+            class="octo-spacer"
+          />
+          <div
+            aria-label="menuwrapper"
+            class="MenuWrapper"
+            role="button"
+          >
+            <div
+              class="Button IconButton IconButton--large"
+              role="button"
+            >
+              <i
+                class="CompassIcon icon-dots-horizontal OptionsIcon"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="CardDetail content"
+        >
+          <div
+            class="BlockIconSelector"
+          >
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <div
+                class="octo-icon size-l"
+              >
+                <span>
+                  i
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="EditableAreaWrap"
+          >
+            <textarea
+              class="EditableArea Editable title"
+              height="0"
+              placeholder="Untitled"
+              rows="1"
+              spellcheck="true"
+              title="title"
+            >
+              title
+            </textarea>
+            <div
+              class="EditableAreaContainer"
+            >
+              <textarea
+                aria-hidden="true"
+                class="EditableAreaReference Editable title"
+                dir="auto"
+                disabled=""
+                rows="1"
+              >
+                title
+              </textarea>
+            </div>
+          </div>
+          <div
+            class="octo-propertylist CardDetailProperties"
+          >
+            <div
+              class="octo-propertyname add-property"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  + Add a property
+                </span>
+              </button>
+            </div>
+          </div>
+          <hr />
+          <div
+            class="CommentsList"
+          >
+            <div
+              class="commentrow"
+            >
+              <img
+                class="comment-avatar"
+                src="data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\" style=\\"fill: rgb(192, 192, 192);\\"><rect width=\\"100\\" height=\\"100\\" /></svg>"
+              />
+              <div
+                class="MarkdownEditor octo-editor newcomment "
+              >
+                <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;"
+                        >
+                          <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"
+                                  >
+                                    <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;"
+                          />
+                          <div
+                            class="CodeMirror-gutters"
+                            style="display: none;"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        class="editor-preview-side editor-preview"
+                      />
+                    </div>
+                    <div
+                      class="EasyMDEContainer"
+                    >
+                      <div
+                        class="CodeMirror cm-s-easymde CodeMirror-wrap"
+                      >
+                        <div
+                          style="overflow: hidden; position: relative; width: 3px; height: 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"
+                                  >
+                                    <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;"
+                          />
+                          <div
+                            class="CodeMirror-gutters"
+                            style="display: none;"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        class="editor-preview-side editor-preview"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+            </div>
+            <hr />
+          </div>
+        </div>
+        <div
+          class="CardDetail content fullwidth content-blocks"
+        >
+          <div
+            class="octo-content CardDetailContents"
+          >
+            <div
+              class="octo-block"
+            >
+              <div
+                class="octo-block-margin"
+              />
+              <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>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardDetailContentsMenu content add-content"
+          >
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  Add content
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/cardDialog return cardDialog menu content 1`] = `
+<div>
+  <div
+    class="Dialog dialog-back undefined"
+  >
+    <div
+      class="wrapper"
+    >
+      <div
+        class="dialog"
+      >
+        <div
+          class="toolbar"
+        >
+          <div
+            aria-label="Close dialog"
+            class="Button IconButton IconButton--large"
+            role="button"
+            title="Close dialog"
+          >
+            <i
+              class="CompassIcon icon-close CloseIcon"
+            />
+          </div>
+          <div
+            class="octo-spacer"
+          />
+          <div
+            aria-label="menuwrapper"
+            class="MenuWrapper"
+            role="button"
+          >
+            <div
+              class="Button IconButton IconButton--large"
+              role="button"
+            >
+              <i
+                class="CompassIcon icon-dots-horizontal OptionsIcon"
+              />
+            </div>
+            <div
+              class="Menu noselect left"
+            >
+              <div
+                class="menu-contents"
+              >
+                <div
+                  class="menu-options"
+                >
+                  <div
+                    aria-label="Delete"
+                    class="MenuOption TextOption menu-option"
+                    role="button"
+                  >
+                    <svg
+                      class="DeleteIcon Icon"
+                      viewBox="0 0 448 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"
+                      />
+                    </svg>
+                    <div
+                      class="menu-name"
+                    >
+                      Delete
+                    </div>
+                    <div
+                      class="noicon"
+                    />
+                  </div>
+                  <div
+                    aria-label="Copy link"
+                    class="MenuOption TextOption menu-option"
+                    role="button"
+                  >
+                    <i
+                      class="CompassIcon icon-link-variant LinkIcon"
+                    />
+                    <div
+                      class="menu-name"
+                    >
+                      Copy link
+                    </div>
+                    <div
+                      class="noicon"
+                    />
+                  </div>
+                  <div
+                    aria-label="New template from card"
+                    class="MenuOption TextOption menu-option"
+                    role="button"
+                  >
+                    <div
+                      class="noicon"
+                    />
+                    <div
+                      class="menu-name"
+                    >
+                      New template from card
+                    </div>
+                    <div
+                      class="noicon"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="menu-spacer hideOnWidescreen"
+                />
+                <div
+                  class="menu-options hideOnWidescreen"
+                >
+                  <div
+                    aria-label="Cancel"
+                    class="MenuOption TextOption menu-option menu-cancel"
+                    role="button"
+                  >
+                    <div
+                      class="noicon"
+                    />
+                    <div
+                      class="menu-name"
+                    >
+                      Cancel
+                    </div>
+                    <div
+                      class="noicon"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="CardDetail content"
+        >
+          <div
+            class="BlockIconSelector"
+          >
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <div
+                class="octo-icon size-l"
+              >
+                <span>
+                  i
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="EditableAreaWrap"
+          >
+            <textarea
+              class="EditableArea Editable title"
+              height="0"
+              placeholder="Untitled"
+              rows="1"
+              spellcheck="true"
+              title="title"
+            >
+              title
+            </textarea>
+            <div
+              class="EditableAreaContainer"
+            >
+              <textarea
+                aria-hidden="true"
+                class="EditableAreaReference Editable title"
+                dir="auto"
+                disabled=""
+                rows="1"
+              >
+                title
+              </textarea>
+            </div>
+          </div>
+          <div
+            class="octo-propertylist CardDetailProperties"
+          >
+            <div
+              class="octo-propertyname add-property"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  + Add a property
+                </span>
+              </button>
+            </div>
+          </div>
+          <hr />
+          <div
+            class="CommentsList"
+          >
+            <div
+              class="commentrow"
+            >
+              <img
+                class="comment-avatar"
+                src="data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\" style=\\"fill: rgb(192, 192, 192);\\"><rect width=\\"100\\" height=\\"100\\" /></svg>"
+              />
+              <div
+                class="MarkdownEditor octo-editor newcomment "
+              >
+                <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;"
+                        >
+                          <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"
+                                  >
+                                    <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;"
+                          />
+                          <div
+                            class="CodeMirror-gutters"
+                            style="display: none;"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        class="editor-preview-side editor-preview"
+                      />
+                    </div>
+                    <div
+                      class="EasyMDEContainer"
+                    >
+                      <div
+                        class="CodeMirror cm-s-easymde CodeMirror-wrap"
+                      >
+                        <div
+                          style="overflow: hidden; position: relative; width: 3px; height: 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"
+                                  >
+                                    <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;"
+                          />
+                          <div
+                            class="CodeMirror-gutters"
+                            style="display: none;"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        class="editor-preview-side editor-preview"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+            </div>
+            <hr />
+          </div>
+        </div>
+        <div
+          class="CardDetail content fullwidth content-blocks"
+        >
+          <div
+            class="octo-content CardDetailContents"
+          >
+            <div
+              class="octo-block"
+            >
+              <div
+                class="octo-block-margin"
+              />
+              <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>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardDetailContentsMenu content add-content"
+          >
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  Add content
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/cardDialog should match snapshot 1`] = `
+<div>
+  <div
+    class="Dialog dialog-back undefined"
+  >
+    <div
+      class="wrapper"
+    >
+      <div
+        class="dialog"
+      >
+        <div
+          class="toolbar"
+        >
+          <div
+            aria-label="Close dialog"
+            class="Button IconButton IconButton--large"
+            role="button"
+            title="Close dialog"
+          >
+            <i
+              class="CompassIcon icon-close CloseIcon"
+            />
+          </div>
+          <div
+            class="octo-spacer"
+          />
+          <div
+            aria-label="menuwrapper"
+            class="MenuWrapper"
+            role="button"
+          >
+            <div
+              class="Button IconButton IconButton--large"
+              role="button"
+            >
+              <i
+                class="CompassIcon icon-dots-horizontal OptionsIcon"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="CardDetail content"
+        >
+          <div
+            class="BlockIconSelector"
+          >
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <div
+                class="octo-icon size-l"
+              >
+                <span>
+                  i
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="EditableAreaWrap"
+          >
+            <textarea
+              class="EditableArea Editable title"
+              height="0"
+              placeholder="Untitled"
+              rows="1"
+              spellcheck="true"
+              title="title"
+            >
+              title
+            </textarea>
+            <div
+              class="EditableAreaContainer"
+            >
+              <textarea
+                aria-hidden="true"
+                class="EditableAreaReference Editable title"
+                dir="auto"
+                disabled=""
+                rows="1"
+              >
+                title
+              </textarea>
+            </div>
+          </div>
+          <div
+            class="octo-propertylist CardDetailProperties"
+          >
+            <div
+              class="octo-propertyname add-property"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  + Add a property
+                </span>
+              </button>
+            </div>
+          </div>
+          <hr />
+          <div
+            class="CommentsList"
+          >
+            <div
+              class="commentrow"
+            >
+              <img
+                class="comment-avatar"
+                src="data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\" style=\\"fill: rgb(192, 192, 192);\\"><rect width=\\"100\\" height=\\"100\\" /></svg>"
+              />
+              <div
+                class="MarkdownEditor octo-editor newcomment "
+              >
+                <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;"
+                        >
+                          <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"
+                                  >
+                                    <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;"
+                          />
+                          <div
+                            class="CodeMirror-gutters"
+                            style="display: none;"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        class="editor-preview-side editor-preview"
+                      />
+                    </div>
+                    <div
+                      class="EasyMDEContainer"
+                    >
+                      <div
+                        class="CodeMirror cm-s-easymde CodeMirror-wrap"
+                      >
+                        <div
+                          style="overflow: hidden; position: relative; width: 3px; height: 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"
+                                  >
+                                    <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;"
+                          />
+                          <div
+                            class="CodeMirror-gutters"
+                            style="display: none;"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        class="editor-preview-side editor-preview"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+            </div>
+            <hr />
+          </div>
+        </div>
+        <div
+          class="CardDetail content fullwidth content-blocks"
+        >
+          <div
+            class="octo-content CardDetailContents"
+          >
+            <div
+              class="octo-block"
+            >
+              <div
+                class="octo-block-margin"
+              />
+              <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>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardDetailContentsMenu content add-content"
+          >
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  Add content
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/webapp/src/components/cardDialog.test.tsx b/webapp/src/components/cardDialog.test.tsx
new file mode 100644
index 000000000..8eba7cae7
--- /dev/null
+++ b/webapp/src/components/cardDialog.test.tsx
@@ -0,0 +1,211 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import '@testing-library/jest-dom'
+import {act, render, screen} 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, wrapDNDIntl} from '../testUtils'
+
+import CardDialog from './cardDialog'
+
+jest.mock('../mutator')
+jest.mock('../utils')
+const mockedUtils = mocked(Utils, true)
+const mockedMutator = mocked(mutator, true)
+mockedUtils.createGuid.mockReturnValue('test-id')
+
+beforeAll(() => {
+    mockDOM()
+})
+describe('components/cardDialog', () => {
+    const board = TestBlockFactory.createBoard()
+    board.fields.cardProperties = []
+    board.id = 'test-id'
+    board.rootId = board.id
+    const boardView = TestBlockFactory.createBoardView(board)
+    boardView.id = board.id
+    const card = TestBlockFactory.createCard(board)
+    card.id = board.id
+    card.createdBy = 'user-id-1'
+
+    const state = {
+        comments: {
+            comments: {},
+        },
+        contents: {},
+        cards: {
+            cards: {
+                [card.id]: card,
+            },
+        },
+    }
+    const store = mockStateStore([], state)
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+    test('should match snapshot', async () => {
+        let container
+        await act(async () => {
+            const result = render(wrapDNDIntl(
+                <ReduxProvider store={store}>
+                    <CardDialog
+                        board={board}
+                        activeView={boardView}
+                        views={[boardView]}
+                        cards={[card]}
+                        cardId={card.id}
+                        onClose={jest.fn()}
+                        showCard={jest.fn()}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+            container = result.container
+        })
+        expect(container).toMatchSnapshot()
+    })
+    test('return a cardDialog readonly', async () => {
+        let container
+        await act(async () => {
+            const result = render(wrapDNDIntl(
+                <ReduxProvider store={store}>
+                    <CardDialog
+                        board={board}
+                        activeView={boardView}
+                        views={[boardView]}
+                        cards={[card]}
+                        cardId={card.id}
+                        onClose={jest.fn()}
+                        showCard={jest.fn()}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+            container = result.container
+        })
+        expect(container).toMatchSnapshot()
+    })
+    test('return cardDialog and do a close action', async () => {
+        const closeFn = jest.fn()
+        await act(async () => {
+            render(wrapDNDIntl(
+                <ReduxProvider store={store}>
+                    <CardDialog
+                        board={board}
+                        activeView={boardView}
+                        views={[boardView]}
+                        cards={[card]}
+                        cardId={card.id}
+                        onClose={closeFn}
+                        showCard={jest.fn()}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+        })
+        const buttonElement = screen.getByRole('button', {name: 'Close dialog'})
+        userEvent.click(buttonElement)
+        expect(closeFn).toBeCalledTimes(1)
+    })
+    test('return cardDialog menu content', async () => {
+        let container
+        await act(async () => {
+            const result = render(wrapDNDIntl(
+                <ReduxProvider store={store}>
+                    <CardDialog
+                        board={board}
+                        activeView={boardView}
+                        views={[boardView]}
+                        cards={[card]}
+                        cardId={card.id}
+                        onClose={jest.fn()}
+                        showCard={jest.fn()}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+            container = result.container
+        })
+        const buttonMenu = screen.getAllByRole('button', {name: 'menuwrapper'})[0]
+        userEvent.click(buttonMenu)
+        expect(container).toMatchSnapshot()
+    })
+    test('return cardDialog menu content and verify delete action', async () => {
+        await act(async () => {
+            render(wrapDNDIntl(
+                <ReduxProvider store={store}>
+                    <CardDialog
+                        board={board}
+                        activeView={boardView}
+                        views={[boardView]}
+                        cards={[card]}
+                        cardId={card.id}
+                        onClose={jest.fn()}
+                        showCard={jest.fn()}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+        })
+        const buttonMenu = screen.getAllByRole('button', {name: 'menuwrapper'})[0]
+        userEvent.click(buttonMenu)
+        const buttonDelete = screen.getByRole('button', {name: 'Delete'})
+        userEvent.click(buttonDelete)
+        expect(mockedMutator.deleteBlock).toBeCalledTimes(1)
+    })
+    test('return cardDialog menu content and do a New template from card', async () => {
+        await act(async () => {
+            render(wrapDNDIntl(
+                <ReduxProvider store={store}>
+                    <CardDialog
+                        board={board}
+                        activeView={boardView}
+                        views={[boardView]}
+                        cards={[card]}
+                        cardId={card.id}
+                        onClose={jest.fn()}
+                        showCard={jest.fn()}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+        })
+        const buttonMenu = screen.getAllByRole('button', {name: 'menuwrapper'})[0]
+        userEvent.click(buttonMenu)
+        const buttonTemplate = screen.getByRole('button', {name: 'New template from card'})
+        userEvent.click(buttonTemplate)
+        expect(mockedMutator.duplicateCard).toBeCalledTimes(1)
+    })
+
+    test('return cardDialog menu content and do a copy Link', async () => {
+        await act(async () => {
+            render(wrapDNDIntl(
+                <ReduxProvider store={store}>
+                    <CardDialog
+                        board={board}
+                        activeView={boardView}
+                        views={[boardView]}
+                        cards={[card]}
+                        cardId={card.id}
+                        onClose={jest.fn()}
+                        showCard={jest.fn()}
+                        readonly={false}
+                    />
+                </ReduxProvider>,
+            ))
+        })
+        const buttonMenu = screen.getAllByRole('button', {name: 'menuwrapper'})[0]
+        userEvent.click(buttonMenu)
+        const buttonCopy = screen.getByRole('button', {name: 'Copy link'})
+        userEvent.click(buttonCopy)
+        expect(mockedUtils.copyTextToClipboard).toBeCalledTimes(1)
+    })
+})