From 8b499f9035123c01ec582e453e9433a00f36f28a Mon Sep 17 00:00:00 2001
From: Renjith <grenjithr@gmail.com>
Date: Fri, 19 Mar 2021 07:41:11 -0500
Subject: [PATCH 1/2] Add unit test for propertyMenu.tsx - basic setup

---
 webapp/__mocks__/styleMock.js            |  3 ++
 webapp/package.json                      |  3 ++
 webapp/src/widgets/propertyMenu.test.tsx | 39 ++++++++++++++++++++++++
 3 files changed, 45 insertions(+)
 create mode 100644 webapp/__mocks__/styleMock.js
 create mode 100644 webapp/src/widgets/propertyMenu.test.tsx

diff --git a/webapp/__mocks__/styleMock.js b/webapp/__mocks__/styleMock.js
new file mode 100644
index 00000000000..a8ab4d2522b
--- /dev/null
+++ b/webapp/__mocks__/styleMock.js
@@ -0,0 +1,3 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+module.exports = {};
diff --git a/webapp/package.json b/webapp/package.json
index f7dc1e49924..0812e0114a2 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -32,6 +32,9 @@
 		"react-simplemde-editor": "^4.1.3"
 	},
 	"jest": {
+    "moduleNameMapper": {
+      "\\.(scss)$": "<rootDir>/__mocks__/styleMock.js"
+    },
 		"globals": {
 			"ts-jest": {
 				"tsConfig": "./src/tsconfig.json"
diff --git a/webapp/src/widgets/propertyMenu.test.tsx b/webapp/src/widgets/propertyMenu.test.tsx
new file mode 100644
index 00000000000..897bec4b6fe
--- /dev/null
+++ b/webapp/src/widgets/propertyMenu.test.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+import {render} from '@testing-library/react'
+import '@testing-library/jest-dom'
+import {IntlProvider} from 'react-intl'
+
+import PropertyMenu from './propertyMenu'
+
+describe('widgets/PropertyMenu', () => {
+    beforeEach(() => {
+        // Quick fix to disregard console error when unmounting a component
+        console.error = jest.fn()
+        document.execCommand = jest.fn()
+    })
+
+    test('should trigger callback when type change', () => {
+        const rootPortalDiv = document.createElement('div')
+        rootPortalDiv.id = 'root-portal'
+        const callback = jest.fn()
+
+        const {getByText} = render(
+            <IntlProvider locale='en'>
+                <PropertyMenu
+                    propertyId={'id'}
+                    propertyName={'email of a person'}
+                    propertyType={'email'}
+                    onTypeChanged={callback}
+                    onNameChanged={callback}
+                    onDelete={callback}
+                />
+            </IntlProvider>,
+            {container: document.body.appendChild(rootPortalDiv)},
+        )
+
+        expect(getByText('Type: Email')).toBeVisible()
+    })
+})

From 4430f9d4fc96b69b7be75ec3eac2e1b6bc2685c4 Mon Sep 17 00:00:00 2001
From: Renjith <grenjithr@gmail.com>
Date: Fri, 19 Mar 2021 07:52:40 -0500
Subject: [PATCH 2/2] Fix the test name

---
 webapp/src/widgets/propertyMenu.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/widgets/propertyMenu.test.tsx b/webapp/src/widgets/propertyMenu.test.tsx
index 897bec4b6fe..b7936cfbfc8 100644
--- a/webapp/src/widgets/propertyMenu.test.tsx
+++ b/webapp/src/widgets/propertyMenu.test.tsx
@@ -15,7 +15,7 @@ describe('widgets/PropertyMenu', () => {
         document.execCommand = jest.fn()
     })
 
-    test('should trigger callback when type change', () => {
+    test('should display the type of property', () => {
         const rootPortalDiv = document.createElement('div')
         rootPortalDiv.id = 'root-portal'
         const callback = jest.fn()