109 lines
3.5 KiB
TypeScript
109 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { describe, it, expect } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { AuthLoading } from './AuthLoading';
|
|
|
|
describe('AuthLoading', () => {
|
|
describe('rendering', () => {
|
|
it('should render with default message', () => {
|
|
render(<AuthLoading />);
|
|
|
|
expect(screen.getByText('Authenticating...')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render with custom message', () => {
|
|
render(<AuthLoading message="Loading user data..." />);
|
|
|
|
expect(screen.getByText('Loading user data...')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render with empty message', () => {
|
|
render(<AuthLoading message="" />);
|
|
|
|
// Should still render the component structure
|
|
expect(screen.getByText('')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render with special characters in message', () => {
|
|
render(<AuthLoading message="Authenticating... Please wait!" />);
|
|
|
|
expect(screen.getByText('Authenticating... Please wait!')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render with long message', () => {
|
|
const longMessage = 'This is a very long loading message that might wrap to multiple lines';
|
|
render(<AuthLoading message={longMessage} />);
|
|
|
|
expect(screen.getByText(longMessage)).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('accessibility', () => {
|
|
it('should have proper loading semantics', () => {
|
|
render(<AuthLoading />);
|
|
|
|
// The component should have proper ARIA attributes for loading state
|
|
expect(screen.getByText('Authenticating...')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should be visually distinct as loading state', () => {
|
|
render(<AuthLoading message="Loading..." />);
|
|
|
|
// The component uses LoadingSpinner which should indicate loading
|
|
expect(screen.getByText('Loading...')).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('edge cases', () => {
|
|
it('should handle null message', () => {
|
|
render(<AuthLoading message={null as any} />);
|
|
|
|
// Should render with default message
|
|
expect(screen.getByText('Authenticating...')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should handle undefined message', () => {
|
|
render(<AuthLoading message={undefined as any} />);
|
|
|
|
// Should render with default message
|
|
expect(screen.getByText('Authenticating...')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should handle numeric message', () => {
|
|
render(<AuthLoading message={123 as any} />);
|
|
|
|
expect(screen.getByText('123')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should handle message with whitespace', () => {
|
|
render(<AuthLoading message=" Loading... " />);
|
|
|
|
expect(screen.getByText(' Loading... ')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should handle message with newlines', () => {
|
|
render(<AuthLoading message="Loading...\nPlease wait" />);
|
|
|
|
expect(screen.getByText('Loading...')).toBeInTheDocument();
|
|
expect(screen.getByText('Please wait')).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('visual states', () => {
|
|
it('should show loading spinner', () => {
|
|
render(<AuthLoading />);
|
|
|
|
// The LoadingSpinner component should be present
|
|
// This is verified by the component structure
|
|
expect(screen.getByText('Authenticating...')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should maintain consistent layout', () => {
|
|
render(<AuthLoading message="Processing..." />);
|
|
|
|
// The component uses Section and Stack for layout
|
|
expect(screen.getByText('Processing...')).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|