Trend.test.tsx

/*
 * Copyright (C) 2020 Graylog, Inc.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the Server Side Public License, version 1,
 * as published by MongoDB, Inc.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * Server Side Public License for more details.
 *
 * You should have received a copy of the Server Side Public License
 * along with this program. If not, see
 * <http://www.mongodb.com/licensing/server-side-public-license>.
 */
import * as React from 'react';
import { render, screen, within } from 'wrappedTestingLibrary';

import Trend from './Trend';

const renderTrend = ({
  current = 42,
  previous = 42,
  trendPreference = 'NEUTRAL',
}: Partial<React.ComponentProps<typeof Trend>> = {}) =>
  render(<Trend current={current} previous={previous} trendPreference={trendPreference} />);

const findTrend = async () => {
  const trend = await screen.findByTestId('trend-value');

  return trend.innerHTML;
};

describe('Trend', () => {
  it('shows absolute delta', async () => {
    renderTrend({ previous: 23 });

    expect(await findTrend()).toMatch(/\+19/);
  });

  it('shows relative delta as percentage', async () => {
    renderTrend({ previous: 23 });

    expect(await findTrend()).toMatch(/\+82.6%/);
  });

  it('shows absolute delta if values are equal', async () => {
    renderTrend();

    expect(await findTrend()).toMatch(/^0 \//);
  });

  it('shows relative delta as percentage if values are equal', async () => {
    renderTrend();

    expect(await findTrend()).toMatch(/0\.0%/);
  });

  it('shows negative absolute delta', async () => {
    renderTrend({ current: 23 });

    expect(await findTrend()).toMatch(/-19/);
  });

  it('shows negative relative delta as percentage', async () => {
    renderTrend({ current: 23 });

    expect(await findTrend()).toMatch(/-45.2%/);
  });

  it('shows adequate results if previous value is 0', async () => {
    renderTrend({ current: 23, previous: 0 });

    expect(await findTrend()).toMatch(/\+23/);
  });

  it('shows adequate results if previous value is NaN', async () => {
    renderTrend({ current: 23, previous: NaN });

    expect(await findTrend()).toEqual('-- / --');
  });

  it('shows adequate results if current value is 0', async () => {
    renderTrend({ current: 0, previous: 42 });

    expect(await findTrend()).toMatch(/-42 \/ -100\.0%/);
  });

  it('shows adequate results if current value is NaN', async () => {
    renderTrend({ current: NaN, previous: 42 });

    expect(await findTrend()).toEqual('-- / --');
  });

  describe('renders background according to values and trend preference', () => {
    it.each`
      trendPreference
      ${'NEUTRAL'}
      ${'HIGHER'}
      ${'LOWER'}
    `(
      'shows neutral background if values are equal and trend preference is $trendPreference',
      async ({ trendPreference }: { trendPreference: 'NEUTRAL' | 'LOWER' | 'HIGHER' }) => {
        renderTrend({ trendPreference });

        const background = await screen.findByTestId('trend-background');

        expect(background).toHaveStyleRule('background-color', '#fff!important');
      },
    );

    it('shows good background if current value and preference are higher', async () => {
      renderTrend({ current: 43, trendPreference: 'HIGHER' });

      const background = await screen.findByTestId('trend-background');

      expect(background).toHaveStyleRule('background-color', '#2ECA8F!important');
    });

    it('shows good background if current value and preference are lower', async () => {
      renderTrend({ current: 41, trendPreference: 'LOWER' });

      const background = await screen.findByTestId('trend-background');

      expect(background).toHaveStyleRule('background-color', '#2ECA8F!important');
    });

    it('shows bad background if current value is lower but preference is higher', async () => {
      renderTrend({ current: 41, trendPreference: 'HIGHER' });

      const background = await screen.findByTestId('trend-background');

      expect(background).toHaveStyleRule('background-color', '#FE4A49!important');
    });

    it('shows bad background if current value is higher but preference is lower', async () => {
      renderTrend({ current: 43, trendPreference: 'LOWER' });

      const background = await screen.findByTestId('trend-background');

      expect(background).toHaveStyleRule('background-color', '#FE4A49!important');
    });

    it('shows neutral background if current value is higher but preference is neutral', async () => {
      renderTrend({ current: 43, trendPreference: 'NEUTRAL' });

      const background = await screen.findByTestId('trend-background');

      expect(background).toHaveStyleRule('background-color', '#fff!important');
    });

    it('shows neutral background if current value is lower but preference is neutral', async () => {
      renderTrend({ current: 41, trendPreference: 'NEUTRAL' });

      const background = await screen.findByTestId('trend-background');

      expect(background).toHaveStyleRule('background-color', '#fff!important');
    });
  });

  describe('renders icon indicating trend direction', () => {
    it('shows circle right if values are equal', async () => {
      renderTrend();

      const trendIcon = await screen.findByTestId('trend-icon');

      within(trendIcon).getByText('arrow_circle_right');
    });

    it('shows circle down if current values is lower', async () => {
      renderTrend({ current: 41 });
      const trendIcon = await screen.findByTestId('trend-icon');

      within(trendIcon).getByText('arrow_circle_down');
    });

    it('shows circle up if current values is higher', async () => {
      renderTrend({ current: 43 });
      const trendIcon = await screen.findByTestId('trend-icon');

      within(trendIcon).getByText('arrow_circle_up');
    });
  });
});