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

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

  it('should render an anchor element if the `href` prop is defined', async () => {
    render(
      <Dropdown>
        <Dropdown.Toggle>test</Dropdown.Toggle>
        <Dropdown.Menu>
          <MenuItem href='https://www.freecodecamp.org'>freeCodeCamp</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).toBeInTheDocument();
    expect(Item).toHaveAttribute('href', 'https://www.freecodecamp.org');
  });

  it('should render a button element if the `href` and `disabled` props are both defined', async () => {
    render(
      <Dropdown>
        <Dropdown.Toggle>test</Dropdown.Toggle>
        <Dropdown.Menu>
          <MenuItem href='https://www.freecodecamp.org' disabled>
            freeCodeCamp
          </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).toBeInTheDocument();
    expect(Item).toHaveAttribute('aria-disabled', 'true');
  });

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

Code after:
          <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', {
      name: 'Hello world'
    });
    await userEvent.click(item);

    expect(onClick).not.toHaveBeenCalled();
  });

  it('should render an anchor element if the `href` prop is defined', async () => {
    render(
      <Dropdown>
        <Dropdown.Toggle>test</Dropdown.Toggle>
        <Dropdown.Menu>
          <MenuItem href='https://www.freecodecamp.org'>freeCodeCamp</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: 'freeCodeCamp'
    });

    expect(item).toBeInTheDocument();
    expect(item).toHaveAttribute('href', 'https://www.freecodecamp.org');
  });

  it('should render a button element if the `href` and `disabled` props are both defined', async () => {
    render(
      <Dropdown>
        <Dropdown.Toggle>test</Dropdown.Toggle>
        <Dropdown.Menu>
          <MenuItem href='https://www.freecodecamp.org' disabled>
            freeCodeCamp
          </MenuItem>
        </Dropdown.Menu>
      </Dropdown>
    );