From f8c474fa1bc1eaeb11911db58867ae7a16cc3f8c Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Wed, 16 Oct 2019 11:48:10 +0200
Subject: [PATCH] Explore: Add unit test to TimeSyncButton (#19836)

---
 .../features/explore/TimeSyncButton.test.tsx  | 23 ++++++++++++++
 .../app/features/explore/TimeSyncButton.tsx   |  1 +
 .../TimeSyncButton.test.tsx.snap              | 30 +++++++++++++++++++
 3 files changed, 54 insertions(+)
 create mode 100644 public/app/features/explore/TimeSyncButton.test.tsx
 create mode 100644 public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap

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(<TimeSyncButton onClick={onClick} isSynced={isSynced} />);
+};
+
+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()}
       >
         <i className="fa fa-link" />
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`] = `
+<TimeSyncButton
+  isSynced={true}
+  onClick={[Function]}
+>
+  <Component
+    content={[Function]}
+    placement="bottom"
+  >
+    <PopoverController
+      content={[Function]}
+      placement="bottom"
+    >
+      <button
+        aria-label="Synced times"
+        className="btn navbar-button navbar-button--attached css-14r9fpj-timePickerSynced"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <i
+          className="fa fa-link"
+        />
+      </button>
+    </PopoverController>
+  </Component>
+</TimeSyncButton>
+`;