import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { ResponseInputComponent } from './response-input.component';
describe('ResponseInputComponent', () => {
let component: ResponseInputComponent;
let fixture: ComponentFixture<ResponseInputComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ResponseInputComponent, FormsModule]
}).compileComponents();
fixture = TestBed.createComponent(ResponseInputComponent);
component = fixture.componentInstance;
component.requestId = 'test-request-123';
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('submitCustomResponse', () => {
it('should emit custom response', () => {
const emitSpy = jest.spyOn(component.responseSubmitted, 'emit');
component.customResponse = ' Custom response text ';
component.submitCustomResponse();
expect(emitSpy).toHaveBeenCalledWith({
requestId: 'test-request-123',
response: 'Custom response text'
});
});
it('should not emit if response is empty', () => {
const emitSpy = jest.spyOn(component.responseSubmitted, 'emit');
component.customResponse = ' ';
component.submitCustomResponse();
expect(emitSpy).not.toHaveBeenCalled();
});
it('should not emit if response is too long', () => {
const emitSpy = jest.spyOn(component.responseSubmitted, 'emit');
component.customResponse = 'a'.repeat(1001);
component.submitCustomResponse();
expect(emitSpy).not.toHaveBeenCalled();
});
it('should reset form after submission', fakeAsync(() => {
component.customResponse = 'Test response';
component.submitCustomResponse();
expect(component.isSubmitting).toBe(true);
tick(1000);
expect(component.customResponse).toBe('');
expect(component.isSubmitting).toBe(false);
}));
});
describe('onKeyDown', () => {
it('should submit on Ctrl+Enter', () => {
const submitSpy = jest.spyOn(component, 'submitCustomResponse');
component.customResponse = 'Test response';
const event = new KeyboardEvent('keydown', {
key: 'Enter',
ctrlKey: true
});
component.onKeyDown(event);
expect(submitSpy).toHaveBeenCalled();
});
it('should submit on Cmd+Enter', () => {
const submitSpy = jest.spyOn(component, 'submitCustomResponse');
component.customResponse = 'Test response';
const event = new KeyboardEvent('keydown', {
key: 'Enter',
metaKey: true
});
component.onKeyDown(event);
expect(submitSpy).toHaveBeenCalled();
});
it('should not submit on Enter alone', () => {
const submitSpy = jest.spyOn(component, 'submitCustomResponse');
const event = new KeyboardEvent('keydown', {
key: 'Enter'
});
component.onKeyDown(event);
expect(submitSpy).not.toHaveBeenCalled();
});
});
describe('template', () => {
it('should bind textarea to customResponse', async () => {
const textarea = fixture.nativeElement.querySelector('textarea');
textarea.value = 'Test input';
textarea.dispatchEvent(new Event('input'));
await fixture.whenStable();
expect(component.customResponse).toBe('Test input');
});
it('should show character count', () => {
component.customResponse = 'Hello';
fixture.detectChanges();
const charCount = fixture.nativeElement.querySelector('.char-count');
expect(charCount.textContent.trim()).toBe('5 / 1000 characters');
});
it('should show warning for long text', () => {
component.customResponse = 'a'.repeat(950);
fixture.detectChanges();
const charCount = fixture.nativeElement.querySelector('.char-count');
expect(charCount.classList.contains('warning')).toBe(true);
});
it('should disable submit button for empty response', () => {
component.customResponse = '';
fixture.detectChanges();
const submitBtn = fixture.nativeElement.querySelector('.submit-btn');
expect(submitBtn.disabled).toBe(true);
});
it('should disable submit button for too long response', () => {
component.customResponse = 'a'.repeat(1001);
fixture.detectChanges();
const submitBtn = fixture.nativeElement.querySelector('.submit-btn');
expect(submitBtn.disabled).toBe(true);
});
it('should show sending state', () => {
component.isSubmitting = true;
fixture.detectChanges();
const submitBtn = fixture.nativeElement.querySelector('.submit-btn');
expect(submitBtn.textContent.trim()).toBe('Sending...');
});
it('should handle form submission', () => {
const emitSpy = jest.spyOn(component.responseSubmitted, 'emit');
component.customResponse = 'Test response';
fixture.detectChanges();
const form = fixture.nativeElement.querySelector('form');
form.dispatchEvent(new Event('submit'));
expect(emitSpy).toHaveBeenCalledWith({
requestId: 'test-request-123',
response: 'Test response'
});
});
});
});
