diff --git a/webapp/src/components/viewHeader/__snapshots__/newCardButton.test.tsx.snap b/webapp/src/components/viewHeader/__snapshots__/newCardButton.test.tsx.snap
new file mode 100644
index 000000000..c266770dc
--- /dev/null
+++ b/webapp/src/components/viewHeader/__snapshots__/newCardButton.test.tsx.snap
@@ -0,0 +1,358 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/viewHeader/newCardButton return NewCardButton 1`] = `
+
+
+
+`;
+
+exports[`components/viewHeader/newCardButton return NewCardButton and addCard 1`] = `
+
+
+
+`;
+
+exports[`components/viewHeader/newCardButton return NewCardButton and addCardTemplate 1`] = `
+
+
+
+`;
diff --git a/webapp/src/components/viewHeader/newCardButton.test.tsx b/webapp/src/components/viewHeader/newCardButton.test.tsx
new file mode 100644
index 000000000..7c0f66324
--- /dev/null
+++ b/webapp/src/components/viewHeader/newCardButton.test.tsx
@@ -0,0 +1,101 @@
+// 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 {Provider as ReduxProvider} from 'react-redux'
+
+import '@testing-library/jest-dom'
+import userEvent from '@testing-library/user-event'
+
+import {wrapIntl, mockStateStore} from '../../testUtils'
+
+import {TestBlockFactory} from '../../test/testBlockFactory'
+
+import NewCardButton from './newCardButton'
+
+const board = TestBlockFactory.createBoard()
+const activeView = TestBlockFactory.createBoardView(board)
+
+describe('components/viewHeader/newCardButton', () => {
+ const state = {
+ users: {
+ me: {
+ id: 'user-id-1',
+ username: 'username_1'},
+ },
+ boards: {
+ current: board,
+ },
+ cards: {
+ templates: [],
+ },
+ views: {
+ current: 0,
+ views: [activeView],
+ },
+ }
+
+ const store = mockStateStore([], state)
+ const mockFunction = jest.fn()
+
+ beforeEach(() => {
+ jest.clearAllMocks()
+ })
+ test('return NewCardButton', () => {
+ const {container} = render(
+ wrapIntl(
+
+
+ ,
+ ),
+ )
+ const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
+ userEvent.click(buttonElement)
+ expect(container).toMatchSnapshot()
+ })
+ test('return NewCardButton and addCard', () => {
+ const {container} = render(
+ wrapIntl(
+
+
+ ,
+ ),
+ )
+ const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
+ userEvent.click(buttonElement)
+ expect(container).toMatchSnapshot()
+ const buttonAdd = screen.getByRole('button', {name: 'Empty card'})
+ userEvent.click(buttonAdd)
+ expect(mockFunction).toBeCalledTimes(1)
+ })
+ test('return NewCardButton and addCardTemplate', () => {
+ const {container} = render(
+ wrapIntl(
+
+
+ ,
+ ),
+ )
+ const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
+ userEvent.click(buttonElement)
+ expect(container).toMatchSnapshot()
+ const buttonAddTemplate = screen.getByRole('button', {name: 'New template'})
+ userEvent.click(buttonAddTemplate)
+ expect(mockFunction).toBeCalledTimes(1)
+ })
+})