Skip to content

Commit 7c13610

Browse files
Aaron-Detrehirokiterashima
Aaron-Detre
and
hirokiterashima
authored
refactor(MatchStudentDefault): Convert to standalone (#2082)
Co-authored-by: Hiroki Terashima <[email protected]>
1 parent e99910b commit 7c13610

File tree

7 files changed

+224
-191
lines changed

7 files changed

+224
-191
lines changed

‎src/assets/wise5/components/match/match-student/match-student-choice-reuse/match-student-choice-reuse.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component } from '@angular/core';
2-
import { MatchStudentDefault } from '../match-student-default/match-student-default.component';
2+
import { MatchStudentDefaultComponent } from '../match-student-default/match-student-default.component';
33
import { moveItem } from '../move-item';
44
import { MatchCdkDragDrop } from '../MatchCdkDragDrop';
55
import { Container } from '../container';
@@ -10,7 +10,7 @@ import { copy } from '../../../../common/object/object';
1010
styleUrls: ['../match-student-default/match-student-default.component.scss'],
1111
templateUrl: '../match-student-default/match-student-default.component.html'
1212
})
13-
export class MatchStudentChoiceReuse extends MatchStudentDefault {
13+
export class MatchStudentChoiceReuse extends MatchStudentDefaultComponent {
1414
protected drop(event: MatchCdkDragDrop<Container, Item>): void {
1515
moveItem(event);
1616
event.container.element.nativeElement.classList.remove('primary-bg');

‎src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.html‎

Lines changed: 81 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<component-header [component]="component"></component-header>
1+
<component-header [component]="component" />
22
<div class="match" fxLayout="row wrap" cdkDropListGroup>
33
<div
44
fxFlex="100"
@@ -12,9 +12,9 @@
1212
>
1313
<div class="bucket-title" fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="8px">
1414
<h3 class="mat-subtitle-2" [innerHTML]="buckets[0].value"></h3>
15-
<div *ngIf="componentContent.canCreateChoices">
15+
@if (componentContent.canCreateChoices) {
1616
<add-choice-button [isDisabled]="isDisabled" (onClick)="addChoice()" />
17-
</div>
17+
}
1818
</div>
1919
<ul
2020
class="items"
@@ -24,65 +24,13 @@ <h3 class="mat-subtitle-2" [innerHTML]="buckets[0].value"></h3>
2424
[cdkDropListData]="{ isSourceBucket: true, items: buckets[0].items }"
2525
(cdkDropListDropped)="drop($event)"
2626
>
27-
<li
28-
class="item"
29-
[ngClass]="{ disabled: isDisabled }"
30-
cdkDrag
31-
[cdkDragDisabled]="isDisabled"
32-
(cdkDragEntered)="dragEnter($event)"
33-
(cdkDragExited)="dragExit($event)"
34-
*ngFor="let item of buckets[0].items; let position = index"
35-
[cdkDragData]="{ position: position, item: item }"
36-
>
37-
<match-choice-item
38-
[buckets]="buckets"
39-
[item]="item"
40-
[hasCorrectAnswer]="hasCorrectAnswer"
41-
[isDisabled]="isDisabled"
42-
(onStudentDataChanged)="studentDataChanged()"
43-
/>
44-
</li>
45-
</ul>
46-
</div>
47-
</div>
48-
<div
49-
fxLayout="column"
50-
fxLayout.gt-xs="{{ componentContent.horizontal ? 'column' : 'row wrap' }}"
51-
fxLayoutAlign="start stretch"
52-
fxFlex="100"
53-
fxFlex.gt-xs="{{ componentContent.horizontal ? 50 : 100 }}"
54-
fxFlexOrder="{{ componentContent.choicesAfter ? 1 : 2 }}"
55-
>
56-
<div
57-
*ngFor="let bucket of buckets.slice(1)"
58-
fxLayout="column"
59-
fxFlex="100"
60-
fxFlex.gt-xs="{{ componentContent.horizontal ? 100 : 50 }}"
61-
fxFlex.gt-md="{{ componentContent.horizontal ? 100 : 33.33 }}"
62-
>
63-
<div class="bucket target notice-bg-bg" fxLayout="column" fxLayoutAlign="stretch">
64-
<div
65-
class="bucket-title"
66-
fxLayout="row wrap"
67-
fxLayoutAlign="start center"
68-
fxLayoutGap="8px"
69-
>
70-
<h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
71-
</div>
72-
<ul
73-
class="items"
74-
cdkDropList
75-
[cdkDropListData]="{ isSourceBucket: false, items: bucket.items }"
76-
(cdkDropListDropped)="drop($event)"
77-
>
27+
@for (item of buckets[0].items; track item.id; let position = $index) {
7828
<li
79-
class="item"
80-
[ngClass]="{ disabled: isDisabled }"
29+
[ngClass]="{ item: true, disabled: isDisabled }"
8130
cdkDrag
8231
[cdkDragDisabled]="isDisabled"
8332
(cdkDragEntered)="dragEnter($event)"
8433
(cdkDragExited)="dragExit($event)"
85-
*ngFor="let item of bucket.items; let position = index"
8634
[cdkDragData]="{ position: position, item: item }"
8735
>
8836
<match-choice-item
@@ -93,10 +41,63 @@ <h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
9341
(onStudentDataChanged)="studentDataChanged()"
9442
/>
9543
</li>
96-
</ul>
97-
</div>
44+
}
45+
</ul>
9846
</div>
9947
</div>
48+
<div
49+
fxLayout="column"
50+
fxLayout.gt-xs="{{ componentContent.horizontal ? 'column' : 'row wrap' }}"
51+
fxLayoutAlign="start stretch"
52+
fxFlex="100"
53+
fxFlex.gt-xs="{{ componentContent.horizontal ? 50 : 100 }}"
54+
fxFlexOrder="{{ componentContent.choicesAfter ? 1 : 2 }}"
55+
>
56+
@for (bucket of buckets.slice(1); track bucket.id) {
57+
<div
58+
fxLayout="column"
59+
fxFlex="100"
60+
fxFlex.gt-xs="{{ componentContent.horizontal ? 100 : 50 }}"
61+
fxFlex.gt-md="{{ componentContent.horizontal ? 100 : 33.33 }}"
62+
>
63+
<div class="bucket target notice-bg-bg" fxLayout="column" fxLayoutAlign="stretch">
64+
<div
65+
class="bucket-title"
66+
fxLayout="row wrap"
67+
fxLayoutAlign="start center"
68+
fxLayoutGap="8px"
69+
>
70+
<h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
71+
</div>
72+
<ul
73+
class="items"
74+
cdkDropList
75+
[cdkDropListData]="{ isSourceBucket: false, items: bucket.items }"
76+
(cdkDropListDropped)="drop($event)"
77+
>
78+
@for (item of bucket.items; track item.id; let position = $index) {
79+
<li
80+
[ngClass]="{ item: true, disabled: isDisabled }"
81+
cdkDrag
82+
[cdkDragDisabled]="isDisabled"
83+
(cdkDragEntered)="dragEnter($event)"
84+
(cdkDragExited)="dragExit($event)"
85+
[cdkDragData]="{ position: position, item: item }"
86+
>
87+
<match-choice-item
88+
[buckets]="buckets"
89+
[item]="item"
90+
[hasCorrectAnswer]="hasCorrectAnswer"
91+
[isDisabled]="isDisabled"
92+
(onStudentDataChanged)="studentDataChanged()"
93+
/>
94+
</li>
95+
}
96+
</ul>
97+
</div>
98+
</div>
99+
}
100+
</div>
100101
</div>
101102
<match-feedback-section
102103
[componentContent]="componentContent"
@@ -105,24 +106,24 @@ <h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
105106
[isLatestComponentStateSubmit]="isLatestComponentStateSubmit"
106107
[submitCounter]="submitCounter"
107108
/>
108-
<component-save-submit-buttons
109-
*ngIf="isSaveOrSubmitButtonVisible"
110-
[componentState]="latestComponentState"
111-
[isDirty]="isDirty"
112-
[isDisabled]="isDisabled"
113-
[isSaveButtonVisible]="isSaveButtonVisible"
114-
[isSubmitButtonDisabled]="isSubmitButtonDisabled"
115-
[isSubmitButtonVisible]="isSubmitButtonVisible"
116-
[isSubmitDirty]="isSubmitDirty"
117-
(saveButtonClicked)="saveButtonClicked($event)"
118-
(submitButtonClicked)="submitButtonClicked($event)"
119-
>
120-
</component-save-submit-buttons>
121-
<component-annotations
122-
*ngIf="mode === 'student'"
123-
[annotations]="latestAnnotations"
124-
[maxScore]="componentContent.maxScore"
125-
[nodeId]="nodeId"
126-
[componentId]="componentId"
127-
>
128-
</component-annotations>
109+
@if (isSaveOrSubmitButtonVisible) {
110+
<component-save-submit-buttons
111+
[componentState]="latestComponentState"
112+
[isDirty]="isDirty"
113+
[isDisabled]="isDisabled"
114+
[isSaveButtonVisible]="isSaveButtonVisible"
115+
[isSubmitButtonDisabled]="isSubmitButtonDisabled"
116+
[isSubmitButtonVisible]="isSubmitButtonVisible"
117+
[isSubmitDirty]="isSubmitDirty"
118+
(saveButtonClicked)="saveButtonClicked($event)"
119+
(submitButtonClicked)="submitButtonClicked($event)"
120+
/>
121+
}
122+
@if (mode === 'student') {
123+
<component-annotations
124+
[annotations]="latestAnnotations"
125+
[maxScore]="componentContent.maxScore"
126+
[nodeId]="nodeId"
127+
[componentId]="componentId"
128+
/>
129+
}

‎src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.spec.ts‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
// @ts-nocheck
2-
import { NO_ERRORS_SCHEMA } from '@angular/core';
32
import { ComponentFixture, TestBed } from '@angular/core/testing';
43
import { StudentTeacherCommonServicesModule } from '../../../../../../app/student-teacher-common-services.module';
54
import { Component } from '../../../../common/Component';
65
import { copy } from '../../../../common/object/object';
76
import { ClickToSnipImageService } from '../../../../services/clickToSnipImageService';
87
import { ProjectService } from '../../../../services/projectService';
9-
import { MatchStudentDefault } from './match-student-default.component';
8+
import { MatchStudentDefaultComponent } from './match-student-default.component';
109
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
1110

12-
let component: MatchStudentDefault;
13-
let fixture: ComponentFixture<MatchStudentDefault>;
11+
let component: MatchStudentDefaultComponent;
12+
let fixture: ComponentFixture<MatchStudentDefaultComponent>;
1413
let bucket1: any;
1514
let bucket2: any;
1615
let bucket3: any;
@@ -49,12 +48,10 @@ let starterBucketLabel = 'Starter Choices';
4948
describe('MatchStudentDefaultComponent', () => {
5049
beforeEach(() => {
5150
TestBed.configureTestingModule({
52-
declarations: [MatchStudentDefault],
53-
schemas: [NO_ERRORS_SCHEMA],
54-
imports: [StudentTeacherCommonServicesModule],
51+
imports: [MatchStudentDefaultComponent, StudentTeacherCommonServicesModule],
5552
providers: [provideHttpClient(withInterceptorsFromDi())]
5653
});
57-
fixture = TestBed.createComponent(MatchStudentDefault);
54+
fixture = TestBed.createComponent(MatchStudentDefaultComponent);
5855
component = fixture.componentInstance;
5956
choice1 = createChoice(choiceId1, choiceValue1);
6057
choice2 = createChoice(choiceId2, choiceValue2);
@@ -94,6 +91,7 @@ describe('MatchStudentDefaultComponent', () => {
9491
};
9592
component.component = new Component(componentContent, nodeId);
9693
spyOn(TestBed.inject(ProjectService), 'getComponent').and.returnValue(copy(componentContent));
94+
spyOn(TestBed.inject(ProjectService), 'getThemeSettings').and.returnValue({});
9795
spyOn(component, 'subscribeToSubscriptions').and.callFake(() => {});
9896
spyOn(component, 'broadcastDoneRenderingComponent').and.callFake(() => {});
9997
spyOn(component, 'isAddToNotebookEnabled').and.callFake(() => {
@@ -381,32 +379,27 @@ function getCorrectness() {
381379
it('should get correctness from feedback object when it is true', () => {
382380
const isCorrect = true;
383381
const feedbackObject = createFeedback(choiceId1, '', isCorrect);
384-
expect(component.getCorrectness(feedbackObject, true, 0)).toEqual(isCorrect);
382+
expect(component.getCorrectness(feedbackObject, 0)).toEqual(isCorrect);
385383
});
386384

387385
it('should get correctness from feedback object when it is false', () => {
388386
const isCorrect = false;
389387
const feedbackObject = createFeedback(choiceId1, '', isCorrect);
390-
expect(component.getCorrectness(feedbackObject, true, 0)).toEqual(isCorrect);
388+
expect(component.getCorrectness(feedbackObject, 0)).toEqual(isCorrect);
391389
});
392390

393391
it(`should get correctness from feedback object when position matters and it is in the correct
394392
position`, () => {
395393
const isCorrect = true;
396394
const feedbackObject = createFeedback(choiceId1, '', isCorrect, 1);
397-
expect(component.getCorrectness(feedbackObject, true, 1)).toEqual(isCorrect);
395+
expect(component.getCorrectness(feedbackObject, 1)).toEqual(isCorrect);
398396
});
399397

400398
it(`should get correctness from feedback object when position matters and it is not in the
401399
correct position`, () => {
402400
const isCorrect = false;
403401
const feedbackObject = createFeedback(choiceId1, '', isCorrect, 1);
404-
expect(component.getCorrectness(feedbackObject, true, 2)).toEqual(isCorrect);
405-
});
406-
407-
it('should get correctness from feedback object there is not correct answer', () => {
408-
const feedbackObject = createFeedback(choiceId1, '', false, 1);
409-
expect(component.getCorrectness(feedbackObject, false, 1)).toEqual(null);
402+
expect(component.getCorrectness(feedbackObject, 2)).toEqual(isCorrect);
410403
});
411404
});
412405
}

0 commit comments

Comments
 (0)