chore: remove old unused component

This commit is contained in:
Arman
2022-08-04 14:04:53 +02:00
parent ffe28a4b27
commit 9d7eefe370
4 changed files with 0 additions and 137 deletions
-2
View File
@@ -20,8 +20,6 @@ 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';
export { default as SwitchBoxes } from './switchBoxes.svelte';
export { default as Alert } from './alert.svelte';
export { default as Box } from './box.svelte';
export { default as Search } from './search.svelte';
-48
View File
@@ -1,48 +0,0 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
type SwitchBox = {
label: string;
id: string;
src: string;
alt: string;
href: string;
linkText: string;
value: boolean;
required: boolean;
disabled: boolean;
wip: boolean;
};
export let box: SwitchBox;
let { label, id, src, alt, href, linkText, disabled, required, value, wip } = box;
const dispatch = createEventDispatcher();
//TODO: move SwitchBox type outside component
</script>
<li class="card">
<label class="switch-box" for={id}>
<div class="switch-box-image">
<img height="50" width="50" src={src || 'https://via.placeholder.com/50'} {alt} />
</div>
<span class="switch-box-title">{label}</span>
{#if !wip}
<a {href} class="link" target="_blank">
<span class="text">{linkText || 'Docs'} </span>
<span class="icon-link-ext" aria-hidden="true" />
</a>
<input
{id}
{disabled}
{required}
type="checkbox"
class="switch"
role="switch"
bind:checked={value}
on:change={() => dispatch('updated', { value, id })} />
{/if}
</label>
</li>
-13
View File
@@ -1,13 +0,0 @@
<script>
import SwitchBox from './switchBox.svelte';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let boxes;
</script>
<ul class="grid-box">
{#each boxes as box}
<SwitchBox {box} on:updated={(e) => dispatch('updated', e.detail)} />
{/each}
</ul>
@@ -1,74 +0,0 @@
import '@testing-library/jest-dom';
import { render, fireEvent } from '@testing-library/svelte';
import { SwitchBox } from '../../../src/lib/components';
const box = {
id: 'input',
src: 'https://via.placeholder.com/50',
label: 'Bool',
alt: 'image',
required: false,
disabled: false,
value: false
};
test('shows boolean input', () => {
const { getByText, getByRole, getByAltText } = render(SwitchBox, {
box
});
const checkbox = getByRole('switch');
const img = getByAltText('image');
expect(getByText('Bool')).toBeInTheDocument();
expect(img).toBeInTheDocument();
expect(checkbox).toBeInTheDocument();
expect(checkbox).toHaveAttribute('type', 'checkbox');
});
test('shows boolean input - required', () => {
box.required = true;
const { getByRole } = render(SwitchBox, { box });
expect(getByRole('switch')).toBeRequired();
});
test('shows boolean input - disabled', () => {
box.disabled = true;
const { getByRole } = render(SwitchBox, { box });
expect(getByRole('switch')).toBeDisabled();
});
test('state', async () => {
const { getByRole, component } = render(SwitchBox, { box });
const checkbox = getByRole('switch');
setTimeout(() => {
expect(checkbox).not.toBeChecked();
expect(component.box.value).toStrictEqual(false);
}, 1);
await fireEvent.click(checkbox);
setTimeout(() => {
expect(checkbox).toBeChecked();
expect(component.box.value).toStrictEqual(true);
}, 1);
await fireEvent.click(checkbox);
setTimeout(() => {
expect(checkbox).not.toBeChecked();
expect(component.box.value).toStrictEqual(false);
}, 1);
component.box.value = true;
setTimeout(() => {
expect(checkbox).toBeChecked();
expect(component.box.value).toStrictEqual(true);
}, 1);
component.box.value = false;
setTimeout(() => {
expect(checkbox).not.toBeChecked();
expect(component.box.value).toStrictEqual(false);
}, 1);
});