From 2b8d1b0870a5afe0809482f2f7e986e1ca05d8a6 Mon Sep 17 00:00:00 2001 From: Ashley Kapaso Date: Wed, 18 Sep 2024 07:36:30 +0200 Subject: [PATCH] add tests --- src/src/lib/components/common/Header.svelte | 92 ------------------- .../components/common/PageUnavailable.svelte | 27 +++--- src/src/lib/components/common/Sandbox.svelte | 91 ------------------ .../components/common/ZeroUsersCard.svelte | 2 +- .../tests/unit/components/common/faq.test.ts | 51 ++++++++++ .../common/page-unavailable.test.ts | 34 +++++++ 6 files changed, 99 insertions(+), 198 deletions(-) delete mode 100644 src/src/lib/components/common/Header.svelte delete mode 100644 src/src/lib/components/common/Sandbox.svelte create mode 100644 src/src/tests/unit/components/common/faq.test.ts create mode 100644 src/src/tests/unit/components/common/page-unavailable.test.ts diff --git a/src/src/lib/components/common/Header.svelte b/src/src/lib/components/common/Header.svelte deleted file mode 100644 index 569bcfd1..00000000 --- a/src/src/lib/components/common/Header.svelte +++ /dev/null @@ -1,92 +0,0 @@ - diff --git a/src/src/lib/components/common/PageUnavailable.svelte b/src/src/lib/components/common/PageUnavailable.svelte index 53c478fa..b4595f43 100644 --- a/src/src/lib/components/common/PageUnavailable.svelte +++ b/src/src/lib/components/common/PageUnavailable.svelte @@ -1,15 +1,14 @@ - -
+ Logo +

- Logo -

- Page Unavailable. -

-

- Please Create an Organisation to get started! -

-
- + Page Unavailable. + +

+ Please Create an Organisation to get started! +

+ diff --git a/src/src/lib/components/common/Sandbox.svelte b/src/src/lib/components/common/Sandbox.svelte deleted file mode 100644 index 7643f3c1..00000000 --- a/src/src/lib/components/common/Sandbox.svelte +++ /dev/null @@ -1,91 +0,0 @@ - - -
-
-
-

Sandbox

-
- - (experimentModal = false)} /> - -
-
-
- - - - - {#if $displayedSandboxObjectURL !== ''} - - {/if} -
-
-
diff --git a/src/src/lib/components/common/ZeroUsersCard.svelte b/src/src/lib/components/common/ZeroUsersCard.svelte index 5ea295d0..1584f00e 100644 --- a/src/src/lib/components/common/ZeroUsersCard.svelte +++ b/src/src/lib/components/common/ZeroUsersCard.svelte @@ -11,7 +11,7 @@ export let role: string; - +
{title}

{description}

diff --git a/src/src/tests/unit/components/common/faq.test.ts b/src/src/tests/unit/components/common/faq.test.ts new file mode 100644 index 00000000..b26fa00a --- /dev/null +++ b/src/src/tests/unit/components/common/faq.test.ts @@ -0,0 +1,51 @@ +import { render, screen, fireEvent } from '@testing-library/svelte'; +import { describe, it, expect } from 'vitest'; +import FAQAccordion from '$lib/components/common/FAQ.svelte'; + +const sampleFaqs = [ + { + category: 'General Questions', + items: [ + { question: 'What is your return policy?', answer: 'You can return items within 30 days.' }, + { question: 'Do you ship internationally?', answer: 'Yes, we ship worldwide.' } + ] + }, + { + category: 'Technical Support', + items: [{ question: 'How do I reset my password?', answer: 'Click on "Forgot password" link.' }] + } +]; + +describe('FAQAccordion', () => { + it('renders the main heading', () => { + render(FAQAccordion, { props: { faqs: sampleFaqs } }); + expect(screen.getByText('Frequently Asked Questions')).toBeInTheDocument(); + }); + + it('renders categories as headings', () => { + render(FAQAccordion, { props: { faqs: sampleFaqs } }); + expect(screen.getByText('General Questions')).toBeInTheDocument(); + expect(screen.getByText('Technical Support')).toBeInTheDocument(); + }); + + it('renders accordion items', () => { + render(FAQAccordion, { props: { faqs: sampleFaqs } }); + expect(screen.getByText('What is your return policy?')).toBeInTheDocument(); + expect(screen.getByText('Do you ship internationally?')).toBeInTheDocument(); + expect(screen.getByText('How do I reset my password?')).toBeInTheDocument(); + }); + + it('displays the answer when an accordion item is clicked', async () => { + render(FAQAccordion, { props: { faqs: sampleFaqs } }); + const questionElement = screen.getByText('What is your return policy?'); + await fireEvent.click(questionElement); + + expect(screen.getByText('You can return items within 30 days.')).toBeInTheDocument(); + }); + + it('handles empty faqs prop gracefully', () => { + render(FAQAccordion, { props: { faqs: [] } }); + expect(screen.queryByText('General Questions')).not.toBeInTheDocument(); + expect(screen.queryByText('Technical Support')).not.toBeInTheDocument(); + }); +}); diff --git a/src/src/tests/unit/components/common/page-unavailable.test.ts b/src/src/tests/unit/components/common/page-unavailable.test.ts new file mode 100644 index 00000000..58b6bfc9 --- /dev/null +++ b/src/src/tests/unit/components/common/page-unavailable.test.ts @@ -0,0 +1,34 @@ +import { render, screen } from '@testing-library/svelte'; +import { describe, it, expect } from 'vitest'; +import PageUnavailable from '$lib/components/common/PageUnavailable.svelte'; + +describe('PageUnavailable Component', () => { + it('renders the main heading', () => { + render(PageUnavailable); + expect( + screen.getByRole('heading', { level: 1, name: 'Page Unavailable.' }) + ).toBeInTheDocument(); + }); + + it('renders the subheading', () => { + render(PageUnavailable); + expect(screen.getByText('Please Create an Organisation to get started!')).toBeInTheDocument(); + }); + + it('renders the image with correct attributes', () => { + render(PageUnavailable); + const img = screen.getByAltText('Logo') as HTMLImageElement; + expect(img).toBeInTheDocument(); + expect(img.src).toBe('https://www.svgrepo.com/show/195897/minus.svg'); + expect(img.className).toContain('mb-8 h-40'); + }); + + it('applies the correct styles to the container div', () => { + render(PageUnavailable); + const containerDiv = screen.getByTestId('page-unavailable-container'); + expect(containerDiv).toBeInTheDocument(); + expect(containerDiv.className).toContain( + 'm-12 flex min-h-screen flex-col items-center justify-center rounded-lg bg-white p-12 shadow-lg dark:bg-gray-700' + ); + }); +});