webcomponents-react/packages/charts/src/components/ColumnChart/ColumnChart.cy.tsx at f64f17d182cd299e5856492854d3ea847e316d0a · UI5/webcomponents-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import {
  cypressPassThroughTestsFactory,
  testChartLegendConfig,
  testChartZoomingTool,
  testStackAggregateTotals,
} from '../../../../../cypress/support/utils';
import { complexDataSet } from '../../resources/DemoProps.js';
import { ColumnChart } from './index.js';

const dimensions = [
  {
    accessor: 'name',
    interval: 0,
  },
];
const measures = [
  {
    accessor: 'users',
    label: 'Users',
    formatter: (val: number) => val.toLocaleString('en'),
  },
  {
    accessor: 'sessions',
    label: 'Active Sessions',
    formatter: (val) => `${val} sessions`,
    hideDataLabel: true,
  },
  {
    accessor: 'volume',
    label: 'Vol.',
  },
];

describe('ColumnChart', () => {
  it('Basic', () => {
    cy.mount(<ColumnChart dataset={complexDataSet} dimensions={dimensions} measures={measures} />);
    cy.get('.recharts-responsive-container').should('be.visible');
    cy.get('.recharts-bar').should('have.length', 3);
    cy.get('.recharts-bar-rectangles').should('have.length', 3);
  });

  it('click handlers', () => {
    const onClick = cy.spy().as('onClick');
    const onLegendClick = cy.spy().as('onLegendClick');
    cy.mount(
      <ColumnChart
        dataset={complexDataSet}
        dimensions={dimensions}
        measures={measures}
        onClick={onClick}
        onLegendClick={onLegendClick}
      />,
    );

    cy.findByText('January').click();
    cy.get('@onClick').should('have.been.called');
    cy.get('[name="January"]').eq(0).click();
    cy.get('@onClick')
      .should('have.been.calledTwice')
      .and(
        'have.been.calledWith',
        Cypress.sinon.match({
          detail: Cypress.sinon.match({
            payload: complexDataSet[0],
          }),
        }),
      );

    cy.contains('Users').click();
    cy.get('@onLegendClick').should(
      'have.been.calledWith',
      Cypress.sinon.match({
        detail: Cypress.sinon.match({
          dataKey: 'users',
        }),
      }),
    );
  });

  it('Loading Placeholder', () => {
    cy.mount(<ColumnChart dataset={[]} dimensions={[]} measures={[]} />);
    cy.get('.recharts-bar').should('not.exist');
    cy.contains('Loading...').should('exist');
  });

  testChartZoomingTool(ColumnChart, { dataset: complexDataSet, dimensions, measures });

  testChartLegendConfig(ColumnChart, { dataset: complexDataSet, dimensions, measures });

  cypressPassThroughTestsFactory(ColumnChart, { dimensions: [], measures: [] });

  testStackAggregateTotals(ColumnChart, {
    dataset: complexDataSet.slice(0, 3),
    dimensions,
    measures: [
      { accessor: 'users', stackId: 'A', label: 'Users' },
      { accessor: 'sessions', stackId: 'A', label: 'Active Sessions' },
    ],
  });
});