Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 041338f

Browse files
justincliftjustinclift
committed
cypress: Add Cypress tests for standard database visualisations
1 parent 7417e87 commit 041338f

File tree

2 files changed

+342
-0
lines changed

2 files changed

+342
-0
lines changed

‎cypress/e2e/1-webui/bugs/002-visualisation-base64url-padding-bug.cy.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
describe('002-visualisation-base64url-padding-bug', () => {
2+
before(() => {
3+
// Seed data
4+
cy.request('/x/test/seed')
5+
})
6+
7+
// Run a SQL visualisation which used to trigger a base64url encoding padding bug
8+
it('run a visualisation query whose base64url encoding does not have a padding character', () => {
9+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
10+
cy.get('[data-cy="sqltab"]').click()
11+
cy.get('[data-cy="usersqltext"]').type('{selectall}{backspace}').type(
12+
'SELECT Constituency_Name, Constituency_Number\n' +
13+
'FROM Constituency_Turnout_Information\n' +
14+
'WHERE Constituency_Number > 0\n' +
15+
'ORDER BY Constituency_Name ASC\n' +
16+
'LIMIT 10')
17+
cy.get('[data-cy="runsqlbtn"]').click()
18+
cy.wait(150) // Needs a bit of a delay here, otherwise any error status message may be missed
19+
cy.get('[data-cy="statusmsg"]').should('not.exist')
20+
})
21+
})

‎cypress/e2e/1-webui/visualisation.cy.js

Lines changed: 321 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,321 @@
1+
import path from "path";
2+
3+
// Sometimes we need a delay between making a change, and testing it, otherwise the AngularJS changes are missed
4+
let waitTime = 150;
5+
6+
// TODO: Test that when provided a commit id, we visualise the data for that commit rather than the latest commit
7+
8+
// TODO: Check the star and watch buttons + counts work properly on the standard / live db visualisations page
9+
10+
// TODO: Test the branch drop down works properly for data selection on the visualisation page
11+
12+
describe('visualisation', () => {
13+
before(() => {
14+
// Seed data
15+
cy.request('/x/test/seed')
16+
17+
// Create new branch
18+
cy.visit('default/Assembly Election 2017 with view.sqlite')
19+
cy.get('[data-cy="commitslnk"]').click()
20+
cy.get('[data-cy="createbranchbtn"]').click()
21+
cy.get('[data-cy="nameinput"]').type('{selectall}{backspace}').type('firstBranch')
22+
cy.get('[data-cy="createbtn"]').click()
23+
})
24+
25+
// Save a visualisation
26+
it('save a visualisation using non-default name', () => {
27+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
28+
cy.get('[data-cy="sqltab"]').click()
29+
cy.get('[data-cy="usersqltext"]').type(
30+
'SELECT Constituency_Name, Constituency_Number\n' +
31+
'FROM Constituency_Turnout_Information\n' +
32+
'ORDER BY Constituency_Name DESC\n' +
33+
'LIMIT 5')
34+
cy.get('[data-cy="nameinput"]').type('{selectall}{backspace}').type('test1')
35+
cy.get('[data-cy="savebtn"]').click()
36+
cy.get('[data-cy="statusmsg"]').should('contain.text', 'Visualisation \'test1\' saved')
37+
38+
// Verify the visualisation - it should be automatically selected in the drop down list as it's the only one
39+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
40+
cy.get('[data-cy="selectedvis"]').should('contain.text', 'test1')
41+
cy.get('[data-cy="visdropdown"]').click()
42+
cy.get('[data-cy="vis-test1"]').should('contain.text', 'test1')
43+
})
44+
45+
// Check if 'default' visualisation is still chosen by default even when created after non-default ones
46+
it('save a visualisation using default name', () => {
47+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
48+
cy.get('[data-cy="sqltab"]').click()
49+
cy.get('[data-cy="usersqltext"]').type('{selectall}{backspace}').type(
50+
'SELECT Constituency_Name, Constituency_Number\n' +
51+
'FROM Constituency_Turnout_Information\n' +
52+
'ORDER BY Constituency_Name ASC\n' +
53+
'LIMIT 5')
54+
cy.get('[data-cy="nameinput"]').type('{selectall}{backspace}').type('default')
55+
cy.get('[data-cy="savebtn"]').click()
56+
cy.get('[data-cy="statusmsg"]').should('contain.text', 'Visualisation \'default\' saved')
57+
58+
// Verify the visualisation - it should be automatically selected in the drop down list as it's the default
59+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
60+
cy.get('[data-cy="selectedvis"]').should('contain.text', 'default')
61+
cy.get('[data-cy="visdropdown"]').click()
62+
cy.get('[data-cy="vis-default"]').should('contain.text', 'default')
63+
cy.get('[data-cy="usersqltext"]').should('contain.text',
64+
'SELECT Constituency_Name, Constituency_Number\n' +
65+
'FROM Constituency_Turnout_Information\n' +
66+
'ORDER BY Constituency_Name ASC\n' +
67+
'LIMIT 5')
68+
})
69+
70+
// Save a visualisation
71+
it('save a visualisation with name alphabetically lower than \'default\'', () => {
72+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
73+
cy.get('[data-cy="sqltab"]').click()
74+
cy.get('[data-cy="usersqltext"]').type('{selectall}{backspace}').type(
75+
'SELECT Constituency_Name, Constituency_Number\n' +
76+
'FROM Constituency_Turnout_Information\n' +
77+
'ORDER BY Constituency_Name DESC\n' +
78+
'LIMIT 5')
79+
cy.get('[data-cy="nameinput"]').type('{selectall}{backspace}').type('abc')
80+
cy.get('[data-cy="savebtn"]').click()
81+
cy.get('[data-cy="statusmsg"]').should('contain.text', 'Visualisation \'abc\' saved')
82+
83+
// Check that the visualisation is present, but not automatically selected when the page loads
84+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
85+
cy.get('[data-cy="selectedvis"]').should('not.contain.text', 'abc')
86+
cy.get('[data-cy="visdropdown"]').click()
87+
cy.get('[data-cy="vis-abc"]').should('contain.text', 'abc')
88+
})
89+
90+
// Save over an existing visualisation
91+
it('save over an existing visualisation', () => {
92+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
93+
cy.get('[data-cy="sqltab"]').click()
94+
cy.get('[data-cy="usersqltext"]').type('{selectall}{backspace}').type(
95+
'SELECT Constituency_Name, Constituency_Number, Turnout_pct\n' +
96+
'FROM Constituency_Turnout_Information\n' +
97+
'ORDER BY Constituency_Name DESC\n' +
98+
'LIMIT 10')
99+
cy.get('[data-cy="nameinput"]').type('{selectall}{backspace}').type('test1')
100+
cy.get('[data-cy="savebtn"]').click()
101+
cy.get('[data-cy="statusmsg"]').should('contain.text', 'Visualisation \'test1\' saved')
102+
103+
// Verify the new visualisation text
104+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
105+
cy.get('[data-cy="visdropdown"]').click()
106+
cy.get('[data-cy="vis-test1"]').click()
107+
cy.get('[data-cy="usersqltext"]').should('contain',
108+
'SELECT Constituency_Name, Constituency_Number, Turnout_pct\n' +
109+
'FROM Constituency_Turnout_Information\n' +
110+
'ORDER BY Constituency_Name DESC\n' +
111+
'LIMIT 10')
112+
})
113+
114+
// * Chart settings tab *
115+
116+
// Chart type drop down
117+
it('chart type drop down', () => {
118+
// Start with the existing "test1" test
119+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
120+
cy.get('[data-cy="visdropdown"]').click()
121+
cy.get('[data-cy="vis-test1"]').click()
122+
123+
// Switch to the chart settings tab
124+
cy.get('[data-cy="charttab"]').click()
125+
126+
// Change the chart type
127+
cy.get('[data-cy="chartdropdown"]').click()
128+
cy.get('[data-cy="chartpie"]').click()
129+
130+
// Verify the change
131+
cy.wait(waitTime)
132+
cy.get('[data-cy="charttype"]').should('contain', 'Pie chart')
133+
cy.get('[data-cy="showxaxis"]').should('not.exist')
134+
135+
// Switch to a different chart type
136+
cy.get('[data-cy="chartdropdown"]').click()
137+
cy.get('[data-cy="charthbc"]').click()
138+
139+
// Verify the change
140+
cy.wait(waitTime)
141+
cy.get('[data-cy="charttype"]').should('contain', 'Horizontal bar chart')
142+
cy.get('[data-cy="showxaxis"]').should('exist')
143+
})
144+
145+
// X axis column drop down
146+
it('X axis column drop down', () => {
147+
// Start with the existing "test1" test
148+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
149+
cy.get('[data-cy="visdropdown"]').click()
150+
cy.get('[data-cy="vis-test1"]').click()
151+
152+
// Switch to the chart settings tab
153+
cy.get('[data-cy="charttab"]').click()
154+
155+
// Change the X axis column value
156+
cy.get('[data-cy="xaxisdropdown"]').click()
157+
cy.get('[data-cy="xcol-Constituency_Number"]').click()
158+
159+
// Verify the change
160+
cy.wait(waitTime)
161+
cy.get('[data-cy="xaxiscol"]').should('contain', 'Constituency_Number')
162+
cy.get('[data-cy="yaxiscol"]').should('contain', 'Constituency_Name')
163+
164+
// Switch to a different X axis column value
165+
cy.get('[data-cy="xaxisdropdown"]').click()
166+
cy.get('[data-cy="xcol-Constituency_Name"]').click()
167+
168+
// Verify the change
169+
cy.wait(waitTime)
170+
cy.get('[data-cy="xaxiscol"]').should('contain', 'Constituency_Name')
171+
cy.get('[data-cy="yaxiscol"]').should('contain', 'Constituency_Number')
172+
})
173+
174+
// Y axis column drop down
175+
it('Y axis column drop down', () => {
176+
// Start with the existing "test1" test
177+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
178+
cy.get('[data-cy="visdropdown"]').click()
179+
cy.get('[data-cy="vis-test1"]').click()
180+
181+
// Switch to the chart settings tab
182+
cy.get('[data-cy="charttab"]').click()
183+
184+
// Change the Y axis column value
185+
cy.get('[data-cy="yaxisdropdown"]').click()
186+
cy.get('[data-cy="ycol-Turnout_pct"]').click()
187+
188+
// Verify the change
189+
cy.wait(waitTime)
190+
cy.get('[data-cy="yaxiscol"]').should('contain', 'Turnout_pct')
191+
//cy.get('[data-cy="xaxiscol"]').should('contain', 'Constituency_Name')
192+
193+
// Switch to a different Y axis column value
194+
cy.get('[data-cy="yaxisdropdown"]').click()
195+
cy.get('[data-cy="ycol-Constituency_Number"]').click()
196+
197+
// Verify the change
198+
cy.wait(waitTime)
199+
cy.get('[data-cy="yaxiscol"]').should('contain', 'Constituency_Number')
200+
})
201+
202+
// "Show result table" button works
203+
it('Shows results table button works', () => {
204+
// Start with the existing "test1" test
205+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
206+
cy.get('[data-cy="visdropdown"]').click()
207+
cy.get('[data-cy="vis-test1"]').click()
208+
209+
// Verify the button starts closed
210+
cy.get('[data-cy="resultsbtn"]').should('contain', 'Show result table')
211+
212+
// Open the results table
213+
cy.get('[data-cy="resultsbtn"]').click()
214+
cy.get('[data-cy="resultsbtn"]').should('contain', 'Hide result table')
215+
})
216+
217+
// "Download as CSV" button
218+
const downloadsFolder = Cypress.config('downloadsFolder')
219+
it('"Download as CSV" button', () => {
220+
// Start with the existing "test1" test
221+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
222+
cy.get('[data-cy="visdropdown"]').click()
223+
cy.get('[data-cy="vis-test1"]').click()
224+
225+
// Click the download button
226+
cy.get('[data-cy="downcsvbtn"]').click()
227+
228+
// Simple sanity check of the downloaded file
229+
// TODO - Implement a better check. Maybe keep the "correct" csv in the repo as test data too, and compare against it?
230+
const csv = path.join(downloadsFolder, 'results.csv')
231+
cy.readFile(csv, 'binary', { timeout: 5000 }).should('have.length', 213)
232+
cy.task('rmFile', { path: csv })
233+
})
234+
235+
// "Format SQL" button
236+
it('"Format SQL" button', () => {
237+
// Start with the existing "test1" test
238+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
239+
cy.get('[data-cy="visdropdown"]').click()
240+
cy.get('[data-cy="vis-test1"]').click()
241+
242+
// Click the format button
243+
cy.get('[data-cy="formatsqlbtn"]').click()
244+
245+
// Verify the changed text
246+
cy.get('[data-cy="usersqltext"]').should('contain',
247+
'SELECT Constituency_Name,\n' +
248+
' Constituency_Number,\n' +
249+
' Turnout_pct\n' +
250+
'FROM Constituency_Turnout_Information\n' +
251+
'ORDER BY Constituency_Name DESC\n' +
252+
'LIMIT 10')
253+
})
254+
255+
// "Run SQL" button
256+
it('"Run SQL" button', () => {
257+
// Start with the existing "test1" test
258+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
259+
cy.get('[data-cy="visdropdown"]').click()
260+
cy.get('[data-cy="vis-test1"]').click()
261+
262+
// Click the Run SQL button
263+
cy.get('[data-cy="runsqlbtn"]').click()
264+
265+
// Verify the result
266+
// TODO: Probably need to add cypress to the rows and columns of the results table, then
267+
// check against known good return values
268+
})
269+
270+
// "Delete" button
271+
it('Delete button', () => {
272+
// Start with the existing "test1" test
273+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
274+
cy.get('[data-cy="visdropdown"]').click()
275+
cy.get('[data-cy="vis-abc"]').click()
276+
277+
// Click the Delete button
278+
cy.get('[data-cy="delvisbtn"]').click()
279+
280+
// Verify the result
281+
cy.wait(waitTime)
282+
cy.get('[data-cy="visdropdown"]').click()
283+
cy.get('[data-cy="vis-abc"]').should('not.exist')
284+
})
285+
286+
// For a private database, verify only the owner and shared users can see it
287+
it('Verify private databases are private', () => {
288+
// Switch to a different user
289+
cy.request('/x/test/switchfirst')
290+
291+
// Try accessing a private database's visualisation page
292+
cy.visit({url: '/vis/default/Assembly Election 2017 with view.sqlite', failOnStatusCode: false})
293+
cy.get('[data-cy="errormsg"').should('contain', 'doesn\'t seem to exist')
294+
295+
// Switch back to the default user
296+
cy.request('/x/test/switchdefault')
297+
298+
// TODO: Add some shared users, and test with them
299+
})
300+
301+
// For a public database, verify all users can see its visualisations
302+
it('Verify public databases are accessible by others', () => {
303+
// Switch the database to public
304+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
305+
cy.get('[data-cy="settingslink"]').click()
306+
cy.get('[data-cy="public"]').click()
307+
cy.get('[data-cy="savebtn"]').click()
308+
309+
// Switch to a different user
310+
cy.request('/x/test/switchfirst')
311+
312+
// Try accessing a private database's visualisation page
313+
cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
314+
//cy.get('[data-cy="errormsg"').should('contain', 'doesn\'t seem to exist')
315+
316+
// TODO: Test if the visualisations created by the default user can be loaded
317+
318+
// Switch back to the default user
319+
cy.request('/x/test/switchdefault')
320+
})
321+
})

0 commit comments

Comments
 (0)