diff --git a/e2e/validation.e2e-spec.ts b/e2e/validation.e2e-spec.ts new file mode 100644 index 00000000..1a9e0016 --- /dev/null +++ b/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' + }); + }); + +}); diff --git a/src/app/index.html b/src/app/index.html index 4ef2c09f..0cfa674a 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -5,4 +5,7 @@
  • Native form controls
  • +
  • + Validation +
  • diff --git a/src/app/public/styles/_forms.scss b/src/app/public/styles/_forms.scss index 90318351..07d952d9 100644 --- a/src/app/public/styles/_forms.scss +++ b/src/app/public/styles/_forms.scss @@ -27,7 +27,7 @@ } input.ng-invalid.ng-touched, -select.ng-invalid.submitted { +select.ng-invalid.ng-touched { @include sky-field-status(invalid); } diff --git a/src/app/visual/validation/index.html b/src/app/visual/validation/index.html new file mode 100644 index 00000000..644c0e09 --- /dev/null +++ b/src/app/visual/validation/index.html @@ -0,0 +1 @@ + diff --git a/src/app/visual/validation/validation-demo.component.html b/src/app/visual/validation/validation-demo.component.html new file mode 100644 index 00000000..6fdbea12 --- /dev/null +++ b/src/app/visual/validation/validation-demo.component.html @@ -0,0 +1,12 @@ +
    + + +
    +
    + +
    diff --git a/src/app/visual/validation/validation-demo.component.scss b/src/app/visual/validation/validation-demo.component.scss new file mode 100644 index 00000000..57df1ead --- /dev/null +++ b/src/app/visual/validation/validation-demo.component.scss @@ -0,0 +1,5 @@ +#text-input, #select-input { + width: 95%; + margin: 10px; + padding: 10px; +} diff --git a/src/app/visual/validation/validation-demo.component.ts b/src/app/visual/validation/validation-demo.component.ts new file mode 100644 index 00000000..cbaafa28 --- /dev/null +++ b/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; + +}