New visual tests

e2e/validation.e2e-spec.ts

@@ -0,0 +1,40 @@
+import {
+  by,
+  element
+} from 'protractor';
+
+import {
+  expect,
+  SkyHostBrowser
+} from '@skyux-sdk/e2e';
+
+describe('Validation', () => {
+
+  beforeEach(() => {
+    SkyHostBrowser.get('visual/validation');
+    SkyHostBrowser.setWindowBreakpoint('lg');
+  });
+
+  it('should match the text input required screenshot', (done) => {
+    // Click on input
+    element(by.css('#text-input input')).click();
+    // Click off input
+    element(by.css('#select-input select')).click();
+    expect('#text-input')
+      .toMatchBaselineScreenshot(done, {
+        screenshotName: 'standard-input-validation'
+      });
+  });
+
+  it('should match the select input required screenshot', (done) => {
+    // Click on select
+    element(by.css('#select-input select')).click();
+    // Click off select
+    element(by.css('#text-input input')).click();
+    expect('#select-input')
+      .toMatchBaselineScreenshot(done, {
+        screenshotName: 'select-validation'
+      });
+  });
+
+});

src/app/index.html

@@ -5,4 +5,7 @@
   <li>
     <a href="#" skyAppLink="/visual/inputs">Native form controls</a>
   </li>
+  <li>
+    <a href="#" skyAppLink="/visual/validation">Validation</a>
+  </li>
 </ul>

src/app/visual/validation/index.html

@@ -0,0 +1 @@
+<sky-validation-demo></sky-validation-demo>

src/app/visual/validation/validation-demo.component.html

@@ -0,0 +1,12 @@
+<div id="text-input">
+  <label for="textInput" class="sky-control-label sky-control-label-required">
+    Text Input
+  </label>
+  <input type="text" name="textInput" [(ngModel)]="textInput" class="sky-form-control" required>
+</div>
+<div id="select-input">
+  <select [(ngModel)]="selectInput" class="sky-form-control" required>
+    <option value="1">Option 1</option>
+    <option value="2">Option 2</option>
+  </select>
+</div>

src/app/visual/validation/validation-demo.component.scss

@@ -0,0 +1,5 @@
+#text-input, #select-input {
+  width: 95%;
+  margin: 10px;
+  padding: 10px;
+}

src/app/visual/validation/validation-demo.component.ts

@@ -0,0 +1,15 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'sky-validation-demo',
+  templateUrl: './validation-demo.component.html',
+  styleUrls: ['./validation-demo.component.scss']
+})
+export class SkyValidationDemoComponent {
+
+  public textInput: string;
+  public selectInput: string;
+
+}