webcomponents-react/packages/charts/src/components/PieChart/PieChart.cy.tsx at 76f3ac0deaca4d580ba41e400231abed1ea77a05 · 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
import { Text as RechartsText } from 'recharts';
import { complexDataSet, simpleDataSet } from '../../resources/DemoProps.js';
import { PieChart } from './index.js';
import { cypressPassThroughTestsFactory, testChartLegendConfig, testPieSectorFocus } from '@/cypress/support/utils';

const dimension = {
  accessor: 'name',
};
const measure = {
  accessor: 'users',
};

describe('PieChart', () => {
  it('Basic', () => {
    cy.mount(<PieChart dataset={simpleDataSet} dimension={dimension} measure={measure} />);
    cy.get('.recharts-responsive-container').should('be.visible');
    cy.get('.recharts-pie').should('have.length', 1);
    cy.get('.recharts-pie-sector').should('have.length', 12);
  });

  it('click handlers', () => {
    const onClick = cy.spy().as('onClick');
    const onLegendClick = cy.spy().as('onLegendClick');
    cy.mount(
      <PieChart
        dataset={simpleDataSet}
        dimension={dimension}
        measure={measure}
        onDataPointClick={onClick}
        onLegendClick={onLegendClick}
        noAnimation
      />,
    );

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

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

  it('Loading Placeholder', () => {
    cy.mount(<PieChart dataset={[]} dimension={dimension} measure={measure} />);
    cy.get('.recharts-pie').should('not.exist');
    cy.contains('Loading...').should('exist');
  });

  cypressPassThroughTestsFactory(PieChart, { dimension: {}, measure: {} });

  it('custom label', () => {
    const CustomDataLabel = (props) => <RechartsText {...props}>CustomLabel</RechartsText>;

    cy.mount(
      <PieChart
        dataset={simpleDataSet}
        dimension={dimension}
        measure={{
          accessor: 'users',
          DataLabel: <CustomDataLabel />,
        }}
      />,
    );
    cy.findAllByText('CustomLabel').should('have.length', 12);
  });

  testChartLegendConfig(PieChart, { dataset: complexDataSet, dimension, measure });

  testPieSectorFocus(PieChart, { dataset: simpleDataSet, dimension, measure });
});