import CustomMatcherFactories = jasmine . CustomMatcherFactories ; import CustomEqualityTester = jasmine . CustomEqualityTester ; import CustomMatcherResult = jasmine . CustomMatcherResult ; import MatchersUtil = jasmine . MatchersUtil ; import { ColorHelper , ThemeColorDefinition } from '@kirbydesign/core' ; import { TestHelper } from './test-helper' ; export const ElementCssCustomMatchers = { toHaveComputedStyle : ( util , customEqualityTesters ) => cssPropertyMatcher ( util , customEqualityTesters ) , } ; function cssPropertyMatcher ( util , customEqualityTesters ) { return { compare : ( element , expectedStyles ) => { let allPassed = Object . keys ( expectedStyles ) . length !== 0 ; let messages = [ ] ; Object . keys ( expectedStyles ) . forEach ( ( cssProperty ) => { const expectedValue = expectedStyles [ cssProperty ] ; const { expectedStringValue , expectedValueAlias } = getExpectedStringValueAndAlias ( cssProperty , expectedValue ) ; const { pass , message } = compareCssProperty ( util , customEqualityTesters , element , cssProperty , expectedStringValue , expectedValueAlias ) ; allPassed = allPassed && pass ; if ( message ) { messages . push ( message ) ; } } ) ; const result = { pass : allPassed , message : messages . join ( '\n' ) , } ; return result ; } , } ; } function getExpectedStringValueAndAlias ( cssProperty , expectedValue ) { let expectedStringValue ; let expectedValueAlias ; if ( typeof expectedValue === 'string' ) { expectedStringValue = expectedValue ; if ( cssProperty . indexOf ( 'color' ) > - 1 || expectedValue . startsWith ( 'rgb' ) || expectedValue . startsWith ( '#' ) ) { if ( ! cssProperty . startsWith ( '--' ) ) { expectedStringValue = ColorHelper . colorStringToRgbString ( expectedValue ) ; } } } else { expectedStringValue = cssProperty . startsWith ( '--' ) ? expectedValue . hex : expectedValue . value ; expectedValueAlias = expectedValue . fullname ; } return { expectedStringValue , expectedValueAlias , } ; } function compareCssProperty ( util , customEqualityTesters , element , cssProperty , expectedValue , expectedValueAlias ? ) { const actualValue = TestHelper . getCssProperty ( element , cssProperty ) ; if ( expectedValue . startsWith ( '<' ) || expectedValue . startsWith ( '>' ) ) { customEqualityTesters . push ( compareSize ) ; } const pass = util . equals ( actualValue , expectedValue , customEqualityTesters ) ; const message = pass ? null : getErrorMessage ( element , cssProperty , actualValue , expectedValue , expectedValueAlias ) ; const result = { pass : pass , message : message , } ; return result ; } function compareSize ( first , second ) { const matches = second . match ( /(?<operator>\<\=|\<|\>\=|\>)(?<value>\d*)px/ ) ; if ( matches && matches . groups ) { const actualValueNumber = parseInt ( first ) ; const operator = matches . groups [ 'operator' ] ; const expectedValueNumber = parseInt ( matches . groups [ 'value' ] ) ; switch ( operator ) { case '<' : return actualValueNumber < expectedValueNumber ; case '<=' : return actualValueNumber <= expectedValueNumber ; case '>' : return actualValueNumber > expectedValueNumber ; case '>=' : return actualValueNumber >= expectedValueNumber ; default : break ; } } } function getErrorMessage ( element , cssProperty , actualValue , expectedValue , expectedValueAlias ? ) { const expectedColorNameSuffix = expectedValueAlias ? ` (${ expectedValueAlias })` : '' ; return `Expected [${ cssProperty }] of ${ element . tagName } '${ actualValue }' to be '${ expectedValue }'${ expectedColorNameSuffix }` ; }