@opentrons/components 0.2.0-alpha.0 → 0.2.0-alpha.1

package/src/hardware-sim/Module/Thermocycler/index.tsx

@@ -1,49 +0,0 @@
-import { getModuleDef, THERMOCYCLER_MODULE_V1 } from '@opentrons/shared-data'
-
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { C_MED_LIGHT_GRAY } from '../../../styles'
-import { RobotCoordsForeignDiv } from '../../Deck'
-import { ThermocyclerGEN1 } from './ThermocyclerGEN1'
-import { ThermocyclerGEN2 } from './ThermocyclerGEN2'
-
-import type { ThermocyclerModuleModel } from '@opentrons/shared-data'
-
-const ROOM_TEMPERATURE_C = 23 // value taken from TC firmware
-export interface ThermocyclerVizProps {
-  lidMotorState: 'open' | 'closed' | 'unknown'
-  blockTargetTemp?: number | null
-  model: ThermocyclerModuleModel
-}
-
-export function Thermocycler(props: ThermocyclerVizProps): JSX.Element {
-  const { lidMotorState, blockTargetTemp, model } = props
-  const def = getModuleDef(model)
-  if (lidMotorState === 'unknown') {
-    // just a rectangle if we don't know the state of the lid
-    return (
-      <RobotCoordsForeignDiv
-        width={def.dimensions.xDimension}
-        height={def.dimensions.yDimension}
-        innerDivProps={{
-          borderRadius: '6px',
-          backgroundColor: C_MED_LIGHT_GRAY,
-          border: BORDERS.lineBorder,
-          width: '100%',
-          height: '100%',
-        }}
-      />
-    )
-  }
-
-  let ledLightColor = COLORS.transparent
-  if (blockTargetTemp != null) {
-    ledLightColor =
-      blockTargetTemp <= ROOM_TEMPERATURE_C ? COLORS.blue35 : COLORS.red30
-  }
-
-  return model === THERMOCYCLER_MODULE_V1 ? (
-    <ThermocyclerGEN1 {...{ lidMotorState, ledLightColor }} />
-  ) : (
-    <ThermocyclerGEN2 {...{ lidMotorState, ledLightColor }} />
-  )
-}

package/src/hardware-sim/Module/index.tsx

@@ -1,253 +0,0 @@
-import {
-  ABSORBANCE_READER_TYPE,
-  FLEX_STACKER_MODULE_TYPE,
-  getModuleType,
-  HEATERSHAKER_MODULE_TYPE,
-  MAGNETIC_BLOCK_TYPE,
-  MAGNETIC_MODULE_TYPE,
-  multiplyMatrices,
-  TEMPERATURE_MODULE_TYPE,
-  THERMOCYCLER_MODULE_TYPE,
-} from '@opentrons/shared-data'
-
-import {
-  ALIGN_CENTER,
-  C_DARK_GRAY,
-  C_MED_LIGHT_GRAY,
-  DIRECTION_COLUMN,
-  DISPLAY_FLEX,
-  FONT_WEIGHT_SEMIBOLD,
-  JUSTIFY_CENTER,
-  SPACING_1,
-} from '../../styles'
-import { RobotCoordsForeignObject } from '../Deck'
-import { FlexStacker } from './FlexStacker'
-import { HeaterShaker } from './HeaterShaker'
-import { MagneticBlock } from './MagneticBlock'
-import { MagneticModule } from './MagneticModule'
-import { PlateReader } from './PlateReader'
-import { Temperature } from './Temperature'
-import { Thermocycler } from './Thermocycler'
-
-import type { ComponentProps, ReactNode } from 'react'
-import type {
-  ModuleDefinition,
-  ThermocyclerModuleModel,
-} from '@opentrons/shared-data'
-import type { FlexDirection } from '../Deck'
-
-export * from './Thermocycler'
-
-const LABWARE_OFFSET_DISPLAY_THRESHOLD = 2
-
-interface Props {
-  x: number
-  y: number
-  def: ModuleDefinition
-  orientation?: 'left' | 'right'
-  innerProps?:
-    | ComponentProps<typeof Thermocycler>
-    | ComponentProps<typeof HeaterShaker>
-    | ComponentProps<typeof Temperature>
-    | {}
-  statusInfo?: ReactNode // contents of small status rectangle, not displayed if absent
-
-  children?: ReactNode
-
-  /**
-   * How child components should be positioned.
-   *
-   * "offsetToSlot" - The SVG origin of a child will be at the labware mating interface of the
-   *   module, which is the front-left (-x, -y) corner of the slot on top of the module.
-   *
-   * todo(mm, 2025-07-21):
-   * 1. Add a "passThrough" mode that disables the "offsetToSlot" behavior,
-   *    to allow child components to replace it with their own SVG transform,
-   *    to support labware schema 3.
-   * 2. Migrate all existing call sites to use "passThrough".
-   * 3. Remove "offsetToSlot".
-   */
-  childrenPositioningMode: 'offsetToSlot'
-
-  /**
-   * Used for applying slot-specific positioning adjustments.
-   * If you're rendering the module on a deck, supply this for correct positioning.
-   */
-  targetSlotId: string | null
-  /**
-   * Used for applying slot-specific positioning adjustments.
-   * If you're rendering the module on a deck, supply this for correct positioning.
-   */
-  targetDeckId: string | null
-}
-
-const statusInfoWrapperProps = {
-  display: DISPLAY_FLEX,
-  alignItems: ALIGN_CENTER,
-}
-const statusInfoFlexProps = {
-  flexDirection: DIRECTION_COLUMN as FlexDirection,
-  justifyContent: JUSTIFY_CENTER,
-  backgroundColor: C_MED_LIGHT_GRAY,
-  padding: SPACING_1,
-  fontSize: '0.5rem', // NOTE: this text is rendered into an SVG foreignObject, so sizing is non-standard
-  fontWeight: FONT_WEIGHT_SEMIBOLD,
-  paddingBottom: SPACING_1,
-}
-
-export const Module = (props: Props): JSX.Element => {
-  const {
-    def,
-    x,
-    y,
-    orientation = 'left',
-    innerProps = {},
-    statusInfo,
-    children,
-    targetSlotId,
-    targetDeckId,
-  } = props
-
-  const moduleType = getModuleType(def.model)
-
-  const { x: labwareOffsetX, y: labwareOffsetY } = def.labwareOffset
-  const {
-    x: translateX,
-    y: translateY,
-    z: translateZ,
-  } = def.cornerOffsetFromSlot
-  const {
-    xDimension,
-    yDimension,
-    footprintXDimension,
-    footprintYDimension,
-    labwareInterfaceXDimension,
-    labwareInterfaceYDimension,
-  } = def.dimensions
-
-  // apply translation to position module in viewport
-  const positionTransform = `translate(${x}, ${y})`
-
-  // apply translation to compensate for the offset of the overall module's
-  // left-bottom-front corner, from the footprint's left-bottom-front corner (slot interface)
-  let offsetTransform = `translate(${translateX}, ${translateY})`
-
-  let nestedLabwareOffsetX = labwareOffsetX
-  let nestedLabwareOffsetY = labwareOffsetY
-
-  // additional transforms to apply to vectors in certain deck/slot combinations
-  const transformsForDeckBySlot =
-    (targetDeckId != null ? def?.slotTransforms?.[targetDeckId] : null) ?? {}
-  const slotTransformsForDeckSlot =
-    (targetSlotId != null ? transformsForDeckBySlot[targetSlotId] : null) ?? {}
-
-  if (slotTransformsForDeckSlot.cornerOffsetFromSlot != null) {
-    const [
-      [slotTranslateX],
-      [slotTranslateY],
-    ] = multiplyMatrices(slotTransformsForDeckSlot.cornerOffsetFromSlot, [
-      [translateX],
-      [translateY],
-      [translateZ],
-      [1],
-    ])
-    offsetTransform = `translate(${slotTranslateX}, ${slotTranslateY})`
-  }
-  if (slotTransformsForDeckSlot.labwareOffset != null) {
-    const [
-      [slotLabwareOffsetX],
-      [slotLabwareOffsetY],
-    ] = multiplyMatrices(slotTransformsForDeckSlot.labwareOffset, [
-      [labwareOffsetX],
-      [labwareOffsetY],
-      [1],
-      [1],
-    ])
-    nestedLabwareOffsetX = slotLabwareOffsetX
-    nestedLabwareOffsetY = slotLabwareOffsetY
-  }
-
-  // find coordinates of center of footprint, fallback to overall center if not defined
-  const rotationCenterX = (footprintXDimension ?? xDimension) / 2
-  const rotationCenterY = (footprintYDimension ?? yDimension) / 2
-
-  const orientationTransform =
-    orientation === 'left' ||
-    moduleType === ABSORBANCE_READER_TYPE ||
-    moduleType === FLEX_STACKER_MODULE_TYPE
-      ? 'rotate(0, 0, 0)'
-      : `rotate(180, ${rotationCenterX}, ${rotationCenterY})`
-
-  // labwareOffset values are more accurate than our SVG renderings, so ignore any deviations under a certain threshold
-  const clampedLabwareOffsetX =
-    Math.abs(nestedLabwareOffsetX) > LABWARE_OFFSET_DISPLAY_THRESHOLD
-      ? nestedLabwareOffsetX
-      : 0
-  const clampedLabwareOffsetY =
-    Math.abs(nestedLabwareOffsetY) > LABWARE_OFFSET_DISPLAY_THRESHOLD
-      ? nestedLabwareOffsetY
-      : 0
-  // transform to be applied to children which render within the labware interfacing surface of the module
-  const childrenTransform = `translate(${clampedLabwareOffsetX}, ${clampedLabwareOffsetY})`
-
-  const renderStatusInfo = (): JSX.Element | null => {
-    if (statusInfo == null) return null
-    const statusWidth = (labwareInterfaceXDimension ?? xDimension) / 2
-    return (
-      <RobotCoordsForeignObject
-        x={
-          orientation === 'left'
-            ? labwareOffsetX - statusWidth
-            : labwareOffsetX + (labwareInterfaceXDimension ?? xDimension)
-        }
-        y={labwareOffsetY}
-        height={labwareInterfaceYDimension ?? yDimension}
-        width={statusWidth}
-        foreignObjectProps={statusInfoWrapperProps}
-        flexProps={statusInfoFlexProps}
-      >
-        {statusInfo}
-      </RobotCoordsForeignObject>
-    )
-  }
-
-  let moduleViz: JSX.Element | null = null
-  if (moduleType === MAGNETIC_BLOCK_TYPE) {
-    moduleViz = <MagneticBlock />
-  } else if (moduleType === MAGNETIC_MODULE_TYPE) {
-    moduleViz = <MagneticModule />
-  } else if (moduleType === THERMOCYCLER_MODULE_TYPE) {
-    const thermocyclerProps = {
-      lidMotorState: 'open' as const,
-      ...innerProps,
-      model: def.model as ThermocyclerModuleModel,
-    }
-
-    moduleViz = <Thermocycler {...thermocyclerProps} />
-  } else if (moduleType === HEATERSHAKER_MODULE_TYPE) {
-    moduleViz = (
-      <HeaterShaker {...(innerProps as ComponentProps<typeof HeaterShaker>)} />
-    )
-  } else if (moduleType === TEMPERATURE_MODULE_TYPE) {
-    moduleViz = (
-      <Temperature {...(innerProps as ComponentProps<typeof Temperature>)} />
-    )
-  } else if (moduleType === ABSORBANCE_READER_TYPE) {
-    moduleViz = <PlateReader />
-  } else if (moduleType === FLEX_STACKER_MODULE_TYPE) {
-    moduleViz = <FlexStacker />
-  }
-  return (
-    <g transform={positionTransform} data-test={`Module_${moduleType}`}>
-      <g transform={orientationTransform}>
-        <g transform={offsetTransform} style={{ fill: C_DARK_GRAY }}>
-          {moduleViz}
-        </g>
-      </g>
-      {renderStatusInfo()}
-      {children != null ? (
-        <g transform={childrenTransform}>{children}</g>
-      ) : null}
-    </g>
-  )
-}

package/src/hardware-sim/Pipette/EightEmanatingNozzles.tsx

@@ -1,24 +0,0 @@
-import { Fragment } from 'react'
-
-import { EmanatingNozzle } from './EmanatingNozzle'
-
-export const EightEmanatingNozzles = (props: {
-  cx: number
-  initialCy: number
-}): JSX.Element => {
-  const { cx, initialCy } = props
-  const MULTI_CHANNEL_NOZZLE_SPACING = 9
-  return (
-    <Fragment>
-      {[...Array(8)].map((_, i: number) => {
-        return (
-          <EmanatingNozzle
-            cx={cx}
-            cy={initialCy + i * MULTI_CHANNEL_NOZZLE_SPACING}
-            key={`Circle_${i}`}
-          />
-        )
-      })}
-    </Fragment>
-  )
-}

package/src/hardware-sim/Pipette/EmanatingNozzle.tsx

@@ -1,54 +0,0 @@
-import { Fragment } from 'react'
-
-import { COLORS } from '../../helix-design-system'
-import { C_TRANSPARENT } from '../../styles'
-import { SINGLE_CHANNEL_PIPETTE_HEIGHT } from './constants'
-
-export const EmanatingNozzle = (props: {
-  cx: number
-  cy: number
-}): JSX.Element => {
-  const { cx, cy } = props
-  return (
-    <Fragment>
-      <circle
-        data-testid="origin_circle"
-        cx={cx}
-        cy={cy}
-        r={0.5}
-        stroke={COLORS.blue50}
-        fill={COLORS.blue50}
-      ></circle>
-      <circle
-        data-testid="emanating_circle"
-        cx={cx}
-        cy={cy}
-        r={0.5}
-        stroke={COLORS.blue50}
-        strokeWidth={'2px'}
-        fill={C_TRANSPARENT}
-      >
-        <animate
-          data-testid="radius_animation"
-          attributeName="r"
-          from={5}
-          to={SINGLE_CHANNEL_PIPETTE_HEIGHT / 2}
-          begin={0}
-          dur={1.1}
-          calcMode="ease-out"
-          repeatCount="indefinite"
-        />
-        <animate
-          data-testid="opacity_animation"
-          attributeName="opacity"
-          from={0.7}
-          to={0}
-          begin={0}
-          dur={1.1}
-          calcMode="linear"
-          repeatCount="indefinite"
-        />
-      </circle>
-    </Fragment>
-  )
-}

package/src/hardware-sim/Pipette/PipetteRender.stories.tsx

@@ -1,73 +0,0 @@
-import { Fragment } from 'react'
-
-import { getAllLabwareDefs, getAllPipetteNames } from '@opentrons/shared-data'
-
-import { RobotWorkSpace } from '../Deck'
-import { LabwareRender } from '../Labware'
-import { PipetteRender } from './'
-
-import type { Meta, Story } from '@storybook/react'
-import type { LabwareDefinition, PipetteName } from '@opentrons/shared-data'
-
-const DECK_MAP_VIEWBOX = '0 -140 230 230'
-
-const opentrons300UlTiprack = getAllLabwareDefs().opentrons96Tiprack300UlV1
-const opentrons10UlTiprack = getAllLabwareDefs().opentrons96Tiprack10UlV1
-const nest12Reservoir15ml = getAllLabwareDefs().nest12Reservoir15MlV1
-const axygenReservoir90ml = getAllLabwareDefs().axygen1Reservoir90MlV1
-const opentrons6TuberackNest50mlConical = getAllLabwareDefs()
-  .opentrons6TuberackNest50MlConicalV1
-
-const labwareDefMap: Record<string, LabwareDefinition> = {
-  [opentrons300UlTiprack.metadata.displayName]: opentrons300UlTiprack,
-  [opentrons10UlTiprack.metadata.displayName]: opentrons10UlTiprack,
-  [nest12Reservoir15ml.metadata.displayName]: nest12Reservoir15ml,
-  [axygenReservoir90ml.metadata.displayName]: axygenReservoir90ml,
-  [opentrons6TuberackNest50mlConical.metadata
-    .displayName]: opentrons6TuberackNest50mlConical,
-}
-const pipetteNames = Object.keys(getAllPipetteNames()) as PipetteName[]
-
-export default {
-  title: 'Library/Molecules/Simulation/Pipette/PipetteRender',
-} as Meta
-
-const Template: Story<{
-  labwareName: string
-  pipetteName: PipetteName
-}> = args => {
-  const labwareDef = labwareDefMap[args.labwareName]
-  return (
-    <RobotWorkSpace viewBox={DECK_MAP_VIEWBOX}>
-      {() => (
-        <Fragment>
-          <LabwareRender definition={labwareDef} />
-          <PipetteRender
-            labwareDef={labwareDef}
-            pipetteName={args.pipetteName}
-          />
-        </Fragment>
-      )}
-    </RobotWorkSpace>
-  )
-}
-export const Pipette = Template.bind({})
-
-Pipette.argTypes = {
-  labwareName: {
-    control: {
-      type: 'select',
-      options: Object.keys(labwareDefMap).map(
-        d => labwareDefMap[d].metadata.displayName
-      ),
-    },
-    defaultValue: opentrons300UlTiprack.metadata.displayName,
-  },
-  pipetteName: {
-    control: {
-      type: 'select',
-      options: pipetteNames,
-    },
-    defaultValue: pipetteNames[0],
-  },
-}

package/src/hardware-sim/Pipette/PipetteRender.tsx

@@ -1,86 +0,0 @@
-import { getPipetteNameSpecs } from '@opentrons/shared-data'
-
-import { RobotCoordsForeignDiv } from '../Deck/RobotCoordsForeignDiv'
-import {
-  MULTI_CHANNEL_CENTER_Y_NOZZLE,
-  MULTI_CHANNEL_PIPETTE_HEIGHT,
-  MULTI_CHANNEL_PIPETTE_WIDTH,
-  MULTI_CHANNEL_Y_OFFSET,
-  NINETY_SIX_CHANNEL_PIPETTE_WIDTH,
-  SINGLE_CHANNEL_PIPETTE_HEIGHT,
-  SINGLE_CHANNEL_PIPETTE_WIDTH,
-} from './constants'
-import { EightEmanatingNozzles } from './EightEmanatingNozzles'
-import { EmanatingNozzle } from './EmanatingNozzle'
-
-import type { LabwareDefinition, PipetteName } from '@opentrons/shared-data'
-
-interface PipetteRenderProps {
-  labwareDef: LabwareDefinition
-  pipetteName: PipetteName
-  usingMetalProbe?: boolean
-}
-
-export const PipetteRender = (props: PipetteRenderProps): JSX.Element => {
-  const { labwareDef, pipetteName, usingMetalProbe = false } = props
-  const channels = getPipetteNameSpecs(pipetteName)?.channels
-  const cx =
-    channels === 1
-      ? SINGLE_CHANNEL_PIPETTE_WIDTH / 2
-      : MULTI_CHANNEL_PIPETTE_WIDTH / 2
-  const cy =
-    channels === 1
-      ? SINGLE_CHANNEL_PIPETTE_HEIGHT / 2
-      : MULTI_CHANNEL_CENTER_Y_NOZZLE
-  const x = labwareDef.wells.A1.x - cx
-  const y = channels === 1 ? labwareDef.wells.A1.y - cy : MULTI_CHANNEL_Y_OFFSET
-
-  let boxWidth: number
-  let probeOffsetX: number = 0
-  let probeOffsetY: number = 0
-  if (channels === 1) {
-    boxWidth = SINGLE_CHANNEL_PIPETTE_WIDTH
-  } else if (channels === 8) {
-    boxWidth = MULTI_CHANNEL_PIPETTE_WIDTH
-    probeOffsetY = 63
-  } else {
-    boxWidth = NINETY_SIX_CHANNEL_PIPETTE_WIDTH
-    probeOffsetY = 63
-    if (Object.keys(labwareDef.wells).length === 1) {
-      probeOffsetX = 99 / 2
-    }
-  }
-
-  return (
-    <RobotCoordsForeignDiv
-      width={boxWidth}
-      height={
-        channels === 1
-          ? SINGLE_CHANNEL_PIPETTE_HEIGHT
-          : MULTI_CHANNEL_PIPETTE_HEIGHT
-      }
-      x={x - probeOffsetX}
-      y={y}
-      outerProps={{ style: { overflow: 'visible' } }}
-      innerDivProps={{
-        width: '100%',
-        height: '100%',
-        overflow: 'visible',
-      }}
-    >
-      <svg overflow="visible">
-        {channels === 1 || usingMetalProbe ? (
-          <EmanatingNozzle
-            cx={cx}
-            cy={usingMetalProbe ? cy + probeOffsetY : cy}
-          />
-        ) : (
-          <EightEmanatingNozzles
-            cx={usingMetalProbe ? cx - probeOffsetX : cx}
-            initialCy={usingMetalProbe ? cy + probeOffsetY : cy}
-          />
-        )}
-      </svg>
-    </RobotCoordsForeignDiv>
-  )
-}

package/src/hardware-sim/Pipette/__tests__/EightEmanatingNozzles.test.tsx

@@ -1,17 +0,0 @@
-import { render } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { EightEmanatingNozzles } from '../EightEmanatingNozzles'
-import { EmanatingNozzle } from '../EmanatingNozzle'
-
-vi.mock('../EmanatingNozzle')
-
-describe('EightEmanatingNozzles', () => {
-  beforeEach(() => {
-    vi.mocked(EmanatingNozzle).mockReturnValue(<div>mock emanating nozzle</div>)
-  })
-  it('should render eight emanating nozzles', () => {
-    render(<EightEmanatingNozzles cx={5} initialCy={10} />)
-    expect(EmanatingNozzle).toHaveBeenCalledTimes(8)
-  })
-})

package/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx

@@ -1,69 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { COLORS } from '../../../helix-design-system'
-import { C_TRANSPARENT } from '../../../styles'
-import { SINGLE_CHANNEL_PIPETTE_HEIGHT } from '../constants'
-import { EmanatingNozzle } from '../EmanatingNozzle'
-
-describe('EmanatingNozzle', () => {
-  it('should render an small origin circle', () => {
-    render(
-      <svg>
-        <EmanatingNozzle cx={5} cy={10} />
-      </svg>
-    )
-    const originCircle = screen.getByTestId('origin_circle')
-    expect(originCircle).toHaveAttribute('cx', '5')
-    expect(originCircle).toHaveAttribute('cy', '10')
-    expect(originCircle).toHaveAttribute('r', '0.5')
-    expect(originCircle).toHaveAttribute('stroke', COLORS.blue50)
-    expect(originCircle).toHaveAttribute('fill', COLORS.blue50)
-  })
-  it('should render a medium sized animating circle', () => {
-    render(
-      <svg>
-        <EmanatingNozzle cx={5} cy={10} />
-      </svg>
-    )
-    const emanatingCircle = screen.getByTestId('emanating_circle')
-    expect(emanatingCircle).toHaveAttribute('cx', '5')
-    expect(emanatingCircle).toHaveAttribute('cy', '10')
-    expect(emanatingCircle).toHaveAttribute('r', '0.5')
-    expect(emanatingCircle).toHaveAttribute('stroke', COLORS.blue50)
-    expect(emanatingCircle).toHaveAttribute('fill', C_TRANSPARENT)
-  })
-  it('should render a medium sized animating circle that grows', () => {
-    render(
-      <svg>
-        <EmanatingNozzle cx={5} cy={10} />
-      </svg>
-    )
-    const radiusAnimation = screen.getByTestId('radius_animation')
-    expect(radiusAnimation).toHaveAttribute('attributeName', 'r')
-    expect(radiusAnimation).toHaveAttribute('from', '5')
-    expect(radiusAnimation).toHaveAttribute(
-      'to',
-      (SINGLE_CHANNEL_PIPETTE_HEIGHT / 2).toString()
-    )
-    expect(radiusAnimation).toHaveAttribute('begin', '0')
-    expect(radiusAnimation).toHaveAttribute('dur', '1.1')
-    expect(radiusAnimation).toHaveAttribute('calcMode', 'ease-out')
-    expect(radiusAnimation).toHaveAttribute('repeatCount', 'indefinite')
-  })
-  it('should render a medium sized animating circle that fades out', () => {
-    render(
-      <svg>
-        <EmanatingNozzle cx={5} cy={10} />
-      </svg>
-    )
-    const opacityAnimation = screen.getByTestId('opacity_animation')
-    expect(opacityAnimation).toHaveAttribute('attributeName', 'opacity')
-    expect(opacityAnimation).toHaveAttribute('from', '0.7')
-    expect(opacityAnimation).toHaveAttribute('to', '0')
-    expect(opacityAnimation).toHaveAttribute('begin', '0')
-    expect(opacityAnimation).toHaveAttribute('dur', '1.1')
-    expect(opacityAnimation).toHaveAttribute('calcMode', 'linear')
-    expect(opacityAnimation).toHaveAttribute('repeatCount', 'indefinite')
-  })
-})