inputGroup.spec.tsx 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
  2. import Button from 'sentry/components/button';
  3. import {
  4. Input,
  5. InputGroup,
  6. InputLeadingItems,
  7. InputTrailingItems,
  8. } from 'sentry/components/inputGroup';
  9. describe('InputGroup', function () {
  10. it('renders input', function () {
  11. const {container} = render(
  12. <InputGroup>
  13. <Input value="Search" onChange={() => {}} />
  14. </InputGroup>
  15. );
  16. expect(screen.getByRole('textbox')).toBeInTheDocument();
  17. expect(screen.getByRole('textbox')).toHaveDisplayValue('Search');
  18. expect(container).toSnapshot();
  19. });
  20. it('renders disabled input', function () {
  21. const {container} = render(
  22. <InputGroup>
  23. <Input disabled />
  24. </InputGroup>
  25. );
  26. expect(screen.getByRole('textbox')).toBeDisabled();
  27. expect(container).toSnapshot();
  28. });
  29. it('renders leading elements', function () {
  30. const {container} = render(
  31. <InputGroup>
  32. <InputLeadingItems>
  33. <Button>Leading Button</Button>
  34. </InputLeadingItems>
  35. <Input />
  36. </InputGroup>
  37. );
  38. // Leading button is rendered
  39. expect(screen.getByTestId('input-leading-items')).toBeInTheDocument();
  40. expect(screen.getByRole('button', {name: 'Leading Button'})).toBeInTheDocument();
  41. // Focus moves first to leading button and then to input
  42. userEvent.tab();
  43. expect(screen.getByRole('button', {name: 'Leading Button'})).toHaveFocus();
  44. userEvent.tab();
  45. expect(screen.getByRole('textbox')).toHaveFocus();
  46. expect(container).toSnapshot();
  47. });
  48. it('renders trailing elements', function () {
  49. const {container} = render(
  50. <InputGroup>
  51. <Input />
  52. <InputTrailingItems>
  53. <Button>Trailing Button</Button>
  54. </InputTrailingItems>
  55. </InputGroup>
  56. );
  57. // Trailing button is rendered
  58. expect(screen.getByTestId('input-trailing-items')).toBeInTheDocument();
  59. expect(screen.getByRole('button', {name: 'Trailing Button'})).toBeInTheDocument();
  60. // Focus moves first to input and then to trailing button
  61. userEvent.tab();
  62. expect(screen.getByRole('textbox')).toHaveFocus();
  63. userEvent.tab();
  64. expect(screen.getByRole('button', {name: 'Trailing Button'})).toHaveFocus();
  65. expect(container).toSnapshot();
  66. });
  67. });