diff --git a/webapp/src/components/viewHeader/__snapshots__/viewHeaderSortMenu.test.tsx.snap b/webapp/src/components/viewHeader/__snapshots__/viewHeaderSortMenu.test.tsx.snap
new file mode 100644
index 000000000..9d50dc2ac
--- /dev/null
+++ b/webapp/src/components/viewHeader/__snapshots__/viewHeaderSortMenu.test.tsx.snap
@@ -0,0 +1,244 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/viewHeader/viewHeaderSortMenu return sort menu 1`] = `
+
+
+
+`;
+
+exports[`components/viewHeader/viewHeaderSortMenu return sort menu and do Name sort 1`] = `
+
+
+
+`;
+
+exports[`components/viewHeader/viewHeaderSortMenu return sort menu and do manual 1`] = `
+
+
+
+`;
+
+exports[`components/viewHeader/viewHeaderSortMenu return sort menu and do revert 1`] = `
+
+
+
+`;
diff --git a/webapp/src/components/viewHeader/viewHeaderSortMenu.test.tsx b/webapp/src/components/viewHeader/viewHeaderSortMenu.test.tsx
new file mode 100644
index 000000000..cf500eee5
--- /dev/null
+++ b/webapp/src/components/viewHeader/viewHeaderSortMenu.test.tsx
@@ -0,0 +1,114 @@
+// 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 {mocked} from 'ts-jest/utils'
+
+import {wrapIntl, mockStateStore} from '../../testUtils'
+
+import {TestBlockFactory} from '../../test/testBlockFactory'
+
+import mutator from '../../mutator'
+
+import ViewHeaderSortMenu from './viewHeaderSortMenu'
+
+jest.mock('../../mutator')
+const mockedMutator = mocked(mutator, true)
+
+const board = TestBlockFactory.createBoard()
+const activeView = TestBlockFactory.createBoardView(board)
+const cards = [TestBlockFactory.createCard(board), TestBlockFactory.createCard(board)]
+
+describe('components/viewHeader/viewHeaderSortMenu', () => {
+ const state = {
+ users: {
+ me: {
+ id: 'user-id-1',
+ username: 'username_1'},
+ },
+ }
+ const store = mockStateStore([], state)
+ beforeEach(() => {
+ jest.clearAllMocks()
+ })
+ test('return sort menu', () => {
+ const {container} = render(
+ wrapIntl(
+
+
+ ,
+ ),
+ )
+ const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
+ userEvent.click(buttonElement)
+ expect(container).toMatchSnapshot()
+ })
+ test('return sort menu and do manual', () => {
+ const {container} = render(
+ wrapIntl(
+
+
+ ,
+ ),
+ )
+ const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
+ userEvent.click(buttonElement)
+ const buttonManual = screen.getByRole('button', {name: 'Manual'})
+ userEvent.click(buttonManual)
+ expect(container).toMatchSnapshot()
+ expect(mockedMutator.updateBlock).toBeCalledTimes(1)
+ })
+ test('return sort menu and do revert', () => {
+ const {container} = render(
+ wrapIntl(
+
+
+ ,
+ ),
+ )
+ const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
+ userEvent.click(buttonElement)
+ const buttonRevert = screen.getByRole('button', {name: 'Revert'})
+ userEvent.click(buttonRevert)
+ expect(container).toMatchSnapshot()
+ expect(mockedMutator.changeViewSortOptions).toBeCalledTimes(1)
+ expect(mockedMutator.changeViewSortOptions).toBeCalledWith(activeView.id, activeView.fields.sortOptions, [])
+ })
+ test('return sort menu and do Name sort', () => {
+ const {container} = render(
+ wrapIntl(
+
+
+ ,
+ ),
+ )
+ const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
+ userEvent.click(buttonElement)
+ const buttonName = screen.getByRole('button', {name: 'Name'})
+ userEvent.click(buttonName)
+ expect(container).toMatchSnapshot()
+ expect(mockedMutator.changeViewSortOptions).toBeCalledTimes(1)
+ expect(mockedMutator.changeViewSortOptions).toBeCalledWith(activeView.id, activeView.fields.sortOptions, [{propertyId: '__title', reversed: false}])
+ })
+})