import React from 'react';
import { render } from '../../test-utils';
import { createMemoryHistory } from 'history';
import TabLink from '../TabLink';
import 'jest-styled-components';
import { COLORS } from '../../styles';
import { NavigationProvider } from '../../Navigation';

describe('<TabLink />', () => {

  const navProps = {
    currentPath: '',
    isActiveRoute: () => false,
    navigate: (path: string, isExternal: boolean) => {}
  };

  it('Renders primary button', async () => {
    const { queryByText, getByTestId } = render(
      <NavigationProvider {...navProps}>
        <TabLink requiredLine="This is a required line" onLinkClick={() => {}} href="/test" testId="TestTabLink" />
      </NavigationProvider>,
    );
    expect(queryByText('This is a required line')).toBeDefined();
    expect(getByTestId('TestTabLink')).toHaveStyle('background-color: transparent');
    expect(getByTestId('TestTabLink')).toHaveStyle('font-size: 16px');

    // Check that click takes you to correct route
    getByTestId('TestTabLink').click();
    //expect(history.location.pathname).toBe('/test');
  });
  it('Renders notification dot if defined', async () => {
    const { queryByText, getByTestId } = render(
      <NavigationProvider {...navProps}>
        <TabLink requiredLine="This is a required line" onLinkClick={() => {}} href="/test" testId="TestTabLinkWithNotifcationDot" showNotificationDot={true} />
      </NavigationProvider>,
    );
    expect(queryByText('This is a required line')).toBeDefined();
    expect(getByTestId('NotificationDot')).toBeDefined();
  });
});