Fix tests from last commit

This commit is contained in:
BlueWinds
2022-04-25 15:36:49 -07:00
parent 8ff3c8b8e8
commit ea39cec295
7 changed files with 121 additions and 129 deletions

View File

@@ -469,108 +469,110 @@ describe('App: Specs', () => {
viewportHeight: 768,
viewportWidth: 1024,
}, () => {
beforeEach(() => {
cy.scaffoldProject('no-specs')
cy.openProject('no-specs')
cy.startAppServer('component')
cy.visitApp()
cy.findAllByTestId('card').eq(0).as('EmptyCard')
})
it('shows create new empty spec card', () => {
cy.get('@EmptyCard')
.within(() => {
cy.findByRole('button', {
name: 'Create new empty spec',
}).should('be.visible')
.and('not.be.disabled')
})
})
context('create empty card', () => {
context('project with default spec pattern', () => {
beforeEach(() => {
cy.get('@EmptyCard').click()
cy.scaffoldProject('no-specs')
cy.openProject('no-specs')
cy.startAppServer('component')
cy.visitApp()
cy.findByRole('dialog', {
name: 'Enter the path for your new spec',
}).as('CreateEmptySpecDialog')
cy.findByRole('button', { name: 'Close' }).as('DialogCloseButton')
cy.findAllByTestId('card').eq(0).as('EmptyCard')
})
it('shows dialog that can be dismissed with Close (x) button press', () => {
cy.get('@DialogCloseButton').click()
cy.findByRole('dialog', {
name: 'Enter the path for your new spec',
}).should('not.exist')
it('shows create new empty spec card', () => {
cy.get('@EmptyCard')
.within(() => {
cy.findByRole('button', {
name: 'Create new empty spec',
}).should('be.visible')
.and('not.be.disabled')
})
})
it('shows success modal when empty spec is created', () => {
cy.get('@CreateEmptySpecDialog').within(() => {
cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js')
context('create empty card', () => {
beforeEach(() => {
cy.get('@EmptyCard').click()
cy.findByRole('button', { name: 'Create Spec' }).click()
cy.findByRole('dialog', {
name: 'Enter the path for your new spec',
}).as('CreateEmptySpecDialog')
cy.findByRole('button', { name: 'Close' }).as('DialogCloseButton')
})
cy.findByRole('dialog', {
name: defaultMessages.createSpec.successPage.header,
}).as('SuccessDialog').within(() => {
cy.contains(getPathForPlatform('cypress/my-empty-spec.cy.js')).should('be.visible')
cy.findByRole('button', { name: 'Close' }).should('be.visible')
cy.findByRole('link', { name: 'Okay, run the spec' })
.should('have.attr', 'href', `#/specs/runner?file=cypress/my-empty-spec.cy.js`)
cy.findByRole('button', { name: 'Create another spec' }).click()
it('shows dialog that can be dismissed with Close (x) button press', () => {
cy.get('@DialogCloseButton').click()
cy.findByRole('dialog', {
name: 'Enter the path for your new spec',
}).should('not.exist')
})
// 'Create a new spec' dialog presents with options when user indicates they want to create
// another spec.
cy.findByRole('dialog', { name: 'Enter the path for your new spec' }).should('be.visible')
})
it('shows success modal when empty spec is created', () => {
cy.get('@CreateEmptySpecDialog').within(() => {
cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js')
it('navigates to spec runner when selected', () => {
cy.get('@CreateEmptySpecDialog').within(() => {
cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js')
cy.findByRole('button', { name: 'Create Spec' }).click()
})
cy.findByRole('button', { name: 'Create Spec' }).click()
cy.findByRole('dialog', {
name: defaultMessages.createSpec.successPage.header,
}).as('SuccessDialog').within(() => {
cy.contains(getPathForPlatform('cypress/my-empty-spec.cy.js')).should('be.visible')
cy.findByRole('button', { name: 'Close' }).should('be.visible')
cy.findByRole('link', { name: 'Okay, run the spec' })
.should('have.attr', 'href', `#/specs/runner?file=cypress/my-empty-spec.cy.js`)
cy.findByRole('button', { name: 'Create another spec' }).click()
})
// 'Create a new spec' dialog presents with options when user indicates they want to create
// another spec.
cy.findByRole('dialog', { name: 'Enter the path for your new spec' }).should('be.visible')
})
cy.findByRole('dialog', { name: defaultMessages.createSpec.successPage.header }).within(() => {
cy.findByRole('link', {
name: 'Okay, run the spec',
}).should('have.attr', 'href', '#/specs/runner?file=cypress/my-empty-spec.cy.js').click()
it('navigates to spec runner when selected', () => {
cy.get('@CreateEmptySpecDialog').within(() => {
cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js')
cy.findByRole('button', { name: 'Create Spec' }).click()
})
cy.findByRole('dialog', { name: defaultMessages.createSpec.successPage.header }).within(() => {
cy.findByRole('link', {
name: 'Okay, run the spec',
}).should('have.attr', 'href', '#/specs/runner?file=cypress/my-empty-spec.cy.js').click()
})
cy.get('#main-pane').should('be.visible')
cy.location().its('href').should('contain', '#/specs/runner?file=cypress/my-empty-spec.cy.js')
})
cy.get('#main-pane').should('be.visible')
it('displays alert with docs link on new spec', () => {
cy.get('@CreateEmptySpecDialog').within(() => {
cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js')
cy.location().its('href').should('contain', '#/specs/runner?file=cypress/my-empty-spec.cy.js')
})
cy.findByRole('button', { name: 'Create Spec' }).click()
})
it('displays alert with docs link on new spec', () => {
cy.get('@CreateEmptySpecDialog').within(() => {
cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js')
cy.findByRole('dialog', { name: defaultMessages.createSpec.successPage.header }).within(() => {
cy.findByRole('link', {
name: 'Okay, run the spec',
}).should('have.attr', 'href', '#/specs/runner?file=cypress/my-empty-spec.cy.js').click()
})
cy.findByRole('button', { name: 'Create Spec' }).click()
cy.contains('Review the docs')
.should('have.attr', 'href', 'https://on.cypress.io/mount')
cy.log('should not contain the link if you navigate away and back')
cy.get('body').type('f')
cy.get('[data-testid=spec-file-item]').first().click()
cy.get('#spec-runner-header').should('not.contain', 'Review the docs')
cy.get('[data-testid=spec-file-item]').last().click()
cy.get('#spec-runner-header').should('not.contain', 'Review the docs')
})
cy.findByRole('dialog', { name: defaultMessages.createSpec.successPage.header }).within(() => {
cy.findByRole('link', {
name: 'Okay, run the spec',
}).should('have.attr', 'href', '#/specs/runner?file=cypress/my-empty-spec.cy.js').click()
})
cy.contains('Review the docs')
.should('have.attr', 'href', 'https://on.cypress.io/mount')
cy.log('should not contain the link if you navigate away and back')
cy.get('body').type('f')
cy.get('[data-testid=spec-file-item]').first().click()
cy.get('#spec-runner-header').should('not.contain', 'Review the docs')
cy.get('[data-testid=spec-file-item]').last().click()
cy.get('#spec-runner-header').should('not.contain', 'Review the docs')
})
})

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>

View File

@@ -0,0 +1,6 @@
import React from 'react';
import Button from './Button';
it("should not run because this file doesn't match the custom spec pattern", () => {
expect(true).to.be.false
})

View File

@@ -6,11 +6,11 @@ import './button.css';
* Primary UI component for user interaction
*/
export default Button = ({ primary, backgroundColor, size, label, ...props }) => {
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
const mode = primary ? 'button--primary' : 'button--secondary';
return (
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
className={['button', `button--${size}`, mode].join(' ')}
style={backgroundColor && { backgroundColor }}
{...props}
>

View File

@@ -1,4 +1,4 @@
.storybook-button {
.button {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
@@ -7,24 +7,24 @@
display: inline-block;
line-height: 1;
}
.storybook-button--primary {
.button--primary {
color: white;
background-color: #1ea7fd;
}
.storybook-button--secondary {
.button--secondary {
color: #333;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}
.storybook-button--small {
.button--small {
font-size: 12px;
padding: 10px 16px;
}
.storybook-button--medium {
.button--medium {
font-size: 14px;
padding: 11px 20px;
}
.storybook-button--large {
.button--large {
font-size: 16px;
padding: 12px 24px;
}

View File

@@ -1,40 +0,0 @@
import React from 'react';
import Button from './Button';
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
title: 'Example/Button',
component: Button,
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
argTypes: {
backgroundColor: { control: 'color' },
},
};
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Primary.args = {
primary: true,
label: 'Button',
};
export const Secondary = Template.bind({});
Secondary.args = {
label: 'Button',
};
export const Large = Template.bind({});
Large.args = {
size: 'large',
label: 'Button',
};
export const Small = Template.bind({});
Small.args = {
size: 'small',
label: 'Button',
};

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>