diff --git a/packages/renderer/src/lib/ui/DetailsPage.svelte b/packages/renderer/src/lib/ui/DetailsPage.svelte index e402d3f266b36..d3ea1ee6d4044 100644 --- a/packages/renderer/src/lib/ui/DetailsPage.svelte +++ b/packages/renderer/src/lib/ui/DetailsPage.svelte @@ -1,5 +1,5 @@ - - -
-
-
-
- {$lastPage.name} -
>
-
{$currentPage.name}
- -
-
-
- -
-
-
-

{title}

-
- {titleDetail} -
-
-
- {subtitle} - -
-
-
-
- -
-
-
- -
-
-
-
-
-
-
- -
-
- -
-
+ + + + + + + + diff --git a/packages/ui/package.json b/packages/ui/package.json index 020cb2d63f1f7..c9b31130b952e 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -107,6 +107,10 @@ "./SettingsNavItem": { "types": "./dist/settingsNavItem/SettingsNavItem.d.ts", "svelte": "./dist/settingsNavItem/SettingsNavItem.svelte" + }, + "./DetailsPage": { + "types": "./dist/layouts/DetailsPage.d.ts", + "svelte": "./dist/layouts/DetailsPage.svelte" } }, "peerDependencies": { diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts index 934dcce52c5cd..3db6ff0a874ba 100644 --- a/packages/ui/src/lib/index.ts +++ b/packages/ui/src/lib/index.ts @@ -23,6 +23,7 @@ import Checkbox from './checkbox/Checkbox.svelte'; import DropdownMenu from './dropdownMenu'; import Input from './inputs/Input.svelte'; import SearchInput from './inputs/SearchInput.svelte'; +import DetailsPage from './layouts/DetailsPage.svelte'; import FormPage from './layouts/FormPage.svelte'; import NavPage from './layouts/NavPage.svelte'; import Link from './link/Link.svelte'; @@ -45,6 +46,7 @@ export { Button, Checkbox, CloseButton, + DetailsPage, DropdownMenu, EmptyScreen, ErrorMessage, diff --git a/packages/ui/src/lib/layouts/DetailsPage.spec.ts b/packages/ui/src/lib/layouts/DetailsPage.spec.ts new file mode 100644 index 0000000000000..83af54e7610bb --- /dev/null +++ b/packages/ui/src/lib/layouts/DetailsPage.spec.ts @@ -0,0 +1,111 @@ +/********************************************************************** + * Copyright (C) 2023-2024, 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, render, screen } from '@testing-library/svelte'; +import userEvent from '@testing-library/user-event'; +import { beforeEach, expect, test, vi } from 'vitest'; + +import DetailsPage from './DetailsPage.svelte'; + +beforeEach(() => { + vi.clearAllMocks(); +}); + +test('Expect title is defined', async () => { + const title = 'My Dummy Title'; + render(DetailsPage, { + title, + }); + + const titleElement = screen.getByRole('heading', { level: 1, name: title }); + expect(titleElement).toBeInTheDocument(); + expect(titleElement).toHaveTextContent(title); +}); + +test('Expect name is defined', async () => { + const name = 'My Dummy Name'; + render(DetailsPage, { + 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(DetailsPage, { + title: 'No Title', + breadcrumbLeftPart: backName, + }); + 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(DetailsPage, { + title: 'No Title', + }); + comp.component.$on('close', closeClickMock); + + const closeElement = screen.getByTitle('Close'); + expect(closeElement).toBeInTheDocument(); + await fireEvent.click(closeElement); + + expect(closeClickMock).toHaveBeenCalled(); +}); + +test('Expect Escape key closes', async () => { + const closeClickMock = vi.fn(); + const comp = render(DetailsPage, { + title: 'No Title', + }); + comp.component.$on('close', closeClickMock); + + await userEvent.keyboard('{Escape}'); + + expect(closeClickMock).toHaveBeenCalled(); +}); + +test('Expect subtitle is defined and cut', async () => { + const subtitle = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'; + render(DetailsPage, { + title: '', + subtitle, + }); + + // get the element having the 'Lorem ipsum' text + const subtitleElement = screen.getByText(subtitle); + expect(subtitleElement).toBeInTheDocument(); + + // expect class has the clamp + expect(subtitleElement).toHaveClass('line-clamp-1'); +}); diff --git a/packages/ui/src/lib/layouts/DetailsPage.svelte b/packages/ui/src/lib/layouts/DetailsPage.svelte new file mode 100644 index 0000000000000..3858bf9978720 --- /dev/null +++ b/packages/ui/src/lib/layouts/DetailsPage.svelte @@ -0,0 +1,89 @@ + + + + +
+
+
+
+ {#if breadcrumbLeftPart} + {breadcrumbLeftPart} + {/if} + {#if breadcrumbRightPart} +
>
+
{breadcrumbRightPart}
+ {/if} + +
+
+
+ +
+
+
+

{title}

+
+ {titleDetail} +
+
+
+ {subtitle} + +
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+ +
+
+ +
+