Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import * as fc from 'fast-check'
  2. import * as Enzyme from 'enzyme'
  3. import * as React from 'react'
  4. import Slider, { Orientation } from './Slider'
  5. it('should exist', () => {
  6. expect(Slider).toBeDefined()
  7. })
  8. it('should be a component', () => {
  9. expect(Slider).toBeComponent()
  10. })
  11. it('should render without crashing given required props', () => {
  12. expect(() => <Slider />).not.toThrow()
  13. })
  14. it('should render a label for describing the nature of the value associated with the component', () => {
  15. fc.assert(
  16. fc.property(fc.string(1, 20), (v) => {
  17. const wrapper = Enzyme.shallow(<Slider label={v} />)
  18. expect(wrapper.find('label').find('span')).toHaveText(v)
  19. }),
  20. )
  21. })
  22. const EnzymeMountMethod: Record<string, Function> = {
  23. shallow: Enzyme.shallow,
  24. mount: Enzyme.mount,
  25. }
  26. type MountType = keyof typeof EnzymeMountMethod
  27. describe.each`
  28. label | mountType
  29. ${'fallback'} | ${'shallow'}
  30. ${'enhanced'} | ${'mount'}
  31. `('on $label mode', ({ mountType: maybeMountType }) => {
  32. const mountType: MountType = maybeMountType! as MountType
  33. const { [mountType]: mountMethod } = EnzymeMountMethod
  34. it('should render an input', () => {
  35. const wrapper = mountMethod(<Slider />)
  36. expect(wrapper.find('label').find('input')).toHaveLength(1)
  37. })
  38. it('should render as half-opaque when disabled', () => {
  39. const wrapper = mountMethod(<Slider disabled />)
  40. expect(wrapper.find('div').first()).toHaveStyle('opacity', 0.5)
  41. })
  42. describe.each<Orientation>(['horizontal', 'vertical'])('on %p orientation', (orientation) => {
  43. const parallelDimension = orientation === 'horizontal' ? 'width' : 'height'
  44. const perpendicularDimension = orientation === 'horizontal' ? 'height' : 'width'
  45. it('should render the sizing styles', () => {
  46. fc.assert(
  47. fc.property(fc.float(), (v) => {
  48. const wrapper = mountMethod(<Slider length={v} orientation={orientation} />)
  49. const sizingWrapper = wrapper.find('SizingWrapper').last()
  50. expect(sizingWrapper).toHaveStyle({
  51. [parallelDimension]: v,
  52. [perpendicularDimension]: '3rem',
  53. })
  54. }),
  55. )
  56. })
  57. it('should render the transform styles', () => {
  58. fc.assert(
  59. fc.property(
  60. fc.oneof<string | number>(fc.string().filter((s) => !s.includes(';')), fc.float().filter((v) => v !== 0)),
  61. (v) => {
  62. const wrapper = mountMethod(<Slider length={v} orientation={orientation} />)
  63. const transformWrapper = wrapper.find('TransformWrapper')
  64. expect(transformWrapper).toHaveStyle({
  65. [parallelDimension]: v,
  66. [perpendicularDimension]: '100%',
  67. transform:
  68. orientation === 'horizontal'
  69. ? undefined
  70. : `rotate(-90deg) translateX(calc(${typeof v! === 'number' ? `${v}px` : v} * -1))`,
  71. })
  72. },
  73. ),
  74. )
  75. })
  76. })
  77. })