import { newSpecPage } from '@stencil/core/testing' ; import { Components } from '../../../components' ; import { ScGrid } from '../../sc-grid/sc-grid' ; import { DataPoint , DEFAULT_MESSAGE_OVERRIDES } from '../../../utils/dataTypes' ; import { CustomHTMLElement } from '../../../utils/types' ; import { update } from '../../charts/common/tests/merge' ; import { ScStatusCell } from './sc-status-cell' ; import { ScDataStreamName } from '../../sc-data-stream-name/sc-data-stream-name' ; import { ALARM_STREAM , DATA_STREAM } from '../../../testing/__mocks__/mockWidgetProperties' ; import { StatusIcon } from '../../charts/common/constants' ; import { NO_VALUE_PRESENT_SELECTOR } from '../../../testing/selectors' ; const STRING_POINT = { x : Date . now ( ) , y : 'ALARM' , } ; const NUMBER_POINT = { x : Date . now ( ) , y : 123 , } ; const cellSpecPage = async ( propOverrides = { } ) => { const page = await newSpecPage ( { components : [ ScGrid , ScStatusCell , ScDataStreamName ] , html : '<div></div>' , supportsShadowDom : false , } ) ; const statusCell = page . doc . createElement ( 'sc-status-cell' ) as CustomHTMLElement < Components . ScStatusCell > ; const props = { isEnabled : true , isEditing : false , valueColor : undefined , messageOverrides : { } , propertyStream : DATA_STREAM , labelsConfig : { showValue : true , showName : true , showUnit : true , } , onChangeLabel : jest . fn ( ) , ... propOverrides , } ; update ( statusCell , props ) ; page . body . appendChild ( statusCell ) ; await page . waitForChanges ( ) ; return { page , statusCell , props } ; } ; describe ( 'title' , ( ) => { it ( 'renders title as data stream name' , async ( ) => { const { statusCell } = await cellSpecPage ( { alarmStream : DATA_STREAM } ) ; expect ( statusCell . textContent ) . toContain ( DATA_STREAM . name ) ; } ) ; it ( 'renders title as property stream when no alarm present' , async ( ) => { const { statusCell } = await cellSpecPage ( { alarmStream : undefined , propertyStream : DATA_STREAM } ) ; expect ( statusCell . textContent ) . toContain ( DATA_STREAM . name ) ; } ) ; it ( 'renders title as alarm stream when both alarm and property are present' , async ( ) => { const { statusCell } = await cellSpecPage ( { propertyStream : DATA_STREAM , alarmStream : ALARM_STREAM } ) ; expect ( statusCell . textContent ) . toContain ( ALARM_STREAM . name ) ; expect ( statusCell . textContent ) . not . toContain ( DATA_STREAM . name ) ; } ) ; it ( 'renders no title when showName is false' , async ( ) => { const { statusCell } = await cellSpecPage ( { alarmStream : DATA_STREAM , labelsConfig : { showName : false , showUnit : true , showValue : true } , } ) ; expect ( statusCell . textContent ) . not . toContain ( DATA_STREAM . name ) ; } ) ; } ) ; it ( 'when not enabled, renders as a gray' , async ( ) => { const { statusCell } = await cellSpecPage ( { isEnabled : false } ) ; const container = statusCell . querySelector ( '.status-cell' ) as HTMLDivElement ; expect ( container . style . backgroundColor ) . toBe ( '#f1f1f1' ) ; } ) ; it ( 'renders with empty placeholder when there is no data' , async ( ) => { const { statusCell } = await cellSpecPage ( { alarmPoint : undefined , alarmStream : ALARM_STREAM , propertyStream : undefined , propertyPoint : undefined , } ) ; expect ( statusCell . querySelectorAll ( NO_VALUE_PRESENT_SELECTOR ) ) . toHaveLength ( 1 ) ; } ) ; it ( 'renders with empty placeholder when there is no data in alarm, but there is data in the property stream' , async ( ) => { const { statusCell } = await cellSpecPage ( { alarmPoint : undefined , alarmStream : ALARM_STREAM , propertyStream : DATA_STREAM , propertyPoint : NUMBER_POINT , } ) ; expect ( statusCell . querySelectorAll ( NO_VALUE_PRESENT_SELECTOR ) ) . toHaveLength ( 1 ) ; } ) ; it ( 'renders number value with truncated precision' , async ( ) => { const DECIMAL = 123.345 ; const { statusCell } = await cellSpecPage ( { alarmStream : ALARM_STREAM , alarmPoint : { x : Date . now ( ) , y : DECIMAL , } , propertyStream : undefined , propertyPoint : undefined , } ) ; expect ( statusCell . innerHTML ) . toContain ( Math . round ( DECIMAL ) ) ; } ) ; it ( 'renders string value' , async ( ) => { const { statusCell } = await cellSpecPage ( { alarmPoint : STRING_POINT , alarmStream : ALARM_STREAM , } ) ; expect ( statusCell . innerHTML ) . toContain ( STRING_POINT . y ) ; } ) ; describe ( 'messageOverrides' , ( ) => { it ( 'when override provided, utilize it' , async ( ) => { const SOME_Y_VALUE = 'SOME_Y_VALUE' ; const MY_MSG_OVERRIDE = 'MY_MSG_OVERRIDE' ; const { statusCell } = await cellSpecPage ( { messageOverrides : { liveTimeFrameValueLabel : MY_MSG_OVERRIDE , } , propertyPoint : { x : Date . now ( ) , y : SOME_Y_VALUE , } , alarmStream : ALARM_STREAM , propertyStream : DATA_STREAM , } ) ; expect ( statusCell . innerHTML ) . not . toContain ( DEFAULT_MESSAGE_OVERRIDES . liveTimeFrameValueLabel ) ; expect ( statusCell . innerHTML ) . toContain ( MY_MSG_OVERRIDE ) ; } ) ; } ) ; describe ( 'secondaryPoint' , ( ) => { it ( 'renders `propertyPoint` when both `propertyStream` and `alarmStream` are present' , async ( ) => { const SOME_Y_VALUE = 'SOME_Y_VALUE' ; const { statusCell } = await cellSpecPage ( { isEnabled : true , alarmStream : ALARM_STREAM , propertyPoint : { x : Date . now ( ) , y : SOME_Y_VALUE , } , propertyStream : DATA_STREAM , } ) ; expect ( statusCell . innerHTML ) . toContain ( `${ DEFAULT_MESSAGE_OVERRIDES . liveTimeFrameValueLabel }: ${ SOME_Y_VALUE }` ) ; } ) ; it ( 'does not render `propertyPoint` when not enabled' , async ( ) => { const SOME_Y_VALUE = 'SOME_Y_VALUE' ; const { statusCell } = await cellSpecPage ( { isEnabled : false , propertyPoint : { x : Date . now ( ) , y : SOME_Y_VALUE , } , propertyStream : DATA_STREAM , } ) ; expect ( statusCell . innerHTML ) . not . toContain ( DEFAULT_MESSAGE_OVERRIDES . liveTimeFrameValueLabel ) ; } ) ; it ( 'does not render `propertyPoint` when stream not provided' , async ( ) => { const SOME_Y_VALUE = 'SOME_Y_VALUE' ; const { statusCell } = await cellSpecPage ( { propertyPoint : { x : Date . now ( ) , y : SOME_Y_VALUE , } , propertyStream : undefined , } ) ; expect ( statusCell . innerHTML ) . not . toContain ( DEFAULT_MESSAGE_OVERRIDES . liveTimeFrameValueLabel ) ; } ) ; } ) ; it ( 'renders no value when `showValue` is false' , async ( ) => { const { statusCell } = await cellSpecPage ( { labelsConfig : { showValue : false , showUnit : true , showName : true } , alarmPoint : NUMBER_POINT , } ) ; expect ( statusCell . innerHTML ) . not . toContain ( NUMBER_POINT . y ) ; } ) ; it ( 'renders with no value when it is not enabled' , async ( ) => { const { statusCell } = await cellSpecPage ( { isEnabled : false , alarmPoint : NUMBER_POINT } ) ; expect ( statusCell . innerHTML ) . not . toContain ( NUMBER_POINT . y ) ; } ) ; it ( 'renders the background color to be the color of the `valueColor`' , async ( ) => { const valueColor = 'red' ; const { statusCell } = await cellSpecPage ( { valueColor } ) ; const container = statusCell . querySelector ( '.status-cell' ) as HTMLDivElement ; expect ( container . style . backgroundColor ) . toBe ( valueColor ) ; } ) ; describe ( 'icon' , ( ) => { it ( 'renders icon when `icon` provided' , async ( ) => { const icon = StatusIcon . ERROR ; const { statusCell } = await cellSpecPage ( { icon } ) ; const chartIcon = statusCell . querySelector ( 'sc-chart-icon' ) ; expect ( chartIcon ) . toEqualAttribute ( 'name' , icon ) ; } ) ; it ( 'does not render icon when not enabled' , async ( ) => { const { statusCell } = await cellSpecPage ( { icon : StatusIcon . ERROR , isEnabled : false } ) ; const chartIcon = statusCell . querySelector ( 'sc-chart-icon' ) ; expect ( chartIcon ) . toBeNull ( ) ; } ) ; it ( 'does not render icon when `icon` is not defined' , async ( ) => { const { statusCell } = await cellSpecPage ( { icon : undefined } ) ; const chartIcon = statusCell . querySelector ( 'sc-chart-icon' ) ; expect ( chartIcon ) . toBeNull ( ) ; } ) ; } ) ; it ( 'should call updateName with correct props when label changed' , async ( ) => { const { page , statusCell , props } = await cellSpecPage ( { propertyStream : DATA_STREAM } ) ; const streamName = statusCell . querySelector ( 'sc-data-stream-name' ) as HTMLScDataStreamNameElement ; const newName = 'New Name' ; streamName . onNameChange ( newName ) ; await page . waitForChanges ( ) ; expect ( props . onChangeLabel ) . toHaveBeenCalledWith ( expect . objectContaining ( { name : newName , streamId : DATA_STREAM . id } ) ) ; } ) ;