wix-style-react/dist/es/src/StatsWidget/StatsWidget.spec.js

wix-style-react

import React from 'react';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import statsWidgetDriverFactory from './StatsWidget.driver';
import StatsWidget, { deprecationMessage } from './StatsWidget';
import ButtonWithOptions from '../ButtonWithOptions';
import { depLogger } from '../utils/deprecationLog';

describe('StatsWidget', function () {
  var createDriver = createDriverFactory(statsWidgetDriverFactory);

  var title = 'Stats Widget title';
  var statistics = [{
    title: '10$',
    subtitle: 'Revenue'
  }, {
    title: '2',
    subtitle: 'Products'
  }, {
    title: '1',
    subtitle: 'Transactions'
  }, {
    title: '5',
    subtitle: 'Profit'
  }, {
    title: '15',
    subtitle: 'Music'
  }];

  var statisticsWithPercents = [{
    title: '10$',
    subtitle: 'Revenue',
    percent: 15
  }, {
    title: '2',
    subtitle: 'Products',
    percent: -15
  }, {
    title: '1',
    subtitle: 'Transactions',
    percent: 0
  }];

  var driver = void 0;

  function createComponent(props) {
    driver = createDriver(React.createElement(StatsWidget, props));
  }

  it('should have correct title', function () {
    createComponent({ title: title, statistics: statistics });
    expect(driver.titleText()).toBe(title);
  });

  it('should show statistics and not empty state', function () {
    createComponent({ title: title, statistics: statistics });
    expect(driver.getStatisticTitle(0)).toBe(statistics[0].title);
    expect(driver.getStatisticSubTitle(0)).toBe(statistics[0].subtitle);
    expect(driver.isEmptyStateExists()).toBe(false);
  });

  it('should show empty state and not statistics', function () {
    createComponent({ title: title, emptyState: React.createElement(
        'div',
        null,
        'Empty'
      ) });
    expect(driver.isEmptyStateExists()).toBe(true);
    expect(driver.isStatisticsContentExists()).toBe(false);
  });

  it('should show abs of percentage', function () {
    createComponent({ title: title, statistics: statisticsWithPercents });
    expect(driver.getStatisticPercentValue(0)).toBe(Math.abs(statisticsWithPercents[0].percent) + '%');
    expect(driver.getStatisticPercentValue(1)).toBe(Math.abs(statisticsWithPercents[1].percent) + '%');
  });

  it('should check the stats percent color skin', function () {
    createComponent({ title: title, statistics: statisticsWithPercents });
    expect(driver.isNegativePercentValue(0)).toBe(false);
    expect(driver.isNegativePercentValue(1)).toBe(true);
  });

  it('should put proper classes to percentage according to value', function () {
    createComponent({ title: title, statistics: statisticsWithPercents });

    expect(driver.getStatisticPercentClass(0)).toContain('isPositive');
    expect(driver.getStatisticPercentClass(1)).toContain('isNegative');

    expect(driver.getStatisticPercentClass(2)).not.toContain('isNegative');
    expect(driver.getStatisticPercentClass(2)).not.toContain('isPositive');
  });

  it('should show filter with DropdownBase inside', function () {
    var children = React.createElement(StatsWidget.FilterButton, {
      open: true,
      selectedId: 1,
      dataHook: 'stats-widget-filter',
      options: [{ id: 1, value: 'value' }]
    });
    createComponent({ title: title, statistics: statistics, children: children });
    expect(driver.getFilterButtonDriver('stats-widget-filter').dropdownLayoutDriver.exists()).toBe(true);
  });

  it('filters should have selectable options', function () {
    var onSelectStub = jest.fn();

    var children = React.createElement(StatsWidget.FilterButton, {
      open: true,
      selectedId: 1,
      dataHook: 'stats-widget-filter',
      onSelect: onSelectStub,
      options: [{ id: 1, value: 'value' }]
    });
    createComponent({ title: title, statistics: statistics, children: children });
    driver.getFilterButtonDriver('stats-widget-filter').dropdownLayoutDriver.clickAtOption(0);
    expect(onSelectStub).toHaveBeenCalledWith({ id: 1, value: 'value' });
  });

  it('should show filters with option value specified', function () {
    var value = 'Last Week';
    var children = React.createElement(StatsWidget.FilterButton, {
      open: true,
      selectedId: 1,
      dataHook: 'stats-widget-filter',
      options: [{ id: 1, value: value }]
    });
    createComponent({ title: title, statistics: statistics, children: children });
    expect(driver.getFilterButtonDriver('stats-widget-filter').dropdownLayoutDriver.optionsContent()).toContain(value);
  });

  describe('propTypes validation', function () {
    var consoleErrorSpy = void 0;

    var createChildren = function createChildren(n) {
      return Array(n).fill().map(function (v, i) {
        return React.createElement(StatsWidget.FilterButton, {
          open: true,
          key: i,
          selectedId: 1,
          dataHook: 'stats-widget-filter',
          options: [{ id: 1, value: 'value' }]
        });
      });
    };

    beforeEach(function () {
      consoleErrorSpy = jest.spyOn(global.console, 'error').mockImplementation(jest.fn());
    });

    afterEach(function () {
      consoleErrorSpy.mockRestore();
    });

    it('should not initialize component with percent which are not a numbers', function () {
      var wrongStatistics = [{
        title: '10$',
        subtitle: 'Revenue',
        percent: '15%'
      }, {
        title: '2',
        subtitle: 'Products',
        percent: '-15%'
      }, {
        title: '1',
        subtitle: 'Transactions',
        percent: '0'
      }];

      var PageRequiredChildrenArrayError = 'Warning: Failed prop type: Invalid prop `statistics[0].percent` of type `string` supplied to `StatsWidget`, expected `number`.\n    in StatsWidget';
      createComponent({ title: title, statistics: wrongStatistics });

      expect(consoleErrorSpy).toHaveBeenCalledWith(PageRequiredChildrenArrayError);
    });

    it('should throw when there are more than 3 children', function () {
      createComponent({
        title: title,
        statistics: statistics,
        children: createChildren(4)
      });

      expect(consoleErrorSpy).toHaveBeenCalledWith('Warning: Failed prop type: Invalid Prop children, maximum amount of filters are 3\n    in StatsWidget');
    });

    it('should throw when children are not <StatsWidget.FilterButton/>', function () {
      createComponent({
        title: title,
        statistics: statistics,
        children: [React.createElement('div', { key: '1' }), React.createElement('div', { key: '2' }), React.createElement('div', { key: '3' })]
      });

      expect(consoleErrorSpy).toHaveBeenCalledWith('Warning: Failed prop type: StatsWidget: Invalid Prop children, only <StatsWidget.FilterButton/> is allowed\n    in StatsWidget');
    });
  });

  describe('deprecated usage with ButtonWithOptions', function () {
    var deprecationLogSpy = void 0;

    beforeEach(function () {
      deprecationLogSpy = jest.spyOn(depLogger, 'log').mockImplementation(jest.fn());
    });

    afterEach(function () {
      // We'll expect the prop types error to be thrown
      expect(deprecationLogSpy).toHaveBeenCalledWith(deprecationMessage);

      deprecationLogSpy.mockRestore();
    });

    it('should show filter with ButtonWithOptions inside', function () {
      var children = React.createElement(
        StatsWidget.Filter,
        { selectedId: 1, dataHook: 'stats-widget-filter' },
        React.createElement(ButtonWithOptions.Button, null),
        [React.createElement(
          ButtonWithOptions.Option,
          { key: 1, id: '1' },
          'value'
        )]
      );
      createComponent({ title: title, statistics: statistics, children: children });
      expect(driver.getFilterDriver('stats-widget-filter').dropdownLayoutDriver.exists()).toBe(true);
    });

    it('filters should have selectable options', function () {
      var onSelectStub = jest.fn();

      var children = React.createElement(
        StatsWidget.Filter,
        {
          selectedId: 1,
          dataHook: 'stats-widget-filter',
          onSelect: onSelectStub
        },
        React.createElement(ButtonWithOptions.Button, null),
        [React.createElement(
          ButtonWithOptions.Option,
          { id: '1', key: 1 },
          'value'
        )]
      );
      createComponent({ title: title, statistics: statistics, children: children });
      driver.getFilterDriver('stats-widget-filter').dropdownLayoutDriver.clickAtOption(0);
      expect(onSelectStub).toHaveBeenCalled();
    });

    it('should show filters with option value specified', function () {
      var value = 'Last Week';
      var children = React.createElement(
        StatsWidget.Filter,
        { selectedId: 1, dataHook: 'stats-widget-filter' },
        React.createElement(ButtonWithOptions.Button, null),
        [React.createElement(
          ButtonWithOptions.Option,
          { id: '1', key: 1 },
          value
        )]
      );
      createComponent({ title: title, statistics: statistics, children: children });
      expect(driver.getFilterDriver('stats-widget-filter').dropdownLayoutDriver.optionsContent()).toContain(value);
    });
  });
});