// @flow
import React from 'react';
import {
  mountWrappedComponent,
  renderSnapshot,
  itIsAccessible,
} from '../../../../utils/tests';
import { wealthsimple as theme } from '../../../themes/wealthsimple.theme';

import type { SecondaryNavigationProps } from './secondary-navigation.proptypes';
import { getFontColor } from './secondary-navigation.css-rules';
import { SecondaryNavigation } from './index';

const navItems = [
  { label: 'Tab 1', href: 'https://google.ca', onClick: jest.fn() },
  { label: 'Tab 2', href: 'https://wealthsimple.com' },
];

const DEFAULT_PROPS: SecondaryNavigationProps = {
  navItems,
};

describe('SecondaryNavigation', () => {
  describe('snapshot', () => {
    it('matches the previous snapshot', () => {
      const secondaryNavigation = renderSnapshot(
        <SecondaryNavigation {...DEFAULT_PROPS} />,
      );
      expect(secondaryNavigation).toMatchSnapshot();
    });
  });

  describe('css rules', () => {
    describe('getFontColor', () => {
      it('styles the link darker when the pathname matches', () => {
        const pathname = '/test';
        delete global.window.location;
        global.window.location = { pathname };

        expect(getFontColor({ theme, href: pathname })).toEqual(
          theme.colorPalette['greyscale-black'],
        );
      });

      it('styles the link lighter when the pathname does not match', () => {
        const pathname = '/test';
        delete global.window.location;
        global.window.location = { pathname };

        expect(getFontColor({ theme, href: '/some-other-pathname' })).toEqual(
          theme.colorPalette['greyscale-dark'],
        );
      });
    });
  });

  it('passes the navItems onClick to the anchor tag', () => {
    const onClick = jest.fn();
    const navItemsWithClick = [{ ...navItems[0], onClick }];

    const secondaryNavigation = mountWrappedComponent(
      <SecondaryNavigation navItems={navItemsWithClick} />,
    );

    secondaryNavigation
      .find('a')
      .first()
      .simulate('click');

    expect(onClick).toHaveBeenCalledTimes(1);
  });

  itIsAccessible(<SecondaryNavigation {...DEFAULT_PROPS} />);

  describe('with provided onClick', () => {
    itIsAccessible(
      <SecondaryNavigation {...DEFAULT_PROPS} onClick={jest.fn()} />,
    );
  });
});
