test: add tests for fork-awesome-icon and fork-awesome-stack

Signed-off-by: Philip Molares <philip.molares@udo.edu>
This commit is contained in:
Philip Molares 2022-05-22 09:53:52 +02:00 committed by Tilman Vatteroth
parent 098344ebb7
commit 310b908e2d
4 changed files with 228 additions and 0 deletions

View file

@ -0,0 +1,65 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[` 1`] = `
<div>
<i
class="fa fa-heart fa-stack-1x"
/>
</div>
`;
exports[`ForkAwesomeIcon renders a heart correctly 1`] = `
<div>
<i
class="fa fa-heart "
/>
</div>
`;
exports[`ForkAwesomeIcon renders in size 2x 1`] = `
<div>
<i
class="fa fa-heart fa-2x"
/>
</div>
`;
exports[`ForkAwesomeIcon renders in size 3x 1`] = `
<div>
<i
class="fa fa-heart fa-3x"
/>
</div>
`;
exports[`ForkAwesomeIcon renders in size 4x 1`] = `
<div>
<i
class="fa fa-heart fa-4x"
/>
</div>
`;
exports[`ForkAwesomeIcon renders in size 5x 1`] = `
<div>
<i
class="fa fa-heart fa-5x"
/>
</div>
`;
exports[`ForkAwesomeIcon renders with additional className 1`] = `
<div>
<i
class="fa fa-heart testClass "
/>
</div>
`;
exports[`ForkAwesomeIcon renders with fixed width icon 1`] = `
<div>
<i
class="fa fa-fw fa-heart "
/>
</div>
`;

View file

@ -0,0 +1,76 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ForkAwesomeStack renders a heart and a download icon stack 1`] = `
<div>
<span
class="fa-stack "
>
<i
class="fa fa-heart fa-stack-1x"
/>
<i
class="fa fa-download fa-stack-1x"
/>
</span>
</div>
`;
exports[`ForkAwesomeStack renders in size 2x 1`] = `
<div>
<span
class="fa-stack fa-2x"
>
<i
class="fa fa-heart fa-stack-1x"
/>
<i
class="fa fa-download fa-stack-1x"
/>
</span>
</div>
`;
exports[`ForkAwesomeStack renders in size 3x 1`] = `
<div>
<span
class="fa-stack fa-3x"
>
<i
class="fa fa-heart fa-stack-1x"
/>
<i
class="fa fa-download fa-stack-1x"
/>
</span>
</div>
`;
exports[`ForkAwesomeStack renders in size 4x 1`] = `
<div>
<span
class="fa-stack fa-4x"
>
<i
class="fa fa-heart fa-stack-1x"
/>
<i
class="fa fa-download fa-stack-1x"
/>
</span>
</div>
`;
exports[`ForkAwesomeStack renders in size 5x 1`] = `
<div>
<span
class="fa-stack fa-5x"
>
<i
class="fa fa-heart fa-stack-1x"
/>
<i
class="fa fa-download fa-stack-1x"
/>
</span>
</div>
`;

View file

@ -0,0 +1,47 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { IconName } from './types'
import { render } from '@testing-library/react'
import { ForkAwesomeIcon } from './fork-awesome-icon'
describe('ForkAwesomeIcon', () => {
const icon: IconName = 'heart'
it('renders a heart correctly', () => {
const view = render(<ForkAwesomeIcon icon={icon} />)
expect(view.container).toMatchSnapshot()
})
it('renders with fixed width icon', () => {
const view = render(<ForkAwesomeIcon icon={icon} fixedWidth={true} />)
expect(view.container).toMatchSnapshot()
})
it('renders with additional className', () => {
const view = render(<ForkAwesomeIcon icon={icon} className={'testClass'} />)
expect(view.container).toMatchSnapshot()
})
describe('renders in size', () => {
it('2x', () => {
const view = render(<ForkAwesomeIcon icon={icon} size={'2x'} />)
expect(view.container).toMatchSnapshot()
})
it('3x', () => {
const view = render(<ForkAwesomeIcon icon={icon} size={'3x'} />)
expect(view.container).toMatchSnapshot()
})
it('4x', () => {
const view = render(<ForkAwesomeIcon icon={icon} size={'4x'} />)
expect(view.container).toMatchSnapshot()
})
it('5x', () => {
const view = render(<ForkAwesomeIcon icon={icon} size={'5x'} />)
expect(view.container).toMatchSnapshot()
})
})
describe('renders in stack', () => {
const view = render(<ForkAwesomeIcon icon={icon} stacked={true} />)
expect(view.container).toMatchSnapshot()
})
})

View file

@ -0,0 +1,40 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { render } from '@testing-library/react'
import { ForkAwesomeStack } from './fork-awesome-stack'
import type { ForkAwesomeIconProps } from './fork-awesome-icon'
import { ForkAwesomeIcon } from './fork-awesome-icon'
import type { ReactElement } from 'react'
describe('ForkAwesomeStack', () => {
const stack: Array<ReactElement<ForkAwesomeIconProps>> = [
<ForkAwesomeIcon icon={'heart'} key={'heart'} />,
<ForkAwesomeIcon icon={'download'} key={'download'} />
]
it('renders a heart and a download icon stack', () => {
const view = render(<ForkAwesomeStack>{stack}</ForkAwesomeStack>)
expect(view.container).toMatchSnapshot()
})
describe('renders in size', () => {
it('2x', () => {
const view = render(<ForkAwesomeStack size={'2x'}>{stack}</ForkAwesomeStack>)
expect(view.container).toMatchSnapshot()
})
it('3x', () => {
const view = render(<ForkAwesomeStack size={'3x'}>{stack}</ForkAwesomeStack>)
expect(view.container).toMatchSnapshot()
})
it('4x', () => {
const view = render(<ForkAwesomeStack size={'4x'}>{stack}</ForkAwesomeStack>)
expect(view.container).toMatchSnapshot()
})
it('5x', () => {
const view = render(<ForkAwesomeStack size={'5x'}>{stack}</ForkAwesomeStack>)
expect(view.container).toMatchSnapshot()
})
})
})