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.

Button.test.tsx 3.5 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  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 Button, { Variant } from './Button'
  6. import stringify from '../../services/stringify'
  7. const CUSTOM_VARIANTS: string[] = ['primary']
  8. const AVAILABLE_VARIANTS: string[] = ['outline', 'primary']
  9. const BLOCK_DISPLAYS = ['block', 'grid', 'flex', 'table']
  10. it('should exist', () => {
  11. expect(Button).toBeDefined()
  12. })
  13. it('should be a component', () => {
  14. expect(Button).toBeComponent()
  15. })
  16. it('should render without crashing given minimum required props', () => {
  17. expect(() => <Button />).not.toThrow()
  18. })
  19. it('should render a border', () => {
  20. const wrapper = Enzyme.shallow(<Button />)
  21. expect(wrapper.find('button').find('span')).toHaveLength(1)
  22. })
  23. it('should render fullwidth when declared as block', () => {
  24. const wrapper = Enzyme.shallow(<Button block />)
  25. expect(wrapper.find('button')).toHaveStyle('width', '100%')
  26. })
  27. it('should render as block element when declared as block', () => {
  28. const wrapper = Enzyme.shallow(<Button block />)
  29. expect(BLOCK_DISPLAYS).toContain(wrapper.find('button').prop('style')!.display)
  30. })
  31. it('should render a label', () => {
  32. fc.assert(
  33. fc.property(fc.anything(), (label) => {
  34. const wrapper = Enzyme.shallow(<Button>{label}</Button>)
  35. expect(wrapper).toHaveText(stringify(label))
  36. }),
  37. {
  38. numRuns: 300,
  39. },
  40. )
  41. })
  42. describe.each(AVAILABLE_VARIANTS)('with %p variant', (rawVariant) => {
  43. const variant = rawVariant as Variant
  44. it('should render background color', () => {
  45. const wrapper = Enzyme.shallow(<Button variant={variant} />)
  46. const button = wrapper.find('button')
  47. if (CUSTOM_VARIANTS.includes(variant)) {
  48. expect(button).not.toHaveStyle('backgroundColor', 'transparent')
  49. return
  50. }
  51. expect(button).toHaveStyle('backgroundColor', 'transparent')
  52. })
  53. it('should render foreground color', () => {
  54. const wrapper = Enzyme.shallow(<Button variant={variant} />)
  55. const button = wrapper.find('button')
  56. expect(button).toHaveStyle('color', expect.any(String))
  57. })
  58. })
  59. describe('with unknown variants', () => {
  60. let originalConsoleError: any
  61. beforeEach(() => {
  62. // silence console.error() from prop type validation since
  63. // we're checking for unknown variants
  64. originalConsoleError = console.error
  65. console.error = () => {}
  66. })
  67. afterEach(() => {
  68. console.error = originalConsoleError
  69. })
  70. it('should render background color', () => {
  71. fc.assert(
  72. fc.property(fc.string().filter((s) => !AVAILABLE_VARIANTS.includes(s)), (rawVariant) => {
  73. const variant = rawVariant as Variant
  74. const wrapper = Enzyme.shallow(<Button variant={variant} />)
  75. const button = wrapper.find('button')
  76. expect(button).toHaveStyle('backgroundColor', 'transparent')
  77. }),
  78. )
  79. })
  80. it('should render foreground color', () => {
  81. fc.assert(
  82. fc.property(fc.string().filter((s) => !AVAILABLE_VARIANTS.includes(s)), (rawVariant) => {
  83. const variant = rawVariant as Variant
  84. const wrapper = Enzyme.shallow(<Button variant={variant} />)
  85. const button = wrapper.find('button')
  86. expect(button).toHaveStyle('color', expect.any(String))
  87. }),
  88. )
  89. })
  90. })
  91. it('should guarantee minimal accessibility', () => {
  92. fc.assert(
  93. fc.asyncProperty(fc.string(1, 20), async (s) => {
  94. const wrapper = Enzyme.mount(<Button>{s}</Button>)
  95. const results = await Axe.axe(wrapper.getDOMNode())
  96. expect(results).toHaveNoViolations()
  97. }),
  98. )
  99. })