Merge pull request #31141 from storybookjs/yann/rename-local-tests

Core: Rename local tests to interactions

Author: yannbf

code/addons/vitest/src/components/TestProviderRender.tsx

@@ -124,7 +124,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
     ComponentProps<typeof TestStatusIcon>['status'],
     string,
   ] = fatalError
-    ? ['critical', 'Local tests crashed']
+    ? ['critical', 'Component tests crashed']
     : componentTestStatusValueToStoryIds['status-value:error'].length > 0
       ? ['negative', 'Component tests failed']
       : isRunning
@@ -137,7 +137,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
     ComponentProps<typeof TestStatusIcon>['status'],
     string,
   ] = fatalError
-    ? ['critical', 'Local tests crashed']
+    ? ['critical', 'Component tests crashed']
     : a11yStatusValueToStoryIds['status-value:error'].length > 0
       ? ['negative', 'Accessibility tests failed']
       : a11yStatusValueToStoryIds['status-value:warning'].length > 0
@@ -153,7 +153,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
       <Heading>
         <Info>
           {entry ? (
-            <Title id="testing-module-title">Run local tests</Title>
+            <Title id="testing-module-title">Run component tests</Title>
           ) : (
             <Title
               id="testing-module-title"
@@ -164,12 +164,12 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
               }
             >
               {currentRun.unhandledErrors.length === 1
-                ? 'Local tests completed with an error'
+                ? 'Component tests completed with an error'
                 : currentRun.unhandledErrors.length > 1
-                  ? 'Local tests completed with errors'
+                  ? 'Component tests completed with errors'
                   : fatalError
-                    ? 'Local tests didn’t complete'
-                    : 'Run local tests'}
+                    ? 'Component tests didn’t complete'
+                    : 'Run component tests'}
             </Title>
           )}
           <Description
@@ -264,7 +264,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
         <Row>
           <ListItem
             as="label"
-            title="Component tests"
+            title="Interactions"
             icon={entry ? null : <Checkbox type="checkbox" checked disabled />}
           />
           <WithTooltip
@@ -336,7 +336,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
                           : currentRun.coverageSummary
                             ? 'View coverage report'
                             : fatalError
-                              ? 'Local tests crashed'
+                              ? 'Component tests crashed'
                               : 'Run tests to calculate coverage'
                   }
                 />

code/core/src/component-testing/components/EmptyState.tsx

@@ -42,10 +42,10 @@ export const Empty = () => {
   return (
     <div>
       <EmptyTabContent
-        title="Component testing"
+        title="Interactions"
         description={
           <>
-            Component tests allow you to verify the functional aspects of UIs. Write a play function
+            Interactions allow you to verify the functional aspects of UIs. Write a play function
             for your story and you&apos;ll see it run here.
           </>
         }

code/core/src/component-testing/components/Interaction.tsx

@@ -229,6 +229,8 @@ export const Interaction = ({
           <RowLabel aria-label="Render step" call={call} disabled>
             {call.status === CallStates.ERROR ? (
               <StatusIcon status={CallStates.ERROR} />
+            ) : call.status === CallStates.ACTIVE ? (
+              <StatusIcon status={CallStates.ACTIVE} />
             ) : (
               <RenderIcon />
             )}
@@ -240,7 +242,7 @@ export const Interaction = ({
             <WithTooltip
               trigger="hover"
               hasChrome={false}
-              tooltip={<Note note="Render is the first step of all component tests" />}
+              tooltip={<Note note="Render is the first step of all interactions" />}
             >
               <RenderLockIcon />
             </WithTooltip>

code/core/src/component-testing/components/TestDiscrepancyMessage.tsx

@@ -48,7 +48,7 @@ export const TestDiscrepancyMessage = ({ browserTestStatus }: TestDiscrepancyMes
 
   return (
     <Wrapper>
-      This component test passed in {passed}, but the tests failed in {failed}.{' '}
+      This interaction test passed in {passed}, but the tests failed in {failed}.{' '}
       <Link href={docsUrl} target="_blank" withArrow>
         Learn what could cause this
       </Link>

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts

@@ -114,7 +114,7 @@ test.describe("component testing", () => {
       "Test status: success"
     );
     await expect(sbPage.panelContent()).toContainText(
-      /This component test passed in the CLI, but the tests failed in this browser/
+      /This interaction test passed in the CLI, but the tests failed in this browser/
     );
 
     // Assert discrepancy: CLI fail + Browser pass
@@ -127,7 +127,7 @@ test.describe("component testing", () => {
       "Test status: error"
     );
     await expect(sbPage.panelContent()).toContainText(
-      /This component test passed in this browser, but the tests failed in the CLI/
+      /This interaction test passed in this browser, but the tests failed in the CLI/
     );
   });
 
@@ -147,7 +147,7 @@ test.describe("component testing", () => {
       .getByRole("button", { name: "test" });
     await expect(storyElement).toBeVisible({ timeout: 30000 });
 
-    await expect(page.locator('#testing-module-title')).toHaveText('Run local tests');
+    await expect(page.locator('#testing-module-title')).toHaveText('Run component tests');
 
     const testingModuleDescription = await page.locator('#testing-module-description');