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

Code before:
        </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).toBeInTheDocument();
  });

  it('should trigger the onClick prop on click', async () => {
    const onClick = jest.fn();

    render(
      <Dropdown>
        <Dropdown.Toggle>test</Dropdown.Toggle>
        <Dropdown.Menu>
          <MenuItem 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');

    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();

Review comment (suggestion):
While we're at this, please also help rename these variables to follow JS convention. And the change should be applied to all test cases in this file.

```suggestion
    const item = within(unorderedList).getByRole('menuitem');
```

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', {
      name: 'Hello world'
    });
    expect(item).toBeInTheDocument();
  });

  it('should trigger the onClick prop on click', async () => {
    const onClick = jest.fn();

    render(
      <Dropdown>
        <Dropdown.Toggle>test</Dropdown.Toggle>
        <Dropdown.Menu>
          <MenuItem 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');

    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'
    });