Repository: recharts/recharts
File: test/cartesian/Area.spec.tsx (TypeScript)

Code before:
            <Area dataKey="value" baseValue="dataMax" />
          </ChartElement>,
        );
        const curves = container.querySelectorAll('.recharts-curve');
        expect(curves).toHaveLength(2);
        expect
          .soft(curves[0])
          .toHaveAttribute('d', 'M5,5L127.5,5L250,5L372.5,5L495,5L495,5L372.5,5L250,5L127.5,5L5,5Z');
        expect.soft(curves[1]).toHaveAttribute('d', 'M5,5L127.5,5L250,5L372.5,5L495,5');
      });
    });
  });

  describe('state integration', () => {
    it('should report its props to redux state, and remove them when removed from DOM', () => {
      const spy = vi.fn();
      const Comp = (): null => {
        const cartesianItems = useAppSelector(state => state.graphicalItems.cartesianItems);
        spy(cartesianItems);
        return null;
      };
      const data2 = [1, 2, 3];

      const { rerender } = render(
        <ChartElement data={data}>
          <Area dataKey="value" data={data2} xAxisId={7} yAxisId={9} stackId="q" hide />
          <Customized component={<Comp />} />
        </ChartElement>,
      );
      const expected: ReadonlyArray<CartesianGraphicalItemSettings> = [
        {
          isPanorama: false,
          type: 'area',
          data: data2,
          dataKey: 'value',
          xAxisId: 7,
          yAxisId: 9,
          zAxisId: 0,
          errorBars: [],
          stackId: 'q',
          hide: true,
          barSize: undefined,
        },
      ];
      expect(spy).toHaveBeenLastCalledWith(expected);

      rerender(
        <ChartElement data={data}>
          <Customized component={<Comp />} />
        </ChartElement>,
      );

Review comment (suggestion):
slight concern that `id` will be conflated with DOM element `id` in props even though this doesn't get passed down to the DOM element.

Maybe a different name would make sense for the public interface? `chartId?`

Code after:
            <Area dataKey="value" baseValue="dataMax" />
          </ChartElement>,
        );
        const curves = container.querySelectorAll('.recharts-curve');
        expect(curves).toHaveLength(2);
        expect
          .soft(curves[0])
          .toHaveAttribute('d', 'M5,5L127.5,5L250,5L372.5,5L495,5L495,5L372.5,5L250,5L127.5,5L5,5Z');
        expect.soft(curves[1]).toHaveAttribute('d', 'M5,5L127.5,5L250,5L372.5,5L495,5');
      });
    });
  });

  describe('state integration', () => {
    it('should report its props to redux state, and remove them when removed from DOM', () => {
      const spy = vi.fn();
      const Comp = (): null => {
        const cartesianItems = useAppSelector(state => state.graphicalItems.cartesianItems);
        spy(cartesianItems);
        return null;
      };
      const data2 = [1, 2, 3];

      const { rerender } = render(
        <ChartElement data={data}>
          <Area dataKey="value" data={data2} xAxisId={7} yAxisId={9} stackId="q" hide id="my-custom-area-id" />
          <Comp />
        </ChartElement>,
      );
      const expected: ReadonlyArray<CartesianGraphicalItemSettings> = [
        {
          isPanorama: false,
          type: 'area',
          data: data2,
          dataKey: 'value',
          xAxisId: 7,
          yAxisId: 9,
          zAxisId: 0,
          errorBars: [],
          stackId: 'q',
          hide: true,
          barSize: undefined,
          id: 'my-custom-area-id',
        },
      ];
      expect(spy).toHaveBeenLastCalledWith(expected);

      rerender(
        <ChartElement data={data}>
          <Comp />
        </ChartElement>,