Skip to content

Commit 07781ee

Browse files
afarzat-edafarzat-ed
committed
Updating unit tests
1 parent 8e09228 commit 07781ee

File tree

3 files changed

+126
-155
lines changed

3 files changed

+126
-155
lines changed

‎projects/demo_app/src/app/app.component.spec.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { TestBed } from '@angular/core/testing';
2+
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
23
import { AppComponent } from './app.component';
34

45
describe('AppComponent', () => {
5-
beforeEach(() => TestBed.configureTestingModule({
6-
declarations: [AppComponent]
7-
}));
6+
beforeEach(() => TestBed.configureTestingModule({
7+
declarations: [AppComponent],
8+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
9+
}));
810

911
it('should create the app', () => {
1012
const fixture = TestBed.createComponent(AppComponent);

‎projects/plotly/src/lib/plotly.component.spec.ts‎

Lines changed: 28 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { SimpleChange } from '@angular/core';
1+
import { SimpleChange, ComponentRef } from '@angular/core';
22
import { ComponentFixture, TestBed } from '@angular/core/testing';
33

44
import { PlotlyComponent } from './plotly.component';
@@ -12,6 +12,7 @@ PlotlyService.setPlotly(PlotlyJS);
1212
describe('PlotlyComponent', () => {
1313
let component: PlotlyComponent;
1414
let fixture: ComponentFixture<PlotlyComponent>;
15+
let componentRef: ComponentRef<PlotlyComponent>;
1516
let windowSpy: jasmine.SpyObj<Window>;
1617

1718
beforeEach(async () => {
@@ -27,6 +28,7 @@ describe('PlotlyComponent', () => {
2728

2829
beforeEach(() => {
2930
fixture = TestBed.createComponent(PlotlyComponent);
31+
componentRef = fixture.componentRef;
3032
component = fixture.componentInstance;
3133
fixture.detectChanges();
3234
});
@@ -37,56 +39,53 @@ describe('PlotlyComponent', () => {
3739
});
3840

3941
it('should receive the style from the property', () => {
40-
component.style = { 'background-color': 'red' };
42+
componentRef.setInput('style', { 'background-color': 'red' });
4143
fixture.detectChanges();
4244
expect(component.plotEl.nativeElement.style.backgroundColor).toBe('red');
4345
});
4446

4547
it('should add the id in the #plotEl', () => {
4648
expect(component.plotEl.nativeElement.id).toBe('');
47-
component.divId = 'some-id';
49+
componentRef.setInput('divId', 'some-id');
4850
fixture.detectChanges();
4951
expect(component.plotEl.nativeElement.id).toBe('some-id');
50-
component.divId = undefined;
52+
componentRef.setInput('divId', undefined);
5153
fixture.detectChanges();
5254
expect(component.plotEl.nativeElement.id).toBe('');
5355
});
5456

5557
it('should update when change the revision number', () => {
5658
spyOn(component, 'updatePlot');
5759

58-
component.revision = 0;
59-
component.ngOnChanges({revision: new SimpleChange(null, component.revision, true)});
60+
componentRef.setInput('revision', 0);
6061
fixture.detectChanges();
6162
expect(component.updatePlot).not.toHaveBeenCalled();
6263

63-
component.revision = 1;
64-
component.ngOnChanges({revision: new SimpleChange(0, component.revision, false)});
64+
componentRef.setInput('revision', 1);
6565
fixture.detectChanges();
66-
expect(component.updatePlot).toHaveBeenCalled();
66+
expect(component.updatePlot).toHaveBeenCalledTimes(1);
6767

68-
component.revision = 2;
69-
component.ngOnChanges({revision: new SimpleChange(1, component.revision, false)});
68+
componentRef.setInput('revision', 2);
7069
fixture.detectChanges();
7170
expect(component.updatePlot).toHaveBeenCalledTimes(2);
7271
});
7372

7473
it('should update the graph when the data changes', (done) => {
7574
spyOn(component, 'updatePlot');
76-
component.data = [{ y: [10, 15, 13, 17], type: 'box' }];
75+
componentRef.setInput('data', [{ y: [10, 15, 13, 17], type: 'box' }]);
7776

7877
component.createPlot().then(() => {
7978
component.ngDoCheck();
8079
expect(component.updatePlot).not.toHaveBeenCalled();
8180

82-
component.data = [{ y: [11, 15, 13, 17], type: 'box' }];
81+
componentRef.setInput('data', [{ y: [11, 15, 13, 17], type: 'box' }]);
8382
component.ngDoCheck();
8483
expect(component.updatePlot).toHaveBeenCalled();
8584

8685
component.ngDoCheck();
8786
expect(component.updatePlot).toHaveBeenCalledTimes(1);
8887

89-
component.data[0].y[0] = 12;
88+
component.data()[0].y[0] = 12;
9089
component.ngDoCheck();
9190
expect(component.updatePlot).toHaveBeenCalledTimes(2);
9291
done();
@@ -95,19 +94,19 @@ describe('PlotlyComponent', () => {
9594

9695
it('should update the layout when the object changes', (done) => {
9796
spyOn(component, 'updatePlot');
98-
component.layout = {title: 'title one'};
97+
componentRef.setInput('layout', { title: 'title one' });
9998
component.createPlot().then(() => {
10099
component.ngDoCheck();
101100
expect(component.updatePlot).not.toHaveBeenCalled();
102101

103-
component.layout = {title: 'title two'};
102+
componentRef.setInput('layout', { title: 'title two' });
104103
component.ngDoCheck();
105104
expect(component.updatePlot).toHaveBeenCalled();
106105

107106
component.ngDoCheck();
108107
expect(component.updatePlot).toHaveBeenCalledTimes(1);
109108

110-
component.layout['title'] = 'title three ';
109+
component.layout()['title'] = 'title three ';
111110
component.ngDoCheck();
112111
expect(component.updatePlot).toHaveBeenCalledTimes(2);
113112
done();
@@ -118,12 +117,12 @@ describe('PlotlyComponent', () => {
118117
expect(component.getClassName()).toBe('js-plotly-plot');
119118
expect(component.plotEl.nativeElement.className).toBe('js-plotly-plot');
120119

121-
component.className = 'some-class';
120+
componentRef.setInput('className', 'some-class');
122121
fixture.detectChanges();
123122
expect(component.getClassName()).toBe('js-plotly-plot some-class');
124123
expect(component.plotEl.nativeElement.className).toBe('js-plotly-plot some-class');
125124

126-
component.className = ['test2', 'test3'];
125+
componentRef.setInput('className', ['test2', 'test3']);
127126
fixture.detectChanges();
128127
expect(component.getClassName()).toBe('js-plotly-plot test2 test3');
129128
expect(component.plotEl.nativeElement.className).toBe('js-plotly-plot test2 test3');
@@ -135,9 +134,9 @@ describe('PlotlyComponent', () => {
135134

136135
expect(component.getWindow().gd).toBeUndefined();
137136
component.plotlyInstance = document.createElement('div') as any;
138-
component.debug = true;
137+
componentRef.setInput('debug', true);
139138
fixture.detectChanges();
140-
component.ngOnChanges({debug: new SimpleChange(false, component.debug, false)});
139+
component.ngOnChanges({ debug: new SimpleChange(false, component.debug(), false) });
141140

142141
expect(component.updatePlot).toHaveBeenCalled();
143142
setTimeout(() => {
@@ -163,11 +162,11 @@ describe('PlotlyComponent', () => {
163162
expect(component.getWindow().addEventListener).not.toHaveBeenCalled();
164163
expect(component.resizeHandler).toBeUndefined();
165164

166-
component.useResizeHandler = true;
165+
componentRef.setInput('useResizeHandler', true);
167166
component.updateWindowResizeHandler();
168167
expect(component.resizeHandler).toBeDefined();
169168

170-
component.useResizeHandler = false;
169+
componentRef.setInput('useResizeHandler', false);
171170
component.updateWindowResizeHandler();
172171
expect(component.resizeHandler).toBeUndefined();
173172
});
@@ -176,9 +175,9 @@ describe('PlotlyComponent', () => {
176175
const windowListenerCount = (window as any).eventListeners().length;
177176

178177
// make component responsive via both the lib and the component (at least 2 window events are added)
179-
component.layout = { title: 'responsive', autosize: true };
180-
component.config = { responsive: true };
181-
component.useResizeHandler = true;
178+
componentRef.setInput('layout', { title: 'responsive', autosize: true });
179+
componentRef.setInput('config', { responsive: true });
180+
componentRef.setInput('useResizeHandler', true);
182181

183182
await component.createPlot();
184183
await fixture.whenStable();
@@ -193,9 +192,9 @@ describe('PlotlyComponent', () => {
193192
it('should not cause errors if window is resized after a responsive chart is destroyed', async () => {
194193

195194
// make component responsive via both the lib and the component
196-
component.layout = { title: 'responsive', autosize: true };
197-
component.config = { responsive: true };
198-
component.useResizeHandler = true;
195+
componentRef.setInput('layout', { title: 'responsive', autosize: true });
196+
componentRef.setInput('config', { responsive: true });
197+
componentRef.setInput('useResizeHandler', true);
199198

200199
await component.createPlot();
201200
await fixture.whenStable();
@@ -217,31 +216,6 @@ describe('PlotlyComponent', () => {
217216
expect(PlotlyJS.Plots.resize).not.toHaveBeenCalled();
218217
});
219218

220-
xit('should load a theme', async () => {
221-
spyOn(component, 'loadTheme').and.callThrough();
222-
spyOn(component.themeLoader, 'load').and.callThrough();
223-
224-
component.theme = 'plotly_dark';
225-
226-
component.ngOnInit();
227-
await fixture.whenStable();
228-
229-
expect(component.loadTheme).toHaveBeenCalled();
230-
expect(component.themeLoader.load).toHaveBeenCalledOnceWith('plotly_dark');
231-
});
232-
233-
xit('should load NOT a theme', async () => {
234-
spyOn(component, 'loadTheme').and.callThrough();
235-
spyOn(component.themeLoader, 'load').and.callThrough();
236-
237-
component.theme = 'none';
238-
239-
component.ngOnInit();
240-
await fixture.whenStable();
241-
242-
expect(component.loadTheme).not.toHaveBeenCalled();
243-
expect(component.themeLoader.load).not.toHaveBeenCalledOnceWith('plotly_dark');
244-
});
245219

246220
it('should not cause errors if ngOnDestroy is called before plotly is initialized', () => {
247221
// note that this test intentionally does not call ngOnInit/whenStable

0 commit comments

Comments
 (0)