Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 
 

101 wiersze
3.0 KiB

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