Updated error component visual test to show all images (#1241)

skyux-spa-visual-tests/src/app/error/error-visual.component.scss

@@ -0,0 +1,3 @@
+.error-screenshot {
+  display: inline-block;
+}

skyux-spa-visual-tests/src/app/error/error-visual.component.ts

@@ -6,7 +6,8 @@ import {
 
 @Component({
   selector: 'error-visual',
-  templateUrl: './error-visual.component.html'
+  templateUrl: './error-visual.component.html',
+  styleUrls: ['./error-visual.component.scss']
 })
 export class ErrorVisualComponent {
   constructor(private modal: SkyErrorModalService) { }

skyux-spa-visual-tests/src/app/error/error.visual-spec.ts

@@ -3,17 +3,69 @@ import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
 import { element, by } from 'protractor';
 
 describe('Error', () => {
-
   it('should match previous screenshot for broken type', () => {
-    return SkyVisualTest.setupTest('error')
-    .then(() => {
-      return SkyVisualTest.compareScreenshot({
-        screenshotName: 'error-images',
-        selector: '#screenshot-error-img',
-        checkAccessibility: true
+    return SkyVisualTest
+      .setupTest('error')
+      .then(() => {
+        SkyVisualTest.scrollElementIntoView('#screenshot-error-broken');
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'error-type-broken',
+          selector: '#screenshot-error-broken',
+          checkAccessibility: true
+        });
       });
-    });
+  });
 
+  it('should match previous screenshot for notfound type', () => {
+    return SkyVisualTest
+      .setupTest('error')
+      .then(() => {
+        SkyVisualTest.scrollElementIntoView('#screenshot-error-notfound');
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'error-type-notfound',
+          selector: '#screenshot-error-notfound',
+          checkAccessibility: true
+        });
+      });
+  });
+
+  it('should match previous screenshot for construction type', () => {
+    return SkyVisualTest
+      .setupTest('error')
+      .then(() => {
+        SkyVisualTest.scrollElementIntoView('#screenshot-error-construction');
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'error-type-construction',
+          selector: '#screenshot-error-construction',
+          checkAccessibility: true
+        });
+      });
+  });
+
+  it('should match previous screenshot for security type', () => {
+    return SkyVisualTest
+      .setupTest('error')
+      .then(() => {
+        SkyVisualTest.scrollElementIntoView('#screenshot-error-security');
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'error-type-security',
+          selector: '#screenshot-error-security',
+          checkAccessibility: true
+        });
+      });
+  });
+
+  it('should match previous screenshot for custom type', () => {
+    return SkyVisualTest
+      .setupTest('error')
+      .then(() => {
+        SkyVisualTest.scrollElementIntoView('#screenshot-error-custom');
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'error-type-custom',
+          selector: '#screenshot-error-custom',
+          checkAccessibility: true
+        });
+      });
   });
 
   it('should match previous error modal form screenshot', () => {