diff --git a/src/assets/wise5/components/component/component-student.module.ts b/src/assets/wise5/components/component/component-student.module.ts index bd8cb9a81ab..30caa1ea2c1 100644 --- a/src/assets/wise5/components/component/component-student.module.ts +++ b/src/assets/wise5/components/component/component-student.module.ts @@ -7,7 +7,6 @@ import { StudentAssetsDialogModule } from '../../vle/studentAsset/student-assets import { AnimationStudentModule } from '../animation/animation-student/animation-student.module'; import { AudioOscillatorStudentModule } from '../audioOscillator/audio-oscillator-student/audio-oscillator.module'; import { ConceptMapStudentModule } from '../conceptMap/concept-map-student/concept-map-student.module'; -import { DialogGuidanceStudentModule } from '../dialogGuidance/dialogGuidanceStudentModule'; import { DiscussionStudentModule } from '../discussion/discussion-student/discussion-student.module'; import { DrawStudentModule } from '../draw/draw-student/draw-student-module'; import { EmbeddedStudentModule } from '../embedded/embedded-student/embedded-student.module'; @@ -26,6 +25,7 @@ import { ComponentComponent } from './component.component'; import { AiChatStudentModule } from '../aiChat/ai-chat-student/ai-chat-student.module'; import { HelpIconComponent } from '../../themes/default/themeComponents/helpIcon/help-icon.component'; import { MultipleChoiceStudentComponent } from '../multipleChoice/multiple-choice-student/multiple-choice-student.component'; +import { DialogGuidanceStudentComponent } from '../dialogGuidance/dialog-guidance-student/dialog-guidance-student.component'; @NgModule({ imports: [ @@ -35,7 +35,7 @@ import { MultipleChoiceStudentComponent } from '../multipleChoice/multiple-choic CommonModule, ComponentComponent, ConceptMapStudentModule, - DialogGuidanceStudentModule, + DialogGuidanceStudentComponent, DiscussionStudentModule, DrawStudentModule, EmbeddedStudentModule, diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.html b/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.html index 4ff660b8ea7..883da2d58e8 100644 --- a/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.html +++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.html @@ -1,19 +1,21 @@ - - - - - - - +@if (computerAvatarSelectorVisible) { + +} @else { + + + + @if (studentCanRespond) { + + } + +} diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.spec.ts b/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.spec.ts index 18082d85aa8..5f6cdb7a43b 100644 --- a/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.spec.ts +++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.spec.ts @@ -1,15 +1,7 @@ -import { provideHttpClientTesting } from '@angular/common/http/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; -import { MatCardModule } from '@angular/material/card'; -import { MatDialogModule } from '@angular/material/dialog'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatIconModule } from '@angular/material/icon'; -import { MatInputModule } from '@angular/material/input'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module'; import { ComputerAvatar } from '../../../common/computer-avatar/ComputerAvatar'; -import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component'; import { ComputerAvatarService } from '../../../services/computerAvatarService'; import { DialogGuidanceFeedbackService } from '../../../services/dialogGuidanceFeedbackService'; import { ProjectService } from '../../../services/projectService'; @@ -19,57 +11,24 @@ import { ComputerDialogResponseMultipleScores } from '../ComputerDialogResponseM import { ComputerDialogResponseSingleScore } from '../ComputerDialogResponseSingleScore'; import { CRaterResponse } from '../../common/cRater/CRaterResponse'; import { CRaterScore } from '../../common/cRater/CRaterScore'; -import { DialogResponsesComponent } from '../dialog-responses/dialog-responses.component'; import { DialogGuidanceService } from '../dialogGuidanceService'; import { DialogGuidanceStudentComponent } from './dialog-guidance-student.component'; import { DialogGuidanceComponent } from '../DialogGuidanceComponent'; import { RawCRaterResponse } from '../../common/cRater/RawCRaterResponse'; -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { ChatInputComponent } from '../../../common/chat-input/chat-input.component'; import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; let component: DialogGuidanceStudentComponent; let fixture: ComponentFixture; const robotAvatar = new ComputerAvatar('robot', 'Robot', 'robot.png'); - -function initializeComponent(isComputerAvatarEnabled: boolean): void { - fixture = TestBed.createComponent(DialogGuidanceStudentComponent); - component = fixture.componentInstance; - component.component = createDialogGuidanceComponent(isComputerAvatarEnabled); - spyOn(component, 'subscribeToSubscriptions').and.callFake(() => {}); - spyOn(component, 'isNotebookEnabled').and.returnValue(false); - fixture.detectChanges(); -} - -function createDialogGuidanceComponent(isComputerAvatarEnabled: boolean): DialogGuidanceComponent { - const componentContent = TestBed.inject(DialogGuidanceService).createComponent(); - componentContent.isComputerAvatarEnabled = isComputerAvatarEnabled; - return new DialogGuidanceComponent(componentContent, null); -} - describe('DialogGuidanceStudentComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [DialogGuidanceStudentComponent], - schemas: [NO_ERRORS_SCHEMA], imports: [ BrowserAnimationsModule, - ChatInputComponent, - ComponentHeaderComponent, - DialogResponsesComponent, - FormsModule, - MatCardModule, - MatDialogModule, - MatFormFieldModule, - MatIconModule, - MatInputModule, + DialogGuidanceStudentComponent, StudentTeacherCommonServicesModule ], - providers: [ - DialogGuidanceFeedbackService, - provideHttpClient(withInterceptorsFromDi()), - provideHttpClientTesting() - ] + providers: [DialogGuidanceFeedbackService, provideHttpClient(withInterceptorsFromDi())] }).compileComponents(); }); @@ -101,19 +60,19 @@ describe('DialogGuidanceStudentComponent', () => { ); component.setIsSubmitDirty(true); const response = createDummyScoringResponse(); - expect(component.responses.length).toEqual(0); + expect(component['responses'].length).toEqual(0); component.cRaterSuccessResponse(response); expect(broadcastComponentSubmitTriggeredSpy).toHaveBeenCalled(); - expect(component.responses.length).toEqual(1); + expect(component['responses'].length).toEqual(1); }); it('should disable submit button after using all submits', () => { component.componentContent.maxSubmitCount = 2; - expect(component.studentCanRespond).toEqual(true); + expect(component['studentCanRespond']).toEqual(true); simulateSubmit(component); - expect(component.studentCanRespond).toEqual(true); + expect(component['studentCanRespond']).toEqual(true); simulateSubmit(component); - expect(component.studentCanRespond).toEqual(false); + expect(component['studentCanRespond']).toEqual(false); }); it('should handle crater error response', () => { @@ -129,7 +88,7 @@ describe('DialogGuidanceStudentComponent', () => { it('should initialize computer avatar to default computer avatar', () => { initializeComponent(false); expectComputerAvatarSelectorNotToBeShown(component); - expect(component.computerAvatar).not.toBeNull(); + expect(component['computerAvatar']).not.toBeNull(); }); it(`should initialize computer avatar when the student has not previously chosen a computer @@ -183,7 +142,7 @@ describe('DialogGuidanceStudentComponent', () => { it('should select computer avatar', () => { component.selectComputerAvatar(robotAvatar); - expect(component.computerAvatar).toEqual(robotAvatar); + expect(component['computerAvatar']).toEqual(robotAvatar); expectComputerAvatarSelectorNotToBeShown(component); }); @@ -196,19 +155,34 @@ describe('DialogGuidanceStudentComponent', () => { const defaultComputerAvatar = computerAvatarService.getDefaultAvatar(); spyOn(computerAvatarService, 'getAvatar').and.returnValue(defaultComputerAvatar); component.initializeComputerAvatar(); - expect(component.computerAvatar).toEqual(defaultComputerAvatar); + expect(component['computerAvatar']).toEqual(defaultComputerAvatar); }); it('should select computer avatar when there is a computer avatar initial response', () => { const text = 'Hi there, who lives in a pineapple under sea?'; component.componentContent.computerAvatarSettings.initialResponse = text; - expect(component.responses.length).toEqual(0); + expect(component['responses'].length).toEqual(0); component.selectComputerAvatar(robotAvatar); - expect(component.responses.length).toEqual(1); - expect(component.responses[0].text).toEqual(text); + expect(component['responses'].length).toEqual(1); + expect(component['responses'][0].text).toEqual(text); }); }); +function initializeComponent(isComputerAvatarEnabled: boolean): void { + fixture = TestBed.createComponent(DialogGuidanceStudentComponent); + component = fixture.componentInstance; + component.component = createDialogGuidanceComponent(isComputerAvatarEnabled); + spyOn(component, 'subscribeToSubscriptions').and.callFake(() => {}); + spyOn(component, 'isNotebookEnabled').and.returnValue(false); + fixture.detectChanges(); +} + +function createDialogGuidanceComponent(isComputerAvatarEnabled: boolean): DialogGuidanceComponent { + const componentContent = TestBed.inject(DialogGuidanceService).createComponent(); + componentContent.isComputerAvatarEnabled = isComputerAvatarEnabled; + return new DialogGuidanceComponent(componentContent, null); +} + function simulateSubmit(component: DialogGuidanceStudentComponent): void { const response = createDummyScoringResponse(); component.setIsSubmitDirty(true); diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.ts b/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.ts index aebbd9f1706..2a6d59b1c37 100644 --- a/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.ts +++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.ts @@ -29,22 +29,36 @@ import { RawCRaterResponse } from '../../common/cRater/RawCRaterResponse'; import { ConstraintService } from '../../../services/constraintService'; import { applyMixins } from '../../../common/apply-mixins'; import { ComputerAvatarInitializer } from '../../../common/computer-avatar/computer-avatar-initializer'; +import { ComputerAvatarSelectorComponent } from '../../../vle/computer-avatar-selector/computer-avatar-selector.component'; +import { MatCardModule } from '@angular/material/card'; +import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component'; +import { DialogResponsesComponent } from '../dialog-responses/dialog-responses.component'; +import { ChatInputComponent } from '../../../common/chat-input/chat-input.component'; +import { CommonModule } from '@angular/common'; @Component({ - selector: 'dialog-guidance-student', - templateUrl: './dialog-guidance-student.component.html', - styleUrls: ['./dialog-guidance-student.component.scss'], - standalone: false + imports: [ + ChatInputComponent, + CommonModule, + ComponentHeaderComponent, + ComputerAvatarSelectorComponent, + DialogResponsesComponent, + MatCardModule + ], + providers: [DialogGuidanceFeedbackService], + selector: 'dialog-guidance-student', + styleUrl: './dialog-guidance-student.component.scss', + templateUrl: './dialog-guidance-student.component.html' }) export class DialogGuidanceStudentComponent extends ComponentStudent { component: DialogGuidanceComponent; - computerAvatar: ComputerAvatar; + protected computerAvatar: ComputerAvatar; protected computerAvatarSelectorVisible: boolean = false; - cRaterTimeout: number = 40000; - feedbackRuleEvaluator: FeedbackRuleEvaluator; - isWaitingForComputerResponse: boolean = false; - responses: DialogResponse[] = []; - studentCanRespond: boolean = true; + private cRaterTimeout: number = 40000; + private feedbackRuleEvaluator: FeedbackRuleEvaluator; + protected isWaitingForComputerResponse: boolean = false; + protected responses: DialogResponse[] = []; + protected studentCanRespond: boolean = true; workgroupId: number; constructor( @@ -126,14 +140,14 @@ export class DialogGuidanceStudentComponent extends ComponentStudent { this.cRaterService .makeCRaterScoringRequest(this.component.getItemId(), new Date().getTime(), studentResponse) .pipe(timeout(this.cRaterTimeout)) - .subscribe( - (response: any) => { + .subscribe({ + next: (response: any) => { this.cRaterSuccessResponse(response.responses); }, - () => { + error: () => { this.cRaterErrorResponse(); } - ); + }); } private showWaitingForComputerResponse(): void { diff --git a/src/assets/wise5/components/dialogGuidance/dialogGuidanceStudentModule.ts b/src/assets/wise5/components/dialogGuidance/dialogGuidanceStudentModule.ts deleted file mode 100644 index da2e7e6b366..00000000000 --- a/src/assets/wise5/components/dialogGuidance/dialogGuidanceStudentModule.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { NgModule } from '@angular/core'; -import { StudentComponentModule } from '../../../../app/student/student.component.module'; -import { DialogGuidanceStudentComponent } from './dialog-guidance-student/dialog-guidance-student.component'; -import { MatButtonToggleModule } from '@angular/material/button-toggle'; -import { DialogGuidanceFeedbackService } from '../../services/dialogGuidanceFeedbackService'; -import { StudentTeacherCommonModule } from '../../../../app/student-teacher-common.module'; -import { ComputerAvatarSelectorComponent } from '../../vle/computer-avatar-selector/computer-avatar-selector.component'; -import { ChatInputComponent } from '../../common/chat-input/chat-input.component'; - -@NgModule({ - declarations: [DialogGuidanceStudentComponent], - imports: [ - ChatInputComponent, - ComputerAvatarSelectorComponent, - MatButtonToggleModule, - StudentComponentModule, - StudentTeacherCommonModule - ], - providers: [DialogGuidanceFeedbackService], - exports: [DialogGuidanceStudentComponent] -}) -export class DialogGuidanceStudentModule {}