GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 17:01:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(controls): add e2e scenario for controls

Browse Source
This commit is contained in:
Yann Braga 2021-04-21 22:48:58 +02:00
parent c167d6853d
commit d4c1269784
1 changed files with 48 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
cypress/generated/addon-controls.spec.ts Normal file
View File

@ -0,0 +1,48 @@
describe('addon-controls', () => {
it('should change component when changing controls', () => {
cy.visitStorybook();
cy.navigateToStory('example-button', 'Primary');
cy.viewAddonPanel('Controls');
// Text input: Label
cy.getStoryElement().find('button').should('contain.text', 'Button');
cy.get('#label').clear().type('Hello world');
cy.getStoryElement().find('button').should('contain.text', 'Hello world');
// Args in URL
cy.url().should('include', 'args=label:Hello+world');
// Boolean toggle: Primary/secondary
cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(30, 167, 253)');
cy.get('#primary').click();
cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)');
// Color picker: Background color
cy.get('input[placeholder="Choose color"]').type('red');
cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(255, 0, 0)');
// Radio buttons: Size
cy.getStoryElement().find('button').should('have.css', 'font-size', '14px');
cy.get('label[for="size-large"]').click();
cy.getStoryElement().find('button').should('have.css', 'font-size', '16px');
// Reset controls: assert that the component is back to original state
cy.get('button[title="Reset controls"]').click();
cy.getStoryElement().find('button').should('have.css', 'font-size', '14px');
cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(30, 167, 253)');
cy.getStoryElement().find('button').should('contain.text', 'Button');
});
it('should apply controls automatically when passed via url', () => {
cy.visit('/', {
qs: {
path: '/story/example-button--primary',
args: 'label:Hello world',
},
});
cy.getStoryElement().find('button').should('contain.text', 'Hello world');
});
});