Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

166 行
4.5 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 Axe from 'jest-axe'
  6. import * as React from 'react'
  7. import Button, { Variant, ButtonElement } from './Button'
  8. import stringify from '../../services/stringify'
  9. const CUSTOM_VARIANTS: string[] = ['primary']
  10. const AVAILABLE_VARIANTS: string[] = ['outline', 'primary']
  11. it('should exist', () => {
  12. expect(Button).toBeDefined()
  13. })
  14. it('should be a component', () => {
  15. expect(Button).toBeComponent()
  16. })
  17. it('should render without crashing given minimum required props', () => {
  18. expect(() => <Button />).not.toThrow()
  19. })
  20. it('should render a button element for button kind', () => {
  21. const wrapper = Enzyme.shallow(<Button element="button" />)
  22. expect(wrapper.name()).toBe('button')
  23. })
  24. it('should render an a element for anchor kind', () => {
  25. const wrapper = Enzyme.shallow(<Button element="a" />)
  26. expect(wrapper.name()).toBe('a')
  27. })
  28. describe('on unknown kinds', () => {
  29. let originalConsoleError: typeof console.error
  30. beforeEach(() => {
  31. originalConsoleError = console.error
  32. console.error = () => {}
  33. })
  34. afterEach(() => {
  35. console.error = originalConsoleError
  36. })
  37. it('should render null', () => {
  38. fc.assert(
  39. fc.property(fc.string().filter(s => !['button', 'a'].includes(s)), (element) => {
  40. const wrapper = Enzyme.shallow(<Button element={element as ButtonElement} />)
  41. expect(wrapper.isEmptyRender()).toBe(true)
  42. }),
  43. {
  44. numRuns: 300,
  45. },
  46. )
  47. })
  48. })
  49. it('should render a border', () => {
  50. const wrapper = Enzyme.shallow(<Button />)
  51. expect(wrapper.find('button').find('span')).toHaveLength(1)
  52. })
  53. it('should render a label', () => {
  54. fc.assert(
  55. fc.property(fc.anything(), (label) => {
  56. const wrapper = Enzyme.shallow(<Button>{label}</Button>)
  57. expect(wrapper).toHaveText(stringify(label))
  58. }),
  59. {
  60. numRuns: 300,
  61. },
  62. )
  63. })
  64. describe('on disabled', () => {
  65. it('should render a disabled button element for button kind', () => {
  66. const wrapper = Enzyme.shallow(<Button disabled element="button" />)
  67. expect(wrapper.find('button')).toHaveProp('disabled', true)
  68. })
  69. it('should render a span element for anchor kind', () => {
  70. const wrapper = Enzyme.shallow(<Button disabled element="a" />)
  71. expect(wrapper.name()).toBe('span')
  72. })
  73. })
  74. describe.each(AVAILABLE_VARIANTS)('with %p variant', (rawVariant) => {
  75. const variant = rawVariant as Variant
  76. it('should render background color', () => {
  77. const wrapper = Enzyme.shallow(<Button variant={variant} />)
  78. const button = wrapper.find('button')
  79. if (CUSTOM_VARIANTS.includes(variant)) {
  80. expect(button).not.toHaveStyle('backgroundColor', 'transparent')
  81. return
  82. }
  83. expect(button).toHaveStyle('backgroundColor', 'transparent')
  84. })
  85. it('should render foreground color', () => {
  86. const wrapper = Enzyme.shallow(<Button variant={variant} />)
  87. const button = wrapper.find('button')
  88. expect(button).toHaveStyle('color', expect.any(String))
  89. })
  90. })
  91. describe('with unknown variants', () => {
  92. let originalConsoleError: typeof console.error
  93. beforeEach(() => {
  94. // silence console.error() from prop type validation since
  95. // we're checking for unknown variants
  96. originalConsoleError = console.error
  97. console.error = () => {}
  98. })
  99. afterEach(() => {
  100. console.error = originalConsoleError
  101. })
  102. it('should render background color', () => {
  103. fc.assert(
  104. fc.property(fc.string().filter((s) => !AVAILABLE_VARIANTS.includes(s)), (rawVariant) => {
  105. const variant = rawVariant as Variant
  106. const wrapper = Enzyme.shallow(<Button variant={variant} />)
  107. const button = wrapper.find('button')
  108. expect(button).toHaveStyle('backgroundColor', 'transparent')
  109. }),
  110. )
  111. })
  112. it('should render foreground color', () => {
  113. fc.assert(
  114. fc.property(fc.string().filter((s) => !AVAILABLE_VARIANTS.includes(s)), (rawVariant) => {
  115. const variant = rawVariant as Variant
  116. const wrapper = Enzyme.shallow(<Button variant={variant} />)
  117. const button = wrapper.find('button')
  118. expect(button).toHaveStyle('color', expect.any(String))
  119. }),
  120. )
  121. })
  122. })
  123. it('should guarantee minimal accessibility', () => {
  124. fc.assert(
  125. fc.asyncProperty(fc.string(1, 20), async (s) => {
  126. const wrapper = Enzyme.mount(<Button>{s}</Button>)
  127. const results = await Axe.axe(wrapper.getDOMNode())
  128. expect(results).toHaveNoViolations()
  129. }),
  130. )
  131. })