Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 

125 rader
3.3 KiB

  1. import * as fc from 'fast-check'
  2. import * as Enzyme from 'enzyme'
  3. import * as Axe from 'jest-axe'
  4. import * as React from 'react'
  5. import Select from './Select'
  6. import stringify from '../../services/stringify'
  7. it('should exist', () => {
  8. expect(Select).toBeDefined()
  9. })
  10. it('should be a component', () => {
  11. expect(Select).toBeComponent()
  12. })
  13. it('should render without crashing given required props', () => {
  14. expect(() => <Select />).not.toThrow()
  15. })
  16. it('should render a base element to put interactive elements on', () => {
  17. const wrapper = Enzyme.shallow(<Select />)
  18. expect(wrapper.find('label')).toHaveLength(1)
  19. })
  20. it('should render a select component for choosing values', () => {
  21. const wrapper = Enzyme.shallow(<Select />)
  22. expect(wrapper.find('label').find('select')).toHaveLength(1)
  23. })
  24. describe('on aiding user input', () => {
  25. it("should render a label to indicate the nature of the component's value", () => {
  26. const wrapper = Enzyme.shallow(<Select label="foo" />)
  27. expect(wrapper.find('label').find('span')).toHaveLength(1)
  28. })
  29. it('should render the label text', () => {
  30. fc.assert(
  31. fc.property(fc.anything(), (label) => {
  32. const wrapper = Enzyme.shallow(<Select label={label} />)
  33. expect(wrapper.find('label').find('span')).toHaveText(stringify(label))
  34. }),
  35. {
  36. numRuns: 300,
  37. },
  38. )
  39. })
  40. })
  41. it('should render a hint for describing valid input values', () => {
  42. fc.assert(
  43. fc.property(fc.anything(), (label) => {
  44. const wrapper = Enzyme.shallow(<Select hint={label} />)
  45. const renderedLabel = stringify(label)
  46. if (renderedLabel.length > 0) {
  47. expect(wrapper.find('div').children()).toHaveLength(5)
  48. expect(wrapper.find('div').childAt(3)).toHaveText(`(${renderedLabel})`)
  49. } else {
  50. expect(wrapper.find('div').children()).toHaveLength(3)
  51. }
  52. }),
  53. )
  54. })
  55. describe('on being declared a block component', () => {
  56. const BLOCK_DISPLAYS = ['block', 'grid', 'flex', 'table']
  57. it('should render the base element fullwidth', () => {
  58. const wrapper = Enzyme.shallow(<Select block />)
  59. expect(BLOCK_DISPLAYS).toContain(wrapper.find('div').prop('style')!.display)
  60. })
  61. it('should render the input fullwidth', () => {
  62. const wrapper = Enzyme.shallow(<Select block />)
  63. expect(wrapper.find('label').find('select')).toHaveStyle('width', '100%')
  64. })
  65. it('should render the input as block element', () => {
  66. const wrapper = Enzyme.shallow(<Select block />)
  67. expect(BLOCK_DISPLAYS).toContain(
  68. wrapper
  69. .find('label')
  70. .find('select')
  71. .prop('style')!.display,
  72. )
  73. })
  74. })
  75. it('should render as half-opaque when disabled', () => {
  76. const wrapper = Enzyme.shallow(<Select disabled />)
  77. expect(wrapper.find('div')).toHaveStyle('opacity', 0.5)
  78. })
  79. it('should allow selection of multiple values', () => {
  80. const wrapper = Enzyme.shallow(<Select multiple />)
  81. expect(
  82. wrapper
  83. .find('label')
  84. .find('select')
  85. .prop('multiple'),
  86. ).toBeTruthy()
  87. })
  88. it('should guarantee minimal accessibility', () => {
  89. fc.assert(
  90. fc.asyncProperty(fc.string(1, 20), async (s) => {
  91. const wrapper = Enzyme.mount(<Select label={s} />)
  92. const results = await Axe.axe(wrapper.getDOMNode())
  93. expect(results).toHaveNoViolations()
  94. }),
  95. )
  96. })