Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ProgressTracker)!: non linear and clickable #726

Merged
merged 11 commits into from
Feb 21, 2024
Merged

feat(ProgressTracker)!: non linear and clickable #726

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2941d05
feat(ProgressTracker): non linear and clickable
savutsang Feb 9, 2024
09fe0c1
fix: snapshots
savutsang Feb 9, 2024
7a447e7
fix: various pr comments
savutsang Feb 15, 2024
f2c808d
fix: linting and tests
savutsang Feb 15, 2024
47289ca
Merge branch 'master' into DS-735-progress-tracker
savutsang Feb 15, 2024
7a42ab9
fix: console.warn, colors, label required
savutsang Feb 16, 2024
52feda9
fix: storybook
savutsang Feb 16, 2024
3dab49f
fix: font weight
savutsang Feb 16, 2024
43c44ec
fix: lines spacing
savutsang Feb 20, 2024
45ff48c
fix: tests
savutsang Feb 21, 2024
6d1973e
Merge branch 'master' into DS-735-progress-tracker
savutsang Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 37 additions & 45 deletions packages/react/src/components/progress-tracker/progress-tracker.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,97 +1,89 @@
import { shallow } from 'enzyme';
import { findByTestId, getByTestId } from '../../test-utils/enzyme-selectors';
import { renderWithProviders } from '../../test-utils/renderer';
import { mountWithTheme, renderWithProviders } from '../../test-utils/renderer';
import { range } from '../../utils/range';
import { Progress, ProgressTracker } from './progress-tracker';
import { ProgressTracker, ProgressTrackerStep } from './progress-tracker';

function generateSteps(count: number): ProgressTracker[] {
function generateSteps(count: number): ProgressTrackerStep[] {
return range(1, count).map((i) => ({ label: `Step ${i}` }));
}

describe('Progress Component', () => {
it('should render all steps', () => {
const steps = generateSteps(3);

const wrapper = shallow(<Progress steps={steps} value={1} />);
const stepsWrapper = getByTestId(wrapper, 'progress-tracker');

const allSteps = findByTestId(stepsWrapper, 'progress-step-', '^');
expect(allSteps.length).toBe(3);
beforeEach(() => {
jest.spyOn(console, 'warn').mockImplementation(() => { });
});

it('should render all steps labels', () => {
const steps = generateSteps(3);

const wrapper = shallow(<Progress steps={steps} value={1} />);
const stepsWrapper = getByTestId(wrapper, 'progress-tracker');

const allStepsLabels = findByTestId(stepsWrapper, 'progress-step-', '^').map((w) => w.text());
const wrapper = mountWithTheme(<ProgressTracker steps={steps} value={1} />);
const allStepsLabels = findByTestId(wrapper, 'progress-tracker-step-', '^')
.map((w) => getByTestId(w, 'progress-tracker-label').text());
expect(allStepsLabels).toEqual(expect.arrayContaining(['Step 1', 'Step 2', 'Step 3']));
savutsang marked this conversation as resolved.
Show resolved Hide resolved
});

it('should have past steps', () => {
it('should have completed steps', () => {
const steps = generateSteps(3);

const wrapper = shallow(<Progress steps={steps} value={3} />);
const stepsWrapper = getByTestId(wrapper, 'progress-tracker');

const pastSteps = findByTestId(stepsWrapper, 'progress-step-past').map((w) => w.text());
expect(pastSteps).toEqual(expect.arrayContaining(['Step 1', 'Step 2']));
const wrapper = mountWithTheme(<ProgressTracker steps={steps} value={3} />);
const completedSteps = findByTestId(wrapper, 'progress-tracker-step-completed')
.map((w) => getByTestId(w, 'progress-tracker-label').text());
expect(completedSteps).toEqual(expect.arrayContaining(['Step 1', 'Step 2']));
});

it('should have current step', () => {
const steps = generateSteps(3);

const wrapper = shallow(<Progress steps={steps} value={2} />);
const stepsWrapper = getByTestId(wrapper, 'progress-tracker');

const currentStep = findByTestId(stepsWrapper, 'progress-step-current').map((w) => w.text());
const wrapper = mountWithTheme(<ProgressTracker steps={steps} value={2} />);
const currentStep = findByTestId(wrapper, 'progress-tracker-step-current')
.map((w) => getByTestId(w, 'progress-tracker-label').text());
expect(currentStep).toEqual(expect.arrayContaining(['Step 2']));
});

it('should fallback to first step if value is less than 1', () => {
const steps = generateSteps(3);

const wrapper = shallow(<Progress steps={steps} value={0} />);
const stepsWrapper = getByTestId(wrapper, 'progress-tracker');

const currentStep = findByTestId(stepsWrapper, 'progress-step-current').map((w) => w.text());
const wrapper = mountWithTheme(<ProgressTracker steps={steps} value={0} />);
const currentStep = findByTestId(wrapper, 'progress-tracker-step-current')
.map((w) => getByTestId(w, 'progress-tracker-label').text());
expect(currentStep).toEqual(expect.arrayContaining(['Step 1']));
});

it('should fallback to last step if value is higher than number of steps', () => {
const steps = generateSteps(3);

const wrapper = shallow(<Progress steps={steps} value={4} />);
const stepsWrapper = getByTestId(wrapper, 'progress-tracker');

const currentStep = findByTestId(stepsWrapper, 'progress-step-current').map((w) => w.text());
const wrapper = mountWithTheme(<ProgressTracker steps={steps} value={4} />);
const currentStep = findByTestId(wrapper, 'progress-tracker-step-current')
.map((w) => getByTestId(w, 'progress-tracker-label').text());
expect(currentStep).toEqual(expect.arrayContaining(['Step 3']));
});

it('should have future steps', () => {
it('should have uncompleted steps', () => {
const steps = generateSteps(3);

const wrapper = shallow(<Progress steps={steps} value={1} />);
const stepsWrapper = getByTestId(wrapper, 'progress-tracker');

const currentStep = findByTestId(stepsWrapper, 'progress-step-future').map((w) => w.text());
expect(currentStep).toEqual(expect.arrayContaining(['Step 2', 'Step 3']));
const wrapper = mountWithTheme(<ProgressTracker steps={steps} value={1} />);
const uncompletedStep = findByTestId(wrapper, 'progress-tracker-step-uncompleted')
.map((w) => getByTestId(w, 'progress-tracker-label').text());
expect(uncompletedStep).toEqual(expect.arrayContaining(['Step 2', 'Step 3']));
});

describe('Snapshots', () => {
it('with labels', () => {
it('linear', () => {
const steps = generateSteps(3);

const wrapper = renderWithProviders(<Progress steps={steps} value={2} />);
const wrapper = renderWithProviders(<ProgressTracker steps={steps} value={2} />);

expect(wrapper).toMatchSnapshot();
});

it('without labels', () => {
const steps: ProgressTracker[] = [{}, {}, {}];
it('non linear', () => {
const steps: ProgressTrackerStep[] = [
{ label: 'Step 1', completion: 'completed' },
{ label: 'Step 2', completion: 'uncompleted' },
{ label: 'Step 3' },
{ label: 'Step 4' },
];

const wrapper = renderWithProviders(<Progress steps={steps} value={2} />);
const wrapper = renderWithProviders(<ProgressTracker steps={steps} value={3} />);

savutsang marked this conversation as resolved.
Show resolved Hide resolved
savutsang marked this conversation as resolved.
Show resolved Hide resolved
expect(wrapper).toMatchSnapshot();
});
Expand Down
Loading
Loading