Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
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.

TextInput.test.tsx 3.8 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. /// <reference types="jest-enzyme" />
  2. /// <reference path="../../../utilities/jest/extensions.ts" />
  3. import * as fc from 'fast-check'
  4. import * as Enzyme from 'enzyme'
  5. import * as Axe from 'jest-axe'
  6. import * as React from 'react'
  7. import TextInput from './TextInput'
  8. import stringify from '../../services/stringify'
  9. it('should exist', () => {
  10. expect(TextInput).toBeDefined()
  11. })
  12. it('should be a component', () => {
  13. expect(TextInput).toBeComponent()
  14. })
  15. it('should render without crashing given required props', () => {
  16. expect(() => <TextInput />).not.toThrow()
  17. })
  18. it('should render a base element to put interactive elements on', () => {
  19. const wrapper = Enzyme.shallow(<TextInput />)
  20. expect(wrapper.find('label')).toHaveLength(1)
  21. })
  22. it('should render an indicator as additional description for the content', () => {
  23. fc.assert(
  24. fc.property(fc.string(1, 20), (indicator) => {
  25. const wrapper = Enzyme.shallow(<TextInput indicator={indicator} />)
  26. expect(wrapper.find('div').childAt(2)).toHaveText(indicator)
  27. }),
  28. )
  29. })
  30. it('should render a hint for describing valid input values', () => {
  31. fc.assert(
  32. fc.property(fc.anything(), (label) => {
  33. const wrapper = Enzyme.shallow(<TextInput hint={label} />)
  34. const renderedLabel = stringify(label)
  35. if (renderedLabel.length > 0) {
  36. expect(wrapper.find('div').children()).toHaveLength(4)
  37. expect(wrapper.find('div').childAt(3)).toHaveText(`(${renderedLabel})`)
  38. } else {
  39. expect(wrapper.find('div').children()).toHaveLength(2)
  40. }
  41. }),
  42. )
  43. })
  44. it('should render a padding on the hint element when an indicator is present', () => {
  45. const wrapper = Enzyme.shallow(<TextInput hint="foo" indicator="foobar" />)
  46. expect(wrapper.find('div').childAt(3)).not.toHaveStyle('padding', '1rem')
  47. })
  48. it('should render as half-opaque when disabled', () => {
  49. const wrapper = Enzyme.shallow(<TextInput disabled />)
  50. expect(wrapper.find('div')).toHaveStyle('opacity', 0.5)
  51. })
  52. describe.each`
  53. multiline | tag
  54. ${false} | ${'input'}
  55. ${true} | ${'textarea'}
  56. `('on multiline (multiline=$multiline)', ({ tag: rawTag, multiline: rawMultiline, }) => {
  57. const tag = rawTag as string
  58. const multiline = rawMultiline as boolean
  59. it('should render an element to input text on', () => {
  60. const wrapper = Enzyme.shallow(<TextInput multiline={multiline} />)
  61. expect(wrapper.find('label').find(tag)).toHaveLength(1)
  62. })
  63. it('should render the rest of the passed props', () => {
  64. const wrapper = Enzyme.shallow(<TextInput multiline={multiline} placeholder="foo" />)
  65. expect(
  66. wrapper
  67. .find('label')
  68. .find(tag)
  69. .prop('placeholder'),
  70. ).toBe('foo')
  71. })
  72. it('should render a padding on the input element when an indicator is present', () => {
  73. const wrapper = Enzyme.shallow(<TextInput multiline={multiline} indicator="foobar" />)
  74. expect(
  75. wrapper
  76. .find('div')
  77. .find(tag)
  78. .prop('style')!.paddingRight,
  79. ).not.toBe('1rem')
  80. })
  81. })
  82. describe('on aiding user input', () => {
  83. it("should render a label to indicate the nature of the component's value", () => {
  84. const wrapper = Enzyme.shallow(<TextInput label="foo" />)
  85. expect(wrapper.find('label').find('span')).toHaveLength(1)
  86. })
  87. it('should render the label text', () => {
  88. fc.assert(
  89. fc.property(fc.anything(), (label) => {
  90. const wrapper = Enzyme.shallow(<TextInput label={label} />)
  91. expect(wrapper.find('label').find('span')).toHaveText(stringify(label))
  92. }),
  93. {
  94. numRuns: 300,
  95. },
  96. )
  97. })
  98. })
  99. it('should guarantee minimal accessibility', () => {
  100. fc.assert(
  101. fc.asyncProperty(fc.string(1, 20), async (s) => {
  102. const wrapper = Enzyme.mount(<TextInput label={s} />)
  103. const results = await Axe.axe(wrapper.getDOMNode())
  104. expect(results).toHaveNoViolations()
  105. }),
  106. )
  107. })