diff --git a/skyux-spa-visual-tests/screenshots-baseline/error-Images-chrome-1000x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/error-Images-chrome-1000x800-dpr-1.png deleted file mode 100644 index 3ecc7ca70..000000000 Binary files a/skyux-spa-visual-tests/screenshots-baseline/error-Images-chrome-1000x800-dpr-1.png and /dev/null differ diff --git a/skyux-spa-visual-tests/src/app/error/error-visual.component.html b/skyux-spa-visual-tests/src/app/error/error-visual.component.html index 7c2358a49..c0a952b95 100644 --- a/skyux-spa-visual-tests/src/app/error/error-visual.component.html +++ b/skyux-spa-visual-tests/src/app/error/error-visual.component.html @@ -1,4 +1,4 @@ -
+
+
+
- +
+
+
+
+
+
@@ -49,22 +57,16 @@
-
- -
+ -
- -
+ diff --git a/skyux-spa-visual-tests/src/app/error/error-visual.component.scss b/skyux-spa-visual-tests/src/app/error/error-visual.component.scss new file mode 100644 index 000000000..f24e86765 --- /dev/null +++ b/skyux-spa-visual-tests/src/app/error/error-visual.component.scss @@ -0,0 +1,3 @@ +.error-screenshot { + display: inline-block; +} diff --git a/skyux-spa-visual-tests/src/app/error/error-visual.component.ts b/skyux-spa-visual-tests/src/app/error/error-visual.component.ts index d3a0daf61..23304ae80 100644 --- a/skyux-spa-visual-tests/src/app/error/error-visual.component.ts +++ b/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) { } diff --git a/skyux-spa-visual-tests/src/app/error/error.visual-spec.ts b/skyux-spa-visual-tests/src/app/error/error.visual-spec.ts index cdc80c4b1..afdb45123 100644 --- a/skyux-spa-visual-tests/src/app/error/error.visual-spec.ts +++ b/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', () => { diff --git a/src/app/components/error/error-demo.component.html b/src/app/components/error/error-demo.component.html index 782728718..b2d8ad256 100644 --- a/src/app/components/error/error-demo.component.html +++ b/src/app/components/error/error-demo.component.html @@ -1,44 +1,58 @@ -
-

Pre-defined error types

- - - - - - -
+
+ + + + + +
+ +
+ + + + + +
-
-
-

Custom error content

+
+ + + + +
- - - - - - {{ customTitle }} - - - {{ customDescription }} - - - - - -
-
- -
+
+ + + + + +
+ +
+ + + + + + custom title + + + custom description + + + + + +