src/app/components/InlineLink/index.test.tsx

Summary

Maintainability
A
0 mins
Test Coverage
import React from 'react';

import InlineLink from '.';
import { render, screen } from '../react-testing-library-with-providers';

const setCurrentLocation = (location: string) => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  /* @ts-ignore  */
  delete window.location;
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  /* @ts-ignore  */
  window.location = new URL(location);
};

describe('InlineLink', () => {
  it('should render the inline link in an anchor element with correct href attribute', () => {
    render(
      <InlineLink to="/mundo/articles/ce42wzqr2mko" text="Hello World!" />,
    );

    const anchorEl = screen.getByText('Hello World!');

    expect(anchorEl.nodeName).toBe('A');
    expect(anchorEl).toHaveAttribute('href', '/mundo/articles/ce42wzqr2mko');
  });

  it.each`
    to                                | currentLocation
    ${'/'}                            | ${'https://localhost'}
    ${'/'}                            | ${'https://bbc.com'}
    ${'/mundo/articles/ce42wzqr2mko'} | ${'https://bbc.com'}
    ${'mundo/articles/ce42wzqr2mko'}  | ${'https://bbc.com'}
    ${'/russian'}                     | ${'https://bbc.com'}
    ${'/ukrainian/features-62913090'} | ${'https://www.bbc.com'}
    ${'/korean/features-62910648'}    | ${'https://bbc.com'}
    ${'/news'}                        | ${'https://www.bbc.co.uk'}
    ${'/news/live/uk-62902778'}       | ${'https://bbc.co.uk'}
    ${'/russian'}                     | ${'https://www.bbcrussian.com'}
    ${'/russan'}                      | ${'https://bbcrussian.com'}
  `(
    'should render the internal inline link without an aria-label when navigating to "$to" from "$currentLocation"',
    ({ to, currentLocation }) => {
      setCurrentLocation(currentLocation);

      render(<InlineLink to={to} text="Hello World!" />);

      expect(screen.getByText('Hello World!')).not.toHaveAttribute(
        'aria-label',
      );
    },
  );

  it.each`
    service           | variant      | expected
    ${'afaanoromoo'}  | ${'default'} | ${'Google alaan'}
    ${'afrique'}      | ${'default'} | ${'Google, externe'}
    ${'amharic'}      | ${'default'} | ${'Google, ውጫዊ'}
    ${'arabic'}       | ${'default'} | ${'Google، خارجي '}
    ${'archive'}      | ${'default'} | ${'Google, external'}
    ${'azeri'}        | ${'default'} | ${'Google, BBC-dən kənar'}
    ${'bengali'}      | ${'default'} | ${'Google, বাইরের'}
    ${'burmese'}      | ${'default'} | ${'Google, ပြင်ပစာမျက်နှာ'}
    ${'cymrufyw'}     | ${'default'} | ${'Google, dolen allanol'}
    ${'gahuza'}       | ${'default'} | ${'Google, bivuye ahandi'}
    ${'gujarati'}     | ${'default'} | ${'Google, બહારની'}
    ${'hausa'}        | ${'default'} | ${'Google, waje'}
    ${'hindi'}        | ${'default'} | ${'Google, बाहरी'}
    ${'igbo'}         | ${'default'} | ${'Google, na mpụta'}
    ${'indonesia'}    | ${'default'} | ${'Google, eksternal'}
    ${'japanese'}     | ${'default'} | ${'Google は外部ページです'}
    ${'korean'}       | ${'default'} | ${'Google, 외부 사이트'}
    ${'kyrgyz'}       | ${'default'} | ${'Google, баракчалар'}
    ${'marathi'}      | ${'default'} | ${'Google, बाहेर'}
    ${'mundo'}        | ${'default'} | ${'Google, externo'}
    ${'naidheachdan'} | ${'default'} | ${'Google, taobh a-muigh'}
    ${'nepali'}       | ${'default'} | ${'Google, बाह्य'}
    ${'news'}         | ${'default'} | ${'Google, external'}
    ${'pashto'}       | ${'default'} | ${'Google، بهرنی'}
    ${'persian'}      | ${'default'} | ${'Google، خارجی'}
    ${'pidgin'}       | ${'default'} | ${'Google, outside'}
    ${'portuguese'}   | ${'default'} | ${'Google, externo'}
    ${'punjabi'}      | ${'default'} | ${'Google, ਬਾਹਰੀ'}
    ${'russian'}      | ${'default'} | ${'Google, внешняя'}
    ${'scotland'}     | ${'default'} | ${'Google, external'}
    ${'sport'}        | ${'default'} | ${'Google, external'}
    ${'sinhala'}      | ${'default'} | ${'Google, බාහිර'}
    ${'somali'}       | ${'default'} | ${'Google, kale'}
    ${'swahili'}      | ${'default'} | ${'Google, ya nje'}
    ${'tamil'}        | ${'default'} | ${'Google, வெளி'}
    ${'telugu'}       | ${'default'} | ${'Google, ఇతర'}
    ${'thai'}         | ${'default'} | ${'Google, จากภายนอก'}
    ${'tigrinya'}     | ${'default'} | ${'Google, ደጋዊ'}
    ${'serbian'}      | ${'cyr'}     | ${'Google, спољна'}
    ${'serbian'}      | ${'lat'}     | ${'Google, spoljna'}
    ${'turkce'}       | ${'default'} | ${'Google, dış'}
    ${'ukchina'}      | ${'simp'}    | ${'Google, 外部'}
    ${'ukchina'}      | ${'trad'}    | ${'Google, 外部'}
    ${'ukrainian'}    | ${'default'} | ${'Google, зовнішнє'}
    ${'urdu'}         | ${'default'} | ${'Google، بیرو'}
    ${'uzbek'}        | ${'cyr'}     | ${'Google, ташқи'}
    ${'uzbek'}        | ${'lat'}     | ${'Google, ташқи'}
    ${'vietnamese'}   | ${'default'} | ${'Google, bên ngoài'}
    ${'yoruba'}       | ${'default'} | ${'Google, ìta'}
    ${'zhongwen'}     | ${'simp'}    | ${'Google, 外部'}
    ${'zhongwen'}     | ${'trad'}    | ${'Google, 外部'}
  `(
    'should render the external inline link with a localised "external" message in the aria-label for the $service service',
    ({ service, variant, expected }) => {
      render(<InlineLink to="https://google.com" text="Google" />, {
        service,
        variant,
      });

      expect(screen.getByText('Google')).toHaveAttribute(
        'aria-label',
        expected,
      );
    },
  );

  it.each`
    size          | expected
    ${'atlas'}    | ${'4.875'}
    ${'elephant'} | ${'3.75'}
    ${'imperial'} | ${'3.125'}
    ${'royal'}    | ${'2.5'}
    ${'foolscap'} | ${'2'}
    ${'canon'}    | ${'1.75'}
  `('should apply provided font size ', ({ size, expected }) => {
    render(
      <InlineLink
        to="/mundo/articles/ce42wzqr2mko"
        text="Hello World!"
        size={size}
      />,
    );

    expect(screen.getByText('Hello World!')).toHaveStyle({
      'font-size': `${expected}rem`,
    });
  });

  it.each`
    variant                | fontWeight | fontStyle
    ${'sansRegularItalic'} | ${400}     | ${'italic'}
    ${'sansBold'}          | ${700}     | ${'normal'}
    ${'serifMediumItalic'} | ${500}     | ${'italic'}
    ${'serifLight'}        | ${300}     | ${'normal'}
    ${'sansLight'}         | ${300}     | ${'normal'}
  `(
    'should apply provided font variant ',
    ({ variant, fontWeight, fontStyle }) => {
      render(
        <InlineLink
          to="/mundo/articles/ce42wzqr2mko"
          text="Hello World!"
          fontVariant={variant}
        />,
      );

      expect(screen.getByText('Hello World!')).toHaveStyle({
        'font-style': fontStyle,
        'font-weight': fontWeight,
      });
    },
  );
});