@bundle-stats/ui 4.2.2 → 4.2.3-beta.1

package/src/components/bundle-assets/__tests__/add-metric-report-asset-row-data.ts

@@ -0,0 +1,235 @@
+import { addMetricReportAssetRowData } from '../bundle-assets.utils';
+
+describe('BundleAssets / addMetricReportAssetRowData', () => {
+  test('should add data to a single run', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: false,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredictive: false,
+      runs: [
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+      ],
+    });
+  });
+
+  test('should add data when baseline run is null', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          null,
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: false,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredictive: false,
+      runs: [
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+        null,
+      ],
+    });
+  });
+
+  test('should add data when current run is null', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: true,
+        runs: [
+          null,
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: true,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredictive: false,
+      runs: [
+        null,
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+      ],
+    });
+  });
+
+  test('should add data when baseline is not null', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: false,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredictive: false,
+      runs: [
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+      ],
+    });
+  });
+
+  test('should flag as changed when only meta changes', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: false,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: true,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: 'removed',
+      isNotPredictive: false,
+      runs: [
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: false,
+        },
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+      ],
+    });
+  });
+});

package/src/components/bundle-assets/__tests__/get-asset-meta-status.ts

@@ -0,0 +1,21 @@
+import { getAssetMetaStatus } from '../bundle-assets.utils';
+
+describe('BundleAssets / getAssetMetaStatus', () => {
+  test('should return true when all runs meta values are truthy', () => {
+    expect(getAssetMetaStatus([true])).toBeTruthy();
+    expect(getAssetMetaStatus([true, true])).toBeTruthy();
+  });
+
+  test('should return false when all runs meta values are falsy', () => {
+    expect(getAssetMetaStatus([false])).toBeFalsy();
+    expect(getAssetMetaStatus([false, false])).toBeFalsy();
+  });
+
+  test('should return "added" when current is truthy and baseline is falsy', () => {
+    expect(getAssetMetaStatus([true, false])).toEqual('added');
+  });
+
+  test('should return "removed" when current is false and baseline is truthy', () => {
+    expect(getAssetMetaStatus([false, true])).toEqual('removed');
+  });
+});

package/src/components/bundle-assets/__tests__/get-is-not-predictive.ts

@@ -0,0 +1,119 @@
+import { getIsNotPredictive } from '../bundle-assets.utils';
+
+describe('BundleAssets / getIsNotPredictive', () => {
+  test('should return false by default', () => {
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toBeFalsy();
+
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          null,
+        ],
+      }),
+    ).toBeFalsy();
+
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toBeFalsy();
+
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.def456.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 11,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toBeFalsy();
+  });
+
+  test('should return true when not predictive', () => {
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 11,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toBeTruthy();
+  });
+});

package/src/components/bundle-assets/bundle-assets.i18n.ts

@@ -0,0 +1,10 @@
+export const SEARCH_PLACEHOLDER = 'Search by asset path';
+export const CHANGED = 'Changed';
+export const ASSET_TYPE = 'Asset type';
+export const FILE_TYPE = 'File type';
+export const CHUNKS = 'Chunks';
+export const NO_CHUNK = 'No chunk';
+export const ENTRY = 'Entry';
+export const INITIAL = 'Initial';
+export const CHUNK = 'Chunk';
+export const OTHER = 'Other';

package/src/components/bundle-assets/bundle-assets.module.css

@@ -1,89 +1,21 @@
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
-}
-
-.assetName {}
-
-.notPredictive {
-  margin-right: var(--space-xxsmall);
-  display: inline-block;
-  width: var(--space-small);
-  height: var(--space-small);
-  vertical-align: middle;
-}
-
-.notPredictiveIcon {
-  color: var(--color-warning-dark);
-  vertical-align: top;
-}
-
-.assetNameTags {
-  display: inline;
-  margin-right: var(--space-xxxsmall);
-}
-
-.assetNameTags:empty {
-  display: none;
-}
-
-.assetNameTag {
-  vertical-align: middle;
-}
-
-.assetNameTag + .assetNameTag {
-  margin-left: 2px;
 }
 
-.assetNameTagEntry {
-  background: var(--color-info-light);
+.root .assetName:hover,
+.root .assetName:active,
+.root .assetName:focus {
+  text-decoration: none;
 }
 
-.assetNameTagEntry::before {
-  content: 'e';
-}
-
-.assetNameTagInitial {
-  background: var(--color-info-light);
-}
-
-.assetNameTagInitial::before {
-  content: 'i';
-}
-
-.assetNameTagChunk::before {
-  content: 'c';
-}
-
-.assetNameText {
-  display: inline;
-  vertical-align: middle;
-}
-
-/* Tooltip not predictive */
-.tooltipNotPredictive {
-  text-align: left;
-}
-
-.tooltipNotPredictiveText {
-  margin-bottom: var(--space-xxxsmall);
-}
-
-.tooltipNotPredictiveName {
-  display: block;
-  line-height: var(--line-height-heading);
+.root .assetName:hover .assetNameText,
+.root .assetName:active .assetNameText,
+.root .assetName:focus .assetNameText {
+  text-decoration: underline;
 }
 
 .search {
   margin: 0;
   width: 100%;
 }
-
-.assetInfo {
-  min-width: 280px;
-}

package/src/components/bundle-assets/bundle-assets.stories.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+  ASSET_ENTRY_TYPE,
+  ASSET_FILE_TYPE,
+  ASSET_FILTERS,
+  FILE_TYPE_JS,
+  createJobs,
+} from '@bundle-stats/utils';
+import merge from 'lodash/merge';
+import set from 'lodash/set';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+/* eslint-disable import/no-relative-packages */
+import baselineStats from '../../../../../fixtures/webpack-stats.baseline.json';
+import currentStats from '../../../../../fixtures/webpack-stats.current.json';
+/* eslint-enable import/no-relative-packages */
+import { getWrapperDecorator } from '../../stories';
+import { BundleAssets } from '.';
+
+const JOBS = createJobs([{ webpack: currentStats }, { webpack: baselineStats }]);
+const [currentJob, baselineJob] = JOBS;
+const setState = (params) => console.info(params);
+
+const meta: Meta<typeof BundleAssets> = {
+  title: 'Components/BundleAssets',
+  component: BundleAssets,
+  decorators: [getWrapperDecorator()],
+  args: {
+    setState: action('STATE'),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BundleAssets>;
+
+export const Default: Story = {
+  args: {
+    jobs: [baselineJob],
+  },
+};
+
+export const MultipleJobs: Story = {
+  args: {
+    jobs: JOBS,
+  },
+};
+
+export const CustomFilters: Story = {
+  args: {
+    jobs: JOBS,
+    filters: {
+      [`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`]: true,
+      [`${ASSET_FILE_TYPE}.${FILE_TYPE_JS}`]: true,
+    },
+  },
+};
+
+export const EmptyBaseline: Story = {
+  args: {
+    jobs: createJobs([{ webpack: currentStats }, {}]),
+  },
+};
+
+export const NoAssets: Story = {
+  args: {
+    jobs: JOBS.map((job) => set(merge({}, job), 'metrics.webpack.assets', {})),
+  },
+};
+
+export const EmptyFilteredData: Story = {
+  args: {
+    jobs: [
+      set(merge({}, currentJob), 'metrics.webpack.assets', { 'main.js': { value: 100 } }),
+      set(merge({}, baselineJob), 'metrics.webpack.assets', { 'main.js': { value: 100 } }),
+    ],
+    search: 'vendors',
+  },
+};
+
+export const NotPredictive: Story = {
+  args: {
+    jobs: [
+      set(merge({}, currentJob), 'metrics.webpack.assets', {
+        'static/js/not-predictive.js': {
+          name: 'static/js/not-predictive.93191a1.js',
+          value: 2989,
+        },
+      }),
+      set(merge({}, baselineJob), 'metrics.webpack.assets', {
+        'static/js/not-predictive.js': {
+          name: 'static/js/not-predictive.93191a1.js',
+          value: 2988,
+        },
+      }),
+    ],
+  },
+};