overleaf/services/web/test/frontend/shared/components/icon.test.js
Jessica Lawshe d87ad11719 Merge pull request #3210 from overleaf/ta-icon-component
Create Icon Component in React

GitOrigin-RevId: 34161b3afa2c00dbca2423b1e5a42b29846fa6e4
2020-09-22 02:05:09 +00:00

46 lines
1.5 KiB
JavaScript

import { expect } from 'chai'
import React from 'react'
import { screen, render } from '@testing-library/react'
import Icon from '../../../../frontend/js/shared/components/icon'
describe('<Icon />', function() {
it('renders basic fa classes', function() {
const { container } = render(<Icon type="angle-down" />)
const element = container.querySelector('i.fa.fa-angle-down')
expect(element).to.exist
})
it('renders with aria-hidden', function() {
const { container } = render(<Icon type="angle-down" />)
const element = container.querySelector('i[aria-hidden="true"]')
expect(element).to.exist
})
it('renders accessible label', function() {
render(<Icon type="angle-down" accessibilityLabel="Accessible Foo" />)
screen.getByText('Accessible Foo')
})
it('renders with spin', function() {
const { container } = render(<Icon type="angle-down" spin />)
const element = container.querySelector('i.fa.fa-angle-down.fa-spin')
expect(element).to.exist
})
it('renders with modifier', function() {
const { container } = render(<Icon type="angle-down" modifier="2x" />)
const element = container.querySelector('i.fa.fa-angle-down.fa-2x')
expect(element).to.exist
})
it('renders with custom clases', function() {
const { container } = render(
<Icon type="angle-down" classes={{ icon: 'custom-icon-class' }} />
)
const element = container.querySelector(
'i.fa.fa-angle-down.custom-icon-class'
)
expect(element).to.exist
})
})