Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  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 Select from './Select'
  8. import stringify from '../../services/stringify'
  9. it('should exist', () => {
  10. expect(Select).toBeDefined()
  11. })
  12. it('should be a component', () => {
  13. expect(Select).toBeComponent()
  14. })
  15. it('should render without crashing given required props', () => {
  16. expect(() => <Select />).not.toThrow()
  17. })
  18. it('should render a base element to put interactive elements on', () => {
  19. const wrapper = Enzyme.shallow(<Select />)
  20. expect(wrapper.find('label')).toHaveLength(1)
  21. })
  22. it('should render a select component for choosing values', () => {
  23. const wrapper = Enzyme.shallow(<Select />)
  24. expect(wrapper.find('label').find('select')).toHaveLength(1)
  25. })
  26. describe('on aiding user input', () => {
  27. it("should render a label to indicate the nature of the component's value", () => {
  28. const wrapper = Enzyme.shallow(<Select label="foo" />)
  29. expect(wrapper.find('label').find('span')).toHaveLength(1)
  30. })
  31. it('should render the label text', () => {
  32. fc.assert(
  33. fc.property(fc.anything(), (label) => {
  34. const wrapper = Enzyme.shallow(<Select label={label} />)
  35. expect(wrapper.find('label').find('span')).toHaveText(stringify(label))
  36. }),
  37. {
  38. numRuns: 300,
  39. },
  40. )
  41. })
  42. })
  43. it('should render a hint for describing valid input values', () => {
  44. fc.assert(
  45. fc.property(fc.anything(), (label) => {
  46. const wrapper = Enzyme.shallow(<Select hint={label} />)
  47. const renderedLabel = stringify(label)
  48. if (renderedLabel.length > 0) {
  49. expect(wrapper.find('div').children()).toHaveLength(4)
  50. expect(wrapper.find('div').childAt(2)).toHaveText(`(${renderedLabel})`)
  51. } else {
  52. expect(wrapper.find('div').children()).toHaveLength(2)
  53. }
  54. }),
  55. )
  56. })
  57. it('should render as half-opaque when disabled', () => {
  58. const wrapper = Enzyme.shallow(<Select disabled />)
  59. expect(wrapper.find('div')).toHaveStyle('opacity', 0.5)
  60. })
  61. it('should allow selection of multiple values', () => {
  62. const wrapper = Enzyme.shallow(<Select multiple />)
  63. expect(
  64. wrapper
  65. .find('label')
  66. .find('select')
  67. .prop('multiple'),
  68. ).toBeTruthy()
  69. })
  70. it('should guarantee minimal accessibility', () => {
  71. fc.assert(
  72. fc.asyncProperty(fc.string(1, 20), async (s) => {
  73. const wrapper = Enzyme.mount(<Select label={s} />)
  74. const results = await Axe.axe(wrapper.getDOMNode())
  75. expect(results).toHaveNoViolations()
  76. }),
  77. )
  78. })