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