-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(Project Authoring): Move concurrent authors subscription to …
…component (#1421)
- Loading branch information
1 parent
c6c1d64
commit 2c2a7ae
Showing
5 changed files
with
74 additions
and
59 deletions.
There are no files selected for viewing
42 changes: 28 additions & 14 deletions
42
...se5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,62 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { ConcurrentAuthorsMessageComponent } from './concurrent-authors-message.component'; | ||
| import { ConfigService } from '../../services/configService'; | ||
| import { By } from '@angular/platform-browser'; | ||
| import { TeacherProjectService } from '../../services/teacherProjectService'; | ||
| import { of } from 'rxjs'; | ||
|
|
||
| class MockConfigService { | ||
| getMyUsername(): string { | ||
| return 'aa'; | ||
| } | ||
| getWebSocketURL(): string { | ||
| return '/websocket'; | ||
| } | ||
| } | ||
|
|
||
| class MockTeacherProjectService {} | ||
|
|
||
| let component: ConcurrentAuthorsMessageComponent; | ||
| let fixture: ComponentFixture<ConcurrentAuthorsMessageComponent>; | ||
| describe('ConcurrentAuthorsMessageComponent', () => { | ||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [ConcurrentAuthorsMessageComponent], | ||
| providers: [{ provide: ConfigService, useClass: MockConfigService }] | ||
| providers: [ | ||
| { provide: ConfigService, useClass: MockConfigService }, | ||
| { provide: TeacherProjectService, useClass: MockTeacherProjectService } | ||
| ] | ||
| }); | ||
| fixture = TestBed.createComponent(ConcurrentAuthorsMessageComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
| ngOnChanges(); | ||
| ngOnInit(); | ||
| }); | ||
|
|
||
| function ngOnChanges() { | ||
| describe('ngOnChanges()', () => { | ||
| it('should set empty message when there are no other authors', () => { | ||
| expectMessage(['aa'], ''); | ||
| function ngOnInit() { | ||
| describe('ngOnInit()', () => { | ||
| it('set empty message when there are no other authors', () => { | ||
| expectMessage('["aa"]', ''); | ||
| }); | ||
| it('should set message to other authors when there are other authors', () => { | ||
| it('set message to author when there is one other author', () => { | ||
| expectMessage( | ||
| ['aa', 'bb'], | ||
| '["aa","bb"]', | ||
| "Also currently editing this unit: bb. Be careful not to overwrite each other's work!" | ||
| ); | ||
| }); | ||
| it('set message to comma-separated authors when there are two or more other authors', () => { | ||
| expectMessage( | ||
| ['aa', 'bb', 'cc'], | ||
| '["aa","bb","cc"]', | ||
| "Also currently editing this unit: bb, cc. Be careful not to overwrite each other's work!" | ||
| ); | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| function expectMessage(authors: string[], message: string) { | ||
| component.authors = authors; | ||
| component.ngOnChanges(); | ||
| expect(component.message).toEqual(message); | ||
| function expectMessage(authors: string, message: string) { | ||
| const spy = spyOn<any>(component['rxStomp'], 'watch').and.returnValue(of({ body: authors })); | ||
| component.ngOnInit(); | ||
| fixture.detectChanges(); | ||
| expect(fixture.debugElement.query(By.css('b')).nativeElement.innerHTML).toEqual(message); | ||
| expect(spy).toHaveBeenCalled(); | ||
| } |
46 changes: 35 additions & 11 deletions
46
...ts/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,47 @@ | ||
| import { Component, Input } from '@angular/core'; | ||
| import { ConfigService } from '../../services/configService'; | ||
| import { RxStomp } from '@stomp/rx-stomp'; | ||
| import { Message } from '@stomp/stompjs'; | ||
| import { TeacherProjectService } from '../../services/teacherProjectService'; | ||
|
|
||
| @Component({ | ||
| selector: 'concurrent-authors-message', | ||
| templateUrl: 'concurrent-authors-message.component.html' | ||
| }) | ||
| export class ConcurrentAuthorsMessageComponent { | ||
| @Input() authors: string[] = []; | ||
| message: string = ''; | ||
| protected message: string = ''; | ||
| private myUsername: string; | ||
| @Input() private projectId: number; | ||
| private rxStomp: RxStomp = new RxStomp(); | ||
|
|
||
| constructor(private configService: ConfigService) {} | ||
| constructor(private configService: ConfigService, private projectService: TeacherProjectService) { | ||
| this.myUsername = this.configService.getMyUsername(); | ||
| this.rxStomp.configure({ | ||
| brokerURL: this.configService.getWebSocketURL() | ||
| }); | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| this.rxStomp.activate(); | ||
| this.rxStomp.connected$.subscribe(() => { | ||
| this.projectService.notifyAuthorProjectBegin(this.projectId); | ||
| }); | ||
| this.subscribeToCurrentAuthors(); | ||
| } | ||
|
|
||
| private subscribeToCurrentAuthors(): void { | ||
| this.rxStomp.watch(`/topic/current-authors/${this.projectId}`).subscribe((message: Message) => { | ||
| const otherAuthors = JSON.parse(message.body).filter((author) => author != this.myUsername); | ||
| this.message = | ||
| otherAuthors.length > 0 | ||
| ? $localize`Also currently editing this unit: ${otherAuthors.join( | ||
| ', ' | ||
| )}. Be careful not to overwrite each other's work!` | ||
| : ''; | ||
| }); | ||
| } | ||
|
|
||
| ngOnChanges() { | ||
| this.authors.splice(this.authors.indexOf(this.configService.getMyUsername()), 1); | ||
| this.message = | ||
| this.authors.length > 0 | ||
| ? $localize`Also currently editing this unit: ${this.authors.join( | ||
| ', ' | ||
| )}. Be careful not to overwrite each other's work!` | ||
| : ''; | ||
| ngOnDestroy(): void { | ||
| this.rxStomp.deactivate(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters