Skip to content

fix(theming): change color button contrast #42552

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
susnux merged 5 commits into from
Jan 25, 2024
Merged

fix(theming): change color button contrast #42552

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1112b9e
fix(theming): change color button contrast on user settings
ShGKme Jan 2, 2024
544357d
fix(theming): change color button contrast on admin settings
ShGKme Jan 16, 2024
6df488d
test(theming): update e2e tests after separating color button and pre…
ShGKme Jan 16, 2024
6215814
chore(assets): Recompile assets
ShGKme Jan 24, 2024
5d61b80
fix(cypress): Wait for color change in `pickRandomColor`
susnux Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
test(theming): update e2e tests after separating color button and pre… 
…view

Signed-off-by: Grigorii K. Shartsev <[email protected]>
  • Loading branch information
@ShGKme
ShGKme committed Jan 24, 2024
commit 6df488df212757e246032f4eef972cfe47603c44
11 changes: 4 additions & 7 deletions cypress/e2e/theming/admin-settings.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ describe('Admin theming settings visibility check', function() {
})

it('See the default settings', function() {
cy.get('[data-admin-theming-setting-primary-color-picker]').should('contain.text', defaultPrimary)
cy.get('[data-admin-theming-setting-primary-color-picker]').should('exist')
cy.get('[data-admin-theming-setting-primary-color-reset]').should('not.exist')
cy.get('[data-admin-theming-setting-file-reset]').should('not.exist')
cy.get('[data-admin-theming-setting-file-remove]').should('be.visible')
Expand All @@ -66,8 +66,7 @@ describe('Change the primary color and reset it', function() {
it('Change the primary color', function() {
cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')

pickRandomColor('[data-admin-theming-setting-primary-color-picker]')
.then(color => { selectedColor = color })
pickRandomColor().then(color => { selectedColor = color })

cy.wait('@setColor')
cy.waitUntil(() => validateBodyThemingCss(selectedColor, defaultBackground))
Expand Down Expand Up @@ -151,8 +150,7 @@ describe('Remove the default background with a custom primary color', function()
it('Change the primary color', function() {
cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')

pickRandomColor('[data-admin-theming-setting-primary-color-picker]')
.then((color) => { selectedColor = color })
pickRandomColor().then(color => { selectedColor = color })

cy.wait('@setColor')
cy.waitUntil(() => validateBodyThemingCss(selectedColor, defaultBackground))
Expand Down Expand Up @@ -372,8 +370,7 @@ describe('The user default background settings reflect the admin theming setting
it('Change the primary color', function() {
cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')

pickRandomColor('[data-admin-theming-setting-primary-color-picker]')
.then(color => { selectedColor = color })
pickRandomColor().then(color => { selectedColor = color })

cy.wait('@setColor')
cy.waitUntil(() => cy.window().then(($window) => {
Expand Down
14 changes: 8 additions & 6 deletions cypress/e2e/theming/themingUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,14 @@ export const pickRandomColor = function(): Cypress.Chainable<string> {
// Pick one of the first 8 options
const randColour = Math.floor(Math.random() * 8)

const colorPreviewSelector = '[data-user-theming-background-color],[data-admin-theming-setting-primary-color]'

// Open picker
cy.get('button').contains('Change color').click()
cy.contains('button', 'Change color').click()

// Click on random color
cy.get('.color-picker__simple-color-circle').eq(randColour).click()

// Return selected colour
return cy.get('.color-picker__simple-color-circle').eq(randColour).then(($el) => {
$el.trigger('click')
return $el.css('background-color')
})
// Get the selected color from the color preview block
return cy.get(colorPreviewSelector).then(($el) => $el.css('background-color'))
}
4 changes: 2 additions & 2 deletions cypress/e2e/theming/user-background.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ describe('User select a bright custom color and remove background', function() {
cy.intercept('*/apps/theming/background/color').as('setColor')

// Pick one of the bright color preset
cy.get('button').contains('Change color').click()
cy.contains('button', 'Change color').click()
cy.get('.color-picker__simple-color-circle:eq(4)').click()

// Validate custom colour change
Expand Down Expand Up @@ -286,7 +286,7 @@ describe('User changes settings and reload the page', function() {
it('Select a custom color', function() {
cy.intercept('*/apps/theming/background/color').as('setColor')

cy.get('button').contains('Change color').click()
cy.contains('button', 'Change color').click()
cy.get('.color-picker__simple-color-circle:eq(5)').click()

// Validate clear background
Expand Down