-
Notifications
You must be signed in to change notification settings - Fork 294
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: move FormPage to its own component (#7472)
* chore: move FormPage to its own component remove tinro dependency in the UI component keep a tinro FormPage in renderer part that is just delegating the calls fixes #6920 Signed-off-by: Florent Benoit <fbenoit@redhat.com>
- Loading branch information
Showing
8 changed files
with
257 additions
and
94 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| /********************************************************************** | ||
| * Copyright (C) 2023-2024 Red Hat, Inc. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| * | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| ***********************************************************************/ | ||
|
|
||
| import '@testing-library/jest-dom/vitest'; | ||
|
|
||
| import { fireEvent, getByRole, render, screen } from '@testing-library/svelte'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { beforeEach, expect, test, vi } from 'vitest'; | ||
|
|
||
| import FormPage from './FormPage.svelte'; | ||
|
|
||
| beforeEach(() => { | ||
| vi.clearAllMocks(); | ||
| }); | ||
|
|
||
| test('Expect title is defined', async () => { | ||
| const title = 'My Dummy Title'; | ||
| render(FormPage, { | ||
| title, | ||
| }); | ||
|
|
||
| const titleElement = screen.getByRole('heading', { level: 1, name: title }); | ||
| expect(titleElement).toBeInTheDocument(); | ||
| expect(titleElement).toHaveTextContent(title); | ||
| }); | ||
|
|
||
| test('Expect no backlink or close is defined', async () => { | ||
| render(FormPage, { | ||
| title: 'No Title', | ||
| showBreadcrumb: false, | ||
| }); | ||
|
|
||
| const backElement = screen.queryByLabelText('back'); | ||
| expect(backElement).not.toBeInTheDocument(); | ||
|
|
||
| const closeElement = screen.queryByTitle('Close'); | ||
| expect(closeElement).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('Expect name is defined', async () => { | ||
| const name = 'My Dummy Name'; | ||
| render(FormPage, { | ||
| title: 'No Title', | ||
| breadcrumbRightPart: name, | ||
| }); | ||
|
|
||
| const nameElement = screen.getByLabelText('name'); | ||
| expect(nameElement).toBeInTheDocument(); | ||
| expect(nameElement).toHaveTextContent(name); | ||
| }); | ||
|
|
||
| test('Expect backlink is defined', async () => { | ||
| const backName = 'Last page'; | ||
| const breadcrumbClickMock = vi.fn(); | ||
|
|
||
| const comp = render(FormPage, { | ||
| breadcrumbLeftPart: 'Last page', | ||
| breadcrumbRightPart: 'hello', | ||
| title: 'No Title', | ||
| }); | ||
|
|
||
| comp.component.$on('breadcrumbClick', breadcrumbClickMock); | ||
|
|
||
| const backElement = screen.getByLabelText('back'); | ||
| expect(backElement).toBeInTheDocument(); | ||
| expect(backElement).toHaveTextContent(backName); | ||
|
|
||
| await fireEvent.click(backElement); | ||
|
|
||
| expect(breadcrumbClickMock).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| test('Expect close link is defined', async () => { | ||
| const closeClickMock = vi.fn(); | ||
|
|
||
| const comp = render(FormPage, { | ||
| title: 'No Title', | ||
| breadcrumbLeftPart: 'back', | ||
| breadcrumbRightPart: 'hello', | ||
| }); | ||
|
|
||
| comp.component.$on('close', closeClickMock); | ||
| const closeElement = getByRole(document.body, 'button', { name: 'Close' }); | ||
| expect(closeElement).toBeInTheDocument(); | ||
| await fireEvent.click(closeElement); | ||
|
|
||
| expect(closeClickMock).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| test('Expect Escape key works', async () => { | ||
| const closeClickMock = vi.fn(); | ||
|
|
||
| const comp = render(FormPage, { | ||
| title: 'No Title', | ||
| breadcrumbLeftPart: 'back', | ||
| }); | ||
| comp.component.$on('close', closeClickMock); | ||
| await userEvent.keyboard('{Escape}'); | ||
|
|
||
| expect(closeClickMock).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| test('Expect no progress', async () => { | ||
| render(FormPage, { | ||
| title: 'No Title', | ||
| inProgress: false, | ||
| }); | ||
|
|
||
| const progress = screen.queryByRole('progressbar'); | ||
| expect(progress).toBeNull(); | ||
| }); | ||
|
|
||
| test('Expect progress', async () => { | ||
| render(FormPage, { | ||
| title: 'No Title', | ||
| inProgress: true, | ||
| }); | ||
|
|
||
| const progress = screen.getByRole('progressbar'); | ||
| expect(progress).toBeInTheDocument(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| <script lang="ts"> | ||
| import { createEventDispatcher } from 'svelte'; | ||
| import CloseButton from '../button/CloseButton.svelte'; | ||
| import Link from '../link/Link.svelte'; | ||
| import LinearProgress from '../progress/LinearProgress.svelte'; | ||
| export let title: string; | ||
| export let showBreadcrumb = true; | ||
| export let inProgress = false; | ||
| export let breadcrumbLeftPart: string | undefined = undefined; | ||
| export let breadcrumbRightPart: string | undefined = undefined; | ||
| export let breadcrumbTitle: string | undefined = ''; | ||
| const dispatchClose = createEventDispatcher<{ close: undefined }>(); | ||
| function close(): void { | ||
| dispatchClose('close'); | ||
| } | ||
| const dispatchBreadCrumb = createEventDispatcher<{ breadcrumbClick: undefined }>(); | ||
| function breadcrumbClick(): void { | ||
| dispatchBreadCrumb('breadcrumbClick'); | ||
| } | ||
| function handleKeydown(e: KeyboardEvent): void { | ||
| if (e.key === 'Escape') { | ||
| close(); | ||
| e.preventDefault(); | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <svelte:window on:keydown="{handleKeydown}" /> | ||
|
|
||
| <div class="flex flex-col w-full h-full shadow-pageheader"> | ||
| <div class="flex flex-row w-full h-fit px-5 pt-4" class:pb-3.5="{inProgress}" class:pb-4="{!inProgress}"> | ||
| <div class="flex flex-col w-full h-fit"> | ||
| {#if showBreadcrumb} | ||
| <div class="flex flew-row items-center text-sm text-[var(--pd-content-breadcrumb)]"> | ||
| {#if breadcrumbLeftPart} | ||
| <Link aria-label="back" on:click="{breadcrumbClick}" title="{breadcrumbTitle}">{breadcrumbLeftPart}</Link> | ||
| {/if} | ||
| {#if breadcrumbRightPart} | ||
| <div class="mx-2">></div> | ||
| <div class="grow font-extralight" aria-label="name">{breadcrumbRightPart}</div> | ||
| {/if} | ||
| <CloseButton class="justify-self-end" on:click="{close}" /> | ||
| </div> | ||
| {/if} | ||
| <div class="flex flex-row items-center pt-1"> | ||
| {#if $$slots.icon} | ||
| <div class="pr-3 text-[var(--pd-content-header-icon)]"> | ||
| <slot name="icon" /> | ||
| </div> | ||
| {/if} | ||
| <h1 aria-label="{title}" class="grow text-xl first-letter:uppercase text-[var(--pd-content-header)]"> | ||
| {title} | ||
| </h1> | ||
| <div class="flex items-center space-x-3"> | ||
| {#if $$slots.actions} | ||
| <div class="flex flex-nowrap justify-self-end pl-3 space-x-2"> | ||
| <slot name="actions" /> | ||
| </div> | ||
| {/if} | ||
| {#if !showBreadcrumb} | ||
| <CloseButton class="justify-self-end" on:click="{close}" /> | ||
| {/if} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {#if inProgress} | ||
| <LinearProgress /> | ||
| {/if} | ||
| {#if $$slots.tabs} | ||
| <div class="flex flex-row px-2 border-b border-[var(--pd-content-divider)]"> | ||
| <slot name="tabs" /> | ||
| </div> | ||
| {/if} | ||
| <div class="flex w-full h-full bg-[var(--pd-content-bg)] overflow-auto"> | ||
| <slot name="content" /> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <script lang="ts"> | ||
| import FormPage from './FormPage.svelte'; | ||
| </script> | ||
|
|
||
| <FormPage title="Test component" showBreadcrumb="{false}"> | ||
| <i slot="icon" class="fas fa-lightbulb fa-2x" aria-label="icon"></i> | ||
|
|
||
| <i slot="actions" class="fas fa-lightbulb fa-2x" aria-label="actions"></i> | ||
|
|
||
| <div slot="content" class="flex flex-col"> | ||
| <i class="fas fa-lightbulb fa-2x" aria-label="content"></i> | ||
| </div> | ||
| </FormPage> |