diff --git a/src/components/capsule-tabs/tests/capsule-tabs.test.tsx b/src/components/capsule-tabs/tests/capsule-tabs.test.tsx new file mode 100644 index 0000000000..5e51708a28 --- /dev/null +++ b/src/components/capsule-tabs/tests/capsule-tabs.test.tsx @@ -0,0 +1,98 @@ +import React, { useState } from 'react' +import { render, testA11y, fireEvent } from 'testing' +import CapsuleTabs, { CapsuleTabsProps } from '..' + +const classPrefix = `adm-capsule-tabs` + +describe('CapsuleTabs', () => { + const Basic = (props: CapsuleTabsProps) => ( + + + Apple + + + Tomato + + + Ant + + + ) + test('a11y', async () => { + await testA11y() + }) + + test('basic usage', async () => { + const { getByText } = await render() + expect(getByText('Ant')).toBeVisible() + expect(getByText('animals')).toHaveClass(`${classPrefix}-tab-active`) + fireEvent.click(getByText('vegetables')) + expect(getByText('Tomato')).toBeVisible() + expect(getByText('vegetables')).toHaveClass(`${classPrefix}-tab-active`) + }) + + test('controlled mode', async () => { + const App = () => { + const [activeKey, setActiveKey] = useState(null) + return setActiveKey(key)} /> + } + const { getByText } = await render() + expect(document.querySelectorAll(`.${classPrefix}-tab-active`).length).toBe( + 0 + ) + fireEvent.click(getByText('vegetables')) + expect(getByText('Tomato')).toBeVisible() + }) + + test('disabled tab', async () => { + const onChange = jest.fn() + const { getByText } = await render( + + + + + + ) + + expect(getByText('animals')).toHaveClass(`${classPrefix}-tab-disabled`) + fireEvent.click(getByText('animals')) + expect(onChange).not.toBeCalled() + }) + + test('render the DOM structure when hidden', async () => { + const { queryByText } = await render( + + + Apple + + + Tomato + + + Ant + + + ) + + expect(queryByText('Ant')).toBeInTheDocument() + }) + + test('unmount content when not visible', async () => { + const { getByText, queryByText } = await render( + + + Apple + + + Tomato + + + Ant + + + ) + expect(queryByText('Apple')).toBeInTheDocument() + fireEvent.click(getByText('vegetables')) + expect(queryByText('Apple')).not.toBeInTheDocument() + }) +}) diff --git a/src/components/jumbo-tabs/tests/jumbo-tabs.test.tsx b/src/components/jumbo-tabs/tests/jumbo-tabs.test.tsx new file mode 100644 index 0000000000..b217d14c45 --- /dev/null +++ b/src/components/jumbo-tabs/tests/jumbo-tabs.test.tsx @@ -0,0 +1,135 @@ +import React, { useState } from 'react' +import { render, testA11y, fireEvent } from 'testing' +import JumboTabs, { JumboTabsProps } from '..' + +const classPrefix = `adm-jumbo-tabs` + +describe('JumboTabs', () => { + const Basic = (props: JumboTabsProps) => ( + + + Apple + + + Tomato + + + Ant + + + ) + test('a11y', async () => { + await testA11y() + }) + + test('basic usage', async () => { + const { getByText } = await render() + expect(getByText('Ant')).toBeVisible() + expect(getByText('animals').parentElement).toHaveClass( + `${classPrefix}-tab-active` + ) + fireEvent.click(getByText('vegetables')) + expect(getByText('Tomato')).toBeVisible() + expect(getByText('vegetables').parentElement).toHaveClass( + `${classPrefix}-tab-active` + ) + }) + + test('controlled mode', async () => { + const App = () => { + const [activeKey, setActiveKey] = useState(null) + return setActiveKey(key)} /> + } + const { getByText } = await render() + expect(document.querySelectorAll(`.${classPrefix}-tab-active`).length).toBe( + 0 + ) + fireEvent.click(getByText('vegetables')) + expect(getByText('Tomato')).toBeVisible() + }) + + test('disabled tab', async () => { + const onChange = jest.fn() + const { getByText } = await render( + + + + + + ) + + expect(getByText('animals').parentElement).toHaveClass( + `${classPrefix}-tab-disabled` + ) + fireEvent.click(getByText('animals')) + expect(onChange).not.toBeCalled() + }) + + test('render the DOM structure when hidden', async () => { + const { queryByText } = await render( + + + Apple + + + Tomato + + + Ant + + + ) + + expect(queryByText('Ant')).toBeInTheDocument() + }) + + test('unmount content when not visible', async () => { + const { getByText, queryByText } = await render( + + + Apple + + + Tomato + + + Ant + + + ) + expect(queryByText('Apple')).toBeInTheDocument() + fireEvent.click(getByText('vegetables')) + expect(queryByText('Apple')).not.toBeInTheDocument() + }) +}) diff --git a/src/components/tabs/tests/__snapshots__/tabs.test.tsx.snap b/src/components/tabs/tests/__snapshots__/tabs.test.tsx.snap new file mode 100644 index 0000000000..1891c0e32c --- /dev/null +++ b/src/components/tabs/tests/__snapshots__/tabs.test.tsx.snap @@ -0,0 +1,125 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Tabs \`activeLineMode\` prop 1`] = ` +
+
+
+
+
+
+
+
+
+ fruits +
+
+
+
+ vegetables +
+
+
+
+ animals +
+
+
+
+
+ Apple +
+
+
+`; + +exports[`Tabs \`activeLineMode\` prop 2`] = ` +
+
+
+
+
+
+
+
+
+ fruits +
+
+
+
+ vegetables +
+
+
+
+ animals +
+
+
+
+
+ Apple +
+
+
+`; diff --git a/src/components/tabs/tests/tabs.test.tsx b/src/components/tabs/tests/tabs.test.tsx new file mode 100644 index 0000000000..472705a7d6 --- /dev/null +++ b/src/components/tabs/tests/tabs.test.tsx @@ -0,0 +1,118 @@ +import React, { useState } from 'react' +import { render, testA11y, fireEvent } from 'testing' +import Tabs, { TabsProps } from '..' + +const classPrefix = `adm-tabs` + +describe('Tabs', () => { + const Basic = (props: TabsProps) => ( + + + Apple + + + Tomato + + + Ant + + + ) + test('a11y', async () => { + await testA11y() + }) + + test('basic usage', async () => { + const { getByText } = await render() + expect(getByText('Ant')).toBeVisible() + expect(getByText('animals')).toHaveClass(`${classPrefix}-tab-active`) + fireEvent.click(getByText('vegetables')) + expect(getByText('Tomato')).toBeVisible() + expect(getByText('vegetables')).toHaveClass(`${classPrefix}-tab-active`) + }) + + test('controlled mode', async () => { + const App = () => { + const [activeKey, setActiveKey] = useState(null) + return setActiveKey(key)} /> + } + const { getByText } = await render() + expect(document.querySelectorAll(`.${classPrefix}-tab-active`).length).toBe( + 0 + ) + fireEvent.click(getByText('vegetables')) + expect(getByText('Tomato')).toBeVisible() + }) + + test('disabled tab', async () => { + const onChange = jest.fn() + const { getByText } = await render( + + + + + + ) + + expect(getByText('animals')).toHaveClass(`${classPrefix}-tab-disabled`) + fireEvent.click(getByText('animals')) + expect(onChange).not.toBeCalled() + }) + + test('`activeLineMode` prop', async () => { + const { container: fullContainer } = await render( + + ) + const { container: fixedContainer } = await render( + + ) + expect(fullContainer).toMatchSnapshot() + expect(fixedContainer).toMatchSnapshot() + }) + + test('not stretch', async () => { + const { getByTestId } = await render( + + ) + expect(getByTestId('tabs')).not.toHaveClass( + `${classPrefix}-tab-wrapper-stretch` + ) + }) + + test('render the DOM structure when hidden', async () => { + const { queryByText } = await render( + + + Apple + + + Tomato + + + Ant + + + ) + + expect(queryByText('Ant')).toBeInTheDocument() + }) + + test('unmount content when not visible', async () => { + const { getByText, queryByText } = await render( + + + Apple + + + Tomato + + + Ant + + + ) + expect(queryByText('Apple')).toBeInTheDocument() + fireEvent.click(getByText('vegetables')) + expect(queryByText('Apple')).not.toBeInTheDocument() + }) +})