@bbc/psammead-brand/src/index.test.jsx

Provides the BBC News logo (as SVG), nested a hardcoded link to https://www.bbc.co.uk/news

import React, { useRef, useEffect } from 'react';
import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
import { render } from '@testing-library/react';
import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours';
import ScriptLink from '@bbc/psammead-script-link';
import { latin } from '@bbc/gel-foundations/scripts';
import Brand from '.';
import SkipLink from './SkipLink';

const svg = {
  group: (
    <g fillRule="evenodd">
      <path d="M84.32" />
    </g>
  ),
  viewbox: {
    height: 24,
    width: 167.95,
  },
  ratio: 6.9979,
};

describe('Brand', () => {
  shouldMatchSnapshot(
    'should render correctly with link provided',
    <Brand
      product="Default Brand Name"
      serviceLocalisedName="Service"
      svgHeight={24}
      maxWidth={280}
      minWidth={180}
      svg={svg}
      url="https://www.bbc.co.uk/news"
      backgroundColour={C_POSTBOX}
      logoColour={C_WHITE}
    />,
  );

  shouldMatchSnapshot(
    'should render correctly with link not provided',
    <Brand
      product="Default Brand Name"
      serviceLocalisedName="Service"
      svg={svg}
      svgHeight={24}
      maxWidth={280}
      minWidth={180}
      backgroundColour={C_POSTBOX}
      logoColour={C_WHITE}
    />,
  );

  shouldMatchSnapshot(
    'should render correctly with no service Localised Name',
    <Brand
      product="BBC News"
      svg={svg}
      svgHeight={24}
      maxWidth={280}
      minWidth={180}
      backgroundColour={C_POSTBOX}
      logoColour={C_WHITE}
    />,
  );

  shouldMatchSnapshot(
    'should render correctly with transparent borders',
    <Brand
      product="BBC News"
      svg={svg}
      svgHeight={24}
      maxWidth={280}
      minWidth={180}
      borderTop
      borderBottom
      backgroundColour={C_POSTBOX}
      logoColour={C_WHITE}
    />,
  );

  describe('assertions - visually hidden text', () => {
    it('should have role of text when serviceLocalisedName is provided', () => {
      const { container } = render(
        <Brand
          product="Default Brand Name"
          serviceLocalisedName="Service"
          svgHeight={24}
          maxWidth={280}
          minWidth={180}
          svg={svg}
          url="https://www.bbc.co.uk/news"
          backgroundColour={C_POSTBOX}
          logoColour={C_WHITE}
        />,
      );

      expect(container.querySelector('span').getAttribute('role')).toEqual(
        'text',
      );
    });

    it('should not have role of text when serviceLocalisedName is not provided', () => {
      const { container } = render(
        <Brand
          product="Default Brand Name"
          svgHeight={24}
          maxWidth={280}
          minWidth={180}
          svg={svg}
          url="https://www.bbc.co.uk/news"
          backgroundColour={C_POSTBOX}
          logoColour={C_WHITE}
        />,
      );

      expect(container.querySelector('span').getAttribute('role')).toBeNull();
    });

    it('should add extra props passed to the component', () => {
      const { container } = render(
        <Brand
          product="Default Brand Name"
          svgHeight={24}
          maxWidth={280}
          minWidth={180}
          svg={svg}
          url="https://www.bbc.co.uk/news"
          backgroundColour={C_POSTBOX}
          logoColour={C_WHITE}
          data-brand="header"
        />,
      );

      expect(container.querySelector('div').getAttribute('data-brand')).toEqual(
        'header',
      );
    });

    it('should let the brand link be focussed with a ref', () => {
      const TestComponent = () => {
        const brandRef = useRef(null);

        useEffect(() => {
          brandRef.current?.querySelector('a')?.focus();
        }, []);

        return (
          <Brand
            product="Default Brand Name"
            svgHeight={24}
            maxWidth={280}
            minWidth={180}
            svg={svg}
            url="https://www.bbc.co.uk/news"
            backgroundColour={C_POSTBOX}
            logoColour={C_WHITE}
            data-brand="header"
            ref={brandRef}
          />
        );
      };
      const initialFocus = document.activeElement;
      const { container } = render(<TestComponent />);
      const brand = container.querySelector('a');

      expect(document.activeElement).toBe(brand);
      expect(document.activeElement).not.toBe(initialFocus);
    });

    it('should render brand link with id where linkId and url props are provided', () => {
      const { container } = render(
        <Brand
          product="BBC News"
          svg={svg}
          url="https://www.bbc.co.uk/news"
          svgHeight={24}
          maxWidth={280}
          minWidth={180}
          borderTop
          borderBottom
          backgroundColour={C_POSTBOX}
          logoColour={C_WHITE}
          linkId="brandLink"
        />,
      );

      const brandLink = container.querySelector('#brandLink');
      expect(brandLink).toBe(container.querySelector('a'));
    });

    it('should render script, frontpage and skip to content links', () => {
      const scriptLinkComponent = (
        <ScriptLink
          script={latin}
          service="serbian"
          href="https://www.bbc.com/serbian/lat"
        >
          Lat
        </ScriptLink>
      );

      const skipLink = (
        <SkipLink service="news" script={latin} href="#content">
          Skip to content
        </SkipLink>
      );

      const { container } = render(
        <Brand
          product="Default Brand Name"
          svgHeight={24}
          maxWidth={280}
          minWidth={180}
          svg={svg}
          url="https://www.bbc.co.uk/news"
          backgroundColour={C_POSTBOX}
          logoColour={C_WHITE}
          skipLink={skipLink}
          data-brand="header"
          scriptLink={scriptLinkComponent}
        />,
      );

      const links = container.querySelectorAll('a');
      expect(links).toHaveLength(3);

      const frontpageLink = links[0];
      expect(frontpageLink.getAttribute('href')).toEqual(
        'https://www.bbc.co.uk/news',
      );
      expect(frontpageLink.textContent).toEqual('Default Brand Name');

      const skipToContentLink = links[1];
      expect(skipToContentLink.getAttribute('href')).toEqual('#content');
      expect(skipToContentLink.textContent).toEqual('Skip to content');

      const scriptLink = links[2];
      expect(scriptLink.getAttribute('href')).toEqual(
        'https://www.bbc.com/serbian/lat',
      );
      expect(scriptLink.textContent).toEqual('Lat');
    });
  });
});