Skip to content

Commit 32508c1

Browse files
susnuxsusnux
committed
test(theming): adjust cypress tests for Vue3
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
1 parent 754422a commit 32508c1

9 files changed

+803
-768
lines changed

‎cypress/e2e/theming/admin-settings.cy.ts‎

Lines changed: 0 additions & 514 deletions
This file was deleted.

‎cypress/e2e/theming/admin-settings_background.cy.ts‎

Lines changed: 379 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,379 @@
1+
/*!
2+
* SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
3+
* SPDX-License-Identifier: AGPL-3.0-or-later
4+
*/
5+
6+
import { User } from '@nextcloud/e2e-test-server/cypress'
7+
import { NavigationHeader } from '../../pages/NavigationHeader.ts'
8+
import {
9+
defaultBackground,
10+
defaultPrimary,
11+
pickColor,
12+
validateBodyThemingCss,
13+
validateUserThemingDefaultCss,
14+
} from './themingUtils.ts'
15+
16+
const admin = new User('admin', 'admin')
17+
18+
describe('Remove the default background and restore it', { testIsolation: false }, function() {
19+
before(function() {
20+
// Just in case previous test failed
21+
cy.resetAdminTheming()
22+
cy.login(admin)
23+
})
24+
25+
it('See the admin theming section', function() {
26+
cy.visit('/settings/admin/theming')
27+
cy.findByRole('heading', { name: 'Background and color' })
28+
.should('exist')
29+
.scrollIntoView()
30+
})
31+
32+
it('Remove the default background', function() {
33+
cy.intercept('*/apps/theming/ajax/updateStylesheet').as('removeBackground')
34+
cy.intercept('*/apps/theming/theme/default.css?*').as('cssLoaded')
35+
36+
cy.findByRole('checkbox', { name: /remove background image/i })
37+
.should('exist')
38+
.should('not.be.checked')
39+
.check({ force: true })
40+
41+
cy.wait('@removeBackground')
42+
cy.wait('@cssLoaded')
43+
44+
cy.window()
45+
.should(() => validateBodyThemingCss(defaultPrimary, null))
46+
cy.waitUntil(() => cy.window().then((win) => {
47+
const backgroundPlain = getComputedStyle(win.document.body).getPropertyValue('--image-background')
48+
return backgroundPlain !== ''
49+
}))
50+
})
51+
52+
it('Screenshot the login page and validate login page', function() {
53+
cy.logout()
54+
cy.visit('/')
55+
56+
cy.window()
57+
.should(() => validateBodyThemingCss(defaultPrimary, null))
58+
cy.screenshot()
59+
})
60+
61+
it('Undo theming settings and validate login page again', function() {
62+
cy.resetAdminTheming()
63+
cy.visit('/')
64+
65+
cy.window()
66+
.should(() => validateBodyThemingCss())
67+
cy.screenshot()
68+
})
69+
})
70+
71+
describe('Remove the default background with a custom background color', function() {
72+
let selectedColor = ''
73+
74+
before(function() {
75+
// Just in case previous test failed
76+
cy.resetAdminTheming()
77+
cy.login(admin)
78+
})
79+
80+
it('See the admin theming section', function() {
81+
cy.visit('/settings/admin/theming')
82+
cy.findByRole('heading', { name: 'Background and color' })
83+
.should('exist')
84+
.scrollIntoView()
85+
})
86+
87+
it('Change the background color', function() {
88+
cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
89+
cy.intercept('*/apps/theming/theme/default.css?*').as('cssLoaded')
90+
91+
pickColor(cy.findByRole('button', { name: /Background color/ }))
92+
.then((color) => {
93+
selectedColor = color
94+
})
95+
96+
cy.wait('@setColor')
97+
cy.wait('@cssLoaded')
98+
99+
cy.window()
100+
.should(() => validateBodyThemingCss(
101+
defaultPrimary,
102+
defaultBackground,
103+
selectedColor,
104+
))
105+
})
106+
107+
it('Remove the default background', function() {
108+
cy.intercept('*/apps/theming/ajax/updateStylesheet').as('removeBackground')
109+
110+
cy.findByRole('checkbox', { name: /remove background image/i })
111+
.should('exist')
112+
.should('not.be.checked')
113+
.check({ force: true })
114+
cy.wait('@removeBackground')
115+
})
116+
117+
it('Screenshot the login page and validate login page', function() {
118+
cy.logout()
119+
cy.visit('/')
120+
121+
cy.window()
122+
.should(() => validateBodyThemingCss(defaultPrimary, null, selectedColor))
123+
cy.screenshot()
124+
})
125+
126+
it('Undo theming settings and validate login page again', function() {
127+
cy.resetAdminTheming()
128+
cy.visit('/')
129+
130+
cy.window()
131+
.should(() => validateBodyThemingCss())
132+
cy.screenshot()
133+
})
134+
})
135+
136+
describe('Remove the default background with a bright color', function() {
137+
const navigationHeader = new NavigationHeader()
138+
let selectedColor = ''
139+
140+
before(function() {
141+
// Just in case previous test failed
142+
cy.resetAdminTheming()
143+
cy.resetUserTheming(admin)
144+
cy.login(admin)
145+
})
146+
147+
it('See the admin theming section', function() {
148+
cy.visit('/settings/admin/theming')
149+
cy.findByRole('heading', { name: 'Background and color' })
150+
.should('exist')
151+
.scrollIntoView()
152+
})
153+
154+
it('Remove the default background', function() {
155+
cy.intercept('*/apps/theming/ajax/updateStylesheet').as('removeBackground')
156+
cy.findByRole('checkbox', { name: /remove background image/i })
157+
.check({ force: true })
158+
cy.wait('@removeBackground')
159+
})
160+
161+
it('Change the background color', function() {
162+
cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
163+
cy.intercept('*/apps/theming/theme/default.css?*').as('cssLoaded')
164+
165+
pickColor(cy.findByRole('button', { name: /Background color/ }), 4)
166+
.then((color) => {
167+
selectedColor = color
168+
})
169+
170+
cy.wait('@setColor')
171+
cy.wait('@cssLoaded')
172+
173+
cy.window()
174+
.should(() => validateBodyThemingCss(defaultPrimary, null, selectedColor))
175+
})
176+
177+
it('See the header being inverted', function() {
178+
cy.waitUntil(() => navigationHeader
179+
.getNavigationEntries()
180+
.find('img')
181+
.then((el) => {
182+
let ret = true
183+
el.each(function() {
184+
ret = ret && window.getComputedStyle(this).filter === 'invert(1)'
185+
})
186+
return ret
187+
}))
188+
})
189+
})
190+
191+
describe('Disable user theming and enable it back', function() {
192+
before(function() {
193+
// Just in case previous test failed
194+
cy.resetAdminTheming()
195+
cy.login(admin)
196+
})
197+
198+
it('See the admin theming section', function() {
199+
cy.visit('/settings/admin/theming')
200+
cy.findByRole('heading', { name: 'Background and color' })
201+
.should('exist')
202+
.scrollIntoView()
203+
})
204+
205+
it('Disable user background theming', function() {
206+
cy.intercept('*/apps/theming/ajax/updateStylesheet').as('disableUserTheming')
207+
208+
cy.findByRole('checkbox', { name: /Disable user theming/ })
209+
.should('exist')
210+
.and('not.be.checked')
211+
.check({ force: true })
212+
213+
cy.wait('@disableUserTheming')
214+
})
215+
216+
it('Login as user', function() {
217+
cy.logout()
218+
cy.createRandomUser().then((user) => {
219+
cy.login(user)
220+
})
221+
})
222+
223+
it('User cannot not change background settings', function() {
224+
cy.visit('/settings/user/theming')
225+
cy.contains('Customization has been disabled by your administrator').should('exist')
226+
})
227+
})
228+
229+
describe('The user default background settings reflect the admin theming settings', function() {
230+
let selectedColor = ''
231+
232+
before(function() {
233+
// Just in case previous test failed
234+
cy.resetAdminTheming()
235+
cy.login(admin)
236+
})
237+
238+
after(function() {
239+
cy.resetAdminTheming()
240+
})
241+
242+
it('See the admin theming section', function() {
243+
cy.visit('/settings/admin/theming')
244+
cy.findByRole('heading', { name: 'Background and color' })
245+
.should('exist')
246+
.scrollIntoView()
247+
})
248+
249+
it('Change the default background', function() {
250+
cy.intercept('*/apps/theming/ajax/uploadImage').as('setBackground')
251+
cy.intercept('*/apps/theming/theme/default.css?*').as('cssLoaded')
252+
253+
cy.fixture('image.jpg', null).as('background')
254+
cy.get('input[type="file"][name="background"]')
255+
.should('exist')
256+
.selectFile('@background', { force: true })
257+
258+
cy.wait('@setBackground')
259+
cy.wait('@cssLoaded')
260+
261+
cy.window()
262+
.should(() => validateBodyThemingCss(
263+
defaultPrimary,
264+
'/apps/theming/image/background?v=',
265+
null,
266+
))
267+
})
268+
269+
it('Change the background color', function() {
270+
cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
271+
cy.intercept('*/apps/theming/theme/default.css?*').as('cssLoaded')
272+
273+
pickColor(cy.findByRole('button', { name: /Background color/ }))
274+
.then((color) => {
275+
selectedColor = color
276+
})
277+
278+
cy.wait('@setColor')
279+
cy.wait('@cssLoaded')
280+
281+
cy.window()
282+
.should(() => validateBodyThemingCss(
283+
defaultPrimary,
284+
'/apps/theming/image/background?v=',
285+
selectedColor,
286+
))
287+
})
288+
289+
it('Login page should match admin theming settings', function() {
290+
cy.logout()
291+
cy.visit('/')
292+
293+
cy.window()
294+
.should(() => validateBodyThemingCss(
295+
defaultPrimary,
296+
'/apps/theming/image/background?v=',
297+
selectedColor,
298+
))
299+
})
300+
301+
it('Login as user', function() {
302+
cy.createRandomUser().then((user) => {
303+
cy.login(user)
304+
})
305+
})
306+
307+
it('See the user background settings', function() {
308+
cy.visit('/settings/user/theming')
309+
cy.findByRole('heading', { name: 'Background and color' })
310+
.scrollIntoView()
311+
})
312+
313+
it('Default user background settings should match admin theming settings', function() {
314+
cy.findByRole('button', { name: 'Default background' })
315+
.should('exist')
316+
.and('have.attr', 'aria-pressed', 'true')
317+
318+
cy.window()
319+
.should(() => validateUserThemingDefaultCss(
320+
selectedColor,
321+
'/apps/theming/image/background?v=',
322+
))
323+
})
324+
})
325+
326+
describe('The user default background settings reflect the admin theming settings with background removed', function() {
327+
before(function() {
328+
// Just in case previous test failed
329+
cy.resetAdminTheming()
330+
cy.login(admin)
331+
})
332+
333+
after(function() {
334+
cy.resetAdminTheming()
335+
})
336+
337+
it('See the admin theming section', function() {
338+
cy.visit('/settings/admin/theming')
339+
cy.findByRole('heading', { name: 'Background and color' })
340+
.should('exist')
341+
.scrollIntoView()
342+
})
343+
344+
it('Remove the default background', function() {
345+
cy.intercept('*/apps/theming/ajax/updateStylesheet').as('removeBackground')
346+
cy.findByRole('checkbox', { name: /remove background image/i })
347+
.check({ force: true })
348+
cy.wait('@removeBackground')
349+
})
350+
351+
it('Login page should match admin theming settings', function() {
352+
cy.logout()
353+
cy.visit('/')
354+
355+
cy.window()
356+
.should(() => validateBodyThemingCss(defaultPrimary, null))
357+
})
358+
359+
it('Login as user', function() {
360+
cy.createRandomUser().then((user) => {
361+
cy.login(user)
362+
})
363+
})
364+
365+
it('See the user background settings', function() {
366+
cy.visit('/settings/user/theming')
367+
cy.findByRole('heading', { name: 'Background and color' })
368+
.scrollIntoView()
369+
})
370+
371+
it('Default user background settings should match admin theming settings', function() {
372+
cy.findByRole('button', { name: 'Default background' })
373+
.should('exist')
374+
.and('have.attr', 'aria-pressed', 'true')
375+
376+
cy.window()
377+
.should(() => validateUserThemingDefaultCss(defaultPrimary, null))
378+
})
379+
})

0 commit comments

Comments
 (0)