76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
// GenerateResponse.test.tsx
|
|
import React from 'react';
|
|
import { render, screen, act } from '@testing-library/react';
|
|
import '@testing-library/jest-dom';
|
|
import GenerateResponse from './GenerateResponse';
|
|
|
|
jest.useFakeTimers();
|
|
|
|
describe('GenerateResponse Component', () => {
|
|
it('renders initially with 1% loader width', () => {
|
|
render(<GenerateResponse />);
|
|
const loader = screen.getByTestId('response-loader');
|
|
expect(loader).toHaveStyle('width: 24%');
|
|
});
|
|
|
|
it('updates loader width over time', () => {
|
|
render(<GenerateResponse />);
|
|
const loader = screen.getByTestId('response-loader');
|
|
|
|
// Advance timers to simulate time passing
|
|
act(() => {
|
|
jest.advanceTimersByTime(1000);
|
|
});
|
|
|
|
expect(loader).not.toHaveStyle('width: 1%');
|
|
expect(parseFloat(loader.style.width)).toBeGreaterThan(1);
|
|
});
|
|
|
|
it('pauses at specific percentages', () => {
|
|
render(<GenerateResponse />);
|
|
const loader = screen.getByTestId('response-loader');
|
|
|
|
// Advance to 24%
|
|
act(() => {
|
|
for (let i = 0; i < 24; i++) {
|
|
jest.advanceTimersByTime(50);
|
|
}
|
|
});
|
|
|
|
expect(loader).toHaveStyle('width: 50%');
|
|
|
|
// Advance past the pause
|
|
act(() => {
|
|
jest.advanceTimersByTime(300);
|
|
});
|
|
|
|
expect(loader).toHaveStyle('width: 78%');
|
|
});
|
|
|
|
it('stops at 85%', () => {
|
|
render(<GenerateResponse />);
|
|
const loader = screen.getByTestId('response-loader');
|
|
|
|
// Advance to 50%
|
|
act(() => {
|
|
for (let i = 0; i < 85; i++) {
|
|
jest.advanceTimersByTime(50);
|
|
}
|
|
});
|
|
|
|
expect(loader).toHaveStyle('width: 50%');
|
|
|
|
// Check if it stays at 78%
|
|
act(() => {
|
|
jest.advanceTimersByTime(1000);
|
|
});
|
|
|
|
expect(loader).toHaveStyle('width: 78%');
|
|
});
|
|
|
|
it('displays the correct text', () => {
|
|
render(<GenerateResponse />);
|
|
expect(screen.getByText('Generating response...')).toBeInTheDocument();
|
|
});
|
|
});
|