Drop tabs and test

src/lib/components/dropTabs.svelte

@@ -0,0 +1,3 @@
+<ul class="drop-tabs">
+    <slot />
+</ul>

src/lib/components/dropTabsItem.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    export let disabled = false;
+</script>
+
+<li class="drop-tabs-item">
+    <button class="drop-tabs-button" {disabled} on:click>
+        <span class="text"><slot /></span>
+    </button>
+</li>

src/lib/components/index.ts

@@ -13,6 +13,8 @@ export { default as DropList } from './dropList.svelte';
 export { default as DropListItem } from './dropListItem.svelte';
 export { default as DropListLink } from './dropListLink.svelte';
 export { default as Collapsible } from './collapsible.svelte';
+export { default as DropTabs } from './dropTabs.svelte';
+export { default as DropTabsItem } from './dropTabsItem.svelte';
 export { default as Tooltip } from './tooltip.svelte';
 export { default as Avatar } from './avatar.svelte';
 export { default as SwitchBox } from './switchBox.svelte';

tests/unit/components/dropTabsItem.test.ts

@@ -0,0 +1,26 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/svelte';
+
+import { DropTabsItem } from '../../../src/lib/components';
+
+test('shows button', () => {
+    const { getByRole } = render(DropTabsItem);
+
+    expect(getByRole('button')).toBeInTheDocument();
+});
+
+test('shows button - disabled', () => {
+    const { getByRole } = render(DropTabsItem, { disabled: true });
+
+    expect(getByRole('button')).toBeDisabled();
+});
+
+test('shows button - on:click', async () => {
+    const { getByRole, component } = render(DropTabsItem);
+    const button = getByRole('button');
+    const callback = jest.fn();
+    component.$on('click', callback);
+
+    await fireEvent.click(button);
+    expect(callback).toHaveBeenCalled();
+});