diff --git a/src/components/Atomic/FloatingPanel/FloatingPanel.test.tsx b/src/components/Atomic/FloatingPanel/FloatingPanel.test.tsx new file mode 100644 index 00000000..2a98cfba --- /dev/null +++ b/src/components/Atomic/FloatingPanel/FloatingPanel.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react' +import FloatingPanel from './FloatingPanel' + +describe('', () => { + it('renders without crashing', () => { + const { container, asFragment } = render(Reference}>Test) + expect(container).toBeInTheDocument() + expect(asFragment()).toMatchSnapshot() + }) +}) diff --git a/src/components/Atomic/FloatingPanel/__snapshots__/FloatingPanel.test.tsx.snap b/src/components/Atomic/FloatingPanel/__snapshots__/FloatingPanel.test.tsx.snap new file mode 100644 index 00000000..88070dda --- /dev/null +++ b/src/components/Atomic/FloatingPanel/__snapshots__/FloatingPanel.test.tsx.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders without crashing 1`] = ` + + .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-transition: all 0.3s; + transition: all 0.3s; + cursor: pointer; +} + +
+ +
+ Reference +
+ +
+ +`; diff --git a/src/components/Atomic/FullPageLoader/FullPageLoader.test.tsx b/src/components/Atomic/FullPageLoader/FullPageLoader.test.tsx new file mode 100644 index 00000000..55c8bab8 --- /dev/null +++ b/src/components/Atomic/FullPageLoader/FullPageLoader.test.tsx @@ -0,0 +1,20 @@ +import { render } from '@testing-library/react' +import FullPageLoader from './FullPageLoader' + +describe('', () => { + it('renders without crashing', () => { + const { container } = render() + expect(container).toBeInTheDocument() + }) + + it('displays loading text', () => { + const { getByText } = render() + expect(getByText('Loading...')).toBeInTheDocument() + }) + + it('applies auth-loader class to PageLoader', () => { + const { container } = render() + const pageLoader = container.querySelector('.auth-loader') + expect(pageLoader).not.toBeNull() + }) +}) diff --git a/src/components/Atomic/Headline/Headline.test.tsx b/src/components/Atomic/Headline/Headline.test.tsx index e2c9002d..227ae43c 100644 --- a/src/components/Atomic/Headline/Headline.test.tsx +++ b/src/components/Atomic/Headline/Headline.test.tsx @@ -15,4 +15,21 @@ describe('', () => { expect(asFragment()).toMatchSnapshot() }) + + it('renders correct text', () => { + const { getByText } = render(Test) + expect(getByText('Test')).toBeInTheDocument() + }) + + it('applies correct class based on type', () => { + const { container } = render(Test) + const headline = container.querySelector('h1') + expect(headline).toHaveClass('h1') + }) + + it('applies h6 style when type is h6', () => { + const { container } = render(Test) + const headline = container.querySelector('h2') + expect(headline).toHaveClass('h2') + }) }) diff --git a/src/components/Atomic/Icon/Icon.test.tsx b/src/components/Atomic/Icon/Icon.test.tsx new file mode 100644 index 00000000..9bc5a050 --- /dev/null +++ b/src/components/Atomic/Icon/Icon.test.tsx @@ -0,0 +1,18 @@ +import { render, waitFor } from '@testing-library/react' +import Icon, { IconsRaw } from '../Icon' + +describe('', () => { + it('render correctly - snapshot', async () => { + const { asFragment } = render( +
+ {IconsRaw.map((icon, index) => ( + + ))} +
+ ) + + await waitFor(() => { + expect(asFragment()).toMatchSnapshot() + }) + }) +}) diff --git a/src/components/Atomic/Icon/__snapshots__/Icon.test.tsx.snap b/src/components/Atomic/Icon/__snapshots__/Icon.test.tsx.snap new file mode 100644 index 00000000..ab581e3f --- /dev/null +++ b/src/components/Atomic/Icon/__snapshots__/Icon.test.tsx.snap @@ -0,0 +1,313 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` render correctly - snapshot 1`] = ` + + .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; diff --git a/src/components/Atomic/LinkExpander/LinkExpander.test.tsx b/src/components/Atomic/LinkExpander/LinkExpander.test.tsx new file mode 100644 index 00000000..07600ad6 --- /dev/null +++ b/src/components/Atomic/LinkExpander/LinkExpander.test.tsx @@ -0,0 +1,23 @@ +import { render } from '@testing-library/react' +import LinkExpander from './LinkExpander' + +describe('', () => { + it('renders without crashing', () => { + const { container, asFragment } = render( + {}}> + Test + + ) + expect(container).toBeInTheDocument() + expect(asFragment()).toMatchSnapshot() + }) + + it('displays show text when not expanded', () => { + const { getByText } = render( + {}}> + Test + + ) + expect(getByText('Show Name')).toBeInTheDocument() + }) +}) diff --git a/src/components/Atomic/LinkExpander/LinkExpander.tsx b/src/components/Atomic/LinkExpander/LinkExpander.tsx index 1689a250..8a6087b1 100644 --- a/src/components/Atomic/LinkExpander/LinkExpander.tsx +++ b/src/components/Atomic/LinkExpander/LinkExpander.tsx @@ -3,8 +3,9 @@ import { AnimatePresence, motion } from 'framer-motion' import Link from '../Link' import * as styles from './LinkExpander.styles' +import { Props } from './LinkExpander.types' -const LinkExpander: FC = (props) => { +const LinkExpander: FC = (props) => { const { children, i18n, show, toggleView } = props const AnimatedLink = () => ( diff --git a/src/components/Atomic/LinkExpander/LinkExpander.types.ts b/src/components/Atomic/LinkExpander/LinkExpander.types.ts new file mode 100644 index 00000000..04af82aa --- /dev/null +++ b/src/components/Atomic/LinkExpander/LinkExpander.types.ts @@ -0,0 +1,12 @@ +import { ReactNode } from 'react' + +export type Props = { + children: ReactNode + i18n: { + hide: string + show: string + name: string + } + show: boolean + toggleView: (view: boolean) => void +} diff --git a/src/components/Atomic/LinkExpander/__snapshots__/LinkExpander.test.tsx.snap b/src/components/Atomic/LinkExpander/__snapshots__/LinkExpander.test.tsx.snap new file mode 100644 index 00000000..2a038820 --- /dev/null +++ b/src/components/Atomic/LinkExpander/__snapshots__/LinkExpander.test.tsx.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders without crashing 1`] = ` + + .emotion-0 { + border-bottom: 2px solid; + -webkit-text-decoration: none!important; + text-decoration: none!important; + -webkit-transition: all 0.25s; + transition: all 0.25s; + padding-bottom: 2px; + font-weight: bold; +} + +.emotion-0:hover { + -webkit-text-decoration: none; + text-decoration: none; + border-bottom-color: transparent; +} + + + +`; diff --git a/src/components/Atomic/Loadable/Loadable.test.tsx b/src/components/Atomic/Loadable/Loadable.test.tsx new file mode 100644 index 00000000..3c77c764 --- /dev/null +++ b/src/components/Atomic/Loadable/Loadable.test.tsx @@ -0,0 +1,25 @@ +import { render } from '@testing-library/react' +import Loadable from './Loadable' + +describe('', () => { + it('renders children when condition is true', () => { + const { container, asFragment } = render( + +
Test
+ + ) + expect(asFragment()).toMatchSnapshot() + expect(container).toHaveTextContent('Test') + }) + + it('renders IconLoader when condition is false', () => { + const { container } = render( + +
Test
+ + ) + + const iconLoader = container.querySelector('.loader-icon') + expect(iconLoader).toBeInTheDocument() + }) +}) diff --git a/src/components/Atomic/Loadable/Loadable.tsx b/src/components/Atomic/Loadable/Loadable.tsx index 8fd205a7..4294fd57 100644 --- a/src/components/Atomic/Loadable/Loadable.tsx +++ b/src/components/Atomic/Loadable/Loadable.tsx @@ -5,7 +5,7 @@ import { Props } from './Loadable.types' const Loadable: FC = (props) => { const { condition, children } = props - return condition ? children : + return condition ? children : } Loadable.displayName = 'Loadable' diff --git a/src/components/Atomic/Loadable/__snapshots__/Loadable.test.tsx.snap b/src/components/Atomic/Loadable/__snapshots__/Loadable.test.tsx.snap new file mode 100644 index 00000000..7aa8532b --- /dev/null +++ b/src/components/Atomic/Loadable/__snapshots__/Loadable.test.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders children when condition is true 1`] = ` + +
+ Test +
+ +`; diff --git a/src/components/Atomic/Logo/Logo.test.tsx b/src/components/Atomic/Logo/Logo.test.tsx new file mode 100644 index 00000000..7ff977f0 --- /dev/null +++ b/src/components/Atomic/Logo/Logo.test.tsx @@ -0,0 +1,36 @@ +import { render, fireEvent } from '@testing-library/react' +import Logo from './Logo' + +describe('Logo', () => { + it('renders without crashing', () => { + const { container, asFragment } = render() + expect(container).toBeInTheDocument() + expect(asFragment()).toMatchSnapshot() + }) + + it('renders with correct source', () => { + const { getByAltText } = render() + expect(getByAltText('')).toHaveAttribute('src', 'logo.png') + }) + + it('renders with correct dimensions', () => { + const { getByAltText } = render() + const logo = getByAltText('') + expect(logo).toHaveAttribute('height', '50px') + expect(logo).toHaveAttribute('width', '50px') + }) + + it('calls onClick when clicked', () => { + const onClick = jest.fn() + const { getByAltText } = render() + fireEvent.click(getByAltText('')) + expect(onClick).toHaveBeenCalled() + }) + + it('does not call onResized when collapsed', () => { + const onResized = jest.fn() + const { getByAltText } = render() + fireEvent.click(getByAltText('')) + expect(onResized).not.toHaveBeenCalled() + }) +}) diff --git a/src/components/Atomic/Logo/__snapshots__/Logo.test.tsx.snap b/src/components/Atomic/Logo/__snapshots__/Logo.test.tsx.snap new file mode 100644 index 00000000..bd014fd6 --- /dev/null +++ b/src/components/Atomic/Logo/__snapshots__/Logo.test.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Logo renders without crashing 1`] = ` + + + +`; diff --git a/src/components/Atomic/NotificationCenter/NotificationCenter.test.tsx b/src/components/Atomic/NotificationCenter/NotificationCenter.test.tsx new file mode 100644 index 00000000..6b5f8b2d --- /dev/null +++ b/src/components/Atomic/NotificationCenter/NotificationCenter.test.tsx @@ -0,0 +1,12 @@ +import { render } from '@testing-library/react' +import NotificationCenter from './NotificationCenter' + +describe('', () => { + it('should render without crashing', () => { + const { container, asFragment } = render( + + ) + expect(container).toBeTruthy() + expect(asFragment()).toMatchSnapshot() + }) +}) diff --git a/src/components/Atomic/NotificationCenter/__snapshots__/NotificationCenter.test.tsx.snap b/src/components/Atomic/NotificationCenter/__snapshots__/NotificationCenter.test.tsx.snap new file mode 100644 index 00000000..2aed4229 --- /dev/null +++ b/src/components/Atomic/NotificationCenter/__snapshots__/NotificationCenter.test.tsx.snap @@ -0,0 +1,74 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render without crashing 1`] = ` + + .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-transition: all 0.3s; + transition: all 0.3s; + cursor: pointer; +} + +.emotion-1 { + width: 44px; + height: 44px; + border-radius: 50%; + position: relative; + -webkit-transition: all 0.3s; + transition: all 0.3s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +.emotion-1 .shake { + -webkit-animation: bellshake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + animation: bellshake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform-origin: top right; +} + +
+ + + + + + + +
+ +`; diff --git a/src/components/Atomic/Show/Show.test.tsx b/src/components/Atomic/Show/Show.test.tsx new file mode 100644 index 00000000..b3b6bcfb --- /dev/null +++ b/src/components/Atomic/Show/Show.test.tsx @@ -0,0 +1,27 @@ +import { render } from '@testing-library/react' +import Show from './Show' + +describe('Show Component', () => { + it('renders the "when" child when condition is true', () => { + const { getByText, asFragment } = render( + + When Content + Else Content + + ) + expect(getByText('When Content')).toBeInTheDocument() + expect(asFragment()).toMatchSnapshot() + expect(() => getByText('Else Content')).toThrow() + }) + + it('renders the "else" child when condition is false', () => { + const { getByText } = render( + + When Content + Else Content + + ) + expect(getByText('Else Content')).toBeInTheDocument() + expect(() => getByText('When Content')).toThrow() + }) +}) diff --git a/src/components/Atomic/Show/__snapshots__/Show.test.tsx.snap b/src/components/Atomic/Show/__snapshots__/Show.test.tsx.snap new file mode 100644 index 00000000..ccb9323d --- /dev/null +++ b/src/components/Atomic/Show/__snapshots__/Show.test.tsx.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Show Component renders the "when" child when condition is true 1`] = ` + + When Content + +`; diff --git a/src/components/Atomic/Spacer/Spacer.test.tsx b/src/components/Atomic/Spacer/Spacer.test.tsx new file mode 100644 index 00000000..22e4680e --- /dev/null +++ b/src/components/Atomic/Spacer/Spacer.test.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react' +import Spacer from './Spacer' + +describe('', () => { + it('renders children when type prop matches the regex', () => { + const { getByText, asFragment } = render(Content) + expect(getByText('Content')).toBeInTheDocument() + expect(asFragment()).toMatchSnapshot() + }) +}) diff --git a/src/components/Atomic/Spacer/__snapshots__/Spacer.test.tsx.snap b/src/components/Atomic/Spacer/__snapshots__/Spacer.test.tsx.snap new file mode 100644 index 00000000..561a9ac4 --- /dev/null +++ b/src/components/Atomic/Spacer/__snapshots__/Spacer.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders children when type prop matches the regex 1`] = ` + + .emotion-0 { + margin-top: 20px!important; +} + +
+ Content +
+ +`; diff --git a/src/components/Atomic/TagGroup/TagGroup.test.tsx b/src/components/Atomic/TagGroup/TagGroup.test.tsx new file mode 100644 index 00000000..62143cef --- /dev/null +++ b/src/components/Atomic/TagGroup/TagGroup.test.tsx @@ -0,0 +1,16 @@ +import { render } from '@testing-library/react' +import TagGroup from './TagGroup' +import Tag from '../Tag' + +describe('TagGroup Component', () => { + it('renders children when there is enough space', () => { + const { getByText } = render( + + Tag 1 + Tag 2 + + ) + expect(getByText('Tag 1')).toBeInTheDocument() + expect(getByText('Tag 2')).toBeInTheDocument() + }) +})