From 1f1eb7686728d32d7397536b6f23feb1c3123ef5 Mon Sep 17 00:00:00 2001 From: Mateusz Bacherycz Date: Thu, 20 Feb 2025 16:29:08 +0100 Subject: [PATCH] chore: replace inboxItems with dialogList --- packages/frontend/src/api/useDialogs.tsx | 45 +++-- .../src/components/InboxItem/InboxItem.tsx | 5 +- .../PageLayout/Accounts/badge.spec.ts | 15 +- .../useSearchAutocompleteDialogs.spec.ts | 11 +- packages/frontend/src/i18n/resources/en.json | 1 + packages/frontend/src/i18n/resources/nb.json | 1 + packages/frontend/src/pages/Inbox/Inbox.tsx | 68 ++------ .../src/pages/Inbox/useGroupedDialogs.tsx | 159 +++++++++++++++--- packages/frontend/tests/stories/common.ts | 4 +- .../tests/stories/dateInput2024.spec.ts | 8 +- .../tests/stories/loginPartyContext.spec.ts | 6 +- .../tests/stories/searchSenders.spec.ts | 22 +-- 12 files changed, 219 insertions(+), 126 deletions(-) diff --git a/packages/frontend/src/api/useDialogs.tsx b/packages/frontend/src/api/useDialogs.tsx index 2403622af..9411a9ac6 100644 --- a/packages/frontend/src/api/useDialogs.tsx +++ b/packages/frontend/src/api/useDialogs.tsx @@ -10,6 +10,7 @@ import { type SearchDialogFieldsFragment, SystemLabel, } from 'bff-types-generated'; +import { t } from 'i18next'; import type { InboxItemInput, InboxItemMetaField, InboxItemMetaFieldType } from '../components'; import { QUERY_KEYS } from '../constants/queryKeys.ts'; import { i18n } from '../i18n/config.ts'; @@ -49,6 +50,10 @@ export function mapDialogToToInboxItem( const serviceOwner = getOrganization(organizations || [], item.org, 'nb'); const isSeenByEndUser = item.seenSinceLastUpdate.find((seenLogEntry) => seenLogEntry.isCurrentEndUser) !== undefined; + + const { isSeenByYou, seenByOthersCount } = getSeenByLabel(item.seenSinceLastUpdate); + + const seenByLabel = `${t('word.seenBy')} ${isSeenByYou ? t('word.you') : ''} ${seenByOthersCount > 0 ? ' + ' + seenByOthersCount : ''}`; return { id: item.id, party: item.party, @@ -63,13 +68,16 @@ export function mapDialogToToInboxItem( name: actualReceiverParty?.name ?? dialogReceiverSubParty?.name ?? '', isCompany: actualReceiverParty?.partyType === 'Organization', }, - metaFields: getMetaFields(item, isSeenByEndUser), + guiAttachmentCount: item.guiAttachmentCount ?? 0, createdAt: item.createdAt, updatedAt: item.updatedAt, status: item.status ?? 'UnknownStatus', isSeenByEndUser, label: item.systemLabel, org: item.org, + seenByLabel: seenByLabel, + seenByOthersCount: seenByOthersCount, + viewType: getViewType(item), }; }); } @@ -98,6 +106,17 @@ export function mapAutocompleteDialogsDtoToInboxItem( }); } +interface SeenByItem { + isCurrentEndUser: boolean; +} + +export const getSeenByLabel = (seenBy: SeenByItem[]): { isSeenByYou: boolean; seenByOthersCount: number } => { + const isSeenByYou = seenBy?.some((item) => item.isCurrentEndUser === true); + const seenByOthersCount = seenBy?.filter((item) => item.isCurrentEndUser === false).length; + + return { isSeenByYou, seenByOthersCount }; +}; + export const searchDialogs = ( partyURIs: string[], search: string | undefined, @@ -131,24 +150,25 @@ export const flattenParties = (partiesToUse: PartyFieldsFragment[]) => { return [...partyURIs, ...subPartyURIs] as string[]; }; -export const isBinDialog = (dialog: InboxItemInput): boolean => dialog.label === SystemLabel.Bin; +export const isBinDialog = (dialog: SearchDialogFieldsFragment): boolean => dialog.systemLabel === SystemLabel.Bin; -export const isArchivedDialog = (dialog: InboxItemInput): boolean => dialog.label === SystemLabel.Archive; +export const isArchivedDialog = (dialog: SearchDialogFieldsFragment): boolean => + dialog.systemLabel === SystemLabel.Archive; -export const isInboxDialog = (dialog: InboxItemInput): boolean => +export const isInboxDialog = (dialog: SearchDialogFieldsFragment): boolean => !isBinDialog(dialog) && !isArchivedDialog(dialog) && [DialogStatus.New, DialogStatus.InProgress, DialogStatus.RequiresAttention, DialogStatus.Completed].includes( dialog.status, ); -export const isDraftDialog = (dialog: InboxItemInput): boolean => +export const isDraftDialog = (dialog: SearchDialogFieldsFragment): boolean => !isBinDialog(dialog) && !isArchivedDialog(dialog) && dialog.status === DialogStatus.Draft; -export const isSentDialog = (dialog: InboxItemInput): boolean => +export const isSentDialog = (dialog: SearchDialogFieldsFragment): boolean => !isBinDialog(dialog) && !isArchivedDialog(dialog) && dialog.status === DialogStatus.Sent; -export const getViewType = (dialog: InboxItemInput): InboxViewType => { +export const getViewType = (dialog: SearchDialogFieldsFragment): InboxViewType => { if (isDraftDialog(dialog)) { return 'drafts'; } @@ -167,7 +187,6 @@ export const getViewType = (dialog: InboxItemInput): InboxViewType => { export const useDialogs = (parties: PartyFieldsFragment[]): UseDialogsOutput => { const { organizations } = useOrganizations(); const { selectedParties } = useParties(); - const partiesToUse = parties ? parties : selectedParties; const mergedPartiesWithSubParties = flattenParties(partiesToUse); @@ -186,11 +205,11 @@ export const useDialogs = (parties: PartyFieldsFragment[]): UseDialogsOutput => isSuccess, dialogs, dialogsByView: { - inbox: dialogs.filter(isInboxDialog), - drafts: dialogs.filter(isDraftDialog), - sent: dialogs.filter(isSentDialog), - archive: dialogs.filter(isArchivedDialog), - bin: dialogs.filter(isBinDialog), + inbox: dialogs.filter((dialog) => dialog.viewType === 'inbox'), + drafts: dialogs.filter((dialog) => dialog.viewType === 'drafts'), + sent: dialogs.filter((dialog) => dialog.viewType === 'sent'), + archive: dialogs.filter((dialog) => dialog.viewType === 'archive'), + bin: dialogs.filter((dialog) => dialog.viewType === 'bin'), }, dialogCountInconclusive: data?.searchDialogs?.hasNextPage === true || data?.searchDialogs?.items === null, }; diff --git a/packages/frontend/src/components/InboxItem/InboxItem.tsx b/packages/frontend/src/components/InboxItem/InboxItem.tsx index dab895aff..14d3d3d40 100644 --- a/packages/frontend/src/components/InboxItem/InboxItem.tsx +++ b/packages/frontend/src/components/InboxItem/InboxItem.tsx @@ -38,13 +38,16 @@ export interface InboxItemInput { summary: string; sender: Participant; receiver: Participant; - metaFields: InboxItemMetaField[]; createdAt: string; updatedAt: string; status: DialogStatus; isSeenByEndUser: boolean; label: SystemLabel; org?: string; + guiAttachmentCount: number; + seenByOthersCount: number; + seenByLabel: string; + viewType: InboxViewType; } export const OptionalLinkContent = ({ diff --git a/packages/frontend/src/components/PageLayout/Accounts/badge.spec.ts b/packages/frontend/src/components/PageLayout/Accounts/badge.spec.ts index 1a9c21595..38001e394 100644 --- a/packages/frontend/src/components/PageLayout/Accounts/badge.spec.ts +++ b/packages/frontend/src/components/PageLayout/Accounts/badge.spec.ts @@ -19,12 +19,15 @@ describe('getCountBadge', () => { name: '', isCompany: true, }, - metaFields: [], createdAt: '', updatedAt: '', status: DialogStatus.Completed, isSeenByEndUser: false, label: SystemLabel.Default, + guiAttachmentCount: 0, + seenByOthersCount: 0, + seenByLabel: '', + viewType: 'inbox', }, { party: 'subParty1', @@ -40,12 +43,15 @@ describe('getCountBadge', () => { name: '', isCompany: true, }, - metaFields: [], createdAt: '', updatedAt: '', status: DialogStatus.Completed, isSeenByEndUser: false, label: SystemLabel.Default, + guiAttachmentCount: 0, + seenByOthersCount: 0, + seenByLabel: '', + viewType: 'inbox', }, { party: 'party2', @@ -61,12 +67,15 @@ describe('getCountBadge', () => { name: '', isCompany: true, }, - metaFields: [], createdAt: '', updatedAt: '', status: DialogStatus.Completed, isSeenByEndUser: false, label: SystemLabel.Default, + guiAttachmentCount: 0, + seenByOthersCount: 0, + seenByLabel: '', + viewType: 'inbox', }, ]; diff --git a/packages/frontend/src/components/PageLayout/Search/useSearchAutocompleteDialogs.spec.ts b/packages/frontend/src/components/PageLayout/Search/useSearchAutocompleteDialogs.spec.ts index 1e66a28ea..35198d721 100644 --- a/packages/frontend/src/components/PageLayout/Search/useSearchAutocompleteDialogs.spec.ts +++ b/packages/frontend/src/components/PageLayout/Search/useSearchAutocompleteDialogs.spec.ts @@ -38,6 +38,10 @@ describe('generateSendersAutocompleteBySearchString', () => { isSeenByEndUser: false, label: 'DEFAULT', org: 'skd', + guiAttachmentCount: 1, + seenByOthersCount: 0, + seenByLabel: 'Sett av deg', + viewType: 'DEFAULT', }, { id: '019241f7-812c-71c8-8e68-94a0b771fa10', @@ -72,11 +76,14 @@ describe('generateSendersAutocompleteBySearchString', () => { }, ], createdAt: '2023-05-17T09:30:00.000Z', - updatedAt: '2023-05-17T09:30:00.000Z', + org: 'ssb', + guiAttachmentCount: 1, + seenByOthersCount: 1, + seenByLabel: 'Sett av deg', + viewType: 'DEFAULT', status: 'REQUIRES_ATTENTION', isSeenByEndUser: true, label: 'DEFAULT', - org: 'ssb', }, ]; diff --git a/packages/frontend/src/i18n/resources/en.json b/packages/frontend/src/i18n/resources/en.json index 65cd71e74..b7012b754 100644 --- a/packages/frontend/src/i18n/resources/en.json +++ b/packages/frontend/src/i18n/resources/en.json @@ -15,6 +15,7 @@ "dialog.toolbar.toast.move_to_bin_success": "Moved to bin", "dialog.toolbar.toast.move_to_inbox_failed": "Failed to move to inbox", "dialog.toolbar.toast.move_to_inbox_success": "Moved to inbox", + "dialog.imageAltURL": "Company logo for {companyName}", "dialogs.attachment_count": "{count, plural, one {# attachment} other {# attachments}}", "editSavedSearch.give_search_name": "Name the search", "editSavedSearch.save_and_close": "Save and close", diff --git a/packages/frontend/src/i18n/resources/nb.json b/packages/frontend/src/i18n/resources/nb.json index b05d05fd2..52cf4d103 100644 --- a/packages/frontend/src/i18n/resources/nb.json +++ b/packages/frontend/src/i18n/resources/nb.json @@ -15,6 +15,7 @@ "dialog.toolbar.toast.move_to_bin_success": "Flyttet til papirkurv", "dialog.toolbar.toast.move_to_inbox_failed": "Flytting til innboks feilet", "dialog.toolbar.toast.move_to_inbox_success": "Flyttet til innboks", + "dialog.imageAltURL": "Selskapets logo for {companyName}", "dialogs.attachment_count": "{count, plural, one {# vedlegg} other {# vedlegg}}", "editSavedSearch.give_search_name": "Gi søket et navn", "editSavedSearch.save_and_close": "Lagre og avslutt", diff --git a/packages/frontend/src/pages/Inbox/Inbox.tsx b/packages/frontend/src/pages/Inbox/Inbox.tsx index 4fa6cb042..1d4bda263 100644 --- a/packages/frontend/src/pages/Inbox/Inbox.tsx +++ b/packages/frontend/src/pages/Inbox/Inbox.tsx @@ -1,16 +1,13 @@ -import { Toolbar } from '@altinn/altinn-components'; +import { DialogList, Section, Toolbar } from '@altinn/altinn-components'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { useLocation, useSearchParams } from 'react-router-dom'; +import { useSearchParams } from 'react-router-dom'; import { type InboxViewType, useDialogs } from '../../api/useDialogs.tsx'; import { useParties } from '../../api/useParties.ts'; -import { InboxItem, InboxItems, useSelectedDialogs } from '../../components'; -import { InboxItemsHeader } from '../../components/InboxItem/InboxItemsHeader.tsx'; import { useAccounts } from '../../components/PageLayout/Accounts/useAccounts.tsx'; import { useSearchDialogs, useSearchString } from '../../components/PageLayout/Search/'; import { SaveSearchButton } from '../../components/SavedSearchButton/SaveSearchButton.tsx'; import { PageRoutes } from '../routes.ts'; -import { InboxSkeleton } from './InboxSkeleton.tsx'; import { filterDialogs } from './filters.ts'; import styles from './inbox.module.css'; import { useFilters } from './useFilters.tsx'; @@ -21,9 +18,7 @@ interface InboxProps { } export const Inbox = ({ viewType }: InboxProps) => { - const location = useLocation(); const { t } = useTranslation(); - const { selectedItems, setSelectedItems } = useSelectedDialogs(); const { selectedParties, allOrganizationsSelected, parties, partiesEmptyList } = useParties(); const [searchParams] = useSearchParams(); const searchBarParam = new URLSearchParams(searchParams); @@ -43,6 +38,7 @@ export const Inbox = ({ viewType }: InboxProps) => { parties: selectedParties, searchValue: enteredSearchValue, }); + const { accounts, selectedAccount, accountSearch, accountGroups, onSelectAccount } = useAccounts({ parties, selectedParties, @@ -55,20 +51,17 @@ export const Inbox = ({ viewType }: InboxProps) => { const dataSource = displaySearchResults ? searchResults : dialogsForView; const { filterState, filters, onFiltersChange, getFilterLabel } = useFilters({ dialogs: dataSource }); const filteredItems = useMemo(() => filterDialogs(dataSource, filterState), [dataSource, filterState]); - const dialogsGroupedByCategory = useGroupedDialogs({ + + const isLoading = !isSuccessDialogs || isFetchingSearchResults || isLoadingDialogs; + + const { mappedGroupedDialogs, groups } = useGroupedDialogs({ items: filteredItems, displaySearchResults, filters: filterState, viewType, + isLoading, }); - const handleCheckedChange = (checkboxValue: string, checked: boolean) => { - setSelectedItems((prev: Record) => ({ - ...prev, - [checkboxValue]: checked, - })); - }; - if (partiesEmptyList) { return (
@@ -77,10 +70,6 @@ export const Inbox = ({ viewType }: InboxProps) => { ); } - if (!isSuccessDialogs || isFetchingSearchResults || isLoadingDialogs) { - return ; - } - const savedSearchDisabled = !Object.keys(filterState)?.length && Object.values(filterState).every((item) => item?.values?.length === 0) && @@ -112,42 +101,11 @@ export const Inbox = ({ viewType }: InboxProps) => { ) : null} -
- {dialogsGroupedByCategory.map(({ id, label, items }) => { - const hideSelectAll = items.every((item) => selectedItems[item.id]); - return ( - - { - const newItems = Object.fromEntries(items.map((item) => [item.id, true])); - setSelectedItems({ - ...selectedItems, - ...newItems, - }); - }} - title={label} - /> - {items.map((item) => ( - handleCheckedChange(item.id, checked)} - metaFields={item.metaFields} - viewType={viewType} - linkTo={`/inbox/${item.id}/${location.search}`} - /> - ))} - - ); - })} -
+
+ {!filteredItems.length &&

{t(`inbox.heading.title.${viewType}`, { count: 0 })}

} + + +
); }; diff --git a/packages/frontend/src/pages/Inbox/useGroupedDialogs.tsx b/packages/frontend/src/pages/Inbox/useGroupedDialogs.tsx index d2812a253..c51920576 100644 --- a/packages/frontend/src/pages/Inbox/useGroupedDialogs.tsx +++ b/packages/frontend/src/pages/Inbox/useGroupedDialogs.tsx @@ -1,66 +1,169 @@ -import type { FilterState } from '@altinn/altinn-components/dist/types/lib/components/Toolbar/Toolbar'; +import type { + DialogListGroupProps, + DialogListItemProps, + DialogListItemState, + DialogStatusValue, + FilterState, +} from '@altinn/altinn-components'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { type InboxViewType, getViewType } from '../../api/useDialogs.tsx'; +import { Link, type LinkProps } from 'react-router-dom'; +import type { InboxViewType } from '../../api/useDialogs.tsx'; import type { InboxItemInput } from '../../components'; import { useFormat } from '../../i18n/useDateFnsLocale.tsx'; -interface DialogCategory { +interface GroupedItem { + id: string | number; label: string; - id: string; items: InboxItemInput[]; } +interface UseGroupedDialogsOutput { + mappedGroupedDialogs: DialogListItemProps[]; + groups?: Record; +} + interface UseGroupedDialogsProps { items: InboxItemInput[]; filters: FilterState; displaySearchResults: boolean; viewType: InboxViewType; + isLoading: boolean; } -const useGroupedDialogs = ({ items, displaySearchResults, viewType }: UseGroupedDialogsProps): DialogCategory[] => { +const renderLoadingItems = (size: number): DialogListItemProps[] => { + return Array.from({ length: size }, (_, index) => { + const randomTitle = Math.random() + .toString(2) + .substring(2, 9 + Math.floor(Math.random() * 7)); + const randomDescription = Math.random() + .toString(2) + .substring(2, 10 + Math.floor(Math.random() * 21)); + return { + groupId: 'loading', + title: randomTitle, + id: `${index}`, + summary: randomDescription, + state: 'normal', + loading: true, + }; + }); +}; + +const getDialogState = (viewType: InboxViewType): DialogListItemState => { + switch (viewType) { + case 'archive': + return 'archived'; + case 'bin': + return 'trashed'; + default: + return 'normal'; + } +}; + +const useGroupedDialogs = ({ + items, + displaySearchResults, + viewType, + isLoading, +}: UseGroupedDialogsProps): UseGroupedDialogsOutput => { const { t } = useTranslation(); const format = useFormat(); - // biome-ignore lint/correctness/useExhaustiveDependencies: + const clockPrefix = t('word.clock_prefix'); + const formatString = `do MMMM yyyy ${clockPrefix ? `'${clockPrefix}' ` : ''}HH.mm`; + + const allWithinSameYear = items.every((d) => new Date(d.updatedAt).getFullYear() === new Date().getFullYear()); + const isNotInbox = items.every((d) => ['drafts', 'sent', 'bin', 'archive'].includes(d.viewType)); + + const formatDialogItem = (item: InboxItemInput, groupId: string): DialogListItemProps => ({ + groupId, + title: item.title, + id: item.id, + sender: { + name: item.sender.name, + type: item.sender.isCompany ? 'company' : 'person', + imageUrl: item.sender.imageURL, + imageUrlAlt: t('dialog.imageAltURL', { companyName: item.sender.name }), + }, + summary: item.summary, + state: getDialogState(viewType), + recipient: { + name: item.receiver.name, + type: item.receiver.isCompany ? 'company' : 'person', + imageUrl: item.receiver.imageURL!, + imageUrlAlt: t('dialog.imageAltURL', { companyName: item.receiver.name }), + }, + attachmentsCount: item.guiAttachmentCount, + seenBy: { + seenByEndUser: item.isSeenByEndUser, + seenByOthersCount: item.seenByOthersCount, + label: item.seenByLabel, + }, + status: { + label: t(`filter.query.${item.status.replace(/-/g, '_').toLowerCase()}`), + value: status.replace(/-/g, '_').toLowerCase() as unknown as DialogStatusValue, + }, + seen: item.isSeenByEndUser, + updatedAt: item.updatedAt, + updatedAtLabel: format(item.updatedAt, formatString), + as: (props: LinkProps) => ( + + ), + }); + return useMemo(() => { - const allWithinSameYear = items.every((d) => new Date(d.updatedAt).getFullYear() === new Date().getFullYear()); - const youAreNotInInbox = items.every((d) => ['drafts', 'sent', 'bin', 'archive'].includes(getViewType(d))); - - if (!displaySearchResults && youAreNotInInbox) { - return [ - { - label: t(`inbox.heading.title.${viewType}`, { count: items.length }), - id: viewType, - items, + if (isLoading) { + return { + mappedGroupedDialogs: renderLoadingItems(5), + groups: { + loading: { title: t(`word.loading`) }, }, - ]; + }; } - return items.reduce((acc: DialogCategory[], item, _, list) => { + if (!displaySearchResults && isNotInbox) { + return { + mappedGroupedDialogs: items.map((item) => formatDialogItem(item, viewType)), + groups: { + [viewType]: { title: t(`inbox.heading.title.${viewType}`, { count: items.length }) }, + }, + }; + } + + const groupedItems = items.reduce((acc, item, _, list) => { const createdAt = new Date(item.createdAt); - const viewType = getViewType(item); - const key = displaySearchResults - ? viewType + + const groupKey = displaySearchResults + ? item.viewType : allWithinSameYear ? format(createdAt, 'LLLL') : format(createdAt, 'yyyy'); const label = displaySearchResults - ? t(`inbox.heading.search_results.${key}`, { count: list.filter((i) => getViewType(i) === key).length }) - : key; + ? t(`inbox.heading.search_results.${groupKey}`, { + count: list.filter((i) => i.viewType === groupKey).length, + }) + : groupKey; - const existingCategory = acc.find((c) => c.id === key); - - if (existingCategory) { - existingCategory.items.push(item); + const existingGroup = acc.find((group) => group.id === groupKey); + if (existingGroup) { + existingGroup.items.push(item); } else { - acc.push({ label, id: key, items: [item] }); + acc.push({ id: groupKey, label, items: [item] }); } return acc; }, []); - }, [items, displaySearchResults]); + + const groups = Object.fromEntries(groupedItems.map(({ id, label }) => [id, { title: label }])); + + const mappedGroupedDialogs = groupedItems.flatMap(({ id, items }) => + items.map((item) => formatDialogItem(item, id.toString())), + ); + + return { mappedGroupedDialogs, groups }; + }, [items, displaySearchResults, t, format, isNotInbox, viewType, allWithinSameYear]); }; export default useGroupedDialogs; diff --git a/packages/frontend/tests/stories/common.ts b/packages/frontend/tests/stories/common.ts index bf8054e49..baeef7d1d 100644 --- a/packages/frontend/tests/stories/common.ts +++ b/packages/frontend/tests/stories/common.ts @@ -31,9 +31,9 @@ export async function selectDialogBySearch(page, query: string, itemLabel: strin await searchbarInput.fill(query); if (endGameAction === 'click') { - await page.getByLabel(itemLabel).click(); + await page.getByRole('banner').getByRole('link', { name: itemLabel }).click(); } else if (endGameAction === 'enter') { - await page.getByLabel(itemLabel).hover(); + await page.getByRole('banner').getByRole('link', { name: itemLabel }).hover(); await page.keyboard.press('Enter'); } } diff --git a/packages/frontend/tests/stories/dateInput2024.spec.ts b/packages/frontend/tests/stories/dateInput2024.spec.ts index 9cf1a4beb..96f6cbd9a 100644 --- a/packages/frontend/tests/stories/dateInput2024.spec.ts +++ b/packages/frontend/tests/stories/dateInput2024.spec.ts @@ -11,12 +11,8 @@ test.describe('Date filter, system date set 2024', () => { }); test('Dialog with mocked system date and scenario data visable', async ({ page }) => { - await expect(page.getByRole('link', { name: 'Mocked system date Dec 31, 2024' })).toBeVisible(); - await expect( - page.getByRole('link', { - name: 'Melding om bortkjøring av snø i 2024 Oslo kommune til Test Testesen Melding om', - }), - ).toBeVisible(); + await expect(page.getByRole('link', { name: 'Mocked system date Dec 31,' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'Melding om bortkjøring av snø i' })).toBeVisible(); }); test('Date filter - quick filters functionality', async ({ page }) => { diff --git a/packages/frontend/tests/stories/loginPartyContext.spec.ts b/packages/frontend/tests/stories/loginPartyContext.spec.ts index 5ed511073..39a2a12e4 100644 --- a/packages/frontend/tests/stories/loginPartyContext.spec.ts +++ b/packages/frontend/tests/stories/loginPartyContext.spec.ts @@ -65,11 +65,7 @@ test.describe('LoginPartyContext', () => { await expect(page.getByRole('link', { name: 'Skatten din for 2022' })).not.toBeVisible(); await expect(page.getByRole('link', { name: 'This is a message 1 for Firma AS' })).toBeVisible(); - await expect( - page.getByRole('link', { - name: 'This is a message 1 for Testbedrift AS Oslo kommune til Testbedrift AS Message', - }), - ).toBeVisible(); + await expect(page.getByRole('link', { name: 'This is a message 1 for Testbedrift AS', exact: true })).toBeVisible(); await expect( page.getByRole('link', { name: 'This is a message 1 for Testbedrift AS sub party AVD SUB' }), ).toBeVisible(); diff --git a/packages/frontend/tests/stories/searchSenders.spec.ts b/packages/frontend/tests/stories/searchSenders.spec.ts index da5020f44..ab2cab1e5 100644 --- a/packages/frontend/tests/stories/searchSenders.spec.ts +++ b/packages/frontend/tests/stories/searchSenders.spec.ts @@ -43,8 +43,8 @@ test.describe('Search suggests with senders', () => { await expect(page.getByRole('link', { name: 'test1 NAV Arbeids- og' })).not.toBeVisible(); - await expect(page.getByRole('link', { name: 'test1 skatt Skatteetaten til' })).toBeVisible(); - await expect(page.getByRole('link', { name: 'test2 skatt Skatteetaten til' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'test1 skatt' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'test2 skatt' })).toBeVisible(); }); test('Selecting sender and value filters data correctly', async ({ page }) => { @@ -56,10 +56,10 @@ test.describe('Search suggests with senders', () => { await page.getByRole('button', { name: 'Skatteetaten' }).click(); await expect(page).toHaveURL(`${defaultAppURL}&playwrightId=search-sender&search=test1&org=skd`); - await expect(page.getByRole('link', { name: 'test1 skatt Skatteetaten til' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'test1 skatt' })).toBeVisible(); - await expect(page.getByRole('link', { name: 'test1 NAV Arbeids- og' })).not.toBeVisible(); - await expect(page.getByRole('link', { name: 'test2 skatt Skatteetaten til' })).not.toBeVisible(); + await expect(page.getByRole('link', { name: 'test1 NAV' })).not.toBeVisible(); + await expect(page.getByRole('link', { name: 'test2 skatt' })).not.toBeVisible(); }); test('Clear button removes search parasm and display data', async ({ page }) => { @@ -71,15 +71,15 @@ test.describe('Search suggests with senders', () => { await page.getByRole('button', { name: 'Skatteetaten' }).click(); await expect(page).toHaveURL(`${defaultAppURL}&playwrightId=search-sender&search=test1&org=skd`); - await expect(page.getByRole('link', { name: 'test1 skatt Skatteetaten til' })).toBeVisible(); - await expect(page.getByRole('link', { name: 'test1 NAV Arbeids- og' })).not.toBeVisible(); - await expect(page.getByRole('link', { name: 'test2 skatt Skatteetaten til' })).not.toBeVisible(); + await expect(page.getByRole('link', { name: 'test1 skatt' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'test1 NAV' })).not.toBeVisible(); + await expect(page.getByRole('link', { name: 'test2 skatt' })).not.toBeVisible(); await page.getByTestId('search-button-clear').click(); await expect(page).toHaveURL(`${defaultAppURL}&playwrightId=search-sender`); - await expect(page.getByRole('link', { name: 'test1 skatt Skatteetaten til' })).toBeVisible(); - await expect(page.getByRole('link', { name: 'test1 NAV Arbeids- og' })).toBeVisible(); - await expect(page.getByRole('link', { name: 'test2 skatt Skatteetaten til' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'test1 skatt' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'test1 NAV' })).toBeVisible(); + await expect(page.getByRole('link', { name: 'test2 skatt' })).toBeVisible(); }); });