Repository: freeCodeCamp/freeCodeCamp
File: tools/ui-components/src/drop-down/drop-down.test.tsx (TypeScript)

Code before:
    );

    const dropDownTrigger = screen.getByRole('button', { name: 'test' });
    await userEvent.click(dropDownTrigger);
    const unorderedList = screen.getByRole('menu');
    const Item = within(unorderedList).getByRole('menuitem');

    await userEvent.click(Item);

    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('should reflect the disabled state using the aria-disabled attribute', async () => {
    render(
      <Dropdown>
        <Dropdown.Toggle>test</Dropdown.Toggle>
        <Dropdown.Menu>
          <MenuItem disabled>Hello world</MenuItem>
        </Dropdown.Menu>
      </Dropdown>
    );

    const dropDownTrigger = screen.getByRole('button', { name: 'test' });
    await userEvent.click(dropDownTrigger);
    const unorderedList = screen.getByRole('menu');
    const Item = within(unorderedList).getByRole('menuitem');

    expect(Item).toHaveAttribute('aria-disabled', 'true');

    // Ensure that the `disabled` attribute is not used.
    expect(Item).toBeEnabled();
  });

  it('should not trigger the onClick prop if the button is disabled', async () => {
    const onClick = jest.fn();

    render(
      <Dropdown>
        <Dropdown.Toggle>test</Dropdown.Toggle>
        <Dropdown.Menu>
          <MenuItem disabled onClick={onClick}>
            Hello world
          </MenuItem>
        </Dropdown.Menu>
      </Dropdown>
    );

    const dropDownTrigger = screen.getByRole('button', { name: 'test' });
    await userEvent.click(dropDownTrigger);
    const unorderedList = screen.getByRole('menu');
    const Item = within(unorderedList).getByRole('menuitem');

Review comment (suggestion):
```suggestion
    const Item = within(unorderedList).getByRole('menuitem', { name: 'Hello world' });
```

Code after:
        </Dropdown.Menu>
      </Dropdown>
    );

    const dropDownTrigger = screen.getByRole('button', { name: 'test' });
    await userEvent.click(dropDownTrigger);
    const unorderedList = screen.getByRole('menu');
    const item = within(unorderedList).getByRole('menuitem');

    await userEvent.click(item);

    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('should reflect the disabled state using the aria-disabled attribute', async () => {
    render(
      <Dropdown>
        <Dropdown.Toggle>test</Dropdown.Toggle>
        <Dropdown.Menu>
          <MenuItem disabled>Hello world</MenuItem>
        </Dropdown.Menu>
      </Dropdown>
    );

    const dropDownTrigger = screen.getByRole('button', { name: 'test' });
    await userEvent.click(dropDownTrigger);
    const unorderedList = screen.getByRole('menu');
    const item = within(unorderedList).getByRole('menuitem', {
      name: 'Hello world'
    });

    expect(item).toHaveAttribute('aria-disabled', 'true');

    // Ensure that the `disabled` attribute is not used.
    expect(item).toBeEnabled();
  });

  it('should not trigger the onClick prop if the button is disabled', async () => {
    const onClick = jest.fn();

    render(
      <Dropdown>
        <Dropdown.Toggle>test</Dropdown.Toggle>
        <Dropdown.Menu>
          <MenuItem disabled onClick={onClick}>
            Hello world
          </MenuItem>
        </Dropdown.Menu>
      </Dropdown>
    );