Design system.
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 

104 líneas
2.1 KiB

  1. import * as React from 'react';
  2. import {
  3. cleanup,
  4. render,
  5. screen,
  6. } from '@testing-library/react';
  7. import userEvent from '@testing-library/user-event';
  8. import {
  9. vi,
  10. expect,
  11. describe,
  12. it,
  13. afterEach,
  14. } from 'vitest';
  15. import matchers from '@testing-library/jest-dom/matchers';
  16. import { PluginAPI } from 'tailwindcss/types/config';
  17. import {
  18. RadioTickBox,
  19. RadioTickBoxDerivedElement,
  20. radioTickBoxPlugin,
  21. } from '.';
  22. expect.extend(matchers);
  23. describe('radioTickBoxPlugin', () => {
  24. it('adds component styles', () => {
  25. const pluginApi = {
  26. addComponents: vi.fn(),
  27. } as unknown as PluginAPI;
  28. radioTickBoxPlugin(pluginApi);
  29. expect(pluginApi.addComponents).toBeCalledTimes(1);
  30. });
  31. });
  32. describe('RadioTickBox', () => {
  33. afterEach(() => {
  34. cleanup();
  35. });
  36. it('renders a radio button', () => {
  37. render(
  38. <RadioTickBox />,
  39. );
  40. const checkbox = screen.getByRole('radio');
  41. expect(checkbox).toBeInTheDocument();
  42. });
  43. it('renders a block tick box', () => {
  44. render(
  45. <RadioTickBox
  46. block
  47. />,
  48. );
  49. const base = screen.getByTestId('base');
  50. expect(base).toHaveClass('flex');
  51. });
  52. it('renders a subtext', () => {
  53. render(
  54. <RadioTickBox
  55. subtext="subtext"
  56. />,
  57. );
  58. const subtext = screen.getByTestId('subtext');
  59. expect(subtext).toBeInTheDocument();
  60. });
  61. it('handles click events', async () => {
  62. const onClick = vi.fn().mockImplementationOnce(
  63. (e: React.MouseEvent<RadioTickBoxDerivedElement>) => {
  64. e.preventDefault();
  65. },
  66. );
  67. render(
  68. <RadioTickBox
  69. onClick={onClick}
  70. />,
  71. );
  72. const radio = screen.getByRole('radio');
  73. await userEvent.click(radio);
  74. expect(onClick).toBeCalled();
  75. });
  76. it('handles change events', async () => {
  77. const onChange = vi.fn().mockImplementationOnce(
  78. (e: React.ChangeEvent<RadioTickBoxDerivedElement>) => {
  79. e.preventDefault();
  80. },
  81. );
  82. render(
  83. <RadioTickBox
  84. onChange={onChange}
  85. />,
  86. );
  87. const radio = screen.getByRole('radio');
  88. await userEvent.click(radio);
  89. expect(onChange).toBeCalled();
  90. });
  91. });