|
1 | 1 | import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json' |
2 | 2 | import { getPathForPlatform } from '../../src/paths' |
3 | 3 |
|
4 | | -function validateCreateFromComponentCard (beforeEachFn: () => void, expectedSpecPath: string) { |
| 4 | +function validateCreateFromVueComponentCard (beforeEachFn: () => void, expectedSpecPath: string) { |
5 | 5 | beforeEach(beforeEachFn) |
6 | 6 |
|
7 | | - it('Shows create from component card for Vue projects with default spec patterns', () => { |
| 7 | + it('Shows create from component card for Vue projects', () => { |
8 | 8 | cy.get('@ComponentCard') |
9 | 9 | .within(() => { |
10 | 10 | cy.findByRole('button', { |
@@ -82,31 +82,175 @@ function validateCreateFromComponentCard (beforeEachFn: () => void, expectedSpec |
82 | 82 | .should('have.attr', 'href', `#/specs/runner?file=${expectedSpecPath}`).click() |
83 | 83 | }) |
84 | 84 |
|
85 | | - cy.findByText('<HelloWorld ... />', { timeout: 10000 }).should('be.visible') |
| 85 | + cy.waitForSpecToFinish({ passCount: 1 }) |
| 86 | + }) |
| 87 | +} |
| 88 | + |
| 89 | +function validateCreateFromReactComponentCard (beforeEachFn: () => void, expectedSpecPath: string) { |
| 90 | + beforeEach(beforeEachFn) |
| 91 | + |
| 92 | + it('Shows create from component card for React projects', () => { |
| 93 | + cy.get('@ComponentCard') |
| 94 | + .within(() => { |
| 95 | + cy.findByRole('button', { |
| 96 | + name: 'Create from component', |
| 97 | + }).should('be.visible') |
| 98 | + .and('not.be.disabled') |
| 99 | + }) |
| 100 | + }) |
| 101 | + |
| 102 | + it('Can be closed with the x button', () => { |
| 103 | + cy.get('@ComponentCard').click() |
| 104 | + |
| 105 | + cy.findByRole('button', { name: 'Close' }).as('DialogCloseButton') |
| 106 | + |
| 107 | + cy.get('@DialogCloseButton').click() |
| 108 | + cy.findByRole('dialog', { |
| 109 | + name: 'Choose a component', |
| 110 | + }).should('not.exist') |
| 111 | + }) |
| 112 | + |
| 113 | + it('Lists files in the project', () => { |
| 114 | + cy.get('@ComponentCard').click() |
| 115 | + |
| 116 | + cy.findByText('5 matches').should('be.visible') |
| 117 | + |
| 118 | + cy.findByText('App').should('be.visible') |
| 119 | + cy.findByText('index').should('be.visible') |
| 120 | + }) |
| 121 | + |
| 122 | + it('Allows for the user to search through their components', () => { |
| 123 | + cy.get('@ComponentCard').click() |
| 124 | + |
| 125 | + cy.findByText('*.{js,jsx,ts,tsx}').should('be.visible') |
| 126 | + cy.findByText('5 matches').should('be.visible') |
| 127 | + cy.findByLabelText('file-name-input').type('App') |
| 128 | + |
| 129 | + cy.findByText('App').should('be.visible') |
| 130 | + cy.findByText('1 of 5 matches').should('be.visible') |
| 131 | + cy.findByText('index').should('not.exist') |
| 132 | + cy.findByText('component').should('not.exist') |
| 133 | + }) |
| 134 | + |
| 135 | + it('shows \'No components found\' if there are no exported components', () => { |
| 136 | + cy.get('@ComponentCard').click() |
| 137 | + |
| 138 | + cy.findByText('index').should('be.visible').click() |
| 139 | + |
| 140 | + cy.findByTestId('react-component-row').should('not.exist') |
| 141 | + cy.contains('No components found').should('be.visible') |
| 142 | + }) |
| 143 | + |
| 144 | + it('shows \'Unable to parse file\' if there was an error parsing the file', () => { |
| 145 | + cy.get('@ComponentCard').click() |
| 146 | + |
| 147 | + // This component has a syntax error so we will fail to parse it |
| 148 | + cy.findByText('Invalid').should('be.visible').click() |
| 149 | + |
| 150 | + cy.findByTestId('react-component-row').should('not.exist') |
| 151 | + cy.contains('Unable to parse file').should('be.visible') |
| 152 | + }) |
| 153 | + |
| 154 | + it('shows success modal when component spec is created', () => { |
| 155 | + cy.get('@ComponentCard').click() |
| 156 | + |
| 157 | + // Expand the row |
| 158 | + cy.findByText('App').should('be.visible').click() |
| 159 | + |
| 160 | + // Click on 'app' component |
| 161 | + cy.findByTestId('react-component-row').should('contain', 'App').click() |
| 162 | + |
| 163 | + cy.findByRole('dialog', { |
| 164 | + name: defaultMessages.createSpec.successPage.header, |
| 165 | + }).as('SuccessDialog').within(() => { |
| 166 | + cy.contains(getPathForPlatform(expectedSpecPath)).should('be.visible') |
| 167 | + cy.findByRole('button', { name: 'Close' }).should('be.visible') |
| 168 | + |
| 169 | + cy.findByRole('link', { name: 'Okay, run the spec' }) |
| 170 | + .should('have.attr', 'href', `#/specs/runner?file=${expectedSpecPath}`) |
| 171 | + |
| 172 | + cy.findByRole('button', { name: 'Create another spec' }).click() |
| 173 | + }) |
| 174 | + |
| 175 | + // 'Create from component' card appears again when the user selects "create another spec" |
| 176 | + cy.findByText('Create from component').should('be.visible') |
| 177 | + }) |
| 178 | + |
| 179 | + it('runs generated spec', () => { |
| 180 | + cy.get('@ComponentCard').click() |
| 181 | + |
| 182 | + // Expand the row |
| 183 | + cy.findByText('App').should('be.visible').click() |
| 184 | + |
| 185 | + // Click on 'app' component |
| 186 | + cy.findByTestId('react-component-row').should('contain', 'App').click() |
| 187 | + |
| 188 | + cy.findByRole('dialog', { |
| 189 | + name: defaultMessages.createSpec.successPage.header, |
| 190 | + }).as('SuccessDialog').within(() => { |
| 191 | + cy.contains(getPathForPlatform(expectedSpecPath)).should('be.visible') |
| 192 | + cy.findByRole('button', { name: 'Close' }).should('be.visible') |
| 193 | + |
| 194 | + // There appears to be a race condition here where sometimes we try to run the spec |
| 195 | + // before the file has been written to. Waiting here for 1 second resolves the issue. |
| 196 | + cy.wait(1000) |
| 197 | + |
| 198 | + cy.findByRole('link', { name: 'Okay, run the spec' }) |
| 199 | + .should('have.attr', 'href', `#/specs/runner?file=${expectedSpecPath}`).click() |
| 200 | + }) |
| 201 | + |
| 202 | + cy.waitForSpecToFinish({ passCount: 1 }) |
86 | 203 | }) |
87 | 204 | } |
88 | 205 |
|
89 | 206 | describe('Create from component card', () => { |
90 | | - context('project with default spec pattern', () => { |
91 | | - validateCreateFromComponentCard(() => { |
92 | | - cy.scaffoldProject('no-specs-vue-2') |
93 | | - cy.openProject('no-specs-vue-2') |
94 | | - cy.startAppServer('component') |
95 | | - cy.visitApp() |
96 | | - |
97 | | - cy.findAllByTestId('card').eq(0).as('ComponentCard') |
98 | | - }, 'src/components/HelloWorld.cy.js') |
99 | | - }) |
100 | | - |
101 | | - context('project with custom spec pattern', () => { |
102 | | - validateCreateFromComponentCard(() => { |
103 | | - cy.scaffoldProject('no-specs-vue-2') |
104 | | - cy.openProject('no-specs-vue-2', ['--config-file', 'cypress-custom-spec-pattern.config.js']) |
105 | | - cy.startAppServer('component') |
106 | | - cy.visitApp() |
107 | | - |
108 | | - cy.findByText('New spec').click() |
109 | | - cy.findAllByTestId('card').eq(0).as('ComponentCard') |
110 | | - }, 'src/specs-folder/HelloWorld.cy.js') |
| 207 | + context('Vue', () => { |
| 208 | + context('project with default spec pattern', () => { |
| 209 | + validateCreateFromVueComponentCard(() => { |
| 210 | + cy.scaffoldProject('no-specs-vue-2') |
| 211 | + cy.openProject('no-specs-vue-2') |
| 212 | + cy.startAppServer('component') |
| 213 | + cy.visitApp() |
| 214 | + |
| 215 | + cy.findAllByTestId('card').eq(0).as('ComponentCard') |
| 216 | + }, 'src/components/HelloWorld.cy.js') |
| 217 | + }) |
| 218 | + |
| 219 | + context('project with custom spec pattern', () => { |
| 220 | + validateCreateFromVueComponentCard(() => { |
| 221 | + cy.scaffoldProject('no-specs-vue-2') |
| 222 | + cy.openProject('no-specs-vue-2', ['--config-file', 'cypress-custom-spec-pattern.config.js']) |
| 223 | + cy.startAppServer('component') |
| 224 | + cy.visitApp() |
| 225 | + |
| 226 | + cy.findByText('New spec').click() |
| 227 | + cy.findAllByTestId('card').eq(0).as('ComponentCard') |
| 228 | + }, 'src/specs-folder/HelloWorld.cy.js') |
| 229 | + }) |
| 230 | + }) |
| 231 | + |
| 232 | + context('React', () => { |
| 233 | + context('project with default spec pattern', () => { |
| 234 | + validateCreateFromReactComponentCard(() => { |
| 235 | + cy.scaffoldProject('no-specs') |
| 236 | + cy.openProject('no-specs') |
| 237 | + cy.startAppServer('component') |
| 238 | + cy.visitApp() |
| 239 | + |
| 240 | + cy.findAllByTestId('card').eq(0).as('ComponentCard') |
| 241 | + }, 'src/App.cy.jsx') |
| 242 | + }) |
| 243 | + |
| 244 | + context('project with custom spec pattern', () => { |
| 245 | + validateCreateFromReactComponentCard(() => { |
| 246 | + cy.scaffoldProject('no-specs') |
| 247 | + cy.openProject('no-specs', ['--config-file', 'cypress-custom-spec-pattern.config.ts']) |
| 248 | + cy.startAppServer('component') |
| 249 | + cy.visitApp() |
| 250 | + |
| 251 | + cy.findByText('New spec').click() |
| 252 | + cy.findAllByTestId('card').eq(0).as('ComponentCard') |
| 253 | + }, 'src/specs-folder/App.cy.jsx') |
| 254 | + }) |
111 | 255 | }) |
112 | 256 | }) |
0 commit comments