Combobox: Add tests for labels with Combobox (#100044)

* Add tests for labels with Combobox

* clean
This commit is contained in:
Josh Hunt 2025-02-11 09:44:38 +00:00 committed by GitHub
parent 6eaf702e96
commit e5154ce799
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -2,6 +2,8 @@ import { act, render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { Field } from '../Forms/Field';
import { Combobox } from './Combobox';
import { ComboboxOption } from './types';
@ -491,4 +493,42 @@ describe('Combobox', () => {
});
});
});
describe('with RTL selectors', () => {
it('can be selected by label with HTML <label>', () => {
render(
<>
<label htmlFor="country-dropdown">Country</label>
<Combobox id="country-dropdown" options={options} value={null} onChange={onChangeHandler} />
</>
);
const inputByLabelText = screen.getByLabelText('Country');
expect(inputByLabelText).toBeInTheDocument();
const inputByRole = screen.getByRole('combobox', { name: 'Country' });
expect(inputByRole).toBeInTheDocument();
});
it('can be selected by label with @grafana/ui <Field>', () => {
render(
<Field label="Country">
<Combobox id="country-dropdown" options={options} value={null} onChange={onChangeHandler} />
</Field>
);
const inputByLabelText = screen.getByLabelText('Country');
expect(inputByLabelText).toBeInTheDocument();
const inputByRole = screen.getByRole('combobox', { name: 'Country' });
expect(inputByRole).toBeInTheDocument();
});
it('can be selected by placeholder', () => {
render(<Combobox placeholder="Country" options={options} value={null} onChange={onChangeHandler} />);
const inputByPlaceholderText = screen.getByPlaceholderText('Country');
expect(inputByPlaceholderText).toBeInTheDocument();
});
});
});