test(review-rating): screenshot tests

packages/review-rating/src/__tests__/ReviewRating.screenshots.test.tsx

@@ -0,0 +1,94 @@
+import {
+  createStorybookUrl,
+  setupScreenshotTesting,
+} from '../../../screenshotUtils';
+
+const packageName = 'review-rating';
+
+const scores = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+const clip = { x: 0, y: 0, width: 500, height: 200 };
+// the svg "donut" renders slightly different at its edges on different devices. the blur gets around that
+const blur = 2;
+
+const screenshotTesting = setupScreenshotTesting({
+  it,
+  beforeAll,
+  afterAll,
+  expect,
+});
+
+describe(
+  'ReviewRating variants size=XS',
+  screenshotTesting({
+    cases: scores.map(score => [
+      'sprite',
+      createStorybookUrl({
+        packageName,
+        knobs: {
+          score,
+          size: 'XS',
+        },
+      }),
+    ]),
+    screenshotOpts: {
+      clip,
+      animations: 'disabled',
+    },
+    matchImageSnapshotOptions: { blur },
+  }),
+);
+
+describe(
+  'ReviewRating variants size=S',
+  screenshotTesting({
+    cases: scores.map(score => [
+      'sprite',
+      createStorybookUrl({
+        packageName,
+        knobs: {
+          score,
+          size: 'S',
+        },
+      }),
+    ]),
+    screenshotOpts: { clip, animations: 'disabled' },
+    matchImageSnapshotOptions: { blur },
+  }),
+);
+
+describe(
+  'ReviewRating variants size=M',
+  screenshotTesting({
+    cases: scores.map(score => [
+      'sprite',
+      createStorybookUrl({
+        packageName,
+        knobs: {
+          score,
+          size: 'M',
+        },
+      }),
+    ]),
+    screenshotOpts: { clip, animations: 'disabled' },
+    matchImageSnapshotOptions: { blur },
+  }),
+);
+
+describe(
+  'ReviewRating variants size=L',
+  screenshotTesting({
+    cases: scores.map(score => [
+      'sprite',
+      createStorybookUrl({
+        packageName,
+        knobs: {
+          score,
+          size: 'L',
+        },
+      }),
+    ]),
+    screenshotOpts: { clip, animations: 'disabled' },
+    matchImageSnapshotOptions: { blur },
+  }),
+);

packages/screenshotUtils/createStorybookUrl.ts

@@ -13,7 +13,8 @@ export function createStorybookUrl({
     .reduce((acc, knobName) => `${acc};${knobName}:${knobs[knobName]}`, '')
     .substring(1);
 
-  const componentPath = `-${packageName}--${moduleName || packageName}`;
+  const noHyphenName = packageName ? packageName.replace(/-/g, '') : '';
+  const componentPath = `-${noHyphenName}--${moduleName || packageName}`;
   const component = componentPath.split('--').pop() || '';
 
   return `${url}?id=components-${