WEB-2079 add tests

src/__private_stories__/skin-components-story.tsx

@@ -51,6 +51,7 @@ import {
     Placeholder,
     NegativeBox,
     IconInvoicePlanFileRegular,
+    Meter,
 } from '..';
 import avatarImg from '../__stories__/images/avatar.jpg';
 import usingVrImg from '../__stories__/images/using-vr.jpg';
@@ -315,6 +316,13 @@ export const Default: StoryComponent<Args> = ({variant}) => {
                             steps={['First', 'Second', 'Third', 'Fourth', 'Fifth']}
                         />
 
+                        {/** Meter */}
+                        <Inline space={16}>
+                            <Meter width={200} type="linear" values={[30, 30, 0]} />
+                            <Meter width={200} type="angular" values={[30, 30, 0]} />
+                            <Meter width={200} type="circular" values={[30, 30, 0]} />
+                        </Inline>
+
                         {/** TextLink */}
                         <TextLink onPress={() => {}}>This is a text link</TextLink>
                     </ComponentsGroup>

src/__screenshot_tests__/meter-screenshot-test.tsx

@@ -0,0 +1,44 @@
+import {openStoryPage, screen} from '../test-utils';
+
+test.each`
+    values                 | type          | themeVariant
+    ${[0]}                 | ${'linear'}   | ${'default'}
+    ${[0]}                 | ${'circular'} | ${'default'}
+    ${[0]}                 | ${'angular'}  | ${'default'}
+    ${[100]}               | ${'linear'}   | ${'default'}
+    ${[100]}               | ${'circular'} | ${'default'}
+    ${[100]}               | ${'angular'}  | ${'default'}
+    ${[33, 33]}            | ${'linear'}   | ${'default'}
+    ${[33, 33]}            | ${'circular'} | ${'default'}
+    ${[33, 33]}            | ${'angular'}  | ${'default'}
+    ${[33, 33]}            | ${'linear'}   | ${'inverse'}
+    ${[33, 33]}            | ${'circular'} | ${'inverse'}
+    ${[33, 33]}            | ${'angular'}  | ${'inverse'}
+    ${[33, 33]}            | ${'linear'}   | ${'media'}
+    ${[33, 33]}            | ${'circular'} | ${'media'}
+    ${[33, 33]}            | ${'angular'}  | ${'media'}
+    ${[20, 20, 20, 20, 0]} | ${'linear'}   | ${'default'}
+    ${[20, 20, 20, 20, 0]} | ${'circular'} | ${'default'}
+    ${[20, 20, 20, 20, 0]} | ${'angular'}  | ${'default'}
+`('Meter $themeVariant $type $values', async ({themeVariant, values, type}) => {
+    await openStoryPage({
+        id: 'components-meters--meter-story',
+        args: {
+            themeVariant,
+            width: 200,
+            type,
+            valuesCount: values.length,
+            ...values.reduce(
+                (acc: Array<number>, value: number, index: number) => ({
+                    ...acc,
+                    [`value${index + 1}`]: value,
+                }),
+                {}
+            ),
+        },
+    });
+
+    const stepper = await screen.findByTestId('Meter');
+    const image = await stepper.screenshot();
+    expect(image).toMatchImageSnapshot();
+});

src/meter.tsx

@@ -7,9 +7,10 @@ import bezier from 'cubic-bezier';
 import {getPrefixedDataAttributes} from './utils/dom';
 import {useThemeVariant} from './theme-variant-context';
 import {useElementDimensions, useTheme} from './hooks';
+import {meterPercentageLabel, meterSegmentLabel} from './text-tokens';
+import {isRunningAcceptanceTest} from './utils/platform';
 
 import type {DataAttributes} from './utils/types';
-import {meterPercentageLabel, meterSegmentLabel} from './text-tokens';
 
 const VIEW_BOX_WIDTH = 100;
 const CENTER_X = VIEW_BOX_WIDTH / 2;
@@ -157,6 +158,19 @@ const MeterComponent = ({
     const radius = type === TYPE_LINEAR ? 0 : CENTER_X - strokeWidth / 2;
     const separation = SEPARATION_PX * scaleFactor;
 
+    const id = React.useId();
+    const markerCurrentId = `marker-current-${id}`;
+    const markerStartId = `marker-start-${id}`;
+    const maskLastSegmentId = `mask-last-segment-${id}`;
+    const maskBarTrackId = `mask-bar-track-${id}`;
+
+    const shouldAnimate = React.useMemo(() => {
+        return (
+            window.matchMedia(`(prefers-reduced-motion: reduce)`).matches !== true &&
+            !isRunningAcceptanceTest()
+        );
+    }, []);
+
     const maxValue =
         type === TYPE_LINEAR
             ? VIEW_BOX_WIDTH - lineCapRadius * 2
@@ -220,7 +234,6 @@ const MeterComponent = ({
     }, [widthProp, containerWidth]);
 
     React.useEffect(() => {
-        const shouldAnimate = window.matchMedia(`(prefers-reduced-motion: reduce)`).matches !== true;
         let raf: number;
         const start = performance.now();
         const end = start + ANIMATION_DURATION_MS + ANIMATION_DELAY_MS * (values.length - 1);
@@ -242,7 +255,7 @@ const MeterComponent = ({
             // animation was cancelled, snapshot current values
             initialValuesRef.current = currentSegments.map((s) => s.end - s.start);
         };
-    }, [radius, values, type, reverse]);
+    }, [radius, values, type, reverse, shouldAnimate]);
 
     const getX = React.useCallback(
         (value: number) =>
@@ -295,7 +308,7 @@ const MeterComponent = ({
                     {hasRoundLineCaps && (
                         <>
                             <marker
-                                id="marker-current"
+                                id={markerCurrentId}
                                 viewBox="0 0 10 10"
                                 markerWidth={1}
                                 markerHeight={1}
@@ -310,7 +323,7 @@ const MeterComponent = ({
                                 />
                             </marker>
                             <marker
-                                id="marker-start"
+                                id={markerStartId}
                                 viewBox="0 0 10 10"
                                 markerWidth={1}
                                 markerHeight={1}
@@ -326,7 +339,7 @@ const MeterComponent = ({
                             </marker>
                         </>
                     )}
-                    <mask id="mask-bar-track" maskUnits="userSpaceOnUse">
+                    <mask id={maskBarTrackId} maskUnits="userSpaceOnUse">
                         <rect x={0} y={0} width={VIEW_BOX_WIDTH} height={viewBoxHeight} fill="white" />
                         {firstNonZeroIndex >= 0 && lastSegment && (
                             <>
@@ -382,7 +395,7 @@ const MeterComponent = ({
                         )}
                     </mask>
                     {type === TYPE_CIRCULAR && (
-                        <mask id="mask-last-segment" maskUnits="userSpaceOnUse">
+                        <mask id={maskLastSegmentId} maskUnits="userSpaceOnUse">
                             <rect x={0} y={0} width={VIEW_BOX_WIDTH} height={viewBoxHeight} fill="white" />
                             <path
                                 stroke="black"
@@ -414,7 +427,7 @@ const MeterComponent = ({
                         largeArchFlag: 1,
                         radius,
                     })}
-                    mask="url(#mask-bar-track)"
+                    mask={`url("#${maskBarTrackId}")`}
                 />
 
                 {firstNonZeroIndex >= 0 &&
@@ -445,10 +458,12 @@ const MeterComponent = ({
                                 fill="none"
                                 strokeWidth={strokeWidth}
                                 strokeLinecap="butt"
-                                markerEnd={isLast ? 'url(#marker-current)' : undefined}
-                                markerStart={shouldIncludeStartMarker ? 'url(#marker-start)' : undefined}
+                                markerEnd={isLast ? `url(#${markerCurrentId})` : undefined}
+                                markerStart={shouldIncludeStartMarker ? `url(#${markerStartId})` : undefined}
                                 mask={
-                                    isLast && type === TYPE_CIRCULAR ? 'url("#mask-last-segment")' : undefined
+                                    isLast && type === TYPE_CIRCULAR
+                                        ? `url("#${maskLastSegmentId}")`
+                                        : undefined
                                 }
                                 d={createPath({
                                     x1: getX(start),