diff --git a/public/app/features/explore/TimeSyncButton.test.tsx b/public/app/features/explore/TimeSyncButton.test.tsx
new file mode 100644
index 00000000000..c9902d598e8
--- /dev/null
+++ b/public/app/features/explore/TimeSyncButton.test.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { TimeSyncButton } from './TimeSyncButton';
+import { mount } from 'enzyme';
+
+const setup = (isSynced: boolean) => {
+ const onClick = () => {};
+ return mount();
+};
+
+describe('TimeSyncButton', () => {
+ it('should render component', () => {
+ const wrapper = setup(true);
+ expect(wrapper).toMatchSnapshot();
+ });
+ it('should change style when synced', () => {
+ const wrapper = setup(true);
+ expect(wrapper.find('button').props()['aria-label']).toEqual('Synced times');
+ });
+ it('should not change style when not synced', () => {
+ const wrapper = setup(false);
+ expect(wrapper.find('button').props()['aria-label']).toEqual('Unsynced times');
+ });
+});
diff --git a/public/app/features/explore/TimeSyncButton.tsx b/public/app/features/explore/TimeSyncButton.tsx
index 8d6cc4af529..85d5a98a331 100644
--- a/public/app/features/explore/TimeSyncButton.tsx
+++ b/public/app/features/explore/TimeSyncButton.tsx
@@ -51,6 +51,7 @@ export function TimeSyncButton(props: TimeSyncButtonProps) {
className={classNames('btn navbar-button navbar-button--attached', {
[styles.timePickerSynced]: isSynced,
})}
+ aria-label={isSynced ? 'Synced times' : 'Unsynced times'}
onClick={() => onClick()}
>
diff --git a/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap b/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
new file mode 100644
index 00000000000..21a407c9d46
--- /dev/null
+++ b/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TimeSyncButton should render component 1`] = `
+
+
+
+
+
+
+
+`;