@ -1,17 +1,12 @@
/* eslint-disable import/no-extraneous-dependencies */
import chai , { expect } from 'chai' ;
import chaiDom from 'chai-dom' ;
import { isEqual } from 'lodash' ;
import Sinon from 'sinon' ;
import { AvatarSize } from '../../components/avatar/Avatar' ;
import {
AvatarPlaceHolder ,
AvatarPlaceHolderUtils ,
} from '../../components/avatar/AvatarPlaceHolder/AvatarPlaceHolder' ;
import { AvatarPlaceHolder } from '../../components/avatar/AvatarPlaceHolder/AvatarPlaceHolder' ;
import { MemberAvatarPlaceHolder } from '../../components/icon/MemberAvatarPlaceHolder' ;
import { allowOnlyOneAtATime } from '../../session/utils/Promise ';
import { COLORS } from '../../themes/constants/colors' ;
import { TestUtils } from '../test-utils' ;
import { stubCrypto } from '../test-utils/utils' ;
import { cleanup , renderComponent , waitFor } from './renderComponent' ;
chai . use ( chaiDom ) ;
@ -20,21 +15,8 @@ describe('AvatarPlaceHolder', () => {
const pubkey = TestUtils . generateFakePubKeyStr ( ) ;
const displayName = 'Hello World' ;
beforeEach ( async ( ) = > {
beforeEach ( ( ) = > {
TestUtils . stubWindowLog ( ) ;
// NOTE this is the best way I have found to stub the crypto module for now
const crypto = await stubCrypto ( ) ;
// code must match the original exactly
Sinon . stub ( AvatarPlaceHolderUtils , 'sha512FromPubkeyOneAtAtime' ) . returns (
allowOnlyOneAtATime ( ` sha512FromPubkey- ${ 'pubkey' } ` , async ( ) = > {
const buf = await crypto . subtle . digest ( 'SHA-512' , new TextEncoder ( ) . encode ( pubkey ) ) ;
return Array . prototype . map
. call ( new Uint8Array ( buf ) , ( x : any ) = > ` 00 ${ x . toString ( 16 ) } ` . slice ( - 2 ) )
. join ( '' ) ;
} )
) ;
} ) ;
afterEach ( ( ) = > {
@ -53,7 +35,7 @@ describe('AvatarPlaceHolder', () => {
/ >
) ;
// we need to wait for the component to render after calculating the hash
// calculating the hash and initials needs to be done first
await waitFor ( ( ) = > {
result . getByText ( 'HW' ) ;
} ) ;
@ -63,14 +45,14 @@ describe('AvatarPlaceHolder', () => {
expect ( el . outerHTML , 'should not be undefined' ) . to . not . equal ( undefined ) ;
expect ( el . outerHTML , 'should not be an empty string' ) . to . not . equal ( '' ) ;
expect ( el . tagName , 'should be an svg' ) . to . equal ( 'svg' ) ;
result . unmount ( ) ;
} ) ;
it ( 'should render the MemberAvatarPlaceholder if we are loading or there is no hash' , async ( ) = > {
const result = renderComponent (
< AvatarPlaceHolder
diameter = { AvatarSize . XL }
name = { displayName }
pubkey = { '' }
pubkey = { '' } // makes the hash will be undefined
dataTestId = "avatar-placeholder"
/ >
) ;
@ -82,10 +64,65 @@ describe('AvatarPlaceHolder', () => {
const el2 = result2 . getByTestId ( 'member-avatar-placeholder' ) ;
// The data test ids are different so we don't use the outerHTML for comparison
expect ( isEqual ( el . innerHTML , el2 . innerHTML ) ) . to . equal ( true ) ;
expect ( el . innerHTML ) . to . equal ( el2 . innerHTML ) ;
result . unmount ( ) ;
} ) ;
it ( 'should render the background color using COLORS.PRIMARY with the correct order' , async ( ) = > {
const testPubkeys = [
'0541214ef26572066f0535140b1d6d021218299321c6001e2cdcaaa8cd5c9382fc' , // green
'0541214ef26572066f0535140b1d6d021218299321c6001e2cdcaaa8cd5c9382fa' , // blue
'0541214ef26572066f0535140b1d6d021218299321c6001e2cdcaaa8cd5c9382fd' , // yellow
'0541214ef26572066f0535140b1d6d021218299321c6001e2cdcaaa8cd5c9382ff' , // pink
'0541214ef26572066f0535140b1d6d021218299321c6001e2cdcaaa8cd5c9382ed' , // purple
'0541214ef26572066f0535140b1d6d021218299321c6001e2cdcaaa8cd5c9382f9' , // orange
'0541214ef26572066f0535140b1d6d021218299321c6001e2cdcaaa8cd5c9382eb' , // red
] ;
// NOTE we can trust the order of Object.keys and Object.values to be correct since our typescript build target is 'esnext'
const primaryColorKeys = Object . keys ( COLORS . PRIMARY ) ;
const primaryColorValues = Object . values ( COLORS . PRIMARY ) ;
async function testBackgroundColor ( testPubkey : string , expectedColorValue : string ) {
const result = renderComponent (
< AvatarPlaceHolder
diameter = { AvatarSize . XL }
name = { displayName }
pubkey = { testPubkey }
dataTestId = "avatar-placeholder"
/ >
) ;
// calculating the hash and initials needs to be done first
await waitFor ( ( ) = > {
result . getByText ( 'HW' ) ;
} ) ;
const el = result . getByTestId ( 'avatar-placeholder' ) ;
const circle = el . querySelector ( 'circle' ) ;
const circleColor = circle ? . getAttribute ( 'fill' ) ;
expect ( circleColor , 'background color should not be null' ) . to . not . equal ( null ) ;
expect ( circleColor , 'background color should not be undefined' ) . to . not . equal ( undefined ) ;
expect ( circleColor , 'background color should not be an empty string' ) . to . not . equal ( '' ) ;
expect (
primaryColorValues . includes ( circleColor ! ) ,
'background color should be in COLORS.PRIMARY'
) . to . equal ( true ) ;
expect (
circleColor ,
` background color should be ${ primaryColorKeys [ primaryColorValues . indexOf ( expectedColorValue ) ] } ( ${ expectedColorValue } ) and not ${ primaryColorKeys [ primaryColorValues . indexOf ( circleColor ! ) ] } ( ${ circleColor } ) for testPubkey ${ testPubkeys . indexOf ( testPubkey ) } ( ${ testPubkey } ) `
) . to . equal ( expectedColorValue ) ;
result . unmount ( ) ;
}
// NOTE this is the standard order of background colors for avatars on each platform
await testBackgroundColor ( testPubkeys [ 0 ] , COLORS . PRIMARY . GREEN ) ;
await testBackgroundColor ( testPubkeys [ 1 ] , COLORS . PRIMARY . BLUE ) ;
await testBackgroundColor ( testPubkeys [ 2 ] , COLORS . PRIMARY . YELLOW ) ;
await testBackgroundColor ( testPubkeys [ 3 ] , COLORS . PRIMARY . PINK ) ;
await testBackgroundColor ( testPubkeys [ 4 ] , COLORS . PRIMARY . PURPLE ) ;
await testBackgroundColor ( testPubkeys [ 5 ] , COLORS . PRIMARY . ORANGE ) ;
await testBackgroundColor ( testPubkeys [ 6 ] , COLORS . PRIMARY . RED ) ;
} ) ;
// TODO it should render the correct theme colors
// TODO given a pubkey it should render the correct color
// TODO given a name it should render the correct initials
} ) ;
William Grant
11 months ago