{"size": 5444, "ext": "js", "max_stars_repo_path": "test/ProgressBarSpec.js", "max_stars_repo_name": "nsi319/react-bootstrap", "max_stars_repo_stars_event_min_datetime": "2015-01-01T02:04:48.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-31T17:09:56.000Z", "max_issues_repo_path": "test/ProgressBarSpec.js", "max_issues_repo_name": "nsi319/react-bootstrap", "max_issues_repo_issues_event_min_datetime": "2015-01-01T17:44:26.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T16:56:23.000Z", "max_forks_repo_path": "test/ProgressBarSpec.js", "max_forks_repo_name": "nsi319/react-bootstrap", "max_forks_repo_forks_event_min_datetime": "2015-01-06T11:58:50.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-31T17:19:15.000Z"}
{"max_stars_count": 21790, "max_issues_count": 4969, "max_forks_count": 4507, "avg_line_length": 27.22, "max_line_length": 81, "alphanum_fraction": 0.5773328435}
import { mount } from 'enzyme';

import ProgressBar from '../src/ProgressBar';
import { shouldWarn } from './helpers';

describe('<ProgressBar>', () => {
  it('Should output a progress bar with wrapper', () => {
    mount(<ProgressBar min={0} max={10} now={0} />).assertSingle(
      'div.progress .progress-bar[role="progressbar"]',
    );
  });

  ['success', 'warning', 'info', 'danger'].forEach((variant) => {
    it(`Should have the variant="${variant}" class`, () => {
      mount(
        <ProgressBar min={0} max={10} now={0} variant={variant} />,
      ).assertSingle(`.progress-bar.bg-${variant}`);
    });
  });

  it('Should default to min:0, max:100', () => {
    mount(<ProgressBar now={5} />).assertSingle(
      '.progress-bar[aria-valuemin=0][aria-valuemax=100]',
    );
  });

  it('Should have 0% computed width', () => {
    const node = mount(<ProgressBar min={0} max={10} now={0} />)
      .find('.progress-bar')
      .getDOMNode();

    assert.equal(node.style.width, '0%');
  });

  it('Should have 10% computed width', () => {
    const node = mount(<ProgressBar min={0} max={10} now={1} />)
      .find('.progress-bar')
      .getDOMNode();

    assert.equal(node.style.width, '10%');
  });

  it('Should have 100% computed width', () => {
    const node = mount(<ProgressBar min={0} max={10} now={10} />)
      .find('.progress-bar')
      .getDOMNode();

    assert.equal(node.style.width, '100%');
  });

  it('Should have 50% computed width with non-zero min', () => {
    const node = mount(<ProgressBar min={1} max={11} now={6} />)
      .find('.progress-bar')
      .getDOMNode();

    assert.equal(node.style.width, '50%');
  });

  it('Should not have label', () => {
    const node = mount(<ProgressBar min={0} max={10} now={5} />).getDOMNode();

    assert.equal(node.textContent, '');
  });

  it('Should have label', () => {
    const node = mount(
      <ProgressBar
        min={0}
        max={10}
        now={5}
        variant="success"
        label="progress bar label"
      />,
    ).getDOMNode();

    assert.equal(node.textContent, 'progress bar label');
  });

  it('Should have screen reader only label', () => {
    const node = mount(
      <ProgressBar
        min={0}
        max={10}
        now={5}
        visuallyHidden
        variant="success"
        label="progress bar label"
      />,
    )
      .find('.visually-hidden')
      .getDOMNode();

    assert.equal(node.textContent, 'progress bar label');
  });

  it('Should have a label that is a React component', () => {
    const customLabel = <strong className="special-label">My label</strong>;

    mount(
      <ProgressBar min={0} max={10} now={5} label={customLabel} />,
    ).assertSingle('.special-label');
  });

  it('Should have screen reader only label that wraps a React component', () => {
    const customLabel = <strong className="special-label">My label</strong>;

    mount(
      <ProgressBar
        min={0}
        max={10}
        now={5}
        label={customLabel}
        visuallyHidden
      />,
    ).find('.visually-hidden .special-label');
  });

  it('Should show striped bar', () => {
    mount(<ProgressBar min={1} max={11} now={6} striped />).assertSingle(
      '.progress-bar-striped',
    );
  });

  it('Should show animated striped bar', () => {
    mount(<ProgressBar min={1} max={11} now={6} animated />).assertSingle(
      '.progress-bar-striped.progress-bar-animated',
    );
  });

  it('Should show stacked bars', () => {
    const node = mount(
      <ProgressBar>
        <ProgressBar key={1} now={50} />
        <ProgressBar key={2} now={30} />
      </ProgressBar>,
    ).getDOMNode();

    const bar1 = node.firstChild;
    const bar2 = node.lastChild;

    assert.ok(bar1.className.match(/\bprogress-bar\b/));
    assert.equal(bar1.style.width, '50%');

    assert.ok(bar2.className.match(/\bprogress-bar\b/));
    assert.equal(bar2.style.width, '30%');
  });

  it('Should render animated and striped children in stacked bar too', () => {
    const node = mount(
      <ProgressBar>
        <ProgressBar animated key={1} now={50} />
        <ProgressBar striped key={2} now={30} />
      </ProgressBar>,
    ).getDOMNode();
    // const node = ReactDOM.findDOMNode(node);
    const bar1 = node.firstChild;
    const bar2 = node.lastChild;

    assert.ok(bar1.className.match(/\bprogress-bar\b/));
    assert.ok(bar1.className.match(/\bprogress-bar-animated\b/));
    assert.ok(bar1.className.match(/\bprogress-bar-striped\b/));

    assert.ok(bar2.className.match(/\bprogress-bar\b/));
    assert.ok(bar2.className.match(/\bprogress-bar-striped\b/));
    assert.notOk(bar2.className.match(/\bprogress-bar-animated\b/));
  });

  it('Should forward className and style to nested bars', () => {
    const node = mount(
      <ProgressBar>
        <ProgressBar now={1} className="bar1" />
        <ProgressBar now={2} style={{ minWidth: 10 }} />
      </ProgressBar>,
    ).getDOMNode();

    const bar1 = node.firstChild;
    const bar2 = node.lastChild;

    assert.ok(bar1.className.match(/\bbar1\b/));
    assert.equal(bar2.style.minWidth, '10px');
  });

  it('allows only ProgressBar in children', () => {
    shouldWarn('Failed prop');

    function NotProgressBar() {
      return null;
    }

    mount(
      <ProgressBar>
        <ProgressBar key={1} />
        <NotProgressBar />
        foo
        <ProgressBar key={2} />
      </ProgressBar>,
    );
  });
});
