@enact/sandstone/Steps/tests/Steps-specs.js

Large-screen/TV support library for Enact, containing a variety of UI components.

"use strict";

require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _Steps = require("../Steps");
var _jsxRuntime = require("react/jsx-runtime");
describe('Steps Specs', function () {
  test('should render two steps with no props specified', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {}));
    var firstStep = _react.screen.getByText('1');
    var secondStep = _react.screen.getByText('2');
    expect(firstStep).toBeInTheDocument();
    expect(secondStep).toBeInTheDocument();
  });
  test('should indicate a two step process with no props specified', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {}));
    var actual = _react.screen.getByRole('list').children;
    var expected = 2;
    expect(actual).toHaveLength(expected);
  });
  test('should render six steps with `total` set to 6', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      total: 6
    }));
    var firstStep = _react.screen.getByText('1');
    var secondStep = _react.screen.getByText('2');
    var thirdStep = _react.screen.getByText('3');
    var fourthStep = _react.screen.getByText('4');
    var fifthStep = _react.screen.getByText('5');
    var sixthStep = _react.screen.getByText('6');
    expect(firstStep).toBeInTheDocument();
    expect(secondStep).toBeInTheDocument();
    expect(thirdStep).toBeInTheDocument();
    expect(fourthStep).toBeInTheDocument();
    expect(fifthStep).toBeInTheDocument();
    expect(sixthStep).toBeInTheDocument();
  });
  test('should indicate a 6 step process with `total` set to 6', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      total: 6
    }));
    var steps = _react.screen.getByRole('list').children;
    var expected = 6;
    expect(steps).toHaveLength(expected);
  });
  test('should correctly set the `size`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      size: "medium"
    }));
    var firstStepElement = _react.screen.getByText('1');
    var expected = 'medium'; // `size` actually comes from Icon, which we aren't accessing, so we use the bare class name.

    expect(firstStepElement).toHaveClass(expected);
  });
  test('should correctly indicate the `current` even if that\'s the only prop set', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      current: 2
    }));
    var firstStepElement = _react.screen.getByText('✓');
    var secondStepElement = _react.screen.getByText('2');
    var expected = 'current';
    expect(firstStepElement).not.toHaveClass(expected);
    expect(secondStepElement).toHaveClass(expected);
  });
  test('should support custom `pastIcon`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      current: 2,
      total: 3,
      pastIcon: "bookmark"
    }));
    var pastStepIcon = _react.screen.getByRole('list').children.item(0).textContent.codePointAt();
    var expected = 983364; // decimal converted charCode of Unicode 'bookmark' character

    expect(pastStepIcon).toBe(expected);
  });
  test('should support custom `currentIcon`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      current: 2,
      total: 3,
      currentIcon: "edit"
    }));
    var currentStepIcon = _react.screen.getByRole('list').children.item(1).textContent.codePointAt();
    var expected = 983369; // decimal converted charCode of Unicode 'edit' character

    expect(currentStepIcon).toBe(expected);
  });
  test('should support custom `futureIcon`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      current: 2,
      total: 3,
      futureIcon: "arrowup"
    }));
    var futureStepIcon = _react.screen.getByRole('list').children.item(2).textContent.codePointAt();
    var expected = 8593; // decimal converted charCode of Unicode 'arrowup' character

    expect(futureStepIcon).toBe(expected);
  });
  test('should support numeric step identifier for `pastIcon`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      current: 2,
      total: 3,
      pastIcon: "numbers"
    }));
    var pastIcon = _react.screen.getByRole('list').children.item(0).textContent;
    var expected = '1';
    expect(pastIcon).toBe(expected);
  });
  test('should support numeric step identifier for `currentIcon`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      current: 2,
      total: 3,
      currentIcon: "numbers"
    }));
    var currentIcon = _react.screen.getByRole('list').children.item(1).textContent;
    var expected = '2';
    expect(currentIcon).toBe(expected);
  });
  test('should support numeric step identifier for `futureIcon`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      current: 2,
      total: 3,
      futureIcon: "numbers"
    }));
    var futureIcon = _react.screen.getByRole('list').children.item(2).textContent;
    var expected = '3';
    expect(futureIcon).toBe(expected);
  });
  test('should support number for `skip` prop', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      skip: 2,
      current: 3,
      total: 5
    }));
    var skippedStep = _react.screen.getByRole('list').children.item(1);
    var expected = 'skip';
    expect(skippedStep.className).toContain(expected);
  });
  test('should support custom `skipIcon`', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      skip: 2,
      skipIcon: "skip",
      current: 3,
      total: 5
    }));
    var skippedStepIcon = _react.screen.getByRole('list').children.item(1).textContent.codePointAt();
    var expected = 983017; // decimal converted charCode of Unicode 'skip' character

    expect(skippedStepIcon).toBe(expected);
  });
  test('should support array of numbers for `skip` prop', function () {
    var expected = 'testIconName';
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      skip: [2, 4],
      skipIcon: expected,
      current: 3,
      total: 5
    }));
    var secondSkippedStep = _react.screen.getByRole('list').children.item(1).textContent;
    var fourthSkippedStep = _react.screen.getByRole('list').children.item(3).textContent;
    expect(secondSkippedStep).toBe(expected);
    expect(fourthSkippedStep).toBe(expected);
  });
  test('should not show a skip icon if the `current` step is in the skip list', function () {
    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
      skip: [2, 3],
      skipIcon: "testIconName",
      current: 3,
      currentIcon: "numbers",
      total: 5
    }));
    var currentStep = _react.screen.getByRole('list').children.item(2).textContent;
    var expected = '3';
    expect(currentStep).toBe(expected);
  });
});