From fee83b49a677512d615e81e310cd9f0feaf76a48 Mon Sep 17 00:00:00 2001
From: Hossein <hahmadia@users.noreply.github.com>
Date: Mon, 25 Oct 2021 11:44:46 -0400
Subject: [PATCH] Write Unit Test for emptyCenterPanel.tsx and welcomePage.tsx
 (#1621)

* write test for welcomePage

* Add test for emptyCenterPanel

* Addresse Jesus Comments

* Address Jesus Comments
---
 webapp/__mocks__/fileMock.js                  |  3 +
 webapp/package.json                           |  1 +
 .../__snapshots__/welcomePage.test.tsx.snap   | 40 +++++++++
 webapp/src/pages/welcome/welcomePage.test.tsx | 84 +++++++++++++++++++
 4 files changed, 128 insertions(+)
 create mode 100644 webapp/__mocks__/fileMock.js
 create mode 100644 webapp/src/pages/welcome/__snapshots__/welcomePage.test.tsx.snap
 create mode 100644 webapp/src/pages/welcome/welcomePage.test.tsx

diff --git a/webapp/__mocks__/fileMock.js b/webapp/__mocks__/fileMock.js
new file mode 100644
index 000000000..fe29b3a27
--- /dev/null
+++ b/webapp/__mocks__/fileMock.js
@@ -0,0 +1,3 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+module.exports = 'test-file-stub';
diff --git a/webapp/package.json b/webapp/package.json
index 8c9576121..f2b5210fb 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -55,6 +55,7 @@
 	},
 	"jest": {
 		"moduleNameMapper": {
+			"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
 			"\\.(scss|css)$": "<rootDir>/__mocks__/styleMock.js"
 		},
 		"globals": {
diff --git a/webapp/src/pages/welcome/__snapshots__/welcomePage.test.tsx.snap b/webapp/src/pages/welcome/__snapshots__/welcomePage.test.tsx.snap
new file mode 100644
index 000000000..bffc88d07
--- /dev/null
+++ b/webapp/src/pages/welcome/__snapshots__/welcomePage.test.tsx.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`pages/welcome Welcome Page shows Explore Page 1`] = `
+<div>
+  <div
+    class="WelcomePage"
+  >
+    <div>
+      <h1
+        class="text-heading9"
+      >
+        Welcome To Boards
+      </h1>
+      <div
+        class="WelcomePage__subtitle"
+      >
+        Boards is a project management tool that helps define, organize, track and manage work across teams, using a familiar kanban board view
+      </div>
+      <img
+        alt="Boards Welcome Image"
+        class="WelcomePage__image WelcomePage__image--large"
+        src="test-file-stub"
+      />
+      <img
+        alt="Boards Welcome Image"
+        class="WelcomePage__image WelcomePage__image--small"
+        src="test-file-stub"
+      />
+      <button
+        class="Button filled size--large"
+      >
+        Explore
+        <i
+          class="CompassIcon icon-chevron-right Icon Icon--right"
+        />
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/webapp/src/pages/welcome/welcomePage.test.tsx b/webapp/src/pages/welcome/welcomePage.test.tsx
new file mode 100644
index 000000000..c59fdcd44
--- /dev/null
+++ b/webapp/src/pages/welcome/welcomePage.test.tsx
@@ -0,0 +1,84 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import {render, screen} from '@testing-library/react'
+
+import {createMemoryHistory} from 'history'
+
+import {Router} from 'react-router-dom'
+
+import userEvent from '@testing-library/user-event'
+
+import {UserSettings} from '../../userSettings'
+
+import {wrapIntl} from '../../testUtils'
+
+import WelcomePage from './welcomePage'
+
+beforeEach(() => {
+    UserSettings.welcomePageViewed = null
+})
+
+describe('pages/welcome', () => {
+    const history = createMemoryHistory()
+    test('Welcome Page shows Explore Page', () => {
+        const {container} = render(wrapIntl(
+            <Router history={history}>
+                <WelcomePage/>
+            </Router>,
+        ))
+        expect(screen.getByText('Explore')).toBeDefined()
+        expect(container).toMatchSnapshot()
+    })
+
+    test('Welcome Page shows Explore Page And Then Proceeds after Clicking Explore', () => {
+        history.replace = jest.fn()
+        render(wrapIntl(
+            <Router history={history}>
+                <WelcomePage/>
+            </Router>,
+        ))
+        const exploreButton = screen.getByText('Explore')
+        expect(exploreButton).toBeDefined()
+        userEvent.click(exploreButton)
+        expect(history.replace).toBeCalledWith('/dashboard')
+    })
+
+    test('Welcome Page does not render explore page the second time we visit it', () => {
+        history.replace = jest.fn()
+        UserSettings.welcomePageViewed = 'true'
+        render(wrapIntl(
+            <Router history={history}>
+                <WelcomePage/>
+            </Router>,
+        ))
+        expect(history.replace).toBeCalledWith('/dashboard')
+    })
+
+    test('Welcome Page redirects us when we have a r query parameter with welcomePageViewed set to true', () => {
+        history.replace = jest.fn()
+        history.location.search = 'r=123'
+        UserSettings.welcomePageViewed = 'true'
+        render(wrapIntl(
+            <Router history={history}>
+                <WelcomePage/>
+            </Router>,
+        ))
+        expect(history.replace).toBeCalledWith('123')
+    })
+
+    test('Welcome Page redirects us when we have a r query parameter with welcomePageViewed set to null', () => {
+        history.replace = jest.fn()
+        history.location.search = 'r=123'
+        render(wrapIntl(
+            <Router history={history}>
+                <WelcomePage/>
+            </Router>,
+        ))
+        const exploreButton = screen.getByText('Explore')
+        expect(exploreButton).toBeDefined()
+        userEvent.click(exploreButton)
+        expect(history.replace).toBeCalledWith('123')
+    })
+})