test(project): Cover unit and E2E test for disabled step #30

packages/headless-stepper-e2e/src/integration/HeadlessStepper/HeadlessStepper.spec.ts

@@ -1,7 +1,37 @@
 describe('headless-stepper: HeadlessStepper component', () => {
- beforeEach(() => cy.visit('/iframe.html?id=headlessstepper--primary'));
-
- it('should render the component', () => {
- cy.get('h1').should('contain', 'Welcome to HeadlessStepper!');
+ beforeEach(() =>
+ cy.visit('/iframe.html?id=headlessstepper-usestepper--use-stepper')
+ );
+
+ it('should render the component', () => {
+ cy.get('h1').should('contain', 'Welcome to HeadlessStepper!');
+ });
+
+ it('should navigate by clicking on the menu unless it is disabled', () => {
+ cy.get('p').should('contain.text', 'Current step: 0');
+
+ cy.get('ol > a').each((element) => {
+ const { attributes, textContent } = element[0];
+ const [, step] = textContent.split(' ');
+
+ const ariaDisabled = attributes.getNamedItem('aria-disabled');
+ const stepNumber = Number(step) - 1; // If step is called "Step 1" the index is 0
+
+ cy.wrap(element).click();
+
+ if (ariaDisabled) {
+ /**
+ * -1 means the step was not changed since it is disabled.
+ */
+ cy.get('p').should('contain.text', `Current step: ${stepNumber - 1}`);
+ } else {
+ cy.get('p').should('contain.text', `Current step: ${stepNumber}`);
+ }
+
+ // eslint-disable-next-line cypress/no-unnecessary-waiting
+ cy.wait(200);
  });
+
+ cy.get('p').should('contain.text', 'Current step: 5');
+ });
 });

packages/headless-stepper/src/lib/examples/HeadlessStepper.spec.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import HeadlessStepper from './HeadlessStepper';
 
@@ -7,4 +7,22 @@ describe('HeadlessStepper', () => {
  const { baseElement } = render(<HeadlessStepper />);
  expect(baseElement).toBeTruthy();
  });
+
+ it('should navigate by clicking on the menu unless it is disabled', () => {
+ const { queryByText, getByText } = render(<HeadlessStepper />);
+ expect(queryByText('Current step: 0')).toBeTruthy();
+
+ const secondStep = getByText('Step 2');
+ const thirdStep = getByText('Step 3');
+ const fourthStep = getByText('Step 4'); // step disabled
+
+ fireEvent.click(secondStep);
+ expect(queryByText('Current step: 1')).toBeTruthy();
+
+ fireEvent.click(thirdStep);
+ expect(queryByText('Current step: 2')).toBeTruthy();
+
+ fireEvent.click(fourthStep);
+ expect(queryByText('Current step: 3')).toBeFalsy();
+ });
 });

packages/headless-stepper/src/lib/examples/HeadlessStepper.tsx

@@ -25,6 +25,7 @@ export function HeadlessStepper(props: HeadlessStepperProps) {
  });
  return (
  <div className={styles['container']}>
+ <h1>Welcome to HeadlessStepper!</h1>
  <div>
  <nav style={{ display: 'flex' }} {...stepperProps}>
  {stepsProps?.map((step, index) => (

packages/headless-stepper/src/lib/hooks/useStepper.ts

@@ -177,7 +177,7 @@ const useStepper = ({
  'aria-current': index === _currentStep ? 'step' : undefined,
  'aria-selected': index === _currentStep,
  onKeyDown: (event) => handleKeydown(event, index),
- onClick: () => setCurrentStep(index),
+ onClick: () => (step.disabled ? null : setCurrentStep(index)),
  ref: (element: HTMLElement) =>
  (stepElementsRef.current[index] = element),
  } as HTMLAttributes<HTMLElement>;