test(ui): Summary - add budgets case

relative-ci · Nov 28, 2021 · 2716865 · 2716865
1 parent 872c275
commit 2716865
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 11 deletions.
diff --git a/packages/ui/src/components/summary/__snapshots__/summary.stories.storyshot b/packages/ui/src/components/summary/__snapshots__/summary.stories.storyshot
@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components/Summary budgets 1`] = `
+<div>
+  <Component />
+  <IconSprite
+    height="16"
+    style={
+      Object {
+        "height": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+    width="16"
+  />
+</div>
+`;
+
+exports[`Storyshots Components/Summary custom keys 1`] = `
+<div>
+  <Component />
+  <IconSprite
+    height="16"
+    style={
+      Object {
+        "height": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+    width="16"
+  />
+</div>
+`;
+
+exports[`Storyshots Components/Summary default 1`] = `
+<div>
+  <Component />
+  <IconSprite
+    height="16"
+    style={
+      Object {
+        "height": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+    width="16"
+  />
+</div>
+`;
+
+exports[`Storyshots Components/Summary loading 1`] = `
+<div>
+  <Component />
+  <IconSprite
+    height="16"
+    style={
+      Object {
+        "height": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+    width="16"
+  />
+</div>
+`;
+
+exports[`Storyshots Components/Summary single run 1`] = `
+<div>
+  <Component />
+  <IconSprite
+    height="16"
+    style={
+      Object {
+        "height": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+    width="16"
+  />
+</div>
+`;
+
+exports[`Storyshots Components/Summary with link 1`] = `
+<div>
+  <Component />
+  <IconSprite
+    height="16"
+    style={
+      Object {
+        "height": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+    width="16"
+  />
+</div>
+`;
diff --git a/packages/ui/src/components/summary/summary.jsx b/packages/ui/src/components/summary/summary.jsx
@@ -38,14 +38,16 @@ export const Summary = ({
   size,
   keys,
   data,
+  budgets,
   loading,
   showSummaryItemDelta,
   summaryItemLink: SummaryItemCustomLink,
 }) => (
   <Box outline className={cx(css.root, className)}>
     <FlexStack className={css.items}>
-      {Array.from(METRIC_COMPONENT_LINKS).filter(([metricId]) => keys.includes(metricId)).map(
-        ([metricId, metricOptions]) => (
+      {Array.from(METRIC_COMPONENT_LINKS)
+        .filter(([metricId]) => keys.includes(metricId))
+        .map(([metricId, metricOptions]) => (
           <SummaryItem
             as={CustomSummaryItem}
             className={css.item}
@@ -55,19 +57,20 @@ export const Summary = ({
             key={metricId}
             id={metricId}
             data={get(data, metricId)}
+            budget={get(budgets, metricId)}
             loading={loading}
             showMetricDescription
             showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
           />
-        )
-      )}
+        ))}
     </FlexStack>
   </Box>
 );
 
 Summary.defaultProps = {
   className: '',
   data: null,
+  budgets: null,
   loading: false,
   size: '',
   keys: METRICS_WEBPACK_GENERAL,
@@ -79,12 +82,8 @@ Summary.propTypes = {
   className: PropTypes.string,
   size: PropTypes.string,
   keys: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      baseline: PropTypes.number,
-      current: PropTypes.number,
-    }),
-  }),
+  data: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  budgets: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   loading: PropTypes.bool,
   showSummaryItemDelta: PropTypes.bool,
   summaryItemLink: PropTypes.elementType,

diff --git a/packages/ui/src/components/summary/summary.stories.jsx b/packages/ui/src/components/summary/summary.stories.jsx
@@ -16,8 +16,34 @@ const stories = storiesOf('Components/Summary', module);
 stories.addDecorator(getWrapperDecorator());
 
 stories.add('default', () => <Summary data={MULTIPLE_JOBS[0].summary} />);
+stories.add('budgets', () => (
+  <Summary
+    data={MULTIPLE_JOBS[0].summary}
+    budgets={{
+      webpack: {
+        totalSizeByTypeALL: {
+          value: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL,
+          budget: 1024 * 1024,
+          overBudget: false,
+        },
+        totalInitialSizeJS: {
+          value: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS,
+          budget: 512 * 1024,
+          overBudget: true,
+        },
+        totalInitialSizeCSS: {
+          value: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS,
+          budget: 50 * 1024,
+          overBudget: false,
+        },
+      },
+    }}
+  />
+));
 
-stories.add('custom keys', () => <Summary keys={METRICS_WEBPACK_ASSETS} data={MULTIPLE_JOBS[0].summary} />);
+stories.add('custom keys', () => (
+  <Summary keys={METRICS_WEBPACK_ASSETS} data={MULTIPLE_JOBS[0].summary} />
+));
 
 stories.add('loading', () => <Summary loading />);