extensions/objects/templates/unicode-string-editor.component.spec.ts
// Copyright 2021 The Oppia Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
/**
* @fileoverview Unit tests for unicode string editor.
*/
import {EventEmitter, SimpleChanges} from '@angular/core';
import {ExternalSaveService} from 'services/external-save.service';
import {FormsModule} from '@angular/forms';
import {UnicodeStringEditorComponent} from './unicode-string-editor.component';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
describe('UnicodeStringEditorComponent', () => {
let component: UnicodeStringEditorComponent;
let fixture: ComponentFixture<UnicodeStringEditorComponent>;
let externalSaveService: ExternalSaveService;
var externalSaveEventEmitter = new EventEmitter();
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [FormsModule],
declarations: [UnicodeStringEditorComponent],
}).compileComponents();
}));
beforeEach(angular.mock.module('oppia'));
beforeEach(() => {
fixture = TestBed.createComponent(UnicodeStringEditorComponent);
component = fixture.componentInstance;
externalSaveService = TestBed.get(ExternalSaveService);
spyOnProperty(externalSaveService, 'onExternalSave').and.returnValue(
externalSaveEventEmitter
);
component.alwaysEditable = false;
component.value = 'random value';
});
afterEach(() => {
component.ngOnDestroy();
});
it('should initialize component when interaction rule is selected', () => {
spyOn(component, 'closeEditor').and.callThrough();
spyOn(component.componentSubscriptions, 'add');
component.active = true;
component.alwaysEditable = false;
// Pre-check.
expect(component.active).toBe(true);
component.ngOnInit();
expect(component.componentSubscriptions.add).toHaveBeenCalled();
expect(externalSaveService.onExternalSave).toEqual(
externalSaveEventEmitter
);
// Subscription.add is called only if the text input is not always editable.
// Therefore, we verify that the value of alwaysEditable is false before
// checking subscription.add.
expect(component.alwaysEditable).toBe(false);
expect(component.closeEditor).toHaveBeenCalled();
expect(component.active).toBe(false);
});
it('should not add subscription when alwaysEditable is true', () => {
spyOn(component, 'closeEditor').and.callThrough();
spyOn(component.componentSubscriptions, 'add');
component.alwaysEditable = true;
component.active = true;
// Pre-check.
expect(component.active).toBe(true);
expect(component.alwaysEditable).toBe(true);
component.ngOnInit();
// We cannot test what componentSubscriptions.add has been called with since
// externalSaveService is a private variable and inside it is an anonymous
// function.
expect(component.componentSubscriptions.add).not.toHaveBeenCalled();
expect(component.alwaysEditable).toBe(true);
expect(component.closeEditor).not.toHaveBeenCalled();
expect(component.active).toBe(true);
});
it(
'should update value after broadcasting ' +
'externalSave event when closing modal',
() => {
component.active = true;
component.ngOnInit();
spyOn(component, 'closeEditor').and.callThrough();
// After execution of component.ngOnInit();, component.active is set to
// false. To test the subscribed observable, it needs to be set to true
// to call the closeEditor function.
component.active = true;
// Pre-check.
expect(component.active).toBe(true);
externalSaveEventEmitter.emit();
expect(component.closeEditor).toHaveBeenCalled();
expect(component.active).toBe(false);
}
);
it(
'should replace old value when new value is entered in' + 'the text box',
() => {
expect(component.value).toBe('random value');
component.updateLocalValue('new random value');
expect(component.value).toBe('new random value');
}
);
it('should become active when editor is opened', () => {
component.active = false;
expect(component.active).toBe(false);
component.openEditor();
expect(component.active).toBe(true);
});
it('should become inactive when editor is closed', () => {
component.active = true;
expect(component.active).toBe(true);
component.closeEditor();
expect(component.active).toBe(false);
});
it(
'should replace old value when new value is entered' +
' in the input field',
() => {
component.active = true;
// Pre-Check.
expect(component.value).toBe('random value');
expect(component.active).toBe(true);
component.replaceValue('new random value');
expect(component.value).toBe('new random value');
expect(component.active).toBe(false);
}
);
it('should make largeInput true when large input is entered', () => {
const changes: SimpleChanges = {
initArgs: {
previousValue: {
largeInput: false,
},
currentValue: {
largeInput: true,
},
firstChange: false,
isFirstChange: () => false,
},
};
component.largeInput = false;
// Pre-check.
expect(component.largeInput).toBe(false);
component.ngOnChanges(changes);
expect(component.largeInput).toBe(true);
});
it('should not make largeInput true when large input is not entered', () => {
const changes: SimpleChanges = {
initArgs: {
previousValue: {
largeInput: true,
},
currentValue: {
largeInput: true,
},
firstChange: false,
isFirstChange: () => false,
},
};
component.largeInput = false;
// Pre-check.
expect(component.largeInput).toBe(false);
component.ngOnChanges(changes);
expect(component.largeInput).toBe(false);
});
it('should unsubscribe when component is destroyed', () => {
spyOn(component.componentSubscriptions, 'unsubscribe').and.callThrough();
expect(component.componentSubscriptions.closed).toBe(false);
component.ngOnDestroy();
expect(component.componentSubscriptions.unsubscribe).toHaveBeenCalled();
expect(component.componentSubscriptions.closed).toBe(true);
});
});