build: avoid 404 warnings in Karma tests

Adds some logic to the Karma config in order to prevent 404s from being logged from some of the tests that need to reference images.

Fixes #15113.

Author: crisbeto

src/lib/icon/icon.spec.ts

@@ -42,7 +42,9 @@ describe('MatIcon', () => {
   let fakePath: string;
 
   beforeEach(async(() => {
-    fakePath = '/fake-path';
+    // The $ prefix tells Karma not to try to process the
+    // request so that we don't get warnings in our logs.
+    fakePath = '/$fake-path';
 
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, MatIconModule],
@@ -630,7 +632,7 @@ describe('MatIcon', () => {
 
       // We use a regex to match here, rather than the exact value, because different browsers
       // return different quotes through `getAttribute`, while some even omit the quotes altogether.
-      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/fake-path#blur['"]?\)$/);
+      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/\$fake-path#blur['"]?\)$/);
 
       tick();
     }));
@@ -651,17 +653,18 @@ describe('MatIcon', () => {
       fixture.detectChanges();
       let circle = fixture.nativeElement.querySelector('mat-icon svg circle');
 
-      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/fake-path#blur['"]?\)$/);
+      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/\$fake-path#blur['"]?\)$/);
       tick();
       fixture.destroy();
 
-      fakePath = '/another-fake-path';
+      fakePath = '/$another-fake-path';
       fixture = TestBed.createComponent(IconFromSvgName);
       fixture.componentInstance.iconName = 'fido';
       fixture.detectChanges();
       circle = fixture.nativeElement.querySelector('mat-icon svg circle');
 
-      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/another-fake-path#blur['"]?\)$/);
+      expect(circle.getAttribute('filter'))
+          .toMatch(/^url\(['"]?\/\$another-fake-path#blur['"]?\)$/);
       tick();
     }));
 
@@ -683,13 +686,13 @@ describe('MatIcon', () => {
 
       // We use a regex to match here, rather than the exact value, because different browsers
       // return different quotes through `getAttribute`, while some even omit the quotes altogether.
-      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/fake-path#blur['"]?\)$/);
+      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/\$fake-path#blur['"]?\)$/);
       tick();
 
-      fakePath = '/different-path';
+      fakePath = '/$different-path';
       fixture.detectChanges();
 
-      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/different-path#blur['"]?\)$/);
+      expect(circle.getAttribute('filter')).toMatch(/^url\(['"]?\/\$different-path#blur['"]?\)$/);
     }));
 
   });

test/karma.conf.js

@@ -5,13 +5,26 @@ module.exports = config => {
   config.set({
     basePath: path.join(__dirname, '..'),
     frameworks: ['jasmine'],
+    middleware: ['fake-url'],
     plugins: [
       require('karma-jasmine'),
       require('karma-browserstack-launcher'),
       require('karma-sauce-launcher'),
       require('karma-chrome-launcher'),
       require('karma-firefox-launcher'),
       require('karma-sourcemap-loader'),
+      {'middleware:fake-url': ['factory', function() {
+        // Middleware that avoids triggering 404s during tests that need to reference
+        // image paths. Assumes that the image path will start with `/$`.
+        return function(request, response, next) {
+          if (request.url.indexOf('/$') === 0) {
+            response.writeHead(200);
+            return response.end();
+          }
+
+          next();
+        }
+      }]}
     ],
     files: [
       {pattern: 'node_modules/core-js/client/core.min.js', included: true, watched: false},