@eureca/eureca-ui/src/components/Slider/__tests__/slider.test.js

UI component library of Eureca's user and admin apps

import React from "react";
import { render } from "@testing-library/react";

import { MuiThemeProvider } from "@material-ui/core";

import MuiTheme from "../../../theme/mui";
import { Slider } from "../../Slider";

const renderSlider = ({ label, value, min, max, onChange, defaultValue }) =>
  render(
    <MuiThemeProvider theme={MuiTheme}>
      <Slider
        label={label}
        value={value}
        min={min}
        max={max}
        onChange={onChange}
        defaultValue={defaultValue}
        data-testid="slider-component"
      />
    </MuiThemeProvider>
  );

const setup = props => {
  const utils = renderSlider(props);
  const slider = utils.getByTestId("slider-component");
  return { slider, ...utils };
};

const sliderLabel = "slider-test";
const sliderMin = 1;
const sliderMax = 10;
const sliderDefaultValue = 6;
const onChangeHandler = jest.fn().mockImplementation(() => {
  console.log("<Slider> onChange mock triggered");
});

test("renders a slider with unique value", () => {
  const { getAllByRole, container } = setup({
    label: sliderLabel,
    value: 6,
    min: sliderMin,
    max: sliderMax,
    onChange: onChangeHandler,
    defaultValue: sliderDefaultValue
  });

  expect(container).not.toBe(null);

  const thumbs = getAllByRole("slider");
  expect(thumbs).toHaveLength(1);
});

test("renders a slider with range", () => {
  const { getAllByRole, container } = setup({
    label: sliderLabel,
    value: [3, 4],
    min: sliderMin,
    max: sliderMax,
    onChange: onChangeHandler,
    defaultValue: sliderDefaultValue
  });

  expect(container).not.toBe(null);

  const thumbs = getAllByRole("slider");
  expect(thumbs).toHaveLength(2);
});