TestAddon: Refactor UI & add config options #29662
Conversation
| <TestProvider key={state.id} data-module-id={state.id}> | ||
| {Render ? <Render {...state} /> : <LegacyRender {...state} />} | ||
| <LegacyRender {...state} /> |
There was a problem hiding this comment.
@ghengeveld Do you think we could drop the legacy render completely?
There was a problem hiding this comment.
It's still being used by VTA right now. I haven't updated the VTA yet and people will be using the old version for a while.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
8 file(s) reviewed, 10 comment(s)
Edit PR Review Bot Settings | Greptile
| } else if (state.failed && !errorMessage) { | ||
| description = ''; |
There was a problem hiding this comment.
logic: Setting description to empty string when failed without error message could lead to confusing UI state. Consider showing a default failure message instead.
| @@ -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); | |||
There was a problem hiding this comment.
logic: delta calculation will be negative for future dates, but Math.abs is only used later - could cause incorrect time displays
| 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); |
There was a problem hiding this comment.
style: initial state should be typed as useState<string | null>(null)
| import { TestProviderRender } from './TestProviderRender'; | ||
|
|
||
| type Story = StoryObj<typeof TestProviderRender>; | ||
| const managerContext: any = { |
There was a problem hiding this comment.
style: Avoid using 'any' type for managerContext. Consider creating a proper type definition based on ManagerContext requirements.
| import { Title } from './components/Title'; | ||
| import { ADDON_ID, PANEL_ID, TEST_PROVIDER_ID } from './constants'; | ||
| import type { TestResult } from './node/reporter'; | ||
| import { ADDON_ID, type Details, PANEL_ID, TEST_PROVIDER_ID } from './constants'; | ||
|
|
||
| const statusMap: Record<any['status'], API_StatusValue> = { |
There was a problem hiding this comment.
style: statusMap uses 'any' type for status key which could be more strictly typed
| @@ -4,7 +4,8 @@ type DateNow = number; | |||
|
|
|||
| export type TestProviderId = Addon_TestProviderType['id']; | |||
| export type TestProviderConfig = Addon_TestProviderType; | |||
| export type TestProviderState = Addon_TestProviderState; | |||
| export type TestProviderState<Details extends { [key: string]: any } = NonNullable<unknown>> = | |||
| Addon_TestProviderState<Details>; | |||
|
|
|||
| export type TestProviders = Record<TestProviderId, TestProviderConfig & TestProviderState>; | |||
There was a problem hiding this comment.
logic: TestProviders type needs to be updated to use the generic parameter, should be Record<TestProviderId, TestProviderConfig & TestProviderState>
ndelangen
changed the title
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 29f1b77. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
…config be passed to emit
Package BenchmarksCommit: No significant changes detected, all good. 👏 |
…hing watchMode event
…bookjs/storybook into norbert/testmodule-options
…bookjs/storybook into norbert/testmodule-options
What I did
configproperty to theTestProviderStateisEditingstate to addon test's renderChecklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>Greptile Summary
Here's my concise summary of the pull request changes:
Refactors the Test addon UI components to improve organization and maintainability, with a focus on separating concerns and enhancing the test results display.
DescriptionandTestProviderRendercomponents to handle test state rendering and UI interactionsmanager.tsxinto dedicated component files for better separation of concernsRelativeTimecomponent with improved time formatting usingIntl.RelativeTimeFormatTestingModuleTestProviderStategeneric to support flexible Details types across components