import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { HypothesisResponseComponent } from './hypothesis-response.component';
import { HypothesisChallenge, AgreementLevel } from '@ask-me-mcp/askme-shared';
describe('HypothesisResponseComponent', () => {
let component: HypothesisResponseComponent;
let fixture: ComponentFixture<HypothesisResponseComponent>;
const mockChallenge: HypothesisChallenge = {
id: 'challenge-1',
title: 'Market Evaluation Challenge',
description: 'Please evaluate these market hypotheses',
hypotheses: [
{
id: 'h1',
text: 'The market demand for our product will increase by 20% next quarter',
agreementLevel: undefined,
comment: '',
wontAnswer: false
},
{
id: 'h2',
text: 'Competitors will launch similar products within 6 months',
agreementLevel: undefined,
comment: '',
wontAnswer: false
}
]
};
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HypothesisResponseComponent, FormsModule]
}).compileComponents();
fixture = TestBed.createComponent(HypothesisResponseComponent);
component = fixture.componentInstance;
component.requestId = 'test-request-123';
component.challengeInput = mockChallenge;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should display challenge title and description', () => {
const titleElement = fixture.nativeElement.querySelector('.challenge-title');
const descriptionElement = fixture.nativeElement.querySelector('.challenge-description');
expect(titleElement.textContent.trim()).toBe('Market Evaluation Challenge');
expect(descriptionElement.textContent.trim()).toBe('Please evaluate these market hypotheses');
});
it('should display all hypotheses', () => {
const hypothesisElements = fixture.nativeElement.querySelectorAll('.hypothesis-card');
expect(hypothesisElements.length).toBe(2);
const firstHypothesis = hypothesisElements[0].querySelector('.hypothesis-text');
expect(firstHypothesis.textContent.trim()).toBe('The market demand for our product will increase by 20% next quarter');
});
it('should display agreement scale buttons', () => {
const agreementButtons = fixture.nativeElement.querySelectorAll('.agreement-button');
expect(agreementButtons.length).toBe(14); // 7 buttons × 2 hypotheses
// Check emoji buttons are displayed
const emojiElements = fixture.nativeElement.querySelectorAll('.agreement-emoji');
expect(emojiElements.length).toBe(14);
expect(emojiElements[0].textContent.trim()).toBe('😤'); // Fully Disagree
expect(emojiElements[6].textContent.trim()).toBe('😍'); // Fully Agree
});
it('should set agreement level when button clicked', () => {
const agreementButtons = fixture.nativeElement.querySelectorAll('.agreement-button');
const agreeButton = agreementButtons[5]; // Agree button for first hypothesis
agreeButton.click();
fixture.detectChanges();
expect(component.challenge().hypotheses[0].agreementLevel).toBe(AgreementLevel.AGREE);
expect(agreeButton.classList).toContain('selected');
});
it('should toggle won\'t answer for individual hypothesis', () => {
const wontAnswerCheckbox = fixture.nativeElement.querySelectorAll('.wont-answer-checkbox-small')[0];
wontAnswerCheckbox.click();
fixture.detectChanges();
expect(component.challenge().hypotheses[0].wontAnswer).toBe(true);
// Should hide agreement scale when won't answer is selected
const hypothesisCard = fixture.nativeElement.querySelectorAll('.hypothesis-card')[0];
expect(hypothesisCard.classList).toContain('grayed-out');
});
it('should toggle won\'t answer for entire challenge', () => {
const challengeWontAnswerCheckbox = fixture.nativeElement.querySelector('.wont-answer-checkbox');
challengeWontAnswerCheckbox.click();
fixture.detectChanges();
expect(component.hasWontAnswerChallenge()).toBe(true);
// Should show why section
const whySection = fixture.nativeElement.querySelector('.why-section');
expect(whySection).toBeTruthy();
// Should hide hypotheses
const hypothesesContainer = fixture.nativeElement.querySelector('.hypotheses-container');
expect(hypothesesContainer).toBeFalsy();
});
it('should update evaluation count', () => {
expect(component.evaluatedCount()).toBe(0);
// Set agreement for first hypothesis
component.setAgreementLevel('h1', AgreementLevel.AGREE);
expect(component.evaluatedCount()).toBe(1);
// Set won't answer for second hypothesis
component.toggleWontAnswerHypothesis('h2');
expect(component.evaluatedCount()).toBe(2);
});
it('should emit response when submitted', () => {
jest.spyOn(component.responseSubmitted, 'emit');
// Set some responses
component.setAgreementLevel('h1', AgreementLevel.SLIGHTLY_AGREE);
component.toggleWontAnswerHypothesis('h2');
component.submitResponse();
expect(component.responseSubmitted.emit).toHaveBeenCalledWith({
requestId: 'test-request-123',
type: 'hypothesis-challenge',
challenge: component.challenge()
});
});
it('should clear all responses', () => {
// Set some responses first
component.setAgreementLevel('h1', AgreementLevel.FULLY_AGREE);
component.toggleWontAnswerHypothesis('h2');
component.setChallengeWhy('Privacy concerns');
component.clearAll();
expect(component.challenge().hypotheses[0].agreementLevel).toBeUndefined();
expect(component.challenge().hypotheses[1].wontAnswer).toBe(false);
expect(component.challenge().whyNotAnswering).toBeUndefined();
expect(component.evaluatedCount()).toBe(0);
});
it('should show correct agreement display text', () => {
const display = component.getAgreementDisplay(AgreementLevel.SLIGHTLY_AGREE);
expect(display).toBe('🙂 Slightly Agree');
const fullAgreeDisplay = component.getAgreementDisplay(AgreementLevel.FULLY_DISAGREE);
expect(fullAgreeDisplay).toBe('😤 Fully Disagree');
});
it('should handle comment input', () => {
const challenge = component.challenge();
challenge.hypotheses[0].comment = 'This is a test comment';
component.challenge.set({ ...challenge });
fixture.detectChanges();
expect(component.challenge().hypotheses[0].comment).toBe('This is a test comment');
});
it('should disable buttons when submitting', () => {
component.isSubmitting.set(true);
fixture.detectChanges();
const submitButton = fixture.nativeElement.querySelector('.btn-primary');
const clearButton = fixture.nativeElement.querySelector('.btn-secondary');
const agreementButtons = fixture.nativeElement.querySelectorAll('.agreement-button');
expect(submitButton.disabled).toBe(true);
expect(clearButton.disabled).toBe(true);
expect(agreementButtons[0].disabled).toBe(true);
});
});
