test: (Tabs & CapsuleTabs & JumboTabs) add some tests (#5151)

ant-design · May 7, 2022 · 66c21ea · 66c21ea
1 parent d600aef
commit 66c21ea
Show file tree

Hide file tree

Showing 4 changed files with 476 additions and 0 deletions.
diff --git a/src/components/capsule-tabs/tests/capsule-tabs.test.tsx 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) => (
+    <CapsuleTabs {...props}>
+      <CapsuleTabs.Tab title='fruits' key='fruits'>
+        Apple
+      </CapsuleTabs.Tab>
+      <CapsuleTabs.Tab title='vegetables' key='vegetables'>
+        Tomato
+      </CapsuleTabs.Tab>
+      <CapsuleTabs.Tab title='animals' key='animals'>
+        Ant
+      </CapsuleTabs.Tab>
+    </CapsuleTabs>
+  )
+  test('a11y', async () => {
+    await testA11y(<Basic />)
+  })
+
+  test('basic usage', async () => {
+    const { getByText } = await render(<Basic defaultActiveKey='animals' />)
+    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<string | null>(null)
+      return <Basic activeKey={activeKey} onChange={key => setActiveKey(key)} />
+    }
+    const { getByText } = await render(<App />)
+    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(
+      <CapsuleTabs onChange={onChange}>
+        <CapsuleTabs.Tab title='fruits' key='fruits' />
+        <CapsuleTabs.Tab title='vegetables' key='vegetables' />
+        <CapsuleTabs.Tab title='animals' key='animals' disabled />
+      </CapsuleTabs>
+    )
+
+    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(
+      <CapsuleTabs>
+        <CapsuleTabs.Tab title='fruits' key='fruits'>
+          Apple
+        </CapsuleTabs.Tab>
+        <CapsuleTabs.Tab title='vegetables' key='vegetables'>
+          Tomato
+        </CapsuleTabs.Tab>
+        <CapsuleTabs.Tab title='animals' key='animals' forceRender>
+          Ant
+        </CapsuleTabs.Tab>
+      </CapsuleTabs>
+    )
+
+    expect(queryByText('Ant')).toBeInTheDocument()
+  })
+
+  test('unmount content when not visible', async () => {
+    const { getByText, queryByText } = await render(
+      <CapsuleTabs>
+        <CapsuleTabs.Tab title='fruits' key='fruits' destroyOnClose>
+          Apple
+        </CapsuleTabs.Tab>
+        <CapsuleTabs.Tab title='vegetables' key='vegetables'>
+          Tomato
+        </CapsuleTabs.Tab>
+        <CapsuleTabs.Tab title='animals' key='animals'>
+          Ant
+        </CapsuleTabs.Tab>
+      </CapsuleTabs>
+    )
+    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
@@ -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) => (
+    <JumboTabs {...props}>
+      <JumboTabs.Tab title='fruits' description='fruits-desc' key='fruits'>
+        Apple
+      </JumboTabs.Tab>
+      <JumboTabs.Tab
+        title='vegetables'
+        description='vegetables-desc'
+        key='vegetables'
+      >
+        Tomato
+      </JumboTabs.Tab>
+      <JumboTabs.Tab title='animals' description='animals-desc' key='animals'>
+        Ant
+      </JumboTabs.Tab>
+    </JumboTabs>
+  )
+  test('a11y', async () => {
+    await testA11y(<Basic />)
+  })
+
+  test('basic usage', async () => {
+    const { getByText } = await render(<Basic defaultActiveKey='animals' />)
+    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<string | null>(null)
+      return <Basic activeKey={activeKey} onChange={key => setActiveKey(key)} />
+    }
+    const { getByText } = await render(<App />)
+    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(
+      <JumboTabs onChange={onChange}>
+        <JumboTabs.Tab title='fruits' description='description' key='fruits' />
+        <JumboTabs.Tab
+          title='vegetables'
+          description='description'
+          key='vegetables'
+        />
+        <JumboTabs.Tab
+          title='animals'
+          description='description'
+          key='animals'
+          disabled
+        />
+      </JumboTabs>
+    )
+
+    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(
+      <JumboTabs>
+        <JumboTabs.Tab title='fruits' description='description' key='fruits'>
+          Apple
+        </JumboTabs.Tab>
+        <JumboTabs.Tab
+          title='vegetables'
+          description='description'
+          key='vegetables'
+        >
+          Tomato
+        </JumboTabs.Tab>
+        <JumboTabs.Tab
+          title='animals'
+          description='description'
+          key='animals'
+          forceRender
+        >
+          Ant
+        </JumboTabs.Tab>
+      </JumboTabs>
+    )
+
+    expect(queryByText('Ant')).toBeInTheDocument()
+  })
+
+  test('unmount content when not visible', async () => {
+    const { getByText, queryByText } = await render(
+      <JumboTabs>
+        <JumboTabs.Tab
+          title='fruits'
+          description='description'
+          key='fruits'
+          destroyOnClose
+        >
+          Apple
+        </JumboTabs.Tab>
+        <JumboTabs.Tab
+          title='vegetables'
+          description='description'
+          key='vegetables'
+        >
+          Tomato
+        </JumboTabs.Tab>
+        <JumboTabs.Tab title='animals' description='description' key='animals'>
+          Ant
+        </JumboTabs.Tab>
+      </JumboTabs>
+    )
+    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
@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs \`activeLineMode\` prop 1`] = `
+<div>
+  <div
+    class="adm-tabs"
+  >
+    <div
+      class="adm-tabs-header"
+    >
+      <div
+        class="adm-tabs-header-mask adm-tabs-header-mask-left"
+        style="opacity: 0;"
+      />
+      <div
+        class="adm-tabs-header-mask adm-tabs-header-mask-right"
+        style="opacity: 0;"
+      />
+      <div
+        class="adm-tabs-tab-list"
+      >
+        <div
+          class="adm-tabs-tab-line"
+          style="width: 0px; transform: none;"
+        />
+        <div
+          class="adm-tabs-tab-wrapper adm-tabs-tab-wrapper-stretch"
+        >
+          <div
+            class="adm-tabs-tab adm-tabs-tab-active"
+          >
+            fruits
+          </div>
+        </div>
+        <div
+          class="adm-tabs-tab-wrapper adm-tabs-tab-wrapper-stretch"
+        >
+          <div
+            class="adm-tabs-tab"
+          >
+            vegetables
+          </div>
+        </div>
+        <div
+          class="adm-tabs-tab-wrapper adm-tabs-tab-wrapper-stretch"
+        >
+          <div
+            class="adm-tabs-tab"
+          >
+            animals
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="adm-tabs-content"
+      style="display: block;"
+    >
+      Apple
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tabs \`activeLineMode\` prop 2`] = `
+<div>
+  <div
+    class="adm-tabs"
+  >
+    <div
+      class="adm-tabs-header"
+    >
+      <div
+        class="adm-tabs-header-mask adm-tabs-header-mask-left"
+        style="opacity: 0;"
+      />
+      <div
+        class="adm-tabs-header-mask adm-tabs-header-mask-right"
+        style="opacity: 0;"
+      />
+      <div
+        class="adm-tabs-tab-list"
+      >
+        <div
+          class="adm-tabs-tab-line"
+          style="transform: none;"
+        />
+        <div
+          class="adm-tabs-tab-wrapper adm-tabs-tab-wrapper-stretch"
+        >
+          <div
+            class="adm-tabs-tab adm-tabs-tab-active"
+          >
+            fruits
+          </div>
+        </div>
+        <div
+          class="adm-tabs-tab-wrapper adm-tabs-tab-wrapper-stretch"
+        >
+          <div
+            class="adm-tabs-tab"
+          >
+            vegetables
+          </div>
+        </div>
+        <div
+          class="adm-tabs-tab-wrapper adm-tabs-tab-wrapper-stretch"
+        >
+          <div
+            class="adm-tabs-tab"
+          >
+            animals
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="adm-tabs-content"
+      style="display: block;"
+    >
+      Apple
+    </div>
+  </div>
+</div>
+`;