@n8n/frontend-module-inbox 0.0.0-stage → 0.2.0

package/src/views/InboxView.test.ts

@@ -0,0 +1,568 @@
+import type {
+	DecideWorkflowReviewRequestResponse,
+	InboxSelfHealingItem,
+	InboxWorkflowReviewItem,
+	WorkflowReviewRequestDetail,
+} from '@n8n/api-types';
+import { createComponentRenderer, mockedStore, waitAllPromises } from '@n8n/frontend-test-utils';
+import { useSettingsStore } from '@n8n/stores/settings.store';
+import { createDeferredPromise } from '@n8n/utils/promise/deferred-promise';
+import { createTestingPinia } from '@pinia/testing';
+import { defineComponent, type PropType } from 'vue';
+import { createMemoryHistory, createRouter, RouterView } from 'vue-router';
+
+import type { InboxItemChange } from '../inbox.constants';
+import * as inboxApi from '../inbox.api';
+import { InboxModule } from '../inbox.module';
+import { createInboxListSlice, useInboxStore } from '../inbox.store';
+import { useReviewActivityStore } from '../reviews/reviewActivity.store';
+import { useReviewDetailStore } from '../reviews/reviewDetail.store';
+import * as reviewApi from '../reviews/workflowReviews.api';
+import InboxView from './InboxView.vue';
+
+vi.mock('../inbox.api');
+vi.mock('../reviews/workflowReviews.api');
+const { showError, showMessage } = vi.hoisted(() => ({
+	showError: vi.fn(),
+	showMessage: vi.fn(),
+}));
+vi.mock('@n8n/composables/useToast', () => ({
+	useToast: () => ({ showError, showMessage }),
+}));
+vi.mock('@n8n/composables/useDocumentTitle', () => ({
+	useDocumentTitle: () => ({ set: vi.fn() }),
+}));
+const detailMounted = vi.fn();
+let reportChange: (change: InboxItemChange) => void;
+const router = createRouter({
+	history: createMemoryHistory(),
+	routes: [
+		...(InboxModule.routes ?? []).map((route) =>
+			'component' in route ? { ...route, beforeEnter: undefined, component: InboxView } : route,
+		),
+		{ path: '/:pathMatch(.*)*', name: 'not-found', component: { template: '<div />' } },
+	],
+});
+const renderOptions = {
+	global: {
+		plugins: [router],
+		stubs: {
+			InboxList: {
+				props: ['sections', 'activeTab'],
+				template: `<div>
+     <button data-test-id="load-authored" @click="$emit('loadMore', 'authored')" />
+     <button data-test-id="refresh-waiting" @click="$emit('refreshSection', 'waiting')" />
+     <button data-test-id="retry-waiting" @click="$emit('retry', 'waiting')" />
+     <button data-test-id="select-review" @click="$emit('select', { type: 'workflow_review', id: 'req-1' })" />
+     <button data-test-id="select-other-review" @click="$emit('select', { type: 'workflow_review', id: 'req-2' })" />
+     <button data-test-id="select-result" @click="$emit('select', { type: 'self_healing_result', id: 'req-1', projectId: 'p1', workflowId: 'w1' })" />
+     <button data-test-id="clear-review" @click="$emit('clear')" />
+     <button data-test-id="select-closed-tab" @click="$emit('update:active-tab', 'closed')" />
+    </div>`,
+			},
+			WorkflowReviewDetail: defineComponent({
+				props: {
+					reviewId: { type: String, required: true },
+					listItem: { type: Object as PropType<InboxWorkflowReviewItem> },
+					tab: String,
+					onItemChange: {
+						type: Function as PropType<(change: InboxItemChange) => void>,
+						required: true,
+					},
+				},
+				emits: ['update:tab'],
+				setup(props) {
+					detailMounted(props.reviewId);
+					reportChange = props.onItemChange;
+				},
+				template: `<div data-test-id="review-detail" :data-id="reviewId" :data-tab="tab" :data-title="listItem?.title">
+    <button data-test-id="select-changes-tab" @click="$emit('update:tab', 'changes')" />
+    <button data-test-id="select-activity-tab" @click="$emit('update:tab', 'activity')" />
+    <slot v-if="!listItem" />
+    </div>`,
+			}),
+			SelfHealingResultDetail: {
+				props: ['selection'],
+				template: '<div data-test-id="result-detail" :data-id="selection.id" />',
+			},
+		},
+	},
+};
+const renderComponent = createComponentRenderer(InboxView, renderOptions);
+const renderRoutedComponent = createComponentRenderer(RouterView, renderOptions);
+
+let store: ReturnType<typeof mockedStore<typeof useInboxStore>>;
+beforeEach(async () => {
+	createTestingPinia();
+	vi.clearAllMocks();
+	await router.replace('/inbox');
+	await router.isReady();
+	mockedStore(useSettingsStore).settings.inbox = {
+		enabled: true,
+		availableTypes: ['workflow_review', 'self_healing_result'],
+		failedTypes: [],
+	};
+	store = mockedStore(useInboxStore);
+	store.refreshListAndSummary.mockResolvedValue(undefined);
+	store.fetchActiveTab.mockResolvedValue(undefined);
+	store.fetchSummary.mockResolvedValue(undefined);
+	store.setActiveTab.mockResolvedValue(undefined);
+});
+
+it('refreshes the list and summary on mount', async () => {
+	renderComponent();
+	await waitAllPromises();
+	expect(store.refreshListAndSummary).toHaveBeenCalledTimes(1);
+	expect(detailMounted).not.toHaveBeenCalled();
+});
+
+it('keeps the loaded list when navigating between Inbox routes', async () => {
+	const { getByTestId, queryByTestId } = renderRoutedComponent();
+	await waitAllPromises();
+	store.lists.waiting.items = [reviewItem(), resultItem()];
+	store.lists.waiting.nextCursor = 'next-page';
+	for (const button of ['select-review', 'select-result', 'clear-review']) {
+		getByTestId(button).click();
+		await waitAllPromises();
+	}
+	expect(router.currentRoute.value.fullPath).toBe('/inbox');
+	expect(queryByTestId('review-detail')).not.toBeInTheDocument();
+	expect(queryByTestId('result-detail')).not.toBeInTheDocument();
+	expect(store.reset).toHaveBeenCalledOnce();
+	expect(store.refreshListAndSummary).toHaveBeenCalledOnce();
+	expect(store.lists.waiting.items).toEqual([reviewItem(), resultItem()]);
+	expect(store.lists.waiting.nextCursor).toBe('next-page');
+});
+
+it('passes the selected review and list fallback to its detail entry', async () => {
+	await router.replace('/inbox/reviews/req-1');
+	store.lists.waiting.items = [reviewItem()];
+	const { getByTestId } = renderComponent();
+	expect(getByTestId('review-detail')).toHaveAttribute('data-id', 'req-1');
+	expect(getByTestId('review-detail')).toHaveAttribute('data-title', 'List review');
+});
+
+it('selects a result with the same ID without rendering the review entry', async () => {
+	await router.replace('/inbox/reviews/req-1');
+	const { getByTestId, queryByTestId } = renderComponent();
+	getByTestId('select-result').click();
+	await waitAllPromises();
+	expect(router.currentRoute.value.query).toEqual({
+		projectId: 'p1',
+		workflowId: 'w1',
+	});
+	expect(router.currentRoute.value.path).toBe('/inbox/assistant-results/req-1');
+	expect(getByTestId('result-detail')).toHaveAttribute('data-id', 'req-1');
+	expect(queryByTestId('review-detail')).not.toBeInTheDocument();
+});
+
+it('clears source context and keeps the current state and tab', async () => {
+	await router.replace(
+		'/inbox/assistant-results/r1?projectId=p1&workflowId=w1&state=closed&tab=changes',
+	);
+	const { getByTestId } = renderComponent();
+	getByTestId('clear-review').click();
+	await waitAllPromises();
+	expect(router.currentRoute.value.fullPath).toBe('/inbox?state=closed&tab=changes');
+});
+
+it('clears a disabled-source deep link without mounting its detail entry', async () => {
+	await router.replace('/inbox/reviews/req-1');
+	store.disabledSources = ['workflow_review'];
+	renderComponent();
+	await waitAllPromises();
+	expect(router.currentRoute.value.fullPath).toBe('/inbox');
+	expect(detailMounted).not.toHaveBeenCalled();
+});
+
+it('unmounts the selected detail when its source becomes disabled', async () => {
+	await router.replace('/inbox/reviews/req-1');
+	const { queryByTestId } = renderComponent();
+	store.disabledSources = ['workflow_review'];
+	await waitAllPromises();
+	expect(router.currentRoute.value.fullPath).toBe('/inbox');
+	expect(queryByTestId('review-detail')).not.toBeInTheDocument();
+});
+
+it('clears an already-disabled source when a deep link reuses the Inbox view', async () => {
+	store.disabledSources = ['workflow_review'];
+	renderRoutedComponent();
+	await waitAllPromises();
+	await router.replace('/inbox/reviews/req-1?state=closed&tab=changes');
+	await waitAllPromises();
+	expect(router.currentRoute.value.fullPath).toBe('/inbox?state=closed&tab=changes');
+	expect(detailMounted).not.toHaveBeenCalled();
+});
+
+it.each([
+	['', 'activity'],
+	['changes', 'changes'],
+	['bogus', 'activity'],
+])('maps the tab query %s to %s', async (query, tab) => {
+	await router.replace(`/inbox/reviews/req-1?tab=${query}`);
+	const { getByTestId } = renderComponent();
+	expect(getByTestId('review-detail')).toHaveAttribute('data-tab', tab);
+});
+
+it('writes detail tabs to the URL and keeps selection and state', async () => {
+	await router.replace('/inbox/reviews/req-1?state=closed');
+	const { getByTestId } = renderComponent();
+	getByTestId('select-changes-tab').click();
+	await waitAllPromises();
+	expect(router.currentRoute.value.query).toEqual({
+		state: 'closed',
+		tab: 'changes',
+	});
+	expect(router.currentRoute.value.path).toBe('/inbox/reviews/req-1');
+	getByTestId('select-activity-tab').click();
+	await waitAllPromises();
+	expect(router.currentRoute.value.query).toEqual({
+		state: 'closed',
+	});
+});
+
+it('follows a selected item to Closed after its detail reports the new state', async () => {
+	await router.replace('/inbox/reviews/req-1');
+	renderComponent();
+	store.refreshListAndSummary.mockClear();
+	reportChange({ type: 'workflow_review', id: 'req-1', state: 'closed' });
+	await waitAllPromises();
+	expect(store.refreshListAndSummary).not.toHaveBeenCalled();
+	expect(store.reconcileItemChange).toHaveBeenCalledWith({
+		type: 'workflow_review',
+		id: 'req-1',
+		state: 'closed',
+	});
+	expect(router.currentRoute.value.fullPath).toBe('/inbox/reviews/req-1?state=closed');
+});
+
+it.each([undefined, 'open'] as const)(
+	'reconciles without navigation for state %s',
+	async (state) => {
+		await router.replace('/inbox/reviews/req-1');
+		renderComponent();
+		store.refreshListAndSummary.mockClear();
+		reportChange({ type: 'workflow_review', id: 'req-1', state });
+		await waitAllPromises();
+		expect(store.fetchActiveTab).toHaveBeenCalledTimes(state ? 0 : 1);
+		expect(store.refreshListAndSummary).not.toHaveBeenCalled();
+		expect(router.currentRoute.value.fullPath).toBe('/inbox/reviews/req-1');
+	},
+);
+
+it('reloads Closed without replacing the URL when a review closes there', async () => {
+	await router.replace('/inbox/reviews/req-1?state=closed');
+	renderComponent();
+	const replace = vi.spyOn(router, 'replace');
+	reportChange({ type: 'workflow_review', id: 'req-1', state: 'closed' });
+	await waitAllPromises();
+	expect(replace).not.toHaveBeenCalled();
+	expect(store.fetchActiveTab).toHaveBeenCalledOnce();
+});
+
+it.each(['select-other-review', 'select-result'])(
+	'reconciles a late decision without following it after %s',
+	async (target) => {
+		await router.replace('/inbox/reviews/req-1');
+		const { getByTestId } = renderComponent();
+		const finishOldDecision = reportChange;
+		getByTestId(target).click();
+		await waitAllPromises();
+		const path = router.currentRoute.value.fullPath;
+		store.refreshListAndSummary.mockClear();
+		finishOldDecision({ type: 'workflow_review', id: 'req-1', state: 'closed' });
+		await waitAllPromises();
+		expect(store.refreshListAndSummary).not.toHaveBeenCalled();
+		expect(store.reconcileItemChange).toHaveBeenCalledOnce();
+		expect(router.currentRoute.value.fullPath).toBe(path);
+	},
+);
+
+it('does not refresh a failed decision after the Inbox view unmounts', async () => {
+	await router.replace('/inbox/reviews/req-1');
+	const { unmount } = renderComponent();
+	unmount();
+	store.refreshListAndSummary.mockClear();
+	reportChange({ type: 'workflow_review', id: 'req-1' });
+	expect(store.reconcileItemChange).not.toHaveBeenCalled();
+	expect(store.fetchActiveTab).not.toHaveBeenCalled();
+});
+
+it('leaves another page unchanged when an old entry reports a tab or item change', async () => {
+	await router.replace('/inbox/reviews/req-1');
+	const { getByTestId } = renderComponent();
+	const oldTab = getByTestId('select-changes-tab');
+	await router.replace('/settings/roles?tab=roles');
+	oldTab.click();
+	reportChange({ type: 'workflow_review', id: 'req-1', state: 'closed' });
+	await waitAllPromises();
+	expect(router.currentRoute.value.fullPath).toBe('/settings/roles?tab=roles');
+});
+
+it.each([
+	['/inbox/reviews/req-1', false],
+	['/inbox/reviews/req-1', true],
+	['/inbox/reviews/req-2', false],
+	['/inbox/assistant-results/result-1?projectId=p1&workflowId=w1', false],
+	['/other', false],
+])(
+	'reconciles approval after leaving the page for %s (pending detail: %s)',
+	async (returnPath, detailPending) => {
+		const inboxSettings = useSettingsStore().settings.inbox;
+		createTestingPinia({ stubActions: false });
+		useSettingsStore().settings.inbox = inboxSettings;
+		const inbox = useInboxStore();
+		const detail = useReviewDetailStore();
+		const activity = useReviewActivityStore();
+		const pending = createDeferredPromise<DecideWorkflowReviewRequestResponse>();
+		const staleDetail = createDeferredPromise<WorkflowReviewRequestDetail>();
+		const openReview = {
+			...reviewItem(),
+			description: null,
+			workflows: [],
+			viewerCanDecide: true,
+			viewerDecisionIneligibilityReason: null,
+			viewerCanComment: true,
+		} satisfies WorkflowReviewRequestDetail;
+		const approvedReview = {
+			...openReview,
+			state: 'closed',
+			decision: 'approved',
+		} satisfies WorkflowReviewRequestDetail;
+		vi.mocked(reviewApi.decideWorkflowReviewRequest).mockReturnValueOnce(pending.promise);
+		vi.mocked(reviewApi.fetchWorkflowReviewRequestDetail).mockImplementation(async (_ctx, id) => ({
+			...openReview,
+			id,
+		}));
+		const page = { data: [], nextCursor: null, hasMore: false };
+		vi.mocked(reviewApi.fetchWorkflowReviewActivity).mockResolvedValue(page);
+		const metadata = { partial: false, failedSources: [], disabledSources: [] };
+		vi.mocked(inboxApi.fetchInboxSummary).mockResolvedValue({
+			...metadata,
+			counts: { open: 2, closed: 0 },
+		});
+		vi.mocked(inboxApi.fetchInbox).mockImplementation(async (_ctx, query) => ({
+			...page,
+			...metadata,
+			data:
+				query.category === 'authored'
+					? []
+					: query.state === 'closed'
+						? [{ ...approvedReview }]
+						: [reviewItem(), { ...reviewItem(), id: 'req-2' }],
+		}));
+		await router.replace('/inbox/reviews/req-1');
+		const { getByTestId } = renderRoutedComponent({
+			global: {
+				stubs: {
+					...renderOptions.global.stubs,
+					WorkflowReviewDetail: false,
+					WorkflowReviewDetailTabs: {
+						template:
+							'<button data-test-id="approve" @click="$emit(\'decide\', { decision: \'approved\' })" />',
+					},
+				},
+			},
+		});
+		await waitAllPromises();
+		getByTestId('approve').click();
+		await router.replace('/other');
+		await waitAllPromises();
+		if (detailPending) {
+			vi.mocked(reviewApi.fetchWorkflowReviewRequestDetail).mockReturnValueOnce(
+				staleDetail.promise,
+			);
+		}
+		await router.replace(returnPath);
+		await waitAllPromises();
+		activity.decisionNote = 'New note';
+		vi.mocked(reviewApi.fetchWorkflowReviewRequestDetail).mockClear();
+		vi.mocked(reviewApi.fetchWorkflowReviewActivity).mockClear();
+		vi.mocked(reviewApi.fetchWorkflowReviewRequestDetail).mockResolvedValue({ ...approvedReview });
+		pending.resolve({ ...approvedReview, autoPublish: { status: 'published' } });
+		await waitAllPromises();
+		staleDetail.resolve({ ...openReview });
+		await waitAllPromises();
+
+		expect(inbox.openCount).toBe(1);
+		expect(inbox.closedCount).toBe(1);
+		expect(inbox.lists.waiting.items.map((item) => item.id)).toEqual(['req-2']);
+		if (returnPath === '/inbox/reviews/req-1') {
+			expect(detail.detail?.state).toBe('closed');
+			expect(reviewApi.fetchWorkflowReviewActivity).toHaveBeenCalledExactlyOnceWith(
+				expect.anything(),
+				'req-1',
+				expect.anything(),
+			);
+			expect(router.currentRoute.value.fullPath).toBe(`${returnPath}?state=closed`);
+		} else {
+			expect(router.currentRoute.value.fullPath).toBe(returnPath);
+			expect(reviewApi.fetchWorkflowReviewRequestDetail).not.toHaveBeenCalled();
+			expect(reviewApi.fetchWorkflowReviewActivity).not.toHaveBeenCalled();
+		}
+		expect(activity.decisionNote).toBe('New note');
+		expect(showMessage).not.toHaveBeenCalled();
+		expect(showError).not.toHaveBeenCalled();
+	},
+);
+
+function reviewItem(): InboxWorkflowReviewItem {
+	return {
+		type: 'workflow_review',
+		id: 'req-1',
+		projectId: 'proj-1',
+		title: 'List review',
+		workflowName: 'My workflow',
+		workflowVersionId: null,
+		requester: null,
+		authors: [],
+		reviewers: [],
+		decision: 'pending',
+		state: 'open',
+		createdAt: '2024-01-01T00:00:00.000Z',
+		updatedAt: '2024-01-01T00:00:00.000Z',
+	};
+}
+function resultItem(): InboxSelfHealingItem {
+	return {
+		type: 'self_healing_result',
+		id: 'req-1',
+		projectId: 'p1',
+		workflowId: 'w1',
+		workflowName: 'Workflow',
+		state: 'open',
+		outcome: 'fix_ready',
+		summary: 'Fix ready',
+		createdAt: '2024-01-01T00:00:00.000Z',
+		updatedAt: '2024-01-01T00:00:00.000Z',
+		completedAt: '2024-01-01T00:00:00.000Z',
+	};
+}
+
+it('routes group pagination and retry to the named slice', async () => {
+	const loadAuthored = vi.spyOn(store.lists.authored, 'loadMore').mockResolvedValue(undefined);
+	const retryWaiting = vi.spyOn(store.lists.waiting, 'retry').mockResolvedValue(undefined);
+	const { getByTestId } = renderComponent();
+	getByTestId('load-authored').click();
+	getByTestId('retry-waiting').click();
+	await waitAllPromises();
+	expect(loadAuthored).toHaveBeenCalledOnce();
+	expect(retryWaiting).toHaveBeenCalledOnce();
+});
+
+it('shows the Open empty state only after both groups load successfully', async () => {
+	store.lists.waiting.hasLoaded = true;
+	const { queryByTestId } = renderComponent();
+	await waitAllPromises();
+	expect(queryByTestId('inbox-empty')).not.toBeInTheDocument();
+	store.lists.authored.hasLoaded = true;
+	await waitAllPromises();
+	expect(queryByTestId('inbox-empty')).toBeInTheDocument();
+});
+
+it('keeps the main loading state until both Open groups finish', async () => {
+	store.lists.waiting.items = [reviewItem()];
+	store.lists.waiting.hasLoaded = true;
+	store.lists.authored.loading = true;
+	const { queryByText } = renderComponent();
+	await waitAllPromises();
+	expect(queryByText('Open reviews')).not.toBeInTheDocument();
+
+	store.lists.authored.loading = false;
+	store.lists.authored.hasLoaded = true;
+	await waitAllPromises();
+	expect(queryByText('Open reviews')).toBeInTheDocument();
+});
+
+it('provides the list fallback when review detail has no data', async () => {
+	await router.replace('/inbox/reviews/unlisted');
+	store.lists.waiting.items = [reviewItem()];
+	store.lists.waiting.hasLoaded = true;
+	store.lists.authored.loading = true;
+	const { queryByText, queryByRole } = renderComponent();
+	await waitAllPromises();
+	expect(queryByText('Open reviews')).not.toBeInTheDocument();
+
+	store.lists.authored.loading = false;
+	store.lists.authored.hasLoaded = true;
+	await waitAllPromises();
+	expect(queryByText('Open reviews')).toBeInTheDocument();
+	expect(queryByRole('button', { name: 'Retry' })).not.toBeInTheDocument();
+});
+
+it('does not show an empty Inbox when one group has rows and the other fails', async () => {
+	store.lists.waiting.hasLoaded = true;
+	store.lists.waiting.items = [reviewItem()];
+	store.lists.authored.error = new Error('timeout');
+	const { queryByTestId } = renderComponent();
+	await waitAllPromises();
+	expect(queryByTestId('inbox-empty')).not.toBeInTheDocument();
+});
+
+it.each(['list', 'loadMore'] as const)(
+	'shows the main Retry only for an initial failure after a failed %s request',
+	async (failedRequest) => {
+		store.lists.waiting.error = new Error('Request failed');
+		store.lists.waiting.failedRequest = failedRequest;
+		const { queryByRole } = renderComponent();
+		await waitAllPromises();
+		expect(queryByRole('button', { name: 'Retry' }) !== null).toBe(failedRequest === 'list');
+	},
+);
+
+it('restarts a partial group after a page failure while retaining exact page retry', async () => {
+	const request = vi
+		.fn()
+		.mockResolvedValueOnce({
+			data: [resultItem()],
+			nextCursor: 'partial-next',
+			hasMore: true,
+			partial: true,
+			failedSources: ['workflow_review'],
+			disabledSources: [],
+		})
+		.mockRejectedValueOnce(new Error('Page failed'))
+		.mockRejectedValueOnce(new Error('Page still failed'))
+		.mockResolvedValueOnce({
+			data: [reviewItem(), resultItem()],
+			nextCursor: null,
+			hasMore: false,
+			partial: false,
+			failedSources: [],
+			disabledSources: [],
+		});
+	const waiting = createInboxListSlice(request, vi.fn());
+	store.lists.waiting = waiting;
+	await waiting.fetchList();
+	await waiting.loadMore();
+	const { getByTestId } = renderComponent();
+	getByTestId('retry-waiting').click();
+	await waitAllPromises();
+	expect(request).toHaveBeenLastCalledWith('partial-next');
+	expect(waiting.partial).toBe(true);
+	getByTestId('refresh-waiting').click();
+	await waitAllPromises();
+	expect(request).toHaveBeenLastCalledWith();
+	expect(waiting.items.map((item) => item.type)).toEqual([
+		'workflow_review',
+		'self_healing_result',
+	]);
+	expect(waiting.partial).toBe(false);
+	expect(waiting.error).toBeNull();
+	expect(waiting.nextCursor).toBeNull();
+});
+
+it('does not reload the Inbox on a timer or window focus', async () => {
+	vi.useFakeTimers();
+	try {
+		const { unmount } = renderComponent();
+		store.refreshListAndSummary.mockClear();
+		await vi.advanceTimersByTimeAsync(60_000);
+		window.dispatchEvent(new Event('focus'));
+		document.dispatchEvent(new Event('visibilitychange'));
+		expect(store.refreshListAndSummary).not.toHaveBeenCalled();
+		unmount();
+	} finally {
+		vi.useRealTimers();
+	}
+});