From c0488d139911117c3ffb7bb7c2de79df016d0a3a Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Tue, 10 May 2022 14:30:34 +0200 Subject: [PATCH] MOBILE-4069 test: Add unit tests to CoreColors singleton --- src/core/singletons/colors.ts | 11 ++- src/core/singletons/tests/colors.test.ts | 94 ++++++++++++++++++++++++ 2 files changed, 99 insertions(+), 6 deletions(-) create mode 100644 src/core/singletons/tests/colors.test.ts diff --git a/src/core/singletons/colors.ts b/src/core/singletons/colors.ts index ed70b8bdf..6f734bf14 100644 --- a/src/core/singletons/colors.ts +++ b/src/core/singletons/colors.ts @@ -93,7 +93,7 @@ export class CoreColors { * @return Color in hex format. */ static getColorHex(color: string): string { - const rgba = CoreColors.getColorRGBA(color, true); + const rgba = CoreColors.getColorRGBA(color); if (rgba.length === 0) { return ''; } @@ -109,21 +109,20 @@ export class CoreColors { * Returns RGBA color from any color format. * * @param color Color in any format. - * @param createElement Wether create a new element is needed to calculate value. * @return Red, green, blue and alpha. */ - static getColorRGBA(color: string, createElement = false): number[] { - if (createElement) { + static getColorRGBA(color: string): number[] { + if (!color.match(/rgba?\(.*\)/)) { + // Convert the color to RGB format. const d = document.createElement('span'); d.style.color = color; document.body.appendChild(d); - // Color in RGB. color = getComputedStyle(d).color; document.body.removeChild(d); } - const matches = color.match(/\d+/g) || []; + const matches = color.match(/\d+[^.]|\d*\.\d*/g) || []; return matches.map((a, index) => index < 3 ? parseInt(a, 10) : parseFloat(a)); } diff --git a/src/core/singletons/tests/colors.test.ts b/src/core/singletons/tests/colors.test.ts new file mode 100644 index 000000000..0cefa4966 --- /dev/null +++ b/src/core/singletons/tests/colors.test.ts @@ -0,0 +1,94 @@ +// (C) Copyright 2015 Moodle Pty Ltd. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { CoreColors } from '@singletons/colors'; + +describe('CoreColors singleton', () => { + + it('determines if white contrast is better', () => { + expect(CoreColors.isWhiteContrastingBetter('#000000')).toBe(true); + expect(CoreColors.isWhiteContrastingBetter('#999999')).toBe(true); + expect(CoreColors.isWhiteContrastingBetter('#aaaaaa')).toBe(false); + expect(CoreColors.isWhiteContrastingBetter('#ffffff')).toBe(false); + expect(CoreColors.isWhiteContrastingBetter('#ff0000')).toBe(true); + expect(CoreColors.isWhiteContrastingBetter('#00ff00')).toBe(false); + expect(CoreColors.isWhiteContrastingBetter('#0000ff')).toBe(true); + expect(CoreColors.isWhiteContrastingBetter('#ff00ff')).toBe(true); + expect(CoreColors.isWhiteContrastingBetter('#ffff00')).toBe(false); + }); + + it('makes color darker', () => { + expect(CoreColors.darker('#ffffff', 50)).toEqual('#7f7f7f'); + expect(CoreColors.darker('#ffffff', 20)).toEqual('#cccccc'); + expect(CoreColors.darker('#ffffff', 80)).toEqual('#323232'); + expect(CoreColors.darker('#aabbcc', 40)).toEqual('#66707a'); + }); + + it('makes color lighter', () => { + expect(CoreColors.lighter('#000000', 50)).toEqual('#7f7f7f'); + expect(CoreColors.lighter('#000000', 20)).toEqual('#333333'); + expect(CoreColors.lighter('#000000', 80)).toEqual('#cccccc'); + expect(CoreColors.lighter('#223344', 40)).toEqual('#7a848e'); + }); + + it('gets color hex value', () => { + expect(CoreColors.getColorHex('#123456')).toEqual('#123456'); + expect(CoreColors.getColorHex('rgb(255, 100, 70)')).toEqual('#ff6446'); + expect(CoreColors.getColorHex('rgba(255, 100, 70, 0.5)')).toEqual('#ff6446'); + + // @todo: There are problems when testing color names (e.g. violet) or hsf colors. + // They work fine in real browsers but not in unit tests. + }); + + it('gets color RGBA value', () => { + expect(CoreColors.getColorRGBA('#123456')).toEqual([18, 52, 86]); + expect(CoreColors.getColorRGBA('rgb(255, 100, 70)')).toEqual([255, 100, 70]); + expect(CoreColors.getColorRGBA('rgba(255, 100, 70, 0.5)')).toEqual([255, 100, 70, 0.5]); + + // @todo: There are problems when testing color names (e.g. violet) or hsf colors. + // They work fine in real browsers but not in unit tests. + }); + + it('converts hex to rgb', () => { + expect(CoreColors.hexToRGB('#000000')).toEqual({ + red: 0, + green: 0, + blue: 0, + }); + expect(CoreColors.hexToRGB('#ffffff')).toEqual({ + red: 255, + green: 255, + blue: 255, + }); + expect(CoreColors.hexToRGB('#aabbcc')).toEqual({ + red: 170, + green: 187, + blue: 204, + }); + }); + + it('gets toolbar background color', () => { + document.body.style.setProperty('--core-header-toolbar-background', '#aabbcc'); + expect(CoreColors.getToolbarBackgroundColor()).toEqual('#aabbcc'); + + const header = document.createElement('ion-header'); + const toolbar = document.createElement('ion-toolbar'); + toolbar.style.setProperty('--background', '#123456'); + header.appendChild(toolbar); + document.body.appendChild(header); + + expect(CoreColors.getToolbarBackgroundColor()).toEqual('#123456'); + }); + +});