+
diff --git a/tests/components/announcement_bar.test.jsx b/tests/components/announcement_bar.test.jsx
new file mode 100644
index 000000000000..008b6d559d4b
--- /dev/null
+++ b/tests/components/announcement_bar.test.jsx
@@ -0,0 +1,97 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+import 'tests/helpers/localstorage.jsx';
+
+import AnnouncementBar from 'components/announcement_bar/announcement_bar.jsx';
+
+describe('components/AnnouncementBar', () => {
+ const baseProps = {
+ isLoggedIn: true,
+ canViewSystemErrors: false,
+ canViewAPIv3Banner: false,
+ licenseId: '',
+ siteURL: '',
+ sendEmailNotifications: true,
+ bannerText: 'Banner text',
+ allowBannerDismissal: true,
+ enableBanner: true,
+ bannerColor: 'green',
+ bannerTextColor: 'black',
+ enableSignUpWithGitLab: false,
+ };
+
+ test('should match snapshot, bar showing', () => {
+ const props = baseProps;
+ const wrapper = shallow(
+
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should match snapshot, bar not showing', () => {
+ const props = {...baseProps, enableBanner: false};
+ const wrapper = shallow(
+
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should match snapshot, bar showing, no dismissal', () => {
+ const props = {...baseProps, allowBannerDismissal: false};
+ const wrapper = shallow(
+
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should match snapshot, props change', () => {
+ const props = baseProps;
+ const wrapper = shallow(
+
+ );
+
+ expect(wrapper).toMatchSnapshot();
+
+ const newProps = {...baseProps, bannerColor: 'yellow', bannerTextColor: 'red'};
+ wrapper.setProps(newProps);
+ expect(wrapper).toMatchSnapshot();
+
+ newProps.allowBannerDismissal = false;
+ wrapper.setProps(newProps);
+ expect(wrapper).toMatchSnapshot();
+
+ newProps.enableBanner = false;
+ wrapper.setProps(newProps);
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should match snapshot, dismissal', () => {
+ const props = baseProps;
+ const wrapper = shallow(
+
+ );
+
+ // Banner should show
+ expect(wrapper).toMatchSnapshot();
+
+ // Banner should hide
+ wrapper.find('a').simulate('click');
+ expect(wrapper).toMatchSnapshot();
+
+ // Banner should remain hidden
+ const newProps = {...baseProps, bannerColor: 'yellow', bannerTextColor: 'red'};
+ wrapper.setProps(newProps);
+ expect(wrapper).toMatchSnapshot();
+
+ // Banner should return
+ newProps.bannerText = 'Some new text';
+ wrapper.setProps(newProps);
+ expect(wrapper).toMatchSnapshot();
+ });
+});
diff --git a/tests/helpers/localstorage.jsx b/tests/helpers/localstorage.jsx
new file mode 100644
index 000000000000..9a250c0a2b19
--- /dev/null
+++ b/tests/helpers/localstorage.jsx
@@ -0,0 +1,27 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// Based on https://stackoverflow.com/a/41434763
+class LocalStorageMock {
+ constructor() {
+ this.store = {};
+ }
+
+ clear() {
+ this.store = {};
+ }
+
+ getItem(key) {
+ return this.store[key] || null;
+ }
+
+ setItem(key, value) {
+ this.store[key] = value.toString();
+ }
+
+ removeItem(key) {
+ delete this.store[key];
+ }
+}
+
+global.localStorage = new LocalStorageMock();