|
| 1 | +/** |
| 2 | + * ObjectUI |
| 3 | + * Copyright (c) 2024-present ObjectStack Inc. |
| 4 | + * |
| 5 | + * This source code is licensed under the MIT license found in the |
| 6 | + * LICENSE file in the root directory of this source tree. |
| 7 | + */ |
| 8 | + |
| 9 | +/** |
| 10 | + * After a decision, the approval request page must not tell two stories |
| 11 | + * (objectstack#27502, ruling record 6499914328). The page's highlights read the |
| 12 | + * REQUEST row, whose status moves to approved; the decision panel's summary |
| 13 | + * reads the request's `payload`, the target record as it was SUBMITTED, which |
| 14 | + * keeps its submitted status (objectstack#10749, ruling record 5377367175: the |
| 15 | + * snapshot is kept as the evidence of what was submitted). So the summary is |
| 16 | + * labelled as the submitted values: a section whose accessible name is the |
| 17 | + * pack's `approvalsInbox.snapshotAsSubmitted` row, holding the snapshot's own |
| 18 | + * values. |
| 19 | + * |
| 20 | + * The rows are in the shape the approvals get serves the request page after a |
| 21 | + * reload: a decided request, its snapshot still at submission. The declared |
| 22 | + * actions bar is doubled: what is under test is the summary's label. |
| 23 | + */ |
| 24 | + |
| 25 | +import * as React from 'react'; |
| 26 | +import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'; |
| 27 | +import { cleanup, render, screen, waitFor, within } from '@testing-library/react'; |
| 28 | + |
| 29 | +vi.mock('../DeclaredActionsBar.js', () => ({ |
| 30 | + DeclaredActionsBar: () => <div data-testid="declared-actions-probe" />, |
| 31 | +})); |
| 32 | + |
| 33 | +import { MetadataCtx, RecordContextProvider } from '@object-ui/react'; |
| 34 | +import { createI18n, I18nProvider } from '@object-ui/i18n'; |
| 35 | +import { builtInLocales } from '@object-ui/i18n/locales'; |
| 36 | +import { ApprovalDecisionRenderer } from './ApprovalDecisionPanel'; |
| 37 | +import { resetApproverDirectoryCache } from '../../hooks/useApproverDirectory'; |
| 38 | + |
| 39 | +const i18n = createI18n({ defaultLanguage: 'en', detectBrowserLanguage: false }); |
| 40 | + |
| 41 | +/** The heading's pack key, and what one pack says for it. */ |
| 42 | +const HEADING_KEY = 'approvalsInbox.snapshotAsSubmitted'; |
| 43 | +const packHeading = (language: string): unknown => |
| 44 | + HEADING_KEY.split('.').reduce<unknown>( |
| 45 | + (node, part) => (node as Record<string, unknown> | undefined)?.[part], |
| 46 | + (builtInLocales as Record<string, unknown>)[language], |
| 47 | + ); |
| 48 | + |
| 49 | +/** The pack row the heading must come from, rendered by the instance under test. */ |
| 50 | +const HEADING = String(i18n.t(HEADING_KEY)); |
| 51 | + |
| 52 | +const EXPENSE_REPORT = { |
| 53 | + name: 'showcase_expense_report', |
| 54 | + fields: { |
| 55 | + title: { type: 'text', label: 'Title' }, |
| 56 | + status: { |
| 57 | + type: 'select', |
| 58 | + label: 'Status', |
| 59 | + options: [ |
| 60 | + { value: 'submitted', label: 'Submitted' }, |
| 61 | + { value: 'approved', label: 'Approved' }, |
| 62 | + ], |
| 63 | + }, |
| 64 | + approved_amount: { type: 'currency', label: 'Approved' }, |
| 65 | + }, |
| 66 | +}; |
| 67 | + |
| 68 | +const seen: string[] = []; |
| 69 | +const metadata = { |
| 70 | + getItem: async (type: string, name: string) => { |
| 71 | + seen.push(`${type}:${name}`); |
| 72 | + return type === 'object' && name === EXPENSE_REPORT.name ? EXPENSE_REPORT : null; |
| 73 | + }, |
| 74 | +}; |
| 75 | + |
| 76 | +/** The target record as it was submitted: it does not move on a decision. */ |
| 77 | +const SUBMITTED = { title: 'EXP-DEMO', status: 'submitted', approved_amount: 0 }; |
| 78 | + |
| 79 | +function requestRow(status: string, payload: Record<string, unknown> = SUBMITTED): Record<string, unknown> { |
| 80 | + return { |
| 81 | + id: 'areq_27502', |
| 82 | + process_name: 'flow:showcase_expense_committee', |
| 83 | + object_name: EXPENSE_REPORT.name, |
| 84 | + record_id: 'rec_1', |
| 85 | + status, |
| 86 | + submitter_id: 'u_dev_admin', |
| 87 | + pending_approvers: status === 'pending' ? ['u_dev_admin'] : [], |
| 88 | + pending_approver_names: { u_dev_admin: 'Dev Admin' }, |
| 89 | + viewer: { can_act: status === 'pending', is_submitter: false, can_override: false }, |
| 90 | + payload, |
| 91 | + }; |
| 92 | +} |
| 93 | + |
| 94 | +beforeEach(() => { |
| 95 | + resetApproverDirectoryCache(); |
| 96 | + seen.length = 0; |
| 97 | +}); |
| 98 | + |
| 99 | +afterEach(() => { |
| 100 | + cleanup(); |
| 101 | +}); |
| 102 | + |
| 103 | +function mount(data: Record<string, unknown>): HTMLElement { |
| 104 | + render( |
| 105 | + <I18nProvider instance={i18n}> |
| 106 | + <MetadataCtx.Provider value={metadata as never}> |
| 107 | + <RecordContextProvider objectName="sys_approval_request" recordId={data.id as string} data={data}> |
| 108 | + <ApprovalDecisionRenderer /> |
| 109 | + </RecordContextProvider> |
| 110 | + </MetadataCtx.Provider> |
| 111 | + </I18nProvider>, |
| 112 | + ); |
| 113 | + return screen.getByTestId('approval-decision-panel'); |
| 114 | +} |
| 115 | + |
| 116 | +describe('ApprovalDecisionPanel — the summary is labelled as the submitted values (objectstack#27502)', () => { |
| 117 | + it('a decided request: the snapshot keeps its submitted status, under the heading, and nobody is waited on', async () => { |
| 118 | + const panel = mount(requestRow('approved')); |
| 119 | + const summary = await within(panel).findByTestId('record-snapshot-summary'); |
| 120 | + |
| 121 | + // The decided state the reload serves: nobody is waited on any more. |
| 122 | + expect(within(panel).queryByTestId('approval-decision-pending-approvers')).toBeNull(); |
| 123 | + // The summary is the region the heading names, and the heading is the pack row. |
| 124 | + expect(HEADING).not.toBe(HEADING_KEY); |
| 125 | + expect(within(panel).getByRole('region', { name: HEADING })).toBe(summary); |
| 126 | + expect(summary.querySelector('[data-summary-heading]')?.textContent).toBe(HEADING); |
| 127 | + // What the section holds is the snapshot as submitted, under the declared select field. |
| 128 | + const status = summary.querySelector('[data-summary-field="status"]'); |
| 129 | + expect(status?.textContent).toBe('StatusSubmitted'); |
| 130 | + }); |
| 131 | + |
| 132 | + it('a pending request carries the heading too: it names the source, not a status', async () => { |
| 133 | + const panel = mount(requestRow('pending')); |
| 134 | + const summary = await within(panel).findByTestId('record-snapshot-summary'); |
| 135 | + |
| 136 | + expect(within(panel).getByTestId('approval-decision-pending-approvers')).toBeTruthy(); |
| 137 | + expect(within(panel).getByRole('region', { name: HEADING })).toBe(summary); |
| 138 | + }); |
| 139 | + |
| 140 | + it('CONTROL: a summary that draws nothing draws no heading', async () => { |
| 141 | + // Only keys the object does not declare: the definition answers, and no row is drawn. |
| 142 | + const panel = mount(requestRow('approved', { legacy_note: 'x' })); |
| 143 | + |
| 144 | + await waitFor(() => expect(seen).toContain(`object:${EXPENSE_REPORT.name}`)); |
| 145 | + await new Promise((r) => setTimeout(r, 0)); |
| 146 | + expect(within(panel).queryByTestId('record-snapshot-summary')).toBeNull(); |
| 147 | + expect(within(panel).queryByText(HEADING)).toBeNull(); |
| 148 | + }); |
| 149 | + |
| 150 | + it('the heading copy is a key in all ten language packs', () => { |
| 151 | + const languages = Object.keys(builtInLocales); |
| 152 | + expect(languages).toHaveLength(10); |
| 153 | + for (const language of languages) { |
| 154 | + const value = packHeading(language); |
| 155 | + expect(typeof value, `${language} defines ${HEADING_KEY}`).toBe('string'); |
| 156 | + expect((value as string).trim(), `${language} defines ${HEADING_KEY}`).not.toBe(''); |
| 157 | + } |
| 158 | + }); |
| 159 | +}); |
![objectstack-fleet[bot]](https://avatars.githubusercontent.com/u/254823548?v=4&size=40){kind=avatar}
0 commit comments