Explore: Add unit test to TimeSyncButton (#19836)

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');
+  });
+});

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" />

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>
+`;