mirror of
https://github.com/eigent-ai/eigent.git
synced 2026-08-27 17:41:56 +00:00
89 lines
3 KiB
TypeScript
89 lines
3 KiB
TypeScript
// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
|
|
// 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.
|
|
// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
|
|
|
|
import { HeaderBox } from '@/components/Session/HeaderBox';
|
|
import { usePageTabStore } from '@/store/pageTabStore';
|
|
import { render, screen } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
|
|
|
vi.mock('@/store/authStore', () => ({
|
|
getAuthStore: vi.fn(() => ({ language: 'en-US' })),
|
|
useAuthStore: vi.fn(() => ({ appearance: 'light' })),
|
|
}));
|
|
|
|
describe('HeaderBox chat timeline mode', () => {
|
|
beforeEach(() => {
|
|
vi.stubEnv('VITE_CHATBOX_EVENT_BUS', 'true');
|
|
usePageTabStore.setState({ chatTimelineDetailLevel: 'narrative' });
|
|
});
|
|
|
|
afterEach(() => {
|
|
vi.unstubAllEnvs();
|
|
});
|
|
|
|
it('places the mode toggle between token usage and preview controls', () => {
|
|
render(<HeaderBox totalTokens={42} projectName="Timeline project" />);
|
|
|
|
const tokenLabel = screen.getByText(/Total:/);
|
|
const toggle = screen.getByRole('radiogroup', {
|
|
name: 'Chat timeline style',
|
|
});
|
|
const previewButton = screen.getByRole('button', {
|
|
name: 'Open preview',
|
|
});
|
|
|
|
expect(
|
|
tokenLabel.compareDocumentPosition(toggle) &
|
|
Node.DOCUMENT_POSITION_FOLLOWING
|
|
).toBeTruthy();
|
|
expect(
|
|
toggle.compareDocumentPosition(previewButton) &
|
|
Node.DOCUMENT_POSITION_FOLLOWING
|
|
).toBeTruthy();
|
|
});
|
|
|
|
it('offers exactly the two timeline modes as a segmented control', () => {
|
|
render(<HeaderBox totalTokens={42} />);
|
|
|
|
const options = screen.getAllByRole('radio');
|
|
expect(options.map((option) => option.getAttribute('aria-label'))).toEqual([
|
|
'Narrative',
|
|
'Trajectory',
|
|
]);
|
|
expect(screen.getByRole('radio', { name: 'Narrative' })).toHaveAttribute(
|
|
'aria-checked',
|
|
'true'
|
|
);
|
|
});
|
|
|
|
it('switches the event timeline presentation from the toggle', async () => {
|
|
const user = userEvent.setup();
|
|
render(<HeaderBox totalTokens={42} />);
|
|
|
|
await user.click(screen.getByRole('radio', { name: 'Trajectory' }));
|
|
|
|
expect(usePageTabStore.getState().chatTimelineDetailLevel).toBe(
|
|
'trajectory'
|
|
);
|
|
expect(screen.getByRole('radio', { name: 'Trajectory' })).toHaveAttribute(
|
|
'aria-checked',
|
|
'true'
|
|
);
|
|
expect(screen.getByRole('radio', { name: 'Narrative' })).toHaveAttribute(
|
|
'aria-checked',
|
|
'false'
|
|
);
|
|
});
|
|
});
|