AnalyticalCardHeader.cy.tsx

import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
import { getRGBColor } from '@ui5/webcomponents-base/dist/util/ColorConversion';
import { ThemingParameters } from '@ui5/webcomponents-react-base';
import { DeviationIndicator, ValueColor } from '../../enums';
import type { CardPropTypes } from '../../webComponents/Card/index.js';
import { Card } from '../../webComponents/Card/index.js';
import { Text } from '../../webComponents/Text/index.js';
import { NumericSideIndicator } from '../NumericSideIndicator';
import type { AnalyticalCardHeaderPropTypes } from './index';
import { AnalyticalCardHeader } from './index';

const TestComp = (props: Omit<CardPropTypes, 'children'>) => {
  return (
    <Card {...props}>
      <Text>Content</Text>
    </Card>
  );
};

describe('AnalyticalCardHeader', () => {
  it('Render with default AnalyticalCardHeader', () => {
    cy.mount(<TestComp header={<AnalyticalCardHeader titleText="Header Title" />} />);
    cy.findByText('Content').should('be.visible');
    cy.findByText('Header Title').should('be.visible');
  });

  it('Render with custom header', () => {
    cy.mount(<TestComp header={<div>Header Title</div>} />);
    cy.findByText('Content').should('be.visible');
    cy.findByText('Header Title').should('be.visible');
  });

  [
    [ValueColor.Error, ThemingParameters.sapNegativeTextColor],
    [ValueColor.Critical, ThemingParameters.sapCriticalTextColor],
    [ValueColor.Good, ThemingParameters.sapPositiveTextColor],
    [ValueColor.Neutral, ThemingParameters.sapNeutralTextColor],
  ].forEach(([color, cssVar]: [AnalyticalCardHeaderPropTypes['state'], string]) => {
    it(`Header: ValueColor: ${color}`, () => {
      const cssVarValue = getComputedStyle(document.documentElement).getPropertyValue(cssVar.match(/(--)[^)]+/)[0]);
      cy.mount(
        <TestComp header={<AnalyticalCardHeader trend={DeviationIndicator.Down} value="123" state={color} />} />,
      );
      const rgbVal = getRGBColor(cssVarValue);
      const rgbValString = `rgb(${rgbVal.r}, ${rgbVal.g}, ${rgbVal.b})`;
      cy.findByText('123').parent().should('have.css', 'color', rgbValString);
    });
  });

  it('Header: all string props', () => {
    cy.mount(
      <TestComp
        header={
          <AnalyticalCardHeader
            titleText="Title"
            subtitleText="Subtitle"
            value="Value"
            unitOfMeasurement="Unit"
            description="Description"
          >
            <NumericSideIndicator titleText="Target" number={100} />
            <NumericSideIndicator titleText="Deviation" number={50} state={ValueColor.Error} />
          </AnalyticalCardHeader>
        }
      />,
    );
    cy.findByText('Title').should('be.visible');
    cy.findByText('Subtitle').should('be.visible');
    cy.findByText('Value').should('be.visible');
    cy.findByText('Unit').should('be.visible');
    cy.findByText('Target').should('be.visible');
    cy.findByText('Deviation').should('be.visible');
  });

  it('Header: with arrow indicator', () => {
    cy.mount(<TestComp header={<AnalyticalCardHeader scale="EUR" trend={DeviationIndicator.Down} />} />);
    cy.get('[ui5-icon]').should('have.attr', 'name', 'down');
    cy.mount(<TestComp header={<AnalyticalCardHeader scale="EUR" trend={DeviationIndicator.Up} />} />);
    cy.get('[ui5-icon]').should('have.attr', 'name', 'up');
  });

  Object.values(ValueColor).forEach((state: AnalyticalCardHeaderPropTypes['state']) => {
    Object.values(DeviationIndicator).forEach((trend: AnalyticalCardHeaderPropTypes['trend']) => {
      it(`numeric tooltip & aria-label (trend: ${trend}, state: ${state})`, () => {
        cy.mount(<AnalyticalCardHeader titleText={'Header'} trend={trend} value={'65.34'} state={state} scale={'K'} />);
        if (trend === 'None') {
          const shouldVal = `65.34K\n${semanticColorMap.get(state)}`.trim();
          cy.get('[data-component-name="AnalyticalCardHeaderNumericContent"]').should('have.attr', 'title', shouldVal);
          cy.get('[data-component-name="AnalyticalCardHeaderNumericContent"]').should(
            'have.attr',
            'aria-label',
            shouldVal,
          );
        } else {
          const shouldVal =
            `65.34K\n${trend === 'Up' ? 'Ascending' : 'Descending'}\n${semanticColorMap.get(state)}`.trim();
          cy.get('[data-component-name="AnalyticalCardHeaderNumericContent"]').should('have.attr', 'title', shouldVal);
          cy.get('[data-component-name="AnalyticalCardHeaderNumericContent"]').should(
            'have.attr',
            'aria-label',
            shouldVal,
          );
        }
      });
    });
  });

  cypressPassThroughTestsFactory(AnalyticalCardHeader);
});

const semanticColorMap = new Map<AnalyticalCardHeaderPropTypes['state'], any>([
  [ValueColor.Neutral, 'Neutral'],
  [ValueColor.Good, 'Good'],
  [ValueColor.Critical, 'Warning'],
  [ValueColor.Error, 'Critical'],
  [ValueColor.None, ''],
]);