From e0b88dea685ea996274d7711b022bdfde76db936 Mon Sep 17 00:00:00 2001 From: Blackbaud-ToddRoberts Date: Wed, 29 Nov 2017 14:02:56 -0500 Subject: [PATCH 01/10] popover guidelines (#1321) * popover guidelines * edits --- src/app/components/popover/index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app/components/popover/index.html b/src/app/components/popover/index.html index b396645fb..bffcf6e83 100644 --- a/src/app/components/popover/index.html +++ b/src/app/components/popover/index.html @@ -49,4 +49,9 @@ + + +

To ensure usability on touch devices, you should generally trigger popovers on click rather than on hover.

+ + From d50cbaa0fab47676b50a153ed941941ed520ae89 Mon Sep 17 00:00:00 2001 From: Steve Brush Date: Thu, 30 Nov 2017 10:57:40 -0500 Subject: [PATCH 02/10] Accessibility is checked by default during visual tests (#1313) --- .../config/utils/visual-test-commands.ts | 5 +++ .../action-button.visual-spec.ts | 12 +++---- .../src/app/alert/alert.visual-spec.ts | 3 +- .../src/app/avatar/avatar.visual-spec.ts | 6 ++-- .../src/app/button/button.visual-spec.ts | 6 ++-- .../src/app/card/card.visual-spec.ts | 18 ++++------ .../src/app/checkbox/checkbox.visual-spec.ts | 3 +- .../src/app/chevron/chevron.visual-spec.ts | 3 +- .../colorpicker/colorpicker.visual-spec.ts | 6 ++-- .../confirmation-dialog.visual-spec.ts | 12 +++---- .../app/datepicker/datepicker.visual-spec.ts | 15 +++++--- .../src/app/error/error.visual-spec.ts | 21 ++++------- .../src/app/filter/filter.visual-spec.ts | 12 +++---- .../app/fluid-grid/fluid-grid.visual-spec.ts | 15 +++----- .../src/app/forms/forms.visual-spec.ts | 3 +- .../src/app/grid/grid.visual-spec.ts | 9 ++--- .../help-inline/help-inline.visual-spec.ts | 6 ++-- .../src/app/key-info/key-info.visual-spec.ts | 3 +- .../src/app/label/label.visual-spec.ts | 3 +- .../link-records/link-records.visual-spec.ts | 18 ++++------ .../list-secondary-actions.visual-spec.ts | 3 +- .../src/app/modal/modal.visual-spec.ts | 36 +++++++------------ .../src/app/navbar/navbar.visual-spec.ts | 21 +++++++---- .../page-summary/page-summary.visual-spec.ts | 3 +- .../src/app/repeater/repeater.visual-spec.ts | 12 +++---- .../src/app/search/search.visual-spec.ts | 15 +++----- .../src/app/sort/sort.visual-spec.ts | 6 ++-- .../src/app/tabs/tabs.visual-spec.ts | 3 +- .../text-expand-repeater.visual-spec.ts | 2 -- .../src/app/tiles/tiles.visual-spec.ts | 6 ++-- .../src/app/toolbar/toolbar.visual-spec.ts | 6 ++-- .../src/app/wait/wait.visual-spec.ts | 18 ++++------ 32 files changed, 122 insertions(+), 188 deletions(-) diff --git a/skyux-spa-visual-tests/config/utils/visual-test-commands.ts b/skyux-spa-visual-tests/config/utils/visual-test-commands.ts index 71d866357..c3d313711 100644 --- a/skyux-spa-visual-tests/config/utils/visual-test-commands.ts +++ b/skyux-spa-visual-tests/config/utils/visual-test-commands.ts @@ -21,6 +21,7 @@ export class SkyVisualTest { public static compareScreenshot(options: SkyCompareScreenshotConfig): Promise { const subject = element(by.css(options.selector)); + const checkRegionConfig = { thresholdType: pixDiff.THRESHOLD_PERCENT, threshold: SkyVisualTest.THRESHOLD_PERCENT @@ -67,6 +68,10 @@ export class SkyVisualTest { } private static checkAccessibility(options: any): Promise { + if (options.checkAccessibility === undefined) { + options.checkAccessibility = true; + } + if (!options.checkAccessibility) { return; } diff --git a/skyux-spa-visual-tests/src/app/action-button/action-button.visual-spec.ts b/skyux-spa-visual-tests/src/app/action-button/action-button.visual-spec.ts index d2021ab9d..02f41c734 100644 --- a/skyux-spa-visual-tests/src/app/action-button/action-button.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/action-button/action-button.visual-spec.ts @@ -8,8 +8,7 @@ describe('Action button', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'action-button', - selector: '#screenshot-action-button', - checkAccessibility: true + selector: '#screenshot-action-button' }); }); @@ -22,8 +21,7 @@ describe('Action button', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'action-button-small', - selector: '#screenshot-action-button', - checkAccessibility: true + selector: '#screenshot-action-button' }); }); @@ -36,8 +34,7 @@ describe('Action button', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'action-button-container', - selector: '#screenshot-action-button-container', - checkAccessibility: true + selector: '#screenshot-action-button-container' }); }); @@ -50,8 +47,7 @@ describe('Action button', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'action-button-container-small', - selector: '#screenshot-action-button-container', - checkAccessibility: true + selector: '#screenshot-action-button-container' }); }); diff --git a/skyux-spa-visual-tests/src/app/alert/alert.visual-spec.ts b/skyux-spa-visual-tests/src/app/alert/alert.visual-spec.ts index 414f2d043..29e80f47e 100644 --- a/skyux-spa-visual-tests/src/app/alert/alert.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/alert/alert.visual-spec.ts @@ -8,8 +8,7 @@ describe('Alert', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'alert', - selector: '#screenshot-alert', - checkAccessibility: true + selector: '#screenshot-alert' }); }); diff --git a/skyux-spa-visual-tests/src/app/avatar/avatar.visual-spec.ts b/skyux-spa-visual-tests/src/app/avatar/avatar.visual-spec.ts index 027c6bb4f..71ea22c07 100644 --- a/skyux-spa-visual-tests/src/app/avatar/avatar.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/avatar/avatar.visual-spec.ts @@ -8,8 +8,7 @@ describe('Avatar', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'avatar-image', - selector: '#screenshot-avatar-img', - checkAccessibility: true + selector: '#screenshot-avatar-img' }); }); @@ -21,8 +20,7 @@ describe('Avatar', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'avatar-initials', - selector: '#screenshot-avatar-initials', - checkAccessibility: true + selector: '#screenshot-avatar-initials' }); }); diff --git a/skyux-spa-visual-tests/src/app/button/button.visual-spec.ts b/skyux-spa-visual-tests/src/app/button/button.visual-spec.ts index 296a0e318..60b811d0f 100644 --- a/skyux-spa-visual-tests/src/app/button/button.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/button/button.visual-spec.ts @@ -15,8 +15,7 @@ describe('Button', () => { return SkyVisualTest .compareScreenshot({ screenshotName: 'button-link-hover', - selector: '#screenshot-button-link', - checkAccessibility: true + selector: '#screenshot-button-link' }); }); @@ -33,8 +32,7 @@ describe('Button', () => { return SkyVisualTest .compareScreenshot({ screenshotName: 'button-link-inline-hover', - selector: '#screenshot-button-link-inline', - checkAccessibility: true + selector: '#screenshot-button-link-inline' }); }); diff --git a/skyux-spa-visual-tests/src/app/card/card.visual-spec.ts b/skyux-spa-visual-tests/src/app/card/card.visual-spec.ts index d67d707ee..683655e4f 100644 --- a/skyux-spa-visual-tests/src/app/card/card.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/card/card.visual-spec.ts @@ -11,8 +11,7 @@ describe('Card', () => { return SkyVisualTest .compareScreenshot({ screenshotName: 'card-all', - selector: '#screenshot-card-all', - checkAccessibility: true + selector: '#screenshot-card-all' }); }); }); @@ -23,8 +22,7 @@ describe('Card', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'card-noheader', - selector: '#screenshot-card-noheader', - checkAccessibility: true + selector: '#screenshot-card-noheader' }); }); }); @@ -35,8 +33,7 @@ describe('Card', () => { SkyVisualTest.scrollElementIntoView('#screenshot-card-noactions'); return SkyVisualTest.compareScreenshot({ screenshotName: 'card-noactions', - selector: '#screenshot-card-noactions', - checkAccessibility: true + selector: '#screenshot-card-noactions' }); }); }); @@ -47,8 +44,7 @@ describe('Card', () => { SkyVisualTest.scrollElementIntoView('#screenshot-card-selectable'); return SkyVisualTest.compareScreenshot({ screenshotName: 'card-selectable', - selector: '#screenshot-card-selectable', - checkAccessibility: true + selector: '#screenshot-card-selectable' }); }); }); @@ -60,8 +56,7 @@ describe('Card', () => { element(by.css('#screenshot-card-selectable .sky-card-title')).click(); return SkyVisualTest.compareScreenshot({ screenshotName: 'card-selected', - selector: '#screenshot-card-selectable', - checkAccessibility: true + selector: '#screenshot-card-selectable' }); }); }); @@ -72,8 +67,7 @@ describe('Card', () => { SkyVisualTest.scrollElementIntoView('#screenshot-card-overflow'); SkyVisualTest.compareScreenshot({ screenshotName: 'card-title-overflow', - selector: '#screenshot-card-overflow', - checkAccessibility: true + selector: '#screenshot-card-overflow' }); }); }); diff --git a/skyux-spa-visual-tests/src/app/checkbox/checkbox.visual-spec.ts b/skyux-spa-visual-tests/src/app/checkbox/checkbox.visual-spec.ts index 2d5e53ef9..20612da8a 100644 --- a/skyux-spa-visual-tests/src/app/checkbox/checkbox.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/checkbox/checkbox.visual-spec.ts @@ -7,8 +7,7 @@ describe('Checkbox', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'checkbox', - selector: '#screenshot-checkbox', - checkAccessibility: true + selector: '#screenshot-checkbox' }); }); diff --git a/skyux-spa-visual-tests/src/app/chevron/chevron.visual-spec.ts b/skyux-spa-visual-tests/src/app/chevron/chevron.visual-spec.ts index 6e63deab2..f27f4ac88 100644 --- a/skyux-spa-visual-tests/src/app/chevron/chevron.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/chevron/chevron.visual-spec.ts @@ -7,8 +7,7 @@ describe('Chevron', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'chevron', - selector: '#screenshot-chevron', - checkAccessibility: true + selector: '#screenshot-chevron' }); }); diff --git a/skyux-spa-visual-tests/src/app/colorpicker/colorpicker.visual-spec.ts b/skyux-spa-visual-tests/src/app/colorpicker/colorpicker.visual-spec.ts index e0243dae0..1aa2bbeac 100644 --- a/skyux-spa-visual-tests/src/app/colorpicker/colorpicker.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/colorpicker/colorpicker.visual-spec.ts @@ -10,7 +10,8 @@ describe('Colorpicker', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'colorpicker-closed', - selector: '#screenshot-colorpicker' + selector: '#screenshot-colorpicker', + checkAccessibility: false }); }); }); @@ -23,7 +24,8 @@ describe('Colorpicker', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'colorpicker-opened', - selector: '.sky-colorpicker-container' + selector: '.sky-colorpicker-container', + checkAccessibility: false }); }); }); diff --git a/skyux-spa-visual-tests/src/app/confirmation-dialog/confirmation-dialog.visual-spec.ts b/skyux-spa-visual-tests/src/app/confirmation-dialog/confirmation-dialog.visual-spec.ts index cc3113f47..f58b2c171 100644 --- a/skyux-spa-visual-tests/src/app/confirmation-dialog/confirmation-dialog.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/confirmation-dialog/confirmation-dialog.visual-spec.ts @@ -11,8 +11,7 @@ describe('Confirmation dialog', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'confirmation-dialog-one-button', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-confirmation-dialog-buttons .sky-btn-primary')).click(); }); @@ -26,8 +25,7 @@ describe('Confirmation dialog', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'confirmation-dialog-two-button', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-confirmation-dialog-buttons .sky-btn-primary')).click(); }); @@ -41,8 +39,7 @@ describe('Confirmation dialog', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'confirmation-dialog-three-button', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-confirmation-dialog-buttons .sky-btn-primary')).click(); }); @@ -56,8 +53,7 @@ describe('Confirmation dialog', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'confirmation-dialog-long-description', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-confirmation-dialog-buttons .sky-btn-primary')).click(); }); diff --git a/skyux-spa-visual-tests/src/app/datepicker/datepicker.visual-spec.ts b/skyux-spa-visual-tests/src/app/datepicker/datepicker.visual-spec.ts index 95f814885..ec382dfd3 100644 --- a/skyux-spa-visual-tests/src/app/datepicker/datepicker.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/datepicker/datepicker.visual-spec.ts @@ -10,7 +10,8 @@ describe('Datepicker', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'datepicker-daypicker', - selector: '#screenshot-datepicker-calendar' + selector: '#screenshot-datepicker-calendar', + checkAccessibility: false }); }); @@ -23,7 +24,8 @@ describe('Datepicker', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'datepicker-monthpicker', - selector: '#screenshot-datepicker-calendar' + selector: '#screenshot-datepicker-calendar', + checkAccessibility: false }); }); @@ -37,7 +39,8 @@ describe('Datepicker', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'datepicker-yearpicker', - selector: '#screenshot-datepicker-calendar' + selector: '#screenshot-datepicker-calendar', + checkAccessibility: false }); }); @@ -49,7 +52,8 @@ describe('Datepicker', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'datepicker-input', - selector: '#screenshot-datepicker' + selector: '#screenshot-datepicker', + checkAccessibility: false }); }); @@ -62,7 +66,8 @@ describe('Datepicker', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'datepicker-input-open', - selector: '#screenshot-datepicker' + selector: '#screenshot-datepicker', + checkAccessibility: false }); }); 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 afdb45123..46da1455f 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 @@ -10,8 +10,7 @@ describe('Error', () => { SkyVisualTest.scrollElementIntoView('#screenshot-error-broken'); return SkyVisualTest.compareScreenshot({ screenshotName: 'error-type-broken', - selector: '#screenshot-error-broken', - checkAccessibility: true + selector: '#screenshot-error-broken' }); }); }); @@ -23,8 +22,7 @@ describe('Error', () => { SkyVisualTest.scrollElementIntoView('#screenshot-error-notfound'); return SkyVisualTest.compareScreenshot({ screenshotName: 'error-type-notfound', - selector: '#screenshot-error-notfound', - checkAccessibility: true + selector: '#screenshot-error-notfound' }); }); }); @@ -36,8 +34,7 @@ describe('Error', () => { SkyVisualTest.scrollElementIntoView('#screenshot-error-construction'); return SkyVisualTest.compareScreenshot({ screenshotName: 'error-type-construction', - selector: '#screenshot-error-construction', - checkAccessibility: true + selector: '#screenshot-error-construction' }); }); }); @@ -49,8 +46,7 @@ describe('Error', () => { SkyVisualTest.scrollElementIntoView('#screenshot-error-security'); return SkyVisualTest.compareScreenshot({ screenshotName: 'error-type-security', - selector: '#screenshot-error-security', - checkAccessibility: true + selector: '#screenshot-error-security' }); }); }); @@ -62,8 +58,7 @@ describe('Error', () => { SkyVisualTest.scrollElementIntoView('#screenshot-error-custom'); return SkyVisualTest.compareScreenshot({ screenshotName: 'error-type-custom', - selector: '#screenshot-error-custom', - checkAccessibility: true + selector: '#screenshot-error-custom' }); }); }); @@ -75,8 +70,7 @@ describe('Error', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'error-modal-form', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }); }) .then(() => element(by.css('.sky-error-modal-close .sky-btn-primary')).click() as any); @@ -89,8 +83,7 @@ describe('Error', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'error-modal-form-long-description', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }); }) .then(() => element(by.css('.sky-error-modal-close .sky-btn-primary')).click() as any); diff --git a/skyux-spa-visual-tests/src/app/filter/filter.visual-spec.ts b/skyux-spa-visual-tests/src/app/filter/filter.visual-spec.ts index 1671b1689..d014e2dc5 100644 --- a/skyux-spa-visual-tests/src/app/filter/filter.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/filter/filter.visual-spec.ts @@ -9,8 +9,7 @@ describe('Filter', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'filter-button', - selector: '#screenshot-filter-button', - checkAccessibility: true + selector: '#screenshot-filter-button' }); }); @@ -22,8 +21,7 @@ describe('Filter', () => { element(by.css('.sky-btn-default')).click(); return SkyVisualTest.compareScreenshot({ screenshotName: 'filter-button-active', - selector: '#screenshot-filter-button', - checkAccessibility: true + selector: '#screenshot-filter-button' }); }); @@ -34,8 +32,7 @@ describe('Filter', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'filter-summary', - selector: '#screenshot-filter-summary', - checkAccessibility: true + selector: '#screenshot-filter-summary' }); }); @@ -46,8 +43,7 @@ describe('Filter', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'filter-inline', - selector: '#screenshot-filter-inline', - checkAccessibility: true + selector: '#screenshot-filter-inline' }); }); diff --git a/skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid.visual-spec.ts b/skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid.visual-spec.ts index d5f96d88f..88e06bd60 100644 --- a/skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid.visual-spec.ts @@ -7,8 +7,7 @@ describe('Fluid grid', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'fluid-grid-screenxsmall', - selector: '#screenshot-fluid-grid-xsmall', - checkAccessibility: true + selector: '#screenshot-fluid-grid-xsmall' }); }); }); @@ -18,8 +17,7 @@ describe('Fluid grid', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'fluid-grid-screensmall-evenrow', - selector: '#screenshot-fluid-grid', - checkAccessibility: true + selector: '#screenshot-fluid-grid' }); }); }); @@ -29,8 +27,7 @@ describe('Fluid grid', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'fluid-grid-screenmedium-tworows', - selector: '#screenshot-fluid-grid', - checkAccessibility: true + selector: '#screenshot-fluid-grid' }); }); }); @@ -40,8 +37,7 @@ describe('Fluid grid', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'fluid-grid-screenlarge-unevenrow', - selector: '#screenshot-fluid-grid', - checkAccessibility: true + selector: '#screenshot-fluid-grid' }); }); }); @@ -51,8 +47,7 @@ describe('Fluid grid', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'fluid-grid-reversecolumnorder', - selector: '#screenshot-fluid-grid-reverse', - checkAccessibility: true + selector: '#screenshot-fluid-grid-reverse' }); }); }); diff --git a/skyux-spa-visual-tests/src/app/forms/forms.visual-spec.ts b/skyux-spa-visual-tests/src/app/forms/forms.visual-spec.ts index 1164fb56e..5221db663 100644 --- a/skyux-spa-visual-tests/src/app/forms/forms.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/forms/forms.visual-spec.ts @@ -7,8 +7,7 @@ describe('Forms', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'label-required', - selector: '#screenshot-required-label', - checkAccessibility: true + selector: '#screenshot-required-label' }); }); }); diff --git a/skyux-spa-visual-tests/src/app/grid/grid.visual-spec.ts b/skyux-spa-visual-tests/src/app/grid/grid.visual-spec.ts index 372835cac..4df3049a4 100644 --- a/skyux-spa-visual-tests/src/app/grid/grid.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/grid/grid.visual-spec.ts @@ -8,8 +8,7 @@ describe('grid component', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'grid', - selector: '#screenshot-grid', - checkAccessibility: true + selector: '#screenshot-grid' }); }); @@ -21,8 +20,7 @@ describe('grid component', () => { element(by.css('th')).click(); return SkyVisualTest.compareScreenshot({ screenshotName: 'grid-sort-desc', - selector: '#screenshot-grid', - checkAccessibility: true + selector: '#screenshot-grid' }); }); @@ -35,8 +33,7 @@ describe('grid component', () => { element(by.css('th')).click(); return SkyVisualTest.compareScreenshot({ screenshotName: 'grid-sort-asc', - selector: '#screenshot-grid', - checkAccessibility: true + selector: '#screenshot-grid' }); }); diff --git a/skyux-spa-visual-tests/src/app/help-inline/help-inline.visual-spec.ts b/skyux-spa-visual-tests/src/app/help-inline/help-inline.visual-spec.ts index 66b659a91..fef0000a5 100644 --- a/skyux-spa-visual-tests/src/app/help-inline/help-inline.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/help-inline/help-inline.visual-spec.ts @@ -9,8 +9,7 @@ describe('Help inline', () => { .then(() => { SkyVisualTest.compareScreenshot({ screenshotName: 'help-inline', - selector: '#screenshot-help-inline', - checkAccessibility: true + selector: '#screenshot-help-inline' }); }); }); @@ -26,8 +25,7 @@ describe('Help inline', () => { return SkyVisualTest .compareScreenshot({ screenshotName: 'help-inline-hover', - selector: '#screenshot-help-inline', - checkAccessibility: true + selector: '#screenshot-help-inline' }); }); diff --git a/skyux-spa-visual-tests/src/app/key-info/key-info.visual-spec.ts b/skyux-spa-visual-tests/src/app/key-info/key-info.visual-spec.ts index 77c31f5f5..6bc681b66 100644 --- a/skyux-spa-visual-tests/src/app/key-info/key-info.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/key-info/key-info.visual-spec.ts @@ -7,8 +7,7 @@ describe('KeyInfo', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'key-info', - selector: '#screenshot-key-info', - checkAccessibility: true + selector: '#screenshot-key-info' }); }); diff --git a/skyux-spa-visual-tests/src/app/label/label.visual-spec.ts b/skyux-spa-visual-tests/src/app/label/label.visual-spec.ts index 78c50d7b5..2544eea3d 100644 --- a/skyux-spa-visual-tests/src/app/label/label.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/label/label.visual-spec.ts @@ -7,8 +7,7 @@ describe('Label', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'labels-all', - selector: '#screenshot-label', - checkAccessibility: true + selector: '#screenshot-label' }); }); diff --git a/skyux-spa-visual-tests/src/app/link-records/link-records.visual-spec.ts b/skyux-spa-visual-tests/src/app/link-records/link-records.visual-spec.ts index d82e5de73..75961582a 100644 --- a/skyux-spa-visual-tests/src/app/link-records/link-records.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/link-records/link-records.visual-spec.ts @@ -8,8 +8,7 @@ describe('link-records component', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'link_records_match', - selector: '#screenshot-link-records-match', - checkAccessibility: true + selector: '#screenshot-link-records-match' }); }); }); @@ -19,8 +18,7 @@ describe('link-records component', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'link_records_no_match', - selector: '#screenshot-link-records-no-match', - checkAccessibility: true + selector: '#screenshot-link-records-no-match' }); }); }); @@ -31,8 +29,7 @@ describe('link-records component', () => { element(by.css('#linked-match-records .link-records-item-footer .sky-btn-default')).click(); return SkyVisualTest.compareScreenshot({ screenshotName: 'link_records_linked_match', - selector: '#screenshot-link-records-linked-match', - checkAccessibility: true + selector: '#screenshot-link-records-linked-match' }); }); }); @@ -43,8 +40,7 @@ describe('link-records component', () => { element(by.css('#create-link-records .link-records-item-footer .sky-btn-default')).click(); return SkyVisualTest.compareScreenshot({ screenshotName: 'link_records_created_match', - selector: '#screenshot-link-records-created-match', - checkAccessibility: true + selector: '#screenshot-link-records-created-match' }); }); }); @@ -55,7 +51,8 @@ describe('link-records component', () => { element(by.css('#field-update-records .link-records-item-footer .sky-btn-primary')).click(); return SkyVisualTest.compareScreenshot({ screenshotName: 'link_records_fields_update', - selector: '#screenshot-link-records-fields-update' + selector: '#screenshot-link-records-fields-update', + checkAccessibility: false }); }); }); @@ -66,8 +63,7 @@ describe('link-records component', () => { element(by.css('#create-link-records-long-field .link-records-item-footer .sky-btn-default')).click(); return SkyVisualTest.compareScreenshot({ screenshotName: 'link_records_created_match_long_field', - selector: '#screenshot-link-records-created-match-long-field', - checkAccessibility: true + selector: '#screenshot-link-records-created-match-long-field' }); }); }); diff --git a/skyux-spa-visual-tests/src/app/list-secondary-actions/list-secondary-actions.visual-spec.ts b/skyux-spa-visual-tests/src/app/list-secondary-actions/list-secondary-actions.visual-spec.ts index c247edd42..1548afb73 100644 --- a/skyux-spa-visual-tests/src/app/list-secondary-actions/list-secondary-actions.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/list-secondary-actions/list-secondary-actions.visual-spec.ts @@ -13,8 +13,7 @@ describe('list-secondary-actions component', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'list_secondary_actions', - selector: '#screenshot-list-secondary-actions', - checkAccessibility: true + selector: '#screenshot-list-secondary-actions' }); }); }); diff --git a/skyux-spa-visual-tests/src/app/modal/modal.visual-spec.ts b/skyux-spa-visual-tests/src/app/modal/modal.visual-spec.ts index dbd921b29..f492aea42 100644 --- a/skyux-spa-visual-tests/src/app/modal/modal.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/modal/modal.visual-spec.ts @@ -11,8 +11,7 @@ describe('Modal', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'modal', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-modal .sky-modal-btn-close')).click(); }); @@ -27,8 +26,7 @@ describe('Modal', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'modal-with-help', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-modal .sky-modal-btn-close')).click(); }); @@ -43,8 +41,7 @@ describe('Modal', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'modal-with-help-small', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-modal .sky-modal-btn-close')).click(); }); @@ -59,8 +56,7 @@ describe('Modal', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'modal-small', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-modal .sky-modal-btn-close')).click(); }); @@ -75,8 +71,7 @@ describe('Modal', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'modal-large', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-modal .sky-modal-btn-close')).click(); }); @@ -91,8 +86,7 @@ describe('Modal', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'modal-large-mobile', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-modal .sky-modal-btn-close')).click(); }); @@ -107,8 +101,7 @@ describe('Modal', () => { return SkyVisualTest.compareScreenshot({ screenshotName: 'modal-content-only', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-modal .sky-test-close')).click(); }); @@ -122,8 +115,7 @@ describe('Modal', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'modal_small_size', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-modal .sky-modal-btn-close')).click(); }); @@ -137,8 +129,7 @@ describe('Modal', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'modal_medium_size', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-modal .sky-modal-btn-close')).click(); }); @@ -152,8 +143,7 @@ describe('Modal', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'modal_large_size', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-modal .sky-modal-btn-close')).click(); }); @@ -167,8 +157,7 @@ describe('Modal', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'modal_large_size_bounded', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-modal .sky-modal-btn-close')).click(); }); @@ -182,8 +171,7 @@ describe('Modal', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'modal_tiled', - selector: '.sky-modal', - checkAccessibility: true + selector: '.sky-modal' }).then(() => { element(by.css('.sky-modal .sky-modal-btn-close')).click(); }); diff --git a/skyux-spa-visual-tests/src/app/navbar/navbar.visual-spec.ts b/skyux-spa-visual-tests/src/app/navbar/navbar.visual-spec.ts index 02551e22a..3acf7354e 100644 --- a/skyux-spa-visual-tests/src/app/navbar/navbar.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/navbar/navbar.visual-spec.ts @@ -9,7 +9,8 @@ describe('Navbar', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'navbar', - selector: '#screenshot-navbar' + selector: '#screenshot-navbar', + checkAccessibility: false }); }); @@ -24,7 +25,8 @@ describe('Navbar', () => { return SkyVisualTest.compareScreenshot({ screenshotName: 'navbar-item-over', - selector: '#screenshot-navbar' + selector: '#screenshot-navbar', + checkAccessibility: false }); }); @@ -39,7 +41,8 @@ describe('Navbar', () => { return SkyVisualTest.compareScreenshot({ screenshotName: 'navbar-dropdown-open', - selector: '#screenshot-navbar' + selector: '#screenshot-navbar', + checkAccessibility: false }); }); @@ -57,7 +60,8 @@ describe('Navbar', () => { return SkyVisualTest.compareScreenshot({ screenshotName: 'navbar-dropdown-item-over', - selector: '#screenshot-navbar' + selector: '#screenshot-navbar', + checkAccessibility: false }); }); @@ -70,7 +74,8 @@ describe('Navbar', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'navbar-item-active', - selector: '#screenshot-navbar-active-item' + selector: '#screenshot-navbar-active-item', + checkAccessibility: false }); }); @@ -84,7 +89,8 @@ describe('Navbar', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'navbar-item-active-child', - selector: '#screenshot-navbar-active-child' + selector: '#screenshot-navbar-active-child', + checkAccessibility: false }); }); @@ -98,7 +104,8 @@ describe('Navbar', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'navbar-item-active-child', - selector: '#screenshot-navbar-active-child' + selector: '#screenshot-navbar-active-child', + checkAccessibility: false }); }); }); diff --git a/skyux-spa-visual-tests/src/app/page-summary/page-summary.visual-spec.ts b/skyux-spa-visual-tests/src/app/page-summary/page-summary.visual-spec.ts index 17964224d..1e4191d4a 100644 --- a/skyux-spa-visual-tests/src/app/page-summary/page-summary.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/page-summary/page-summary.visual-spec.ts @@ -11,8 +11,7 @@ describe('Page summary', () => { element(by.css('#screenshots-page-summary-items')).sendKeys(visibleComponents.join(',')); return SkyVisualTest.compareScreenshot({ screenshotName: ('pagesummary-' + screenshotName), - selector: '#screenshots-page-summary', - checkAccessibility: true + selector: '#screenshots-page-summary' }); }); } diff --git a/skyux-spa-visual-tests/src/app/repeater/repeater.visual-spec.ts b/skyux-spa-visual-tests/src/app/repeater/repeater.visual-spec.ts index f2689456d..b9f2a725b 100644 --- a/skyux-spa-visual-tests/src/app/repeater/repeater.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/repeater/repeater.visual-spec.ts @@ -8,8 +8,7 @@ describe('Repeater', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'repeater', - selector: '#screenshot-repeater', - checkAccessibility: true + selector: '#screenshot-repeater' }); }); @@ -20,8 +19,7 @@ describe('Repeater', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'repeater-collapsed', - selector: '#screenshot-repeater-collapsed', - checkAccessibility: true + selector: '#screenshot-repeater-collapsed' }); }); @@ -32,8 +30,7 @@ describe('Repeater', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'repeater-single', - selector: '#screenshot-repeater-single', - checkAccessibility: true + selector: '#screenshot-repeater-single' }); }); @@ -44,8 +41,7 @@ describe('Repeater', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'repeater-multiple', - selector: '#screenshot-repeater-multiple', - checkAccessibility: true + selector: '#screenshot-repeater-multiple' }); }); diff --git a/skyux-spa-visual-tests/src/app/search/search.visual-spec.ts b/skyux-spa-visual-tests/src/app/search/search.visual-spec.ts index fdaf6dd87..4e87d8eb7 100644 --- a/skyux-spa-visual-tests/src/app/search/search.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/search/search.visual-spec.ts @@ -9,8 +9,7 @@ describe('search component', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'search', - selector: '#screenshot-search-full', - checkAccessibility: true + selector: '#screenshot-search-full' }); }); @@ -21,8 +20,7 @@ describe('search component', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'search-small', - selector: '#screenshot-search-full', - checkAccessibility: true + selector: '#screenshot-search-full' }); }); @@ -35,8 +33,7 @@ describe('search component', () => { element(by.css('.sky-search-btn-open')).click(); return SkyVisualTest.compareScreenshot({ screenshotName: 'search-small-dismissable', - selector: '#screenshot-search-full', - checkAccessibility: true + selector: '#screenshot-search-full' }); }); @@ -51,8 +48,7 @@ describe('search component', () => { element(by.css('.sky-search-btn-apply')).click(); return SkyVisualTest.compareScreenshot({ screenshotName: 'search-small-dismissable-applied', - selector: '#screenshot-search-full', - checkAccessibility: true + selector: '#screenshot-search-full' }); }); @@ -68,8 +64,7 @@ describe('search component', () => { element(by.css('.sky-search-btn-dismiss')).click(); return SkyVisualTest.compareScreenshot({ screenshotName: 'search-small-applied', - selector: '#screenshot-search-full', - checkAccessibility: true + selector: '#screenshot-search-full' }); }); diff --git a/skyux-spa-visual-tests/src/app/sort/sort.visual-spec.ts b/skyux-spa-visual-tests/src/app/sort/sort.visual-spec.ts index 2c9d59dab..8f33731f2 100644 --- a/skyux-spa-visual-tests/src/app/sort/sort.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/sort/sort.visual-spec.ts @@ -9,8 +9,7 @@ describe('Sort component', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'sort', - selector: '#screenshot-sort-full', - checkAccessibility: true + selector: '#screenshot-sort-full' }); }); @@ -22,8 +21,7 @@ describe('Sort component', () => { element(by.css('.sky-btn-default')).click(); return SkyVisualTest.compareScreenshot({ screenshotName: 'sort-open', - selector: '#screenshot-sort-full', - checkAccessibility: true + selector: '#screenshot-sort-full' }); }); diff --git a/skyux-spa-visual-tests/src/app/tabs/tabs.visual-spec.ts b/skyux-spa-visual-tests/src/app/tabs/tabs.visual-spec.ts index 313fc9e1e..43e52631a 100644 --- a/skyux-spa-visual-tests/src/app/tabs/tabs.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/tabs/tabs.visual-spec.ts @@ -44,7 +44,8 @@ describe('TabSet', () => { SkyVisualTest.moveCursorOffScreen(); return SkyVisualTest.compareScreenshot({ screenshotName: 'tabset-collapsed-dropdown', - selector: '#screenshot-tabset' + selector: '#screenshot-tabset', + checkAccessibility: false }); }); diff --git a/skyux-spa-visual-tests/src/app/text-expand-repeater/text-expand-repeater.visual-spec.ts b/skyux-spa-visual-tests/src/app/text-expand-repeater/text-expand-repeater.visual-spec.ts index e0c3e0d6a..22c42c5c1 100644 --- a/skyux-spa-visual-tests/src/app/text-expand-repeater/text-expand-repeater.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/text-expand-repeater/text-expand-repeater.visual-spec.ts @@ -7,7 +7,6 @@ describe('TextExpandRepeater', () => { return SkyVisualTest.setupTest('text-expand-repeater') .then(() => { return SkyVisualTest.compareScreenshot({ - checkAccessibility: true, screenshotName: 'text-expand-repeater-not-expanded', selector: '#text-expand-repeater' }); @@ -20,7 +19,6 @@ describe('TextExpandRepeater', () => { .then(() => { element(by.css('.sky-text-expand-repeater-see-more')).click(); return SkyVisualTest.compareScreenshot({ - checkAccessibility: true, screenshotName: 'text-expand-repeater-expanded', selector: '#text-expand-repeater' }); diff --git a/skyux-spa-visual-tests/src/app/tiles/tiles.visual-spec.ts b/skyux-spa-visual-tests/src/app/tiles/tiles.visual-spec.ts index fddba1e82..feb20961b 100644 --- a/skyux-spa-visual-tests/src/app/tiles/tiles.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/tiles/tiles.visual-spec.ts @@ -7,8 +7,7 @@ describe('Tile', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'tile', - selector: '#screenshot-tiles', - checkAccessibility: true + selector: '#screenshot-tiles' }); }); @@ -19,8 +18,7 @@ describe('Tile', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'tile-small', - selector: '#screenshot-tiles', - checkAccessibility: true + selector: '#screenshot-tiles' }); }); diff --git a/skyux-spa-visual-tests/src/app/toolbar/toolbar.visual-spec.ts b/skyux-spa-visual-tests/src/app/toolbar/toolbar.visual-spec.ts index 09ad42874..736e72674 100644 --- a/skyux-spa-visual-tests/src/app/toolbar/toolbar.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/toolbar/toolbar.visual-spec.ts @@ -7,8 +7,7 @@ describe('Toolbar', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'toolbar', - selector: '#screenshot-toolbar', - checkAccessibility: true + selector: '#screenshot-toolbar' }); }); }); @@ -18,8 +17,7 @@ describe('Toolbar', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'toolbar-section', - selector: '#screenshot-toolbar-sectioned', - checkAccessibility: true + selector: '#screenshot-toolbar-sectioned' }); }); }); diff --git a/skyux-spa-visual-tests/src/app/wait/wait.visual-spec.ts b/skyux-spa-visual-tests/src/app/wait/wait.visual-spec.ts index 763a0d050..129337a1e 100644 --- a/skyux-spa-visual-tests/src/app/wait/wait.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/wait/wait.visual-spec.ts @@ -10,8 +10,7 @@ describe('wait component', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'wait-component', - selector: '#screenshot-wait', - checkAccessibility: true + selector: '#screenshot-wait' }); }); }); @@ -22,8 +21,7 @@ describe('wait component', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'wait-component-absolute', - selector: '#screenshot-wait-absolute', - checkAccessibility: true + selector: '#screenshot-wait-absolute' }); }); }); @@ -35,8 +33,7 @@ describe('wait component', () => { SkyVisualTest.scrollElementIntoView('#screenshot-wait-behind'); return SkyVisualTest.compareScreenshot({ screenshotName: 'wait-component-absolute-behind', - selector: '#screenshot-wait-behind', - checkAccessibility: true + selector: '#screenshot-wait-behind' }); }); }); @@ -48,8 +45,7 @@ describe('wait component', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'wait-component-non-block', - selector: '#screenshot-wait', - checkAccessibility: true + selector: '#screenshot-wait' }); }); }); @@ -61,8 +57,7 @@ describe('wait component', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'wait-full-page', - selector: 'body', - checkAccessibility: true + selector: 'body' }); }); }); @@ -75,8 +70,7 @@ describe('wait component', () => { .then(() => { return SkyVisualTest.compareScreenshot({ screenshotName: 'wait-full-page-non-block', - selector: 'body', - checkAccessibility: true + selector: 'body' }); }); }); From de8508a1368c455686cf5bed17f925ef164bb6c7 Mon Sep 17 00:00:00 2001 From: John Lyons Date: Thu, 30 Nov 2017 14:33:43 -0500 Subject: [PATCH 03/10] Document params property and other missing config properties. (#1320) * Document params property and other missing config properties. * Remove entry for `command` --- .../learn/reference/configuration/index.html | 58 ++++++++++++++----- 1 file changed, 42 insertions(+), 16 deletions(-) diff --git a/src/app/learn/reference/configuration/index.html b/src/app/learn/reference/configuration/index.html index a1cabe9d9..df9cdc638 100644 --- a/src/app/learn/reference/configuration/index.html +++ b/src/app/learn/reference/configuration/index.html @@ -65,11 +65,12 @@

  • auth — Indicates whether the application requires an authenticated Blackbaud ID. This property is for internal Blackbaud use only. By default, this property is set to false. To require authentication, set this property to true. For Blackbaud developers, the helpers reference provides information about how to make authenticated HTTP requests.

    • -

  • compileMode — Specifies how to compile the project's code. By default, the skyuxconfig.json file sets this property to aot to specify ahead-of-time compilation, which runs the compiler once at build time using one set of libraries. You can change this setting to jit to specify just-in-time compilation, which runs the compiler at run time for every user using a different set of libraries. SKY UX uses ahead-of-time compilation by default because it is typically more performant and has less to handle at run-time. For more information about the difference, see the Angular documentation

    • - +
  • +

    cssPath — Specifies a path to reference CSS styles. This property is specific to the SKY UX docs site and is for internal Blackbaud use only.

    +

  • help — Indicates whether to automatically include the help widget in the application to identify the current page and display relevant help content. This property is for internal Blackbaud use only. By default, this property is set to false. For Blackbaud developers who want to include the help widget, the help widget configuration options documentation describes the configuration object to set the help property to.

    • @@ -81,7 +82,9 @@ - +
  • +

    importPath — Specifies a path to reference SKY UX components in Angular. This property is specific to the SKY UX docs site and is for internal Blackbaud use only.

    +

  • mode — Controls how much boilerplate code to generate automatically. By default, the skyuxconfig.json file sets this property to easy. In easy mode, SKY UX automatically generates routes based the project's folder structure, provides bootstrapping to initialize the application, and supplies SKY UX components to the application. To override these options, change the mode property to advanced. Since advanced mode does not provide automatic route configuration, you can adjust URLs and point to specific components in your SPA. This property will eventually become obsolete as the SKY UX team builds out the CLI to allow users to override individual steps without switching to advanced mode.

    • @@ -91,15 +94,40 @@

  • omnibar — Specifies an object to pass to the omnibar's load method. This property is for internal Blackbaud use only. The omnibar provides a common UI element for Blackbaud applications that allows users to navigate between applications. For Blackbaud developers, the omnibar configuration options documentation describes the available options to pass to the omnibar.

    • - - + +
  • +

    plugins — Specifies plugins to expand on existing SKY UX Builder functionality and create new functionality. For example, the Stache 2 component library uses a variety of plugins.

    +

  • redirects — Specifies redirects for pages within an application. When a project's folder structure changes, you can specify redirects for files that moved so that existing links will continue to work. In the redirects property, you create a comma-separated list of paths and their redirects.

    "redirects": { @@ -107,13 +135,11 @@ "folder-1/subfolder-2": "folder-1/subfolder-2/new-subfolder-2" }
    • - - +

  • routes — Allows you to use the omnibar but still define navigation items. This property is for internal Blackbaud use only. For Blackbaud developers, the Engineering System website describes how to add your SPA to global navigation.

    +
    • +
  • +

    useHashRouting — Allows your SPA to use Angular's hash location strategy. For more information, see the Angular documentation.

    +
    • From 77caf12bb08663b0e1e3a6a3a9cc88ca01c4b973 Mon Sep 17 00:00:00 2001 From: Steve Brush Date: Fri, 1 Dec 2017 12:05:51 -0500 Subject: [PATCH 04/10] URL validation module (#1334) --- src/app/components/demo-components.service.ts | 23 +++++ src/app/components/url-validation/index.html | 22 +++++ .../url-validation-demo.component.html | 14 +++ .../url-validation-demo.component.ts | 9 ++ src/core.ts | 4 + .../url-validation-fixtures.module.ts | 21 +++++ .../url-validation.component.fixture.html | 13 +++ .../url-validation.component.fixture.ts | 9 ++ src/modules/url-validation/index.ts | 2 + .../url-validation.directive.spec.ts | 93 +++++++++++++++++++ .../url-validation.directive.ts | 37 ++++++++ .../url-validation/url-validation.module.ts | 17 ++++ 12 files changed, 264 insertions(+) create mode 100644 src/app/components/url-validation/index.html create mode 100644 src/app/components/url-validation/url-validation-demo.component.html create mode 100644 src/app/components/url-validation/url-validation-demo.component.ts create mode 100644 src/modules/url-validation/fixtures/url-validation-fixtures.module.ts create mode 100644 src/modules/url-validation/fixtures/url-validation.component.fixture.html create mode 100644 src/modules/url-validation/fixtures/url-validation.component.fixture.ts create mode 100644 src/modules/url-validation/index.ts create mode 100644 src/modules/url-validation/url-validation.directive.spec.ts create mode 100644 src/modules/url-validation/url-validation.directive.ts create mode 100644 src/modules/url-validation/url-validation.module.ts diff --git a/src/app/components/demo-components.service.ts b/src/app/components/demo-components.service.ts index f180f7c5a..b441845e7 100644 --- a/src/app/components/demo-components.service.ts +++ b/src/app/components/demo-components.service.ts @@ -1107,6 +1107,29 @@ export class SkyDemoComponentsService { ]; } }, + { + name: 'URL validation', + icon: 'check', + // tslint:disable-next-line + summary: `The URL validation module allows users to validate URL format.`, + url: '/components/url-validation', + getCodeFiles: function () { + return [ + { + name: 'url-validation-demo.component.html', + fileContents: require + ('!!raw-loader!./url-validation/url-validation-demo.component.html') + }, + { + name: 'url-validation.component.ts', + fileContents: require + ('!!raw-loader!./url-validation/url-validation-demo.component.ts'), + componentName: 'SkyUrlValidationDemoComponent', + bootstrapSelector: 'sky-url-validation-demo' + } + ]; + } + }, { name: 'Vertical tabs', icon: 'folder-open-o', diff --git a/src/app/components/url-validation/index.html b/src/app/components/url-validation/index.html new file mode 100644 index 000000000..4bf2c6aee --- /dev/null +++ b/src/app/components/url-validation/index.html @@ -0,0 +1,22 @@ + + + The URL validation module allows the user to validate URL format. + + + + + When this attribute is placed on an input element, the input with validation properties is created. The error message will display if the input is not in the correct format. This directive will use NgModel for binding data. + + + + + + + + + + diff --git a/src/app/components/url-validation/url-validation-demo.component.html b/src/app/components/url-validation/url-validation-demo.component.html new file mode 100644 index 000000000..58316f0d1 --- /dev/null +++ b/src/app/components/url-validation/url-validation-demo.component.html @@ -0,0 +1,14 @@ + + +
    + + Please enter valid url with format http(s)://site.domain + +
    diff --git a/src/app/components/url-validation/url-validation-demo.component.ts b/src/app/components/url-validation/url-validation-demo.component.ts new file mode 100644 index 000000000..8cff1efce --- /dev/null +++ b/src/app/components/url-validation/url-validation-demo.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sky-url-validation-demo', + templateUrl: './url-validation-demo.component.html' +}) +export class SkyUrlValidationDemoComponent { + public url: string; +} diff --git a/src/core.ts b/src/core.ts index c51ffee1b..9286b3365 100644 --- a/src/core.ts +++ b/src/core.ts @@ -60,6 +60,7 @@ import { SkyTextHighlightModule } from './modules/text-highlight'; import { SkyToolbarModule } from './modules/toolbar'; import { SkyTilesModule } from './modules/tiles'; import { SkyTimepickerModule } from './modules/timepicker'; +import { SkyUrlValidationModule } from './modules/url-validation'; import { SkyVerticalTabsetModule } from './modules/vertical-tabset'; import { SkyWaitModule } from './modules/wait'; @@ -113,6 +114,7 @@ import { SkyWaitModule } from './modules/wait'; SkyTilesModule, SkyTimepickerModule, SkyToolbarModule, + SkyUrlValidationModule, SkyVerticalTabsetModule, SkyWaitModule, SkyDatepickerModule @@ -506,6 +508,8 @@ export { SkyToolbarSectionComponent } from './modules/toolbar'; +export * from './modules/url-validation'; + export { SkyVerticalTabsetComponent, SkyVerticalTabsetGroupComponent, diff --git a/src/modules/url-validation/fixtures/url-validation-fixtures.module.ts b/src/modules/url-validation/fixtures/url-validation-fixtures.module.ts new file mode 100644 index 000000000..46d2e90d7 --- /dev/null +++ b/src/modules/url-validation/fixtures/url-validation-fixtures.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; + +import { SkyUrlValidationModule } from '../url-validation.module'; +import { UrlValidationTestComponent } from './url-validation.component.fixture'; + +@NgModule({ + declarations: [ + UrlValidationTestComponent + ], + imports: [ + FormsModule, + CommonModule, + SkyUrlValidationModule + ], + exports: [ + UrlValidationTestComponent + ] +}) +export class SkyUrlValidationFixturesModule { } diff --git a/src/modules/url-validation/fixtures/url-validation.component.fixture.html b/src/modules/url-validation/fixtures/url-validation.component.fixture.html new file mode 100644 index 000000000..72e5bfae7 --- /dev/null +++ b/src/modules/url-validation/fixtures/url-validation.component.fixture.html @@ -0,0 +1,13 @@ +
    + +
    +
    + Please enter valid url with format http(s)://site.domain +
    +
    +
    diff --git a/src/modules/url-validation/fixtures/url-validation.component.fixture.ts b/src/modules/url-validation/fixtures/url-validation.component.fixture.ts new file mode 100644 index 000000000..06c44df2c --- /dev/null +++ b/src/modules/url-validation/fixtures/url-validation.component.fixture.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sky-test-cmp', + templateUrl: './url-validation.component.fixture.html' +}) +export class UrlValidationTestComponent { + public urlValidator: string; +} diff --git a/src/modules/url-validation/index.ts b/src/modules/url-validation/index.ts new file mode 100644 index 000000000..f61e8a593 --- /dev/null +++ b/src/modules/url-validation/index.ts @@ -0,0 +1,2 @@ +export * from './url-validation.directive'; +export * from './url-validation.module'; diff --git a/src/modules/url-validation/url-validation.directive.spec.ts b/src/modules/url-validation/url-validation.directive.spec.ts new file mode 100644 index 000000000..6984b7ef7 --- /dev/null +++ b/src/modules/url-validation/url-validation.directive.spec.ts @@ -0,0 +1,93 @@ +import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing'; +import { FormsModule, NgModel } from '@angular/forms'; +import { By } from '@angular/platform-browser'; + +import { SkyUrlValidationFixturesModule } from './fixtures/url-validation-fixtures.module'; +import { UrlValidationTestComponent } from './fixtures/url-validation.component.fixture'; + +describe('Url validation', () => { + function setInput( + element: HTMLElement, + text: string, + compFixture: ComponentFixture) { + let inputEvent = document.createEvent('Event'); + let params = { + bubbles: false, + cancelable: false + }; + + inputEvent.initEvent('input', params.bubbles, params.cancelable); + + let changeEvent = document.createEvent('Event'); + changeEvent.initEvent('change', params.bubbles, params.cancelable); + let inputEl = element.querySelector('input'); + inputEl.value = text; + + inputEl.dispatchEvent(inputEvent); + compFixture.detectChanges(); + + inputEl.dispatchEvent(changeEvent); + compFixture.detectChanges(); + tick(); + + } + + let component: UrlValidationTestComponent; + let fixture: ComponentFixture; + let ngModel: NgModel; + let nativeElement: HTMLElement; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + SkyUrlValidationFixturesModule, + FormsModule + ] + }); + fixture = TestBed.createComponent(UrlValidationTestComponent); + nativeElement = fixture.nativeElement as HTMLElement; + let input = fixture.debugElement.query(By.css('input')); + ngModel = input.injector.get(NgModel); + component = fixture.componentInstance; + }); + + it('should validate correct input', fakeAsync(() => { + fixture.detectChanges(); + tick(); + setInput(nativeElement, 'https://blackbaud.com', fixture); + fixture.detectChanges(); + + expect(nativeElement.querySelector('input').value).toBe('https://blackbaud.com'); + + expect(ngModel.control.valid).toBe(true); + expect(ngModel.control.pristine).toBe(false); + expect(ngModel.control.touched).toBe(false); + + })); + it('should validate incorrect input', fakeAsync(() => { + fixture.detectChanges(); + tick(); + setInput(nativeElement, '[]awefhawenfc0293ejwf]', fixture); + fixture.detectChanges(); + + expect(nativeElement.querySelector('input').value).toBe('[]awefhawenfc0293ejwf]'); + + expect(ngModel.control.valid).toBe(false); + expect(ngModel.control.pristine).toBe(false); + expect(ngModel.control.touched).toBe(false); + })); + + it('should handle invalid and then valid input', fakeAsync(() => { + fixture.detectChanges(); + tick(); + setInput(nativeElement, '[]awefhawenfc0293ejwf]', fixture); + setInput(nativeElement, 'blackbaud.com', fixture); + + expect(nativeElement.querySelector('input').value).toBe('blackbaud.com'); + expect(component.urlValidator).toEqual('blackbaud.com'); + + expect(ngModel.control.valid).toBe(true); + expect(ngModel.control.pristine).toBe(false); + expect(ngModel.control.touched).toBe(false); + })); +}); diff --git a/src/modules/url-validation/url-validation.directive.ts b/src/modules/url-validation/url-validation.directive.ts new file mode 100644 index 000000000..6a2cd0f44 --- /dev/null +++ b/src/modules/url-validation/url-validation.directive.ts @@ -0,0 +1,37 @@ +import { Directive, forwardRef } from '@angular/core'; +import { Validator, NG_VALIDATORS, AbstractControl } from '@angular/forms'; + +// tslint:disable:no-forward-ref no-use-before-declare +const SKY_URL_VALIDATION_VALIDATOR = { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => SkyUrlValidationDirective), + multi: true +}; +// tslint:enable +@Directive({ + selector: '[skyUrlValidation]', + providers: [SKY_URL_VALIDATION_VALIDATOR] +}) + +export class SkyUrlValidationDirective implements Validator { + public validate(control: AbstractControl): {[key: string]: any} { + const value = control.value; + + if (!value) { + return; + } + + if (!this.urlIsValid(value)) { + return { + 'skyUrl': { + invalid: control.value + } + }; + } + } + + public urlIsValid(url: string): boolean { + let regex = /^((http|https):\/\/)?([\w\-]+\.)+[\w\-]+/i; + return regex.test(url); + } +} diff --git a/src/modules/url-validation/url-validation.module.ts b/src/modules/url-validation/url-validation.module.ts new file mode 100644 index 000000000..5e20078fe --- /dev/null +++ b/src/modules/url-validation/url-validation.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +import { SkyUrlValidationDirective } from './url-validation.directive'; + +@NgModule({ + declarations: [ + SkyUrlValidationDirective + ], + imports: [ + FormsModule + ], + exports: [ + SkyUrlValidationDirective + ] +}) +export class SkyUrlValidationModule { } From 9a9831929fc12ca66d8975d7eb15bea023f668b4 Mon Sep 17 00:00:00 2001 From: John Lyons Date: Tue, 5 Dec 2017 14:16:46 -0500 Subject: [PATCH 05/10] Add Git Bash warning to create-SPA tutorial. (#1344) * Add Git Bash warning to create-SPA tutorial. * Update index.html * Update index.html --- src/app/learn/get-started/basics/create-project/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/learn/get-started/basics/create-project/index.html b/src/app/learn/get-started/basics/create-project/index.html index ec487c5a1..64dc57cc9 100644 --- a/src/app/learn/get-started/basics/create-project/index.html +++ b/src/app/learn/get-started/basics/create-project/index.html @@ -7,7 +7,9 @@ Blackbaud developers should create repos and provision applications through the SKY UX App Management Portal. Documentation on the SKY UX App Management Portal is available on the Engineering System website. This site is for Blackbaud internal use only and is not available to external developers.
      -

    1. From the command prompt, cd into the directory where you want to create the application.

      2. +

    2. From the command prompt, cd into the directory where you want to create the application.

      + Do not use Git Bash with Windows because known issues occur with skyux new. We recommend the native Windows command prompt instead. +

    3. Enter skyux new. A series of prompts appears.

    4. In the first prompt, specify a root directory for the application. The SKY UX CLI creates a folder with this name and prefixes it with "skyux-spa." The root directory also determines how to access the SPA because the URL for the home page includes the root directory after the base URL.

      5. From a32a3c12700d59b97c98a3719b1e9a171720b3de Mon Sep 17 00:00:00 2001 From: Christi Schneider Date: Wed, 6 Dec 2017 12:47:14 -0500 Subject: [PATCH 06/10] Add instructions for accessing a SKYUX site from an iOS simulator (#1347) --- .../prereqs/ssl-certificate/index.html | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/app/learn/get-started/prereqs/ssl-certificate/index.html b/src/app/learn/get-started/prereqs/ssl-certificate/index.html index 69581a1cc..0fcaeac2e 100644 --- a/src/app/learn/get-started/prereqs/ssl-certificate/index.html +++ b/src/app/learn/get-started/prereqs/ssl-certificate/index.html @@ -8,7 +8,7 @@ - Installation for Macs + Installation for Mac

      1. Download the skyux-ca.crt.

        2. @@ -21,6 +21,19 @@

      2. Close the info window.

      + + Installation for iOS Simulator on Mac + +
        +

      1. Download the skyux-ca.crt to your Mac.

        2. +

      2. Drag and drop the certificate to your simulator, which will cause a prompt to open.

        3. +

      3. In the prompt, choose Allow, which will open a settings page.

        4. +

      4. Click Install on each page (3 times total) to install the certificate.

        5. +

      5. Click Done to exit.

        6. +

      6. In Settings > General > About, select Certificate Trust Settings.

        7. +

      7. Switch Enable Full Trust For Root Certificates on for the SKY UX certificate and continue when prompted.

        8. +
      + Installation for Windows From 41af216c838eff8492ceb9835c9c78580e018ee4 Mon Sep 17 00:00:00 2001 From: Brandon Hare Date: Wed, 6 Dec 2017 14:15:59 -0400 Subject: [PATCH 07/10] Added config for search. (#1346) * Added config for search. * Bumped stache version. --- package.json | 2 +- skyuxconfig.json | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index b92cdd7df..794d9d393 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "@blackbaud/skyux": "2.3.2", "@blackbaud/skyux-builder": "1.7.1", "@blackbaud/skyux-design-tokens": "0.0.8", - "@blackbaud/stache": "2.1.0", + "@blackbaud/stache": "2.2.0", "@types/core-js": "0.9.41", "@types/jasmine": "2.5.47", "@types/node": "7.0.18", diff --git a/skyuxconfig.json b/skyuxconfig.json index 9d39a45a1..19254c378 100644 --- a/skyuxconfig.json +++ b/skyuxconfig.json @@ -10,6 +10,7 @@ "services": [ { "title": "SKY UX 2", + "searchUrl": "https://stache-search-query.sky.blackbaud.com/search/skyux2", "items": [ { "title": "Home", @@ -39,6 +40,13 @@ "plugins": [ "@blackbaud/skyux-builder-plugin-stache" ], + "appSettings": { + "stache": { + "searchConfig": { + "is_internal": false + } + } + }, "redirects": { "learn/get-started/1.-SSL-certification": "learn/get-started/prereqs/ssl-certificate", "learn/get-started/2.-initial-setup": "learn/get-started/prereqs/initial-setup", From a27e8e8133eeac565633c93a69320e712a327794 Mon Sep 17 00:00:00 2001 From: Steve Brush Date: Thu, 7 Dec 2017 09:46:33 -0500 Subject: [PATCH 08/10] Cleaned up colorpicker template (#1317) --- .../colorpicker/colorpicker.component.html | 175 +++++++++++++----- .../colorpicker-component.fixture.html | 12 +- 2 files changed, 137 insertions(+), 50 deletions(-) diff --git a/src/modules/colorpicker/colorpicker.component.html b/src/modules/colorpicker/colorpicker.component.html index 1d8c4272e..846a93e4f 100644 --- a/src/modules/colorpicker/colorpicker.component.html +++ b/src/modules/colorpicker/colorpicker.component.html @@ -1,65 +1,152 @@
      - + + - -
      - -
      -
      -
      +
      +
      +
      +
      +
      -
      -
      +
      +
      +
      +
      - -
      -
      +
      +
      +
      - -
      -
      +
      +
      +
      - - - - - + + + + +
      - - - - - + + + + +
      + class="sky-colorpicker-preset-color-area"> + (click)="setColorFromString(color)"> +
      @@ -69,19 +156,19 @@ class="sky-btn sky-btn-primary sky-btn-colorpicker-apply" type="button" [attr.aria-label]="'colorpicker_apply' | skyResources" - (click)="applyColor()" - >{{'colorpicker_apply' | skyResources}} - + (click)="applyColor()"> + {{ 'colorpicker_apply' | skyResources }} + + #closeColorPicker> + {{ 'colorpicker_close' | skyResources }} +
      -
      @@ -89,6 +176,6 @@ class="sky-colorpicker-reset-button" type="button" [attr.aria-label]="'colorpicker_reset' | skyResources" - (click)="setColorFromString('#fff')" - > + (click)="setColorFromString('#fff')"> +
      diff --git a/src/modules/colorpicker/fixtures/colorpicker-component.fixture.html b/src/modules/colorpicker/fixtures/colorpicker-component.fixture.html index 25c354e70..c449e9928 100644 --- a/src/modules/colorpicker/fixtures/colorpicker-component.fixture.html +++ b/src/modules/colorpicker/fixtures/colorpicker-component.fixture.html @@ -1,11 +1,11 @@
      + [skyColorpickerInput]="colorPickerTest" + [(ngModel)]="colorModel" + [presetColors]="presetColors" + [initialColor]="selectedColor" + [outputFormat]="selectedOutputFormat" + [alphaChannel]="selectedHexType">
      From 79a0172e7358bbe9daf69b5b78e1541083addd32 Mon Sep 17 00:00:00 2001 From: John Lyons Date: Thu, 7 Dec 2017 15:22:38 -0500 Subject: [PATCH 09/10] Update page summary demo to make image editable. (#1349) --- .../components/page-summary/page-summary-demo.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/page-summary/page-summary-demo.component.html b/src/app/components/page-summary/page-summary-demo.component.html index aba83d0de..705a9bdd0 100644 --- a/src/app/components/page-summary/page-summary-demo.component.html +++ b/src/app/components/page-summary/page-summary-demo.component.html @@ -4,7 +4,7 @@ This is an alert. - + {{name}} From 9ca3d15b0454c3995d71ab90d111420caf7bb849 Mon Sep 17 00:00:00 2001 From: John Lyons Date: Fri, 8 Dec 2017 10:06:19 -0500 Subject: [PATCH 10/10] Update FlexBox reference to link to fluid grid component. (#1353) --- src/app/learn/reference/resources/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/learn/reference/resources/index.html b/src/app/learn/reference/resources/index.html index e024bc93c..1e55d0059 100644 --- a/src/app/learn/reference/resources/index.html +++ b/src/app/learn/reference/resources/index.html @@ -26,7 +26,7 @@