Skip to content

Commit c8cff45

Browse files
Steve-MclSteve-Mcl
committed
update / add e2e tests for editing a snapshot
1 parent cdeadca commit c8cff45

4 files changed

Lines changed: 164 additions & 25 deletions

File tree

‎frontend/src/components/dialogs/SnapshotEditDialog.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<ff-dialog ref="dialog" :header="'Edit Snapshot: ' + originalName" data-el="snapshot-edit-dialog" @confirm="confirm()">
33
<template #default>
4-
<form class="space-y-6 mt-2" data-form="snapshot-export" @submit.prevent>
4+
<form class="space-y-6 mt-2" data-form="snapshot-edit" @submit.prevent>
55
<FormRow ref="name" v-model="input.name" :error="errors.name" data-form="snapshot-name">Name</FormRow>
66
<FormRow data-form="snapshot-description">
77
Description

‎test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js‎

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,16 @@ const snapshots = {
77
count: 2,
88
snapshots: [deviceSnapshots.snapshots[0], instanceSnapshots.snapshots[0]]
99
}
10+
let idx = 0
11+
const IDX_DEPLOY_SNAPSHOT = idx++
12+
const IDX_EDIT_SNAPSHOT = idx++
13+
const IDX_VIEW_SNAPSHOT = idx++
14+
const IDX_COMPARE_SNAPSHOT = idx++
15+
const IDX_DOWNLOAD_SNAPSHOT = idx++
16+
const IDX_DOWNLOAD_PACKAGE = idx++
17+
const IDX_DELETE_SNAPSHOT = idx++
1018

11-
const IDX_DEPLOY_SNAPSHOT = 0
12-
const IDX_VIEW_SNAPSHOT = 1
13-
const IDX_COMPARE_SNAPSHOT = 2
14-
const IDX_DOWNLOAD_SNAPSHOT = 3
15-
const IDX_DOWNLOAD_PACKAGE = 4
16-
const IDX_DELETE_SNAPSHOT = 5
19+
const MENU_ITEM_COUNT = idx
1720

1821
describe('FlowForge - Devices - With Billing', () => {
1922
beforeEach(() => {
@@ -122,8 +125,9 @@ describe('FlowForge - Devices - With Billing', () => {
122125
// click kebab menu in row 1 - a device snapshot
123126
cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(0).click()
124127
// check the options are present
125-
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').should('have.length', 6)
128+
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').should('have.length', MENU_ITEM_COUNT)
126129
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DEPLOY_SNAPSHOT).contains('Deploy Snapshot')
130+
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_EDIT_SNAPSHOT).contains('Edit Snapshot')
127131
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_VIEW_SNAPSHOT).contains('View Snapshot')
128132
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_COMPARE_SNAPSHOT).contains('Compare Snapshot...')
129133
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DOWNLOAD_SNAPSHOT).contains('Download Snapshot')
@@ -135,8 +139,9 @@ describe('FlowForge - Devices - With Billing', () => {
135139
// click kebab menu in row 2 - an instance snapshot
136140
cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(1).click()
137141
// click kebab menu in row 2 - an instance snapshot
138-
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').should('have.length', 6)
142+
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').should('have.length', MENU_ITEM_COUNT)
139143
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DEPLOY_SNAPSHOT).contains('Deploy Snapshot')
144+
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_EDIT_SNAPSHOT).contains('Edit Snapshot')
140145
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_VIEW_SNAPSHOT).contains('View Snapshot')
141146
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_COMPARE_SNAPSHOT).contains('Compare Snapshot...')
142147
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DOWNLOAD_SNAPSHOT).contains('Download Snapshot')
@@ -166,6 +171,50 @@ describe('FlowForge - Devices - With Billing', () => {
166171
cy.get('[data-el="dialog-view-snapshot"] .ff-dialog-content svg').should('exist')
167172
})
168173

174+
it('provides functionality to edit a snapshot', () => {
175+
cy.intercept('GET', '/api/*/applications/*/snapshots*', snapshots).as('getSnapshots')
176+
cy.intercept('PUT', '/api/*/snapshots/*', {}).as('updateSnapshot')
177+
178+
cy.contains('span', 'application-device-a').click()
179+
cy.get('[data-nav="device-snapshots"]').click()
180+
181+
cy.wait('@getSnapshots')
182+
183+
// click kebab menu in row 2
184+
cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(1).click()
185+
// click the Edit Snapshot option
186+
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_EDIT_SNAPSHOT).click()
187+
188+
// check the snapshot dialog is visible and contains the snapshot name
189+
cy.get('[data-el="dialog-edit-snapshot"]').should('be.visible')
190+
cy.get('[data-el="dialog-edit-snapshot"] .ff-dialog-header').contains('Edit Snapshot: ' + snapshots.snapshots[1].name)
191+
// check the edit form is present
192+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-edit"]').should('exist')
193+
// check the buttons are present
194+
cy.get('[data-el="dialog-edit-snapshot"] [data-action="dialog-confirm"]').should('exist').should('be.enabled')
195+
cy.get('[data-el="dialog-edit-snapshot"] [data-action="dialog-cancel"]').should('exist').should('be.enabled')
196+
197+
// clear the snapshot name
198+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-name"] input').clear()
199+
// the confirm button should be disabled
200+
cy.get('[data-el="dialog-edit-snapshot"] [data-action="dialog-confirm"]').should('be.disabled')
201+
202+
// enter a new snapshot name and description
203+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-name"] input').type('Edited Snapshot Name!!!')
204+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-description"] textarea').clear()
205+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-description"] textarea').type('Edited Snapshot Description!!!')
206+
// the confirm button should be enabled
207+
cy.get('[data-el="dialog-edit-snapshot"] [data-action="dialog-confirm"]').should('be.enabled').click()
208+
209+
cy.wait('@updateSnapshot').then((interception) => {
210+
expect(interception.request.body.name).to.equal('Edited Snapshot Name!!!')
211+
expect(interception.request.body.description).to.equal('Edited Snapshot Description!!!')
212+
})
213+
214+
// check the snapshot name is updated in the table
215+
cy.get('[data-el="snapshots"] tbody').find('tr').contains('Edited Snapshot Name!!!')
216+
})
217+
169218
it('provides functionality to compare snapshots', () => {
170219
cy.intercept('GET', '/api/*/applications/*/snapshots*', deviceSnapshots).as('getSnapshots')
171220
cy.intercept('GET', '/api/*/snapshots/*/full', deviceFullSnapshot).as('fullSnapshot')

‎test/e2e/frontend/cypress/tests/applications/snapshots.spec.js‎

Lines changed: 53 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,15 @@ const emptySnapshots = {
1212
count: 0,
1313
snapshots: []
1414
}
15+
let idx = 0
16+
const IDX_EDIT_SNAPSHOT = idx++
17+
const IDX_VIEW_SNAPSHOT = idx++
18+
const IDX_COMPARE_SNAPSHOT = idx++
19+
const IDX_DOWNLOAD_SNAPSHOT = idx++
20+
const IDX_DOWNLOAD_PACKAGE = idx++
21+
const IDX_DELETE_SNAPSHOT = idx++
1522

16-
const IDX_VIEW_SNAPSHOT = 0
17-
const IDX_COMPARE_SNAPSHOT = 1
18-
const IDX_DOWNLOAD_SNAPSHOT = 2
19-
const IDX_DOWNLOAD_PACKAGE = 3
20-
const IDX_DELETE_SNAPSHOT = 4
23+
const MENU_ITEM_COUNT = idx
2124

2225
describe('FlowForge - Application - Snapshots', () => {
2326
let application
@@ -70,8 +73,9 @@ describe('FlowForge - Application - Snapshots', () => {
7073
cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(0).click()
7174

7275
// check the options are present
73-
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').should('have.length', 5)
76+
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').should('have.length', MENU_ITEM_COUNT)
7477
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_VIEW_SNAPSHOT).contains('View Snapshot')
78+
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_EDIT_SNAPSHOT).contains('Edit Snapshot')
7579
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_COMPARE_SNAPSHOT).contains('Compare Snapshot...')
7680
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DOWNLOAD_SNAPSHOT).contains('Download Snapshot')
7781
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DOWNLOAD_PACKAGE).contains('Download package.json')
@@ -82,6 +86,7 @@ describe('FlowForge - Application - Snapshots', () => {
8286
// click kebab menu in row 2 - a instance snapshot
8387
cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(1).click()
8488
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_VIEW_SNAPSHOT).contains('View Snapshot')
89+
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_EDIT_SNAPSHOT).contains('Edit Snapshot')
8590
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_COMPARE_SNAPSHOT).contains('Compare Snapshot...')
8691
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DOWNLOAD_SNAPSHOT).contains('Download Snapshot')
8792
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DOWNLOAD_PACKAGE).contains('Download package.json')
@@ -128,6 +133,48 @@ describe('FlowForge - Application - Snapshots', () => {
128133
cy.get('[data-el="dialog-view-snapshot"] .ff-dialog-content svg').should('exist')
129134
})
130135

136+
it('provides functionality to edit a snapshot', () => {
137+
cy.intercept('GET', '/api/*/applications/*/snapshots*', snapshots).as('getSnapshots')
138+
cy.intercept('GET', '/api/*/snapshots/*/full', instanceFullSnapshot).as('fullSnapshot')
139+
cy.intercept('PUT', '/api/*/snapshots/*', {}).as('updateSnapshot')
140+
141+
cy.get('[data-nav="application-snapshots"]').click()
142+
143+
// click kebab menu in row 2
144+
cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(1).click()
145+
// click the Edit Snapshot option
146+
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_EDIT_SNAPSHOT).click()
147+
148+
// check the snapshot dialog is visible and contains the snapshot name
149+
cy.get('[data-el="dialog-edit-snapshot"]').should('be.visible')
150+
cy.get('[data-el="dialog-edit-snapshot"] .ff-dialog-header').contains(instanceFullSnapshot.name)
151+
// check the edit form is present
152+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-edit"]').should('exist')
153+
// check the buttons are present
154+
cy.get('[data-el="dialog-edit-snapshot"] [data-action="dialog-confirm"]').should('exist').should('be.enabled')
155+
cy.get('[data-el="dialog-edit-snapshot"] [data-action="dialog-cancel"]').should('exist').should('be.enabled')
156+
157+
// clear the snapshot name
158+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-name"] input').clear()
159+
// the confirm button should be disabled
160+
cy.get('[data-el="dialog-edit-snapshot"] [data-action="dialog-confirm"]').should('be.disabled')
161+
162+
// enter a new snapshot name and description
163+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-name"] input').type('Edited Snapshot Name!!!')
164+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-description"] textarea').clear()
165+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-description"] textarea').type('Edited Snapshot Description!!!')
166+
// the confirm button should be enabled
167+
cy.get('[data-el="dialog-edit-snapshot"] [data-action="dialog-confirm"]').should('be.enabled').click()
168+
169+
cy.wait('@updateSnapshot').then((interception) => {
170+
expect(interception.request.body.name).to.equal('Edited Snapshot Name!!!')
171+
expect(interception.request.body.description).to.equal('Edited Snapshot Description!!!')
172+
})
173+
174+
// check the snapshot name is updated in the table
175+
cy.get('[data-el="snapshots"] tbody').find('tr').contains('Edited Snapshot Name!!!')
176+
})
177+
131178
it('provides functionality to compare snapshots', () => {
132179
cy.intercept('GET', '/api/*/applications/*/snapshots*', snapshots).as('getSnapshots')
133180
cy.intercept('GET', '/api/*/snapshots/*/full', instanceFullSnapshot).as('fullSnapshot')

‎test/e2e/frontend/cypress/tests/instances/snapshots.spec.js‎

Lines changed: 53 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@
22
import instanceSnapshots from '../../fixtures/snapshots/instance-snapshots.json'
33
import instanceFullSnapshot from '../../fixtures/snapshots/instance2-full-snapshot2.json'
44
import instanceSnapshot from '../../fixtures/snapshots/instance2-snapshot2.json'
5-
const IDX_DEPLOY_SNAPSHOT = 0
6-
const IDX_VIEW_SNAPSHOT = 1
7-
const IDX_COMPARE_SNAPSHOT = 2
8-
const IDX_DOWNLOAD_SNAPSHOT = 3
9-
const IDX_DOWNLOAD_PACKAGE = 4
10-
const IDX_SET_TARGET = 5
11-
const IDX_DELETE_SNAPSHOT = 6
5+
let idx = 0
6+
const IDX_DEPLOY_SNAPSHOT = idx++
7+
const IDX_EDIT_SNAPSHOT = idx++
8+
const IDX_VIEW_SNAPSHOT = idx++
9+
const IDX_COMPARE_SNAPSHOT = idx++
10+
const IDX_DOWNLOAD_SNAPSHOT = idx++
11+
const IDX_DOWNLOAD_PACKAGE = idx++
12+
const IDX_SET_TARGET = idx++
13+
const IDX_DELETE_SNAPSHOT = idx++
14+
const MENU_ITEM_COUNT = idx
1215

1316
describe('FlowForge - Instance Snapshots', () => {
1417
let projectId
@@ -49,10 +52,10 @@ describe('FlowForge - Instance Snapshots', () => {
4952
// disabled primary button by default
5053
cy.get('.ff-dialog-box button.ff-btn.ff-btn--primary').should('be.disabled')
5154

52-
cy.get('[data-form="snapshot-name"] input[type="text"]').type('snapshot1')
55+
cy.get('[data-el="dialog-create-snapshot"] [data-form="snapshot-name"] input[type="text"]').type('snapshot1')
5356
// inserting snapshot name is enough to enable button
5457
cy.get('[data-el="dialog-create-snapshot"] button.ff-btn.ff-btn--primary').should('not.be.disabled')
55-
cy.get('[data-form="snapshot-description"] textarea').type('snapshot1 description')
58+
cy.get('[data-el="dialog-create-snapshot"] [data-form="snapshot-description"] textarea').type('snapshot1 description')
5659

5760
// click "Create"
5861
cy.get('[data-el="dialog-create-snapshot"] button.ff-btn.ff-btn--primary').click()
@@ -69,8 +72,9 @@ describe('FlowForge - Instance Snapshots', () => {
6972
cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(0).click()
7073

7174
// check the options are present
72-
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').should('have.length', 7)
75+
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').should('have.length', MENU_ITEM_COUNT)
7376
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DEPLOY_SNAPSHOT).contains('Deploy Snapshot')
77+
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_EDIT_SNAPSHOT).contains('Edit Snapshot')
7478
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_VIEW_SNAPSHOT).contains('View Snapshot')
7579
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_COMPARE_SNAPSHOT).contains('Compare Snapshot...')
7680
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DOWNLOAD_SNAPSHOT).contains('Download Snapshot')
@@ -97,6 +101,45 @@ describe('FlowForge - Instance Snapshots', () => {
97101
cy.get('[data-el="dialog-view-snapshot"] .ff-dialog-content svg').should('exist')
98102
})
99103

104+
it('provides functionality to edit a snapshot', () => {
105+
cy.intercept('GET', '/api/*/snapshots/*/full', instanceFullSnapshot).as('fullSnapshot')
106+
cy.intercept('PUT', '/api/*/snapshots/*', {}).as('updateSnapshot')
107+
108+
// click kebab menu in row 1
109+
cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(0).click()
110+
// click the Edit Snapshot option
111+
cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_EDIT_SNAPSHOT).click()
112+
113+
// check the snapshot dialog is visible and contains the snapshot name
114+
cy.get('[data-el="dialog-edit-snapshot"]').should('be.visible')
115+
cy.get('[data-el="dialog-edit-snapshot"] .ff-dialog-header').contains('Edit Snapshot: snapshot1') // brittle! (depends on prior test / ordered execution)
116+
// check the edit form is present
117+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-edit"]').should('exist')
118+
// check the buttons are present
119+
cy.get('[data-el="dialog-edit-snapshot"] [data-action="dialog-confirm"]').should('exist').should('be.enabled')
120+
cy.get('[data-el="dialog-edit-snapshot"] [data-action="dialog-cancel"]').should('exist').should('be.enabled')
121+
122+
// clear the snapshot name
123+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-name"] input').clear()
124+
// the confirm button should be disabled
125+
cy.get('[data-el="dialog-edit-snapshot"] [data-action="dialog-confirm"]').should('be.disabled')
126+
127+
// enter a new snapshot name and description
128+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-name"] input').type('Edited Snapshot Name!!!')
129+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-description"] textarea').clear()
130+
cy.get('[data-el="dialog-edit-snapshot"] [data-form="snapshot-description"] textarea').type('Edited Snapshot Description!!!')
131+
// the confirm button should be enabled
132+
cy.get('[data-el="dialog-edit-snapshot"] [data-action="dialog-confirm"]').should('be.enabled').click()
133+
134+
cy.wait('@updateSnapshot').then((interception) => {
135+
expect(interception.request.body.name).to.equal('Edited Snapshot Name!!!')
136+
expect(interception.request.body.description).to.equal('Edited Snapshot Description!!!')
137+
})
138+
139+
// check the snapshot name is updated in the table
140+
cy.get('[data-el="snapshots"] tbody').find('tr').contains('Edited Snapshot Name!!!')
141+
})
142+
100143
it('provides functionality to compare snapshots', () => {
101144
cy.intercept('GET', '/api/*/snapshots/*/full', instanceFullSnapshot).as('fullSnapshot')
102145
// click kebab menu in row 1

0 commit comments

Comments
 (0)