Skip to content

feat(e2e): add Percy visual regression tests for priority component areas #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
devin-ai-integration wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(e2e): add Percy visual regression tests for priority component areas #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions apps/e2e/colorpicker-storybook-e2e/src/e2e/colorpicker.component.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
);
});
});
});
});
52 changes: 52 additions & 0 deletions apps/e2e/errors-storybook-e2e/src/e2e/error.component.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
);
});
});
});
Expand Down
53 changes: 53 additions & 0 deletions apps/e2e/forms-storybook-e2e/src/e2e/checkbox.component.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
);
});
});
});
});
74 changes: 74 additions & 0 deletions apps/e2e/forms-storybook-e2e/src/e2e/input-box.component.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
);
});
});
});
});
45 changes: 45 additions & 0 deletions apps/e2e/forms-storybook-e2e/src/e2e/radio-button.component.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
);
});
});
});
});
30 changes: 30 additions & 0 deletions apps/e2e/layout-storybook-e2e/src/e2e/box.component.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
);
});
});
});
});
29 changes: 29 additions & 0 deletions apps/e2e/layout-storybook-e2e/src/e2e/card.component.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
);
});
});
});
});
Loading