Release: Prerelease 8.5.0-alpha.11

.circleci/config.yml

@@ -165,17 +165,15 @@ jobs:
           root: .
           paths:
             - code/node_modules
+            - code/addons
             - scripts/node_modules
             - code/bench
             - code/examples
-            - code/node_modules
-            - code/addons
             - code/frameworks
             - code/deprecated
             - code/lib
             - code/core
             - code/builders
-            - code/ui
             - code/renderers
             - code/presets
             - .verdaccio-cache
@@ -269,16 +267,30 @@ jobs:
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
-      - attach_workspace:
-          at: .
       - nx/set-shas:
           main-branch-name: "next"
           workflow-name: << pipeline.parameters.workflow >>
+      - run:
+          name: install in scripts
+          command: |
+            cd scripts
+            yarn install
+      - run:
+          name: install in code
+          command: |
+            cd code
+            yarn install
+      - run:
+          name: Compile
+          command: |
+            yarn task --task compile --start-from=compile --no-link --debug
       - run:
           name: Check
           command: |
-            yarn task --task compile --start-from=auto --no-link --debug
-            yarn task --task check --start-from=auto --no-link --debug
+            yarn task --task check --start-from=check --no-link --debug
+      - run:
+          name: Ensure no changes pending
+          command: |
             git diff --exit-code
       - report-workflow-on-failure
       - cancel-workflow-on-failure
@@ -807,9 +819,7 @@ workflows:
       - bench-packages:
           requires:
             - build
-      - check:
-          requires:
-            - build
+      - check
       - unit-tests:
           requires:
             - build
@@ -885,9 +895,7 @@ workflows:
       - bench-packages:
           requires:
             - build
-      - check:
-          requires:
-            - build
+      - check
       - unit-tests:
           requires:
             - build
@@ -964,9 +972,7 @@ workflows:
       - bench-packages:
           requires:
             - build
-      - check:
-          requires:
-            - build
+      - check
       - unit-tests:
           requires:
             - build

CHANGELOG.prerelease.md

@@ -1,3 +1,11 @@
+## 8.5.0-alpha.11
+
+- Core + Addon Test: Refactor test API and fix total test count - [#29656](https://github.com/storybookjs/storybook/pull/29656), thanks @ghengeveld!
+- Core: Emit deprecated `TESTING_MODULE_RUN_ALL_REQUEST` for backward compatibility - [#29711](https://github.com/storybookjs/storybook/pull/29711), thanks @ghengeveld!
+- Frameworks: Add Vite 6 support - [#29710](https://github.com/storybookjs/storybook/pull/29710), thanks @yannbf!
+- TestAddon: Refactor UI & add config options - [#29662](https://github.com/storybookjs/storybook/pull/29662), thanks @ndelangen!
+- Vue: Fix `vue-component-meta` docgen HMR not working - [#29518](https://github.com/storybookjs/storybook/pull/29518), thanks @IonianPlayboy!
+
 ## 8.5.0-alpha.10
 
 - Addon Test: Use pathe for better windows support - [#29676](https://github.com/storybookjs/storybook/pull/29676), thanks @yannbf!

code/addons/test/src/components/ContextMenuItem.tsx

@@ -7,7 +7,7 @@ import React, {
   useState,
 } from 'react';
 
-import { Button, type ListItem } from 'storybook/internal/components';
+import { Button, ListItem } from 'storybook/internal/components';
 import { useStorybookApi } from 'storybook/internal/manager-api';
 import { useTheme } from 'storybook/internal/theming';
 import { type API_HashEntry, type Addon_TestProviderState } from 'storybook/internal/types';
@@ -23,8 +23,7 @@ export const ContextMenuItem: FC<{
   state: Addon_TestProviderState<{
     testResults: TestResult[];
   }>;
-  ListItem: typeof ListItem;
-}> = ({ context, state, ListItem }) => {
+}> = ({ context, state }) => {
   const api = useStorybookApi();
   const [isDisabled, setDisabled] = useState(false);
 

code/addons/test/src/components/Description.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Link as LinkComponent } from 'storybook/internal/components';
+import { type TestProviderConfig, type TestProviderState } from 'storybook/internal/core-events';
+import { styled } from 'storybook/internal/theming';
+
+import { RelativeTime } from './RelativeTime';
+
+export const DescriptionStyle = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s1,
+  color: theme.barTextColor,
+}));
+
+export function Description({
+  errorMessage,
+  setIsModalOpen,
+  state,
+}: {
+  state: TestProviderConfig & TestProviderState;
+  errorMessage: string;
+  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  let description: string | React.ReactNode = 'Not run';
+
+  if (state.running) {
+    description = state.progress
+      ? `Testing... ${state.progress.numPassedTests}/${state.progress.numTotalTests}`
+      : 'Starting...';
+  } else if (state.failed && !errorMessage) {
+    description = '';
+  } else if (state.crashed || (state.failed && errorMessage)) {
+    description = (
+      <>
+        <LinkComponent
+          isButton
+          onClick={() => {
+            setIsModalOpen(true);
+          }}
+        >
+          {state.error?.name || 'View full error'}
+        </LinkComponent>
+      </>
+    );
+  } else if (state.progress?.finishedAt) {
+    description = (
+      <RelativeTime
+        timestamp={new Date(state.progress.finishedAt)}
+        testCount={state.progress.numTotalTests}
+      />
+    );
+  } else if (state.watching) {
+    description = 'Watching for file changes';
+  }
+  return <DescriptionStyle id="testing-module-description">{description}</DescriptionStyle>;
+}

code/addons/test/src/components/RelativeTime.tsx

@@ -1,6 +1,23 @@
 import { useEffect, useState } from 'react';
 
-import { getRelativeTimeString } from '../manager';
+export function getRelativeTimeString(date: Date): string {
+  const delta = Math.round((date.getTime() - Date.now()) / 1000);
+  const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];
+  const units: Intl.RelativeTimeFormatUnit[] = [
+    'second',
+    'minute',
+    'hour',
+    'day',
+    'week',
+    'month',
+    'year',
+  ];
+
+  const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(delta));
+  const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
+  const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+  return rtf.format(Math.floor(delta / divisor), units[unitIndex]);
+}
 
 export const RelativeTime = ({ timestamp, testCount }: { timestamp: Date; testCount: number }) => {
   const [relativeTimeString, setRelativeTimeString] = useState(null);

code/addons/test/src/components/Subnav.tsx

@@ -41,7 +41,7 @@ const StyledSubnav = styled.nav(({ theme }) => ({
   paddingLeft: 15,
 }));
 
-export interface SubnavProps {
+interface SubnavProps {
   controls: Controls;
   controlStates: ControlStates;
   status: Call['status'];
@@ -64,7 +64,7 @@ const Note = styled(TooltipNote)(({ theme }) => ({
   fontFamily: theme.typography.fonts.base,
 }));
 
-export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
   color: theme.textMutedColor,
   margin: '0 3px',
 }));

code/addons/test/src/components/TestProviderRender.stories.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+
+import type { TestProviderConfig, TestProviderState } from 'storybook/internal/core-events';
+import { ManagerContext } from 'storybook/internal/manager-api';
+import { styled } from 'storybook/internal/theming';
+import { Addon_TypesEnum } from 'storybook/internal/types';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn, within } from '@storybook/test';
+
+import type { Config, Details } from '../constants';
+import { TestProviderRender } from './TestProviderRender';
+
+type Story = StoryObj<typeof TestProviderRender>;
+const managerContext: any = {
+  state: {
+    testProviders: {
+      'test-provider-id': {
+        id: 'test-provider-id',
+        name: 'Test Provider',
+        type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+      },
+    },
+  },
+  api: {
+    getDocsUrl: fn().mockName('api::getDocsUrl'),
+    emit: fn().mockName('api::emit'),
+    updateTestProviderState: fn().mockName('api::updateTestProviderState'),
+  },
+};
+
+const config: TestProviderConfig = {
+  id: 'test-provider-id',
+  name: 'Test Provider',
+  type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+  runnable: true,
+  watchable: true,
+};
+
+const baseState: TestProviderState<Details, Config> = {
+  cancellable: true,
+  cancelling: false,
+  crashed: false,
+  error: null,
+  failed: false,
+  running: false,
+  watching: false,
+  config: {
+    a11y: false,
+    coverage: false,
+  },
+  details: {
+    testResults: [
+      {
+        endTime: 0,
+        startTime: 0,
+        status: 'passed',
+        message: 'All tests passed',
+        results: [
+          {
+            storyId: 'story-id',
+            status: 'success',
+            duration: 100,
+            testRunId: 'test-run-id',
+          },
+        ],
+      },
+    ],
+  },
+};
+
+const Content = styled.div({
+  padding: '12px 6px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
+});
+
+export default {
+  title: 'TestProviderRender',
+  component: TestProviderRender,
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+    },
+    api: managerContext.api,
+  },
+  decorators: [
+    (StoryFn) => (
+      <Content>
+        <StoryFn />
+      </Content>
+    ),
+    (StoryFn) => (
+      <ManagerContext.Provider value={managerContext}>
+        <StoryFn />
+      </ManagerContext.Provider>
+    ),
+  ],
+} as Meta<typeof TestProviderRender>;
+
+export const Default: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+    },
+  },
+};
+
+export const Running: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      running: true,
+    },
+  },
+};
+
+export const EnableA11y: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      details: {
+        testResults: [],
+      },
+      config: {
+        a11y: true,
+        coverage: false,
+      },
+    },
+  },
+};
+
+export const EnableEditing: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      config: {
+        a11y: true,
+        coverage: false,
+      },
+      details: {
+        testResults: [],
+      },
+    },
+  },
+
+  play: async ({ canvasElement }) => {
+    const screen = within(canvasElement);
+
+    screen.getByLabelText('Edit').click();
+  },
+};