Skip to content

Commit 4e05907

Browse files
susnuxsusnux
committed
test(theming): adjust cypress tests for Vue3
Signed-off-by: Ferdinand Thiessen <[email protected]>
1 parent 12899d3 commit 4e05907

9 files changed

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

0 commit comments

Comments
 (0)