Skip to content

Commit adea73b

Browse files
tachojelevtachojelev
authored
Merge branch 'master' into tzhelev/fix-4898--master
2 parents b1767bb + cc416a8 commit adea73b

File tree

5 files changed

+39
-35
lines changed

5 files changed

+39
-35
lines changed

‎projects/igniteui-angular/src/lib/directives/button/button.directive.spec.ts

+6-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { Component, ViewChild } from '@angular/core';
22
import {
3-
async,
4-
TestBed
3+
async,
4+
TestBed
55
} from '@angular/core/testing';
66
import { By } from '@angular/platform-browser';
77
import { IgxButtonDirective } from './button.directive';
88

99
import { configureTestSuite } from '../../test-utils/configure-suite';
1010
import { IgxIconComponent, IgxIconService } from '../../icon';
11-
import { HttpClientTestingModule } from '@angular/common/http/testing';
1211
import { DisplayDensity } from '../../core/density';
1312

1413
const FLAT_RAISED_OUTLINED_BUTTON_COMPACT = 'igx-button--compact';
@@ -27,10 +26,9 @@ describe('IgxButton', () => {
2726
IgxButtonDirective,
2827
IgxIconComponent
2928
],
30-
imports: [HttpClientTestingModule],
3129
providers: [IgxIconService]
3230
})
33-
.compileComponents();
31+
.compileComponents();
3432
}));
3533

3634
it('Initializes a button', () => {
@@ -114,7 +112,7 @@ describe('IgxButton', () => {
114112

115113
@Component({
116114
template:
117-
`<span igxButton="flat" igx-ripple="white">
115+
`<span igxButton="flat" igx-ripple="white">
118116
<i class="material-icons">add</i>
119117
</span>`
120118
})
@@ -123,7 +121,7 @@ class InitButtonComponent {
123121

124122
@Component({
125123
template:
126-
`<span igxButton="raised"
124+
`<span igxButton="raised"
127125
[igxButtonColor]="foreground"
128126
[igxButtonBackground]="background"
129127
[disabled]="disabled">Test</span>`
@@ -136,7 +134,7 @@ class ButtonWithAttribsComponent {
136134

137135
@Component({
138136
template:
139-
`
137+
`
140138
<button #flat class="flatBtn" igxButton="flat" [displayDensity]="density">Flat</button>
141139
<button #raised class="raisedBtn" igxButton="raised" [displayDensity]="density">Raised</button>
142140
<button #outlined class="outlinedBtn" igxButton="outlined" [displayDensity]="density">Outlined</button>

‎projects/igniteui-angular/src/lib/icon/icon.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { IgxIconService } from './icon.service';
66
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/icon.html)
77
*
88
* The Ignite UI Icon makes it easy for developers to include material design icons directly in their markup. The icons
9-
* support custom colors and can be marked as active or disabled using the `isActive` property. This will change the appearence
9+
* support custom colors and can be marked as active or disabled using the `isActive` property. This will change the appearance
1010
* of the icon.
1111
*
1212
* Example:

‎projects/igniteui-angular/src/lib/icon/icon.service.spec.ts

+6-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { TestBed, async } from '@angular/core/testing';
1+
import { TestBed } from '@angular/core/testing';
22
import { IgxIconService } from './icon.service';
3-
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
43
import { DOCUMENT } from '@angular/common';
54

65
import { configureTestSuite } from '../test-utils/configure-suite';
@@ -17,7 +16,6 @@ describe('Icon Service', () => {
1716

1817
beforeEach(() => {
1918
TestBed.configureTestingModule({
20-
imports: [HttpClientTestingModule],
2119
providers: [IgxIconService]
2220
}).compileComponents();
2321
});
@@ -54,27 +52,22 @@ describe('Icon Service', () => {
5452

5553
it('should add custom svg icon from url', () => {
5654
const iconService = TestBed.get(IgxIconService) as IgxIconService;
57-
const httpMock = TestBed.get(HttpTestingController);
5855
const document = TestBed.get(DOCUMENT);
5956

6057
const iconName = 'test';
6158
const fontSet = 'svg-icons';
6259
const iconKey = fontSet + '_' + iconName;
6360

61+
spyOn(XMLHttpRequest.prototype, 'open').and.callThrough();
62+
spyOn(XMLHttpRequest.prototype, 'send');
63+
6464
iconService.addSvgIcon(iconName, 'test.svg', fontSet);
6565

66-
const req = httpMock.expectOne('test.svg');
67-
expect(req.request.method).toBe('GET');
68-
req.flush(svgText);
69-
70-
expect(iconService.isSvgIconCached(iconName, fontSet)).toBeTruthy();
71-
expect(iconService.getSvgIconKey(iconName, fontSet)).toEqual(iconKey);
66+
expect(XMLHttpRequest.prototype.open).toHaveBeenCalledTimes(1);
67+
expect(XMLHttpRequest.prototype.send).toHaveBeenCalledTimes(1);
7268

7369
const svgElement = document.querySelector(`svg[id='${iconKey}']`);
7470
expect(svgElement).toBeDefined();
75-
76-
// make sure thare are no outstanding requests
77-
httpMock.verify();
7871
});
7972

8073
it('should add custom svg icon from text', () => {

‎projects/igniteui-angular/src/lib/icon/icon.service.ts

+25-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Injectable, SecurityContext, Inject } from '@angular/core';
22
import { DomSanitizer } from '@angular/platform-browser';
3-
import { HttpClient } from '@angular/common/http';
43
import { DOCUMENT } from '@angular/common';
54

65
/**
@@ -19,13 +18,14 @@ import { DOCUMENT } from '@angular/common';
1918
@Injectable({
2019
providedIn: 'root'
2120
})
21+
2222
export class IgxIconService {
2323
private _fontSet = 'material-icons';
2424
private _fontSetAliases = new Map<string, string>();
2525
private _svgContainer: HTMLElement;
2626
private _cachedSvgIcons: Set<string> = new Set<string>();
2727

28-
constructor (private _sanitizer: DomSanitizer, private _httpClient: HttpClient, @Inject(DOCUMENT) private _document: any) { }
28+
constructor(private _sanitizer: DomSanitizer, @Inject(DOCUMENT) private _document: any) { }
2929

3030
/**
3131
* Returns the default font set.
@@ -108,7 +108,7 @@ export class IgxIconService {
108108
}
109109

110110
/**
111-
* Returns wheather a given SVG image is present in the cache.
111+
* Returns whether a given SVG image is present in the cache.
112112
*```typescript
113113
* const isSvgCached = this.iconService.isSvgIconCached('aruba', 'svg-flags');
114114
* ```
@@ -132,14 +132,28 @@ export class IgxIconService {
132132
* @hidden
133133
*/
134134
private fetchSvg(iconName: string, url: string, fontSet: string = '') {
135-
const request = this._httpClient.get(url, { responseType: 'text' });
136-
const subscription = request.subscribe((value: string) => {
137-
this.cacheSvgIcon(iconName, value, fontSet);
138-
}, (error) => {
139-
throw new Error(`Could not fetch SVG from url: ${url}; error: ${error.message}`);
140-
}, () => {
141-
subscription.unsubscribe();
142-
});
135+
const instance = this;
136+
const httpRequest = new XMLHttpRequest();
137+
httpRequest.open('GET', url, true);
138+
httpRequest.responseType = 'text';
139+
140+
// load – when the result is ready, that includes HTTP errors like 404.
141+
httpRequest.onload = function (event: ProgressEvent) {
142+
const request = event.target as XMLHttpRequest;
143+
if (request.status === 200) {
144+
instance.cacheSvgIcon(iconName, request.responseText, fontSet);
145+
} else {
146+
throw new Error(`Could not fetch SVG from url: ${url}; error: ${request.status} (${request.statusText})`);
147+
}
148+
};
149+
150+
// error – when the request couldn’t be made, e.g.network down or invalid URL.
151+
httpRequest.onerror = function (event: ProgressEvent) {
152+
const request = event.target as XMLHttpRequest;
153+
throw new Error(`Could not fetch SVG from url: ${url}; error status code: ${request.status} (${request.statusText})`);
154+
};
155+
156+
httpRequest.send();
143157
}
144158

145159
/**

‎projects/igniteui-angular/src/lib/icon/index.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
22
import { NgModule } from '@angular/core';
33

44
import { IgxIconComponent } from './icon.component';
5-
import { HttpClientModule } from '@angular/common/http';
65
import { DeprecateMethod } from '../core/deprecateDecorators';
76

87
/**
@@ -11,7 +10,7 @@ import { DeprecateMethod } from '../core/deprecateDecorators';
1110
@NgModule({
1211
declarations: [IgxIconComponent],
1312
exports: [IgxIconComponent],
14-
imports: [CommonModule, HttpClientModule]
13+
imports: [CommonModule]
1514
})
1615
export class IgxIconModule {
1716
@DeprecateMethod('IgxIconModule.forRoot method is deprecated. Use IgxIconModule instead.')

0 commit comments

Comments
 (0)