Unit testing with Jest, how to get linechart values?

[mattorga]

I am trying to Unit Test my application where I would want to get a specific y-value given an x-value. But taking it one step at a time, how would I get the values inside of a line chart (or any chart)?

Below is my test:

test("Line Chart Test", () => {
  const { component } = render(<DummyLineChart />);
  const lineChart = createWrapper(component).findLineChart().findSeries()
  console.log(lineChart)
});

The <DummyLineChart /> component is just the default line chart from the component's playground.

[jperals]

Hi,

findSeries returns the actual line as an element inside an SVG, but this line does not show the actual numbers.

If you want to assert that the correct values are displayed on the chart, one way to do this is to interact with the chart to open the popover. For example:

test("Line Chart Test", () => {
  const { component } = render(<DummyLineChart />);
  const lineChart = createWrapper(component).findLineChart().findSeries();
  const application = lineChart.findApplication(); // Focusable element that controls the interactions
  application.focus(); // Focusing the application opens the popover
  expect(wrapper.findDetailPopover().findSeries();[0].findValue().getElement()).toHaveTextContent('3'); // Assuming the first value of the series is 3
});

[jperals]

More complete test example, actually switching between the different data points:

test("Line Chart Test", async () => {
  const { component } = render(<DummyLineChart />);
  const lineChart = createWrapper(component).findLineChart().findSeries();
  const application = lineChart.findApplication(); // Focusable element that controls the interactions
  const getCurrentValue = () => lineChart.findDetailPopover().findSeries();[0].findValue().getElement();
  const openNext = () => application.keydown(39);

  application.focus(); // Focusing the application opens the popover
  expect(getCurrentValue()).toHaveTextContent('3'); // Assuming the first value of the series is 3

  // Need to wait for at least 25ms before keyboard navigation are enabled in the chart after focusing.
  // Figuring out if this can be removed: https://github.com/cloudscape-design/components/pull/2609
  await new Promise(resolve => setTimeout(resolve, 30));

  openNext();
  expect(getCurrentValue()).toHaveTextContent('10'); // Assuming the first value of the series is 10
  openNext();
  expect(getCurrentValue()).toHaveTextContent('7'); // Assuming the first value of the series is 7
});

One important thing to keep in mind is that what our test utils offer is essentially an interface to the actual UI as presented to the user, so that when you say "get the values inside of a line chart (or any chart)", this only makes sense insofar these values are shown somewhere in the UI.