From cc0e1851e476ecc2765b00d4e341deeefc5085fe Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Sun, 11 Jan 2026 22:15:07 +0000 Subject: [PATCH] feat(e2e): add Percy visual regression tests for priority component areas - Add enhanced tests for Form Components (input-box, checkbox, radio-button) - Disabled states, hint text, placeholder, error states - Hover, focus, and validation error states - Add enhanced tests for Layout & Responsive Components (fluid-grid, box, card) - Mobile width breakpoint testing - Context menu open states - Hover states - Add enhanced tests for Interactive Overlay Components (dropdown, autocomplete, colorpicker) - Hover and focus states for buttons - Menu item hover states - Highlighted result states - Preset color selection - Add enhanced tests for Critical User Flows (error, tabs, paging) - Mobile width responsive testing - Action button hover and focus states - Tab navigation states - Paging button states and navigation Co-Authored-By: benc@cognition.ai --- .../src/e2e/colorpicker.component.cy.ts | 49 ++++++++++++ .../src/e2e/error.component.cy.ts | 52 +++++++++++++ .../src/e2e/checkbox.component.cy.ts | 53 +++++++++++++ .../src/e2e/input-box.component.cy.ts | 74 +++++++++++++++++++ .../src/e2e/radio-button.component.cy.ts | 45 +++++++++++ .../src/e2e/box.component.cy.ts | 30 ++++++++ .../src/e2e/card.component.cy.ts | 29 ++++++++ .../src/e2e/fluid-grid.component.cy.ts | 23 ++++++ .../src/e2e/paging.component.cy.ts | 57 ++++++++++++++ .../src/e2e/autocomplete.component.cy.ts | 36 +++++++++ .../src/e2e/dropdown.component.cy.ts | 53 +++++++++++++ .../src/e2e/tabs.component.cy.ts | 65 ++++++++++++++++ 12 files changed, 566 insertions(+) diff --git a/apps/e2e/colorpicker-storybook-e2e/src/e2e/colorpicker.component.cy.ts b/apps/e2e/colorpicker-storybook-e2e/src/e2e/colorpicker.component.cy.ts index bf6ec5a093..4c3bc64490 100644 --- a/apps/e2e/colorpicker-storybook-e2e/src/e2e/colorpicker.component.cy.ts +++ b/apps/e2e/colorpicker-storybook-e2e/src/e2e/colorpicker.component.cy.ts @@ -82,6 +82,55 @@ describe('colorpicker-storybook', () => { ); }); }); + + it('should render colorpicker button in hover state', () => { + cy.skyReady('app-colorpicker', ['#ready']); + cy.get('.sky-colorpicker-button').first().trigger('mouseover'); + cy.get('app-colorpicker').screenshot( + `colorpickercomponent-colorpicker--colorpicker-${theme}-hover`, + ); + cy.get('app-colorpicker').percySnapshot( + `colorpickercomponent-colorpicker--colorpicker-${theme}-hover`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render colorpicker button in focus state', () => { + cy.skyReady('app-colorpicker', ['#ready']); + cy.get('.sky-colorpicker-button').first().focus(); + cy.get('app-colorpicker').screenshot( + `colorpickercomponent-colorpicker--colorpicker-${theme}-focus`, + ); + cy.get('app-colorpicker').percySnapshot( + `colorpickercomponent-colorpicker--colorpicker-${theme}-focus`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render colorpicker with preset color selected', () => { + cy.skyReady('app-colorpicker', ['#ready']); + cy.get('#colorpicker-12-presets-fa-icon .sky-colorpicker-button') + .should('exist') + .should('be.visible') + .click(); + cy.get('.sky-colorpicker-container') + .should('exist') + .should('be.visible'); + cy.get('.sky-preset-color').eq(3).click(); + cy.get('app-colorpicker').screenshot( + `colorpickercomponent-colorpicker--colorpicker-${theme}-preset-selected`, + ); + cy.get('app-colorpicker').percySnapshot( + `colorpickercomponent-colorpicker--colorpicker-${theme}-preset-selected`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); }); }); }); diff --git a/apps/e2e/errors-storybook-e2e/src/e2e/error.component.cy.ts b/apps/e2e/errors-storybook-e2e/src/e2e/error.component.cy.ts index 3d06c565fb..cb383326f4 100644 --- a/apps/e2e/errors-storybook-e2e/src/e2e/error.component.cy.ts +++ b/apps/e2e/errors-storybook-e2e/src/e2e/error.component.cy.ts @@ -29,6 +29,58 @@ describe('errors-storybook - error', () => { }, ); }); + + it(`should render the component (${style}) at mobile widths`, () => { + E2eVariations.MOBILE_WIDTHS.forEach((width) => { + cy.viewport(width, 960); + cy.visit( + `/iframe.html?globals=theme:${theme}&id=errorcomponent-error--error-${style}`, + ); + cy.skyReady('app-error').screenshot( + `errorcomponent-error--error--${style}-${theme}-mobile-${width}`, + ); + cy.get('app-error').percySnapshot( + `errorcomponent-error--error--${style}-${theme}-mobile-${width}`, + { + widths: [width], + }, + ); + }); + }); + }); + + it('should render error with action button in hover state', () => { + cy.visit( + `/iframe.html?globals=theme:${theme}&id=errorcomponent-error--error-custom-action`, + ); + cy.skyReady('app-error'); + cy.get('.sky-error-action button').first().trigger('mouseover'); + cy.get('app-error').screenshot( + `errorcomponent-error--error-custom-action-${theme}-button-hover`, + ); + cy.get('app-error').percySnapshot( + `errorcomponent-error--error-custom-action-${theme}-button-hover`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render error with action button in focus state', () => { + cy.visit( + `/iframe.html?globals=theme:${theme}&id=errorcomponent-error--error-custom-action`, + ); + cy.skyReady('app-error'); + cy.get('.sky-error-action button').first().focus(); + cy.get('app-error').screenshot( + `errorcomponent-error--error-custom-action-${theme}-button-focus`, + ); + cy.get('app-error').percySnapshot( + `errorcomponent-error--error-custom-action-${theme}-button-focus`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); }); }); }); diff --git a/apps/e2e/forms-storybook-e2e/src/e2e/checkbox.component.cy.ts b/apps/e2e/forms-storybook-e2e/src/e2e/checkbox.component.cy.ts index 3a0f4b9192..6c861a2425 100644 --- a/apps/e2e/forms-storybook-e2e/src/e2e/checkbox.component.cy.ts +++ b/apps/e2e/forms-storybook-e2e/src/e2e/checkbox.component.cy.ts @@ -55,6 +55,59 @@ describe('forms-storybook - checkbox', () => { '#icon-checkboxes', ); }); + + it('should render checkbox group with validation error', () => { + cy.skyReady('app-checkbox'); + cy.get('#touched-required-checkbox .sky-switch').click(); + cy.get('#touched-required-checkbox .sky-switch').click(); + cy.get('#touched-required-checkbox input').blur(); + cy.get( + '#touched-required-checkbox sky-form-error .sky-status-indicator-message', + ) + .should('exist') + .should('be.visible'); + cy.get('#touched-required-checkbox').screenshot( + `checkboxcomponent-checkbox--checkbox-${theme}-validation-error`, + ); + cy.get('#touched-required-checkbox').percySnapshot( + `checkboxcomponent-checkbox--checkbox-${theme}-validation-error`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render checkbox in hover state', () => { + cy.skyReady('app-checkbox'); + cy.get('#standard-checkboxes .sky-switch') + .first() + .should('exist') + .should('be.visible') + .trigger('mouseover'); + cy.get('#standard-checkboxes').screenshot( + `checkboxcomponent-checkbox--checkbox-${theme}-hover`, + ); + cy.get('#standard-checkboxes').percySnapshot( + `checkboxcomponent-checkbox--checkbox-${theme}-hover`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render checkbox in focus state', () => { + cy.skyReady('app-checkbox'); + cy.get('#standard-checkboxes .sky-switch input').first().focus(); + cy.get('#standard-checkboxes').screenshot( + `checkboxcomponent-checkbox--checkbox-${theme}-focus`, + ); + cy.get('#standard-checkboxes').percySnapshot( + `checkboxcomponent-checkbox--checkbox-${theme}-focus`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); }); }); }); diff --git a/apps/e2e/forms-storybook-e2e/src/e2e/input-box.component.cy.ts b/apps/e2e/forms-storybook-e2e/src/e2e/input-box.component.cy.ts index b953479a23..bbfdc77172 100644 --- a/apps/e2e/forms-storybook-e2e/src/e2e/input-box.component.cy.ts +++ b/apps/e2e/forms-storybook-e2e/src/e2e/input-box.component.cy.ts @@ -163,6 +163,80 @@ describe('forms-storybook - input box', () => { }, ); }); + + it('should render disabled input box states', () => { + cy.skyReady('app-input-box', [], ['#input-box-disabled']); + cy.get('#input-box-disabled').screenshot( + `inputboxcomponent-inputbox--input-box-${theme}-disabled`, + ); + cy.get('#input-box-disabled').percySnapshot( + `inputboxcomponent-inputbox--input-box-${theme}-disabled`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + scope: '#input-box-disabled', + }, + ); + }); + + it('should render input box with hint text', () => { + cy.skyReady('app-input-box', [], ['#input-box-hint-text']); + cy.get('#input-box-hint-text').screenshot( + `inputboxcomponent-inputbox--input-box-${theme}-hint-text`, + ); + cy.get('#input-box-hint-text').percySnapshot( + `inputboxcomponent-inputbox--input-box-${theme}-hint-text`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + scope: '#input-box-hint-text', + }, + ); + }); + + it('should render input box with placeholder', () => { + cy.skyReady('app-input-box', [], ['#input-box-placeholder']); + cy.get('#input-box-placeholder').screenshot( + `inputboxcomponent-inputbox--input-box-${theme}-placeholder`, + ); + cy.get('#input-box-placeholder').percySnapshot( + `inputboxcomponent-inputbox--input-box-${theme}-placeholder`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + scope: '#input-box-placeholder', + }, + ); + }); + + it('should render input box with error and button', () => { + cy.skyReady('app-input-box', [], [ + '#input-box-form-control-error-button-single', + ]) + .get('#input-box-form-control-error-button-single input') + .click(); + cy.get('#input-box-form-control-error-button-single').screenshot( + `inputboxcomponent-inputbox--input-box-${theme}-error-button-focus`, + ); + cy.get('#input-box-form-control-error-button-single').percySnapshot( + `inputboxcomponent-inputbox--input-box-${theme}-error-button-focus`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + scope: '#input-box-form-control-error-button-single', + }, + ); + }); + + it('should render disabled select input box', () => { + cy.skyReady('app-input-box', [], ['#input-box-select-disabled']); + cy.get('#input-box-select-disabled').screenshot( + `inputboxcomponent-inputbox--input-box-${theme}-select-disabled`, + ); + cy.get('#input-box-select-disabled').percySnapshot( + `inputboxcomponent-inputbox--input-box-${theme}-select-disabled`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + scope: '#input-box-select-disabled', + }, + ); + }); }); }); }); diff --git a/apps/e2e/forms-storybook-e2e/src/e2e/radio-button.component.cy.ts b/apps/e2e/forms-storybook-e2e/src/e2e/radio-button.component.cy.ts index 461c34b038..1fa16b1f18 100644 --- a/apps/e2e/forms-storybook-e2e/src/e2e/radio-button.component.cy.ts +++ b/apps/e2e/forms-storybook-e2e/src/e2e/radio-button.component.cy.ts @@ -25,6 +25,51 @@ describe('forms-storybook - radio button', () => { }, ); }); + + it('should render radio button in focus state', () => { + cy.skyReady('app-radio-button'); + cy.get('.sky-radio-input').first().focus(); + cy.get('app-radio-button').screenshot( + `radiobuttoncomponent-radiobutton--radio-button-${theme}-focus`, + ); + cy.get('app-radio-button').percySnapshot( + `radiobuttoncomponent-radiobutton--radio-button-${theme}-focus`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render radio button in hover state', () => { + cy.skyReady('app-radio-button'); + cy.get('.sky-radio-input').first().trigger('mouseover'); + cy.get('app-radio-button').screenshot( + `radiobuttoncomponent-radiobutton--radio-button-${theme}-hover`, + ); + cy.get('app-radio-button').percySnapshot( + `radiobuttoncomponent-radiobutton--radio-button-${theme}-hover`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render radio button with validation error displayed', () => { + cy.skyReady('app-radio-button'); + cy.get('.invalid-radio-button-group sky-radio-label').first().click(); + cy.get('.invalid-radio-button-group sky-form-error') + .should('exist') + .should('be.visible'); + cy.get('.invalid-radio-button-group').screenshot( + `radiobuttoncomponent-radiobutton--radio-button-${theme}-validation-error`, + ); + cy.get('.invalid-radio-button-group').percySnapshot( + `radiobuttoncomponent-radiobutton--radio-button-${theme}-validation-error`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); }); }); }); diff --git a/apps/e2e/layout-storybook-e2e/src/e2e/box.component.cy.ts b/apps/e2e/layout-storybook-e2e/src/e2e/box.component.cy.ts index 64d3cf7be0..567e1062d9 100644 --- a/apps/e2e/layout-storybook-e2e/src/e2e/box.component.cy.ts +++ b/apps/e2e/layout-storybook-e2e/src/e2e/box.component.cy.ts @@ -14,6 +14,36 @@ describe('layout-storybook', () => { widths: E2eVariations.DISPLAY_WIDTHS, }); }); + + it('should render the component at mobile widths', () => { + E2eVariations.MOBILE_WIDTHS.forEach((width) => { + cy.viewport(width, 960); + cy.skyReady('app-box').screenshot( + `boxcomponent-box--box-${theme}-mobile-${width}`, + ); + cy.get('app-box').percySnapshot( + `boxcomponent-box--box-${theme}-mobile-${width}`, + { + widths: [width], + }, + ); + }); + }); + + it('should render the box with context menu open', () => { + cy.skyReady('app-box'); + cy.get('.sky-dropdown-button').first().click(); + cy.get('.sky-dropdown-menu').should('exist').should('be.visible'); + cy.get('app-box').screenshot( + `boxcomponent-box--box-${theme}-context-menu-open`, + ); + cy.get('app-box').percySnapshot( + `boxcomponent-box--box-${theme}-context-menu-open`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); }); }); }); diff --git a/apps/e2e/layout-storybook-e2e/src/e2e/card.component.cy.ts b/apps/e2e/layout-storybook-e2e/src/e2e/card.component.cy.ts index 6f8baf6f3a..8f29fe8794 100644 --- a/apps/e2e/layout-storybook-e2e/src/e2e/card.component.cy.ts +++ b/apps/e2e/layout-storybook-e2e/src/e2e/card.component.cy.ts @@ -14,6 +14,35 @@ describe('layout-storybook - card', () => { widths: E2eVariations.DISPLAY_WIDTHS, }); }); + + it('should render the component at mobile widths', () => { + E2eVariations.MOBILE_WIDTHS.forEach((width) => { + cy.viewport(width, 960); + cy.skyReady('app-card').screenshot( + `cardcomponent-card--card-${theme}-mobile-${width}`, + ); + cy.get('app-card').percySnapshot( + `cardcomponent-card--card-${theme}-mobile-${width}`, + { + widths: [width], + }, + ); + }); + }); + + it('should render the card in hover state', () => { + cy.skyReady('app-card'); + cy.get('sky-card').first().trigger('mouseover'); + cy.get('app-card').screenshot( + `cardcomponent-card--card-${theme}-hover`, + ); + cy.get('app-card').percySnapshot( + `cardcomponent-card--card-${theme}-hover`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); }); }); }); diff --git a/apps/e2e/layout-storybook-e2e/src/e2e/fluid-grid.component.cy.ts b/apps/e2e/layout-storybook-e2e/src/e2e/fluid-grid.component.cy.ts index 43f0a004d3..4ca505c7c8 100644 --- a/apps/e2e/layout-storybook-e2e/src/e2e/fluid-grid.component.cy.ts +++ b/apps/e2e/layout-storybook-e2e/src/e2e/fluid-grid.component.cy.ts @@ -25,6 +25,29 @@ describe('layout-storybook - fluid-grid', () => { }); }); }); + + E2eVariations.MOBILE_WIDTHS.forEach((width) => { + describe(`at mobile width ${width}px`, () => { + beforeEach(() => { + cy.viewport(width, 960); + cy.visit( + `/iframe.html?globals=theme:${theme}&id=fluidgridcomponent-fluidgrid--fluid-grid`, + ); + }); + + it(`should render the component at mobile width ${width}`, () => { + cy.skyReady('app-fluid-grid').screenshot( + `fluidgridcomponent-fluidgrid--fluid-grid-${theme}-mobile-${width}`, + ); + cy.percySnapshot( + `fluidgridcomponent-fluidgrid--fluid-grid-${theme}-mobile-${width}`, + { + widths: [width], + }, + ); + }); + }); + }); }); }); }); diff --git a/apps/e2e/lists-storybook-e2e/src/e2e/paging.component.cy.ts b/apps/e2e/lists-storybook-e2e/src/e2e/paging.component.cy.ts index 1823b744b4..d118788150 100644 --- a/apps/e2e/lists-storybook-e2e/src/e2e/paging.component.cy.ts +++ b/apps/e2e/lists-storybook-e2e/src/e2e/paging.component.cy.ts @@ -19,6 +19,63 @@ describe('lists-storybook - paging', () => { }, ); }); + + it('should render paging button in hover state', () => { + cy.skyReady('app-paging'); + cy.get('.sky-paging-btn').eq(1).trigger('mouseover'); + cy.get('app-paging').screenshot( + `pagingcomponent-paging--paging-${theme}-button-hover`, + ); + cy.get('app-paging').percySnapshot( + `pagingcomponent-paging--paging-${theme}-button-hover`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render paging button in focus state', () => { + cy.skyReady('app-paging'); + cy.get('.sky-paging-btn').eq(1).focus(); + cy.get('app-paging').screenshot( + `pagingcomponent-paging--paging-${theme}-button-focus`, + ); + cy.get('app-paging').percySnapshot( + `pagingcomponent-paging--paging-${theme}-button-focus`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render paging after navigation', () => { + cy.skyReady('app-paging'); + cy.get('.sky-paging-btn').eq(2).click(); + cy.get('app-paging').screenshot( + `pagingcomponent-paging--paging-${theme}-navigated`, + ); + cy.get('app-paging').percySnapshot( + `pagingcomponent-paging--paging-${theme}-navigated`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render paging at mobile widths', () => { + E2eVariations.MOBILE_WIDTHS.forEach((width) => { + cy.viewport(width, 960); + cy.skyReady('app-paging').screenshot( + `pagingcomponent-paging--paging-${theme}-mobile-${width}`, + ); + cy.get('app-paging').percySnapshot( + `pagingcomponent-paging--paging-${theme}-mobile-${width}`, + { + widths: [width], + }, + ); + }); + }); }); }); }); diff --git a/apps/e2e/lookup-storybook-e2e/src/e2e/autocomplete.component.cy.ts b/apps/e2e/lookup-storybook-e2e/src/e2e/autocomplete.component.cy.ts index 9053d04db7..1cd2f7da98 100644 --- a/apps/e2e/lookup-storybook-e2e/src/e2e/autocomplete.component.cy.ts +++ b/apps/e2e/lookup-storybook-e2e/src/e2e/autocomplete.component.cy.ts @@ -83,6 +83,42 @@ describe('lookup-storybook', () => { }, ); }); + + it('should render the component with input focus state', () => { + cy.skyReady('app-autocomplete') + .get('.sky-form-control') + .should('exist') + .should('be.visible') + .focus(); + cy.get('app-autocomplete').screenshot( + `autocompletecomponent-autocomplete--autocomplete-focus-${theme}`, + ); + cy.get('app-autocomplete').percySnapshot( + `autocompletecomponent-autocomplete--autocomplete-focus-${theme}`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render the component with highlighted result', () => { + cy.skyReady('app-autocomplete') + .get('.sky-form-control') + .should('exist') + .should('be.visible') + .type('a'); + cy.get('.sky-autocomplete-result').first().trigger('mouseover'); + cy.get('app-autocomplete').screenshot( + `autocompletecomponent-autocomplete--autocomplete-result-hover-${theme}`, + ); + cy.get('app-autocomplete').percySnapshot( + `autocompletecomponent-autocomplete--autocomplete-result-hover-${theme}`, + { + minHeight: 900, + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); }); }); }); diff --git a/apps/e2e/popovers-storybook-e2e/src/e2e/dropdown.component.cy.ts b/apps/e2e/popovers-storybook-e2e/src/e2e/dropdown.component.cy.ts index afab79ec0e..48cf97e60e 100644 --- a/apps/e2e/popovers-storybook-e2e/src/e2e/dropdown.component.cy.ts +++ b/apps/e2e/popovers-storybook-e2e/src/e2e/dropdown.component.cy.ts @@ -57,6 +57,59 @@ describe('dropdown-storybook', () => { }); }); }); + + it('should render dropdown button in hover state', () => { + cy.visit( + `/iframe.html?globals=theme:${theme}&id=dropdowncomponent-dropdown--dropdown-default-button`, + ); + cy.skyReady('app-dropdown'); + cy.get('.sky-dropdown-button').first().trigger('mouseover'); + cy.get('app-dropdown').screenshot( + `dropdowncomponent-dropdown--dropdown-default-button-${theme}-hover`, + ); + cy.get('app-dropdown').percySnapshot( + `dropdowncomponent-dropdown--dropdown-default-button-${theme}-hover`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render dropdown button in focus state', () => { + cy.visit( + `/iframe.html?globals=theme:${theme}&id=dropdowncomponent-dropdown--dropdown-default-button`, + ); + cy.skyReady('app-dropdown'); + cy.get('.sky-dropdown-button').first().focus(); + cy.get('app-dropdown').screenshot( + `dropdowncomponent-dropdown--dropdown-default-button-${theme}-focus`, + ); + cy.get('app-dropdown').percySnapshot( + `dropdowncomponent-dropdown--dropdown-default-button-${theme}-focus`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render dropdown menu item in hover state', () => { + cy.visit( + `/iframe.html?globals=theme:${theme}&id=dropdowncomponent-dropdown--dropdown-left-aligned`, + ); + cy.skyReady('app-dropdown'); + cy.get('.sky-dropdown-button').first().click(); + cy.get('.sky-dropdown-menu').should('exist').should('be.visible'); + cy.get('.sky-dropdown-item').first().trigger('mouseover'); + cy.get('app-dropdown').screenshot( + `dropdowncomponent-dropdown--dropdown-menu-item-${theme}-hover`, + ); + cy.get('app-dropdown').percySnapshot( + `dropdowncomponent-dropdown--dropdown-menu-item-${theme}-hover`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); }); }); }); diff --git a/apps/e2e/tabs-storybook-e2e/src/e2e/tabs.component.cy.ts b/apps/e2e/tabs-storybook-e2e/src/e2e/tabs.component.cy.ts index 49ef0db740..5ab2df759e 100644 --- a/apps/e2e/tabs-storybook-e2e/src/e2e/tabs.component.cy.ts +++ b/apps/e2e/tabs-storybook-e2e/src/e2e/tabs.component.cy.ts @@ -48,6 +48,71 @@ describe(`tabs-storybook`, () => { ); }); }); + + describe('tab navigation states', () => { + beforeEach(() => + cy.visit( + `/iframe.html?globals=theme:${theme}&id=tabscomponent-tabs--tabs`, + ), + ); + + it('should render tab in hover state', () => { + cy.skyReady('app-tabs'); + cy.get('.sky-btn-tab').eq(1).trigger('mouseover'); + cy.get('app-tabs').screenshot( + `tabscomponent-tabs--tabs-${theme}-tab-hover`, + ); + cy.get('app-tabs').percySnapshot( + `tabscomponent-tabs--tabs-${theme}-tab-hover`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render tab in focus state', () => { + cy.skyReady('app-tabs'); + cy.get('.sky-btn-tab').eq(1).focus(); + cy.get('app-tabs').screenshot( + `tabscomponent-tabs--tabs-${theme}-tab-focus`, + ); + cy.get('app-tabs').percySnapshot( + `tabscomponent-tabs--tabs-${theme}-tab-focus`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render tabs after navigation', () => { + cy.skyReady('app-tabs'); + cy.get('.sky-btn-tab').eq(1).click(); + cy.get('app-tabs').screenshot( + `tabscomponent-tabs--tabs-${theme}-tab-navigated`, + ); + cy.get('app-tabs').percySnapshot( + `tabscomponent-tabs--tabs-${theme}-tab-navigated`, + { + widths: E2eVariations.DISPLAY_WIDTHS, + }, + ); + }); + + it('should render tabs at mobile widths', () => { + E2eVariations.MOBILE_WIDTHS.forEach((width) => { + cy.viewport(width, 960); + cy.skyReady('app-tabs').screenshot( + `tabscomponent-tabs--tabs-${theme}-mobile-${width}`, + ); + cy.get('app-tabs').percySnapshot( + `tabscomponent-tabs--tabs-${theme}-mobile-${width}`, + { + widths: [width], + }, + ); + }); + }); + }); }); }); });