Skip to content

Stories for components #931

New issue
New issue
Open
2 of 15 issues completed
Open
Stories for components#931
2 of 15 issues completed
Labels
frontendIssues related to the frontendgood first issueDenotes an issue ready for a new contributor, according to the "help wanted" guidelines.help wantedDenotes an issue that needs help from a contributor. Must meet "help wanted" guidelines.lfxtesting
@illume

Description

@illume
illume
opened on Feb 2, 2023

Each of the components inside Headlamp need stories made for the different states.

See below for sub issues

  • for easier manual UI testing, where the components are separate from the backend and each other.
  • for automated regression testing of the presentational parts of the components

Where should the stories go?

A good example to look at is src/components/common/ActionButton.

The preferred layout is the folder layout like this:

Component/Component.tsx, main place where the component goes. Named after the component.
Component/index.tsx, This should export things from Component.tsx
Component/Component.stories.tsx, contains the component shown in different states.
Component/__snapshots__ , where the story shot files are.

Presentational VS container (logic) components

See documentation here. In short, the logic should be separated so mainly the component can be tested without dependencies on other things. An example of logic that could be separated is API calls.

Some refactoring is probably needed to implement stories:

  • to place components in a folder, with filenames the same name as the component
  • to separate the presentational "pure" parts

viewing the stories, and running the tests

To view the storybook:

cd frontend
npm install
npm run storybook

To run the tests, and generate the snapshot files (rendered html):

cd frontend
npm install # not needed if you've done it already.
npm run test -- --coverage

You can also run the tests without the interactive test runner like this:

CI=true npm run test -- --coverage

Issues by Category

Critical: Priority Components Needing Tests

These components have low test coverage (under 20%) or specific gaps requiring immediate attention with comprehensive storybooks.

Settings Components

Authentication & Cluster Management

Common Resource Components

Search & Navigation

  • GlobalSearchContent (0% coverage) in frontend/src/components/globalSearch/GlobalSearchContent.tsx - Create GlobalSearchContent.stories.tsx with empty search state, search loading spinner, search results list, no results found, and search error state

Notifications

  • NotificationList (0% coverage) in frontend/src/components/App/Notifications/List/List.tsx - Enhance List.stories.tsx with empty notification list, multiple notifications, notification types (info/warning/error/success), dismiss notification action, and clear all notifications

Medium Coverage Components (20-60%)

These components have moderate test coverage but are missing critical error and loading state tests.

Common Resource Components

  • DeleteButton (42.85% coverage) in frontend/src/components/common/Resource/DeleteButton.tsx - Create DeleteButton.stories.tsx with delete confirmation dialog, delete in progress loading state, delete success feedback, and delete error state with retry option
  • ScaleButton (27.5% coverage) in frontend/src/components/common/Resource/ScaleButton.tsx - Enhance ScaleButton.stories.tsx with scale input form, scale validation for min replicas, scale in progress loading, scale success feedback, and scale error state
  • EditButton (35.71% coverage) in frontend/src/components/common/Resource/EditButton.tsx - Create EditButton.stories.tsx with edit button states, unsaved changes warning, save in progress loading, and save error with error message
  • CreateResourceButton (coverage unknown - estimate 40%) in frontend/src/components/common/CreateResourceButton.tsx - Enhance CreateResourceButton.stories.tsx with button states, resource creation dialog, validation errors, and creation success/failure
  • CopyButton (coverage unknown - estimate 50%) in frontend/src/components/common/Resource/CopyButton.tsx - Enhance CopyButton.stories.tsx with copy success feedback, copy failure error, and clipboard permission denied state
  • ViewButton (coverage unknown - estimate 45%) in frontend/src/components/common/Resource/ViewButton.tsx - Enhance ViewButton.stories.tsx with view dialog opening, loading resource data, and resource load error
  • RestartButton (coverage unknown - estimate 50%) in frontend/src/components/common/Resource/RestartButton.tsx - Enhance RestartButton.stories.tsx with restart confirmation, restart in progress, restart success, and restart failure states
  • RestartMultipleButton (coverage unknown - estimate 40%) in frontend/src/components/common/Resource/RestartMultipleButton.tsx - Enhance RestartMultipleButton.stories.tsx with bulk restart confirmation, progress indicator, and partial failure handling

Search Components

  • GlobalSearch (coverage unknown - estimate 50%) in frontend/src/components/globalSearch/GlobalSearch.tsx - Enhance GlobalSearch.stories.tsx with search input interactions, keyboard shortcuts, search suggestions, and result navigation
  • AdvancedSearch (54.26% coverage) in frontend/src/components/advancedSearch/AdvancedSearch.tsx - Enhance AdvancedSearch.stories.tsx with advanced filter options, filter validation, search execution loading, and search error states
  • SearchSettings (40% coverage) in frontend/src/components/advancedSearch/SearchSettings.tsx - Enhance SearchSettings.stories.tsx with search preferences form, save settings success/error, and reset to defaults

Activity Feed

  • Activity (30.06% coverage) in frontend/src/components/activity/Activity.tsx - Enhance Activity.stories.tsx with different active/inactive activity window states, collapsed vs expanded activity panel, multiple activity views/tabs, and window management interactions

Advanced Search

  • ApiResourcePicker (30.64% coverage) in frontend/src/components/advancedSearch/ApiResourcePicker.tsx - Enhance ApiResourcePicker.stories.tsx with empty API resources list, search/filter behavior, filtered API resources display, and resource selection interactions/callbacks

Plugin Settings

  • PluginSettings (47.43% coverage) in frontend/src/components/App/PluginSettings/PluginSettings.tsx - Enhance PluginSettings.stories.tsx with form submit loading state, form submit success state, form submit error state, validation errors, and plugin enable/disable actions
  • PluginSettingsDetails (27.27% coverage) in frontend/src/components/App/PluginSettings/PluginSettingsDetails.tsx - Enhance PluginSettingsDetails.stories.tsx with plugin details loading spinner, plugin details loaded, plugin loading error, and plugin configuration form

Notifications

  • Notifications (33.33% coverage) in frontend/src/components/App/Notifications/Notifications.tsx - Enhance Notifications.stories.tsx with empty notifications state, loading notifications state, notifications list with various types, and error loading notifications
  • OauthPopup (20% coverage) in frontend/src/components/oidcauth/OauthPopup.tsx - Enhance OauthPopup.stories.tsx with OAuth flow loading state, authentication success, timeout errors, and connection failures

Settings Components

  • ClusterNameEditor (32.87% coverage) in frontend/src/components/App/Settings/ClusterNameEditor.tsx - Enhance ClusterNameEditor.stories.tsx with edit cluster name form, name validation error state, save success feedback, and save error state
  • NumRowsInput (54.23% coverage) in frontend/src/components/App/Settings/NumRowsInput.tsx - Create unit tests or story for input validation, min/max value constraints, and invalid number error state
  • ShortcutsSettings (44.44% coverage) in frontend/src/components/App/Settings/ShortcutsSettings.tsx - Enhance ShortcutsSettings.stories.tsx with shortcut conflict detection, shortcut editing, save shortcuts success/error, and reset to defaults
  • ClusterContextMenu (43.24% coverage) in frontend/src/components/App/Home/ClusterContextMenu.tsx - Add tests for context menu actions, action availability conditions, and action error states

Pod Components

  • PodDebugTerminal (38.05% coverage) in frontend/src/components/pod/PodDebugTerminal.tsx - Enhance PodDebugTerminal.stories.tsx with debug terminal connecting, debug terminal connected, connection establishment error, and debug commands execution
  • PodDebugAction (coverage unknown - estimate 30%) in frontend/src/components/pod/PodDebugAction.tsx - Create PodDebugAction.stories.tsx with debug action button, container selection, debug session starting loading, and debug connection error

Charts & Visualization

  • Charts in node (coverage unknown - estimate 40%) in frontend/src/components/node/Charts.tsx - Create node Charts.stories.tsx with node metrics charts, loading state for metrics, error loading metrics, and empty metrics state
  • Charts in workload (coverage unknown - estimate 40%) in frontend/src/components/workload/Charts.tsx - Create workload Charts.stories.tsx with workload metrics visualization, loading state, error state, and time range selector
  • WorkloadOverview (coverage unknown - estimate 45%) in frontend/src/components/workload/Overview.tsx - Enhance Overview.stories.tsx with workload summary loading, workload metrics display, and error loading workload data
  • ClusterOverview (53.57% coverage) in frontend/src/components/cluster/Overview.tsx - Enhance Overview.stories.tsx with loading states during metrics fetch, cluster health display, and metrics fetch error

High Coverage Components Needing Branch/Scenario Coverage (60%+)

These components have good statement coverage but need additional test scenarios for branches or edge cases.

Settings Components

  • DrawerModeSettings (83.33% branch coverage needs improvement) in frontend/src/components/App/Settings/DrawerModeSettings.tsx - Create DrawerModeSettings.stories.tsx with drawer mode selection error states and preference save failures
  • NodeShellSettings (73.68% coverage) in frontend/src/components/App/Settings/NodeShellSettings.tsx - Enhance NodeShellSettings.stories.tsx with shell configuration errors and validation failures
  • PodDebugSettings (70.83% coverage) in frontend/src/components/App/Settings/PodDebugSettings.tsx - Enhance PodDebugSettings.stories.tsx with debug configuration errors and save failures
  • SettingsButton (66.66% coverage) in frontend/src/components/App/Settings/SettingsButton.tsx - Add tests for button disabled states and click handler edge cases

Cluster & Home Components

  • ClusterTable (75.51% coverage) in frontend/src/components/App/Home/ClusterTable.tsx - Enhance ClusterTable.stories.tsx with cluster table loading, empty clusters list, cluster actions menu, and cluster connection error states
  • RecentClusters (64.1% coverage) in frontend/src/components/App/Home/RecentClusters.tsx - Enhance RecentClusters.stories.tsx with empty recent clusters, loading recent clusters, and recent cluster actions

Very Low Coverage Components (Under 10%)

These components have very low test coverage and should be moved to critical priority after initial triage.

Node Management

  • NodeDetails (9.27% coverage) in frontend/src/components/node/Details.tsx - Create NodeDetails.stories.tsx with node details loading skeleton, node details loaded, metrics loading state, node metrics loaded, and error loading node details
  • NodeShellAction (0% coverage) in frontend/src/components/node/NodeShellAction.tsx - Create NodeShellAction.stories.tsx with shell action button, connection loading state, connection failed error, and shell terminal opened
  • NodeShellTerminal (1.11% coverage) in frontend/src/components/node/NodeShellTerminal.tsx - Create NodeShellTerminal.stories.tsx with terminal connecting state, terminal connected, connection timeout error, terminal disconnected error, and terminal with command historyExpand commentComment on lines R136 to R138Resolved

Project Management

  • ProjectDetails (7.14% coverage) in frontend/src/components/project/ProjectDetails.tsx - Enhance ProjectDetails.stories.tsx with project details loading state for async resource loading, project details loaded, error loading project, and project resources tabs
  • ProjectDeleteButton (0% coverage) in frontend/src/components/project/ProjectDeleteButton.tsx - Create ProjectDeleteButton.stories.tsx with delete button enabled, delete confirmation dialog, delete in progress, and delete error state
  • ProjectDeleteDialog (0% coverage) in frontend/src/components/project/ProjectDeleteDialog.tsx - Create ProjectDeleteDialog.stories.tsx with confirmation dialog with warnings, delete button states, and deletion error feedback
    Expand commentComment on lines R135 to R145Resolved

Resource Glance Components

  • DeploymentGlance (0% coverage) in frontend/src/components/workload/DeploymentGlance.tsx - Create DeploymentGlance.stories.tsx with glance card showing deployment status, loading state, error state, and multiple deployments
  • EndpointsGlance (0% coverage) in frontend/src/components/endpoints/EndpointsGlance.tsx - Create EndpointsGlance.stories.tsx with endpoints overview, loading state, error state, and multiple endpoints
  • HorizontalPodAutoscalerGlance (0% coverage) in frontend/src/components/horizontalPodAutoscaler/HPAGlance.tsx - Create HPAGlance.stories.tsx with HPA metrics display, loading state, error state, and scaling status
  • PodGlance (0% coverage) in frontend/src/components/pod/PodGlance.tsx - Create PodGlance.stories.tsx with pod status overview, loading state, error state, and pod phase indicators
  • ReplicaSetGlance (0% coverage) in frontend/src/components/replicaset/ReplicaSetGlance.tsx - Create ReplicaSetGlance.stories.tsx with replica set status, loading state, error state, and replica counts
  • ServiceGlance (0% coverage) in frontend/src/components/service/ServiceGlance.tsx - Create ServiceGlance.stories.tsx with service overview, loading state, error state, and service endpoints

Common Components Needing Enhancement

  • Dialog (coverage unknown - estimate 60%) in frontend/src/components/common/Dialog.tsx - Enhance Dialog.stories.tsx with modal open/close states, dialog with form content, confirmation dialogs, and error dialogs
  • ConfirmDialog (coverage unknown - estimate 55%) in frontend/src/components/common/ConfirmDialog.tsx - Enhance ConfirmDialog.stories.tsx with confirmation message variants, confirm/cancel actions, and async confirmation with loading
  • ErrorPage (coverage unknown - estimate 50%) in frontend/src/components/common/ErrorPage/ErrorPage.tsx - Enhance ErrorPage.stories.tsx with different error types (404/500/403), error messages, and retry actions
  • LogViewer (coverage unknown - estimate 45%) in frontend/src/components/common/LogViewer.tsx - Enhance LogViewer.stories.tsx with log content display, log filtering, log auto-refresh, and log loading error
  • InnerTable (coverage unknown - estimate 50%) in frontend/src/components/common/InnerTable.tsx - Enhance InnerTable.stories.tsx with table with data, empty table, loading table, and table pagination
  • SimpleTable (coverage unknown - estimate 55%) in frontend/src/components/common/SimpleTable.tsx - Enhance SimpleTable.stories.tsx with simple table layout, sorting, filtering, and empty state
  • NameValueTable (coverage unknown - estimate 60%) in frontend/src/components/common/NameValueTable/NameValueTable.tsx - Enhance NameValueTable.stories.tsx with key-value pairs display, expandable rows, and copy value action

Layout & Navigation

  • Layout (41.89% statements, 15.21% branch coverage) in frontend/src/components/App/Layout.tsx - Enhance Layout.stories.tsx with modal open/close branches, drawer open/close branches, and different layout configurations
  • TopBar (55.55% statements, 53.65% branch coverage) in frontend/src/components/App/TopBar.tsx - Enhance TopBar.stories.tsx with menu dropdown branches, context menu actions, and user menu interactions
  • RouteSwitcher (66.66% statements, 30% branch coverage) in frontend/src/components/App/RouteSwitcher.tsx - Enhance RouteSwitcher.stories.tsx with different route conditions, route guards, and fallback routes
  • NavigationTabs (68.14% coverage) in frontend/src/components/Sidebar/NavigationTabs.tsx - Enhance NavigationTabs.stories.tsx with tab selection, tab badges, disabled tabs, and tab navigation
  • Chooser (58.51% coverage) in frontend/src/components/cluster/Chooser.tsx - Enhance Chooser.stories.tsx with cluster selection dialog, multi-cluster display, cluster search, and cluster selection error

Branch Coverage Issues (Low branch coverage)

These components need additional test scenarios to cover conditional branches.

  • Layout (15.21% branch coverage) in frontend/src/components/App/Layout.tsx - Add tests for modal/drawer conditional branches and different layout states
  • ColorPicker (0% branch coverage) in frontend/src/components/App/Settings/ColorPicker.tsx - Add tests covering all validation branches, custom color branch, and preset color selection branches
  • IconPicker (0% branch coverage) in frontend/src/components/App/Settings/IconPicker.tsx - Add tests covering icon selection branches, search filtering branches, and empty results branches
  • Terminal (1.65% branch coverage) in frontend/src/components/common/Terminal.tsx - Add tests for terminal command branches, connection state branches, and error handling branches

Additional Components Needing Coverage

Dialog & Modal Components

  • UpdatePopup (coverage unknown - estimate 50%) in frontend/src/components/common/ReleaseNotes/UpdatePopup.tsx - Enhance UpdatePopup.stories.tsx with update available notification, update checking, and update error states
  • ReleaseNotesModal (coverage unknown - estimate 50%) in frontend/src/components/common/ReleaseNotes/ReleaseNotesModal.tsx - Enhance ReleaseNotesModal.stories.tsx with release notes content, loading release notes, and release notes fetch error
  • VersionDialog (85.71% coverage) in frontend/src/components/App/VersionDialog.tsx - Enhance VersionDialog.stories.tsx with version information display and update check status

Form & Input Components

  • NamespacesAutocomplete (coverage unknown - estimate 50%) in frontend/src/components/common/NamespacesAutocomplete.tsx - Enhance NamespacesAutocomplete.stories.tsx with namespace suggestions, loading namespaces, empty namespaces, and namespace selection
  • TimezoneSelect (coverage unknown - estimate 50%) in frontend/src/components/common/TimezoneSelect/TimezoneSelect.tsx - Enhance TimezoneSelect.stories.tsx with timezone dropdown, timezone search, and timezone selection

List Components

  • ObjectEventList (coverage unknown - estimate 50%) in frontend/src/components/common/ObjectEventList.tsx - Enhance ObjectEventList.stories.tsx with event list display, loading events, empty events, and event filtering

Resource Map

  • SelectionBreadcrumbs (coverage unknown - estimate 50%) in frontend/src/components/resourceMap/SelectionBreadcrumbs.tsx - Create SelectionBreadcrumbs.stories.tsx with breadcrumb navigation, resource hierarchy, and breadcrumb click actions

Missing Error State Handling

Components that need error boundary wrappers or better error handling patterns:

  • Auth.tsx - Add loading state UI during authentication attempt (currently no visual feedback during promise resolution)
  • KubeConfigLoader.tsx - Add timeout handling for large file parsing (has error state management but no timeout mechanism)
  • OauthPopup.tsx - Add error boundary and comprehensive error state story for OAuth failures
  • PortForward.tsx - Add specific error messages for different failure types (connection refused, port in use, permission denied)
  • Terminal.tsx - Add reconnection logic and comprehensive error state for connection failures
  • Activity.tsx - Add loading skeleton pattern (currently no loading indicator)
  • ApiResourcePicker.tsx - Add loading skeleton pattern (currently no loading indicator)
  • GlobalSearchContent.tsx - Add loading state (currently 0% coverage)
  • NodeDetails.tsx - Add loading skeleton pattern (currently no loading indicator)
  • ProjectDetails.tsx - Add loading skeleton pattern for async operations (currently no loading indicator)
  • All Glance components - Add error state patterns (currently 0% coverage on error handling)

Additional Kubernetes Resource Components

Role-Based Access Control (RBAC)

  • RoleBindingDetails (0% coverage) in frontend/src/components/role/BindingDetails.tsx - Create BindingDetails.stories.tsx with role binding details display, subjects list, role reference, and loading/error states
  • RoleBindingList (0% coverage) in frontend/src/components/role/BindingList.tsx - Create BindingList.stories.tsx with role bindings table, filtering by namespace, empty bindings list, and loading/error states
  • RoleDetails (0% coverage) in frontend/src/components/role/Details.tsx - Create RoleDetails.stories.tsx with role permissions display, rules table, resource access details, and loading/error states
  • RoleList (0% coverage) in frontend/src/components/role/List.tsx - Create RoleList.stories.tsx with roles table, cluster roles vs namespace roles, filtering, and loading/error states

Storage Components

  • StorageClassDetails (coverage unknown - estimate 50%) in frontend/src/components/storage/ClassDetails.tsx - Enhance ClassDetails.stories.tsx with storage class parameters, provisioner details, reclaim policy, and volume binding mode
  • VolumeDetails (coverage unknown - estimate 50%) in frontend/src/components/storage/VolumeDetails.tsx - Enhance VolumeDetails.stories.tsx with volume status, capacity information, access modes, and volume claim binding

Network Components

  • EndpointDetails (coverage unknown - estimate 50%) in frontend/src/components/endpoints/EndpointDetails.tsx - Enhance EndpointDetails.stories.tsx with endpoint subsets, addresses and ports, loading state, and connection error
  • EndpointSliceDetails (coverage unknown - estimate 50%) in frontend/src/components/endpointSlices/EndpointSliceDetails.tsx - Enhance EndpointSliceDetails.stories.tsx with endpoint slice information, address types, and port mappings

Workload Components

  • DaemonSetList (coverage unknown - estimate 50%) in frontend/src/components/daemonset/List.tsx - Enhance DaemonSetList.stories.tsx with daemon set table, desired vs current pods, node selector display, and update strategy
  • DeploymentList (coverage unknown - estimate 50%) in frontend/src/components/deployments/List.tsx - Enhance DeploymentList.stories.tsx with deployment table, replica status, deployment strategies, and rollout status
  • StatefulSetDetails (coverage unknown - estimate 50%) in frontend/src/components/statefulset/Details.tsx - Enhance StatefulSetDetails.stories.tsx with stateful set configuration, persistent volume claims, update strategy, and pod management
  • ReplicaSetList (coverage unknown - estimate 50%) in frontend/src/components/replicaset/List.tsx - Enhance ReplicaSetList.stories.tsx with replica set table, owner references, replica counts, and pod template
  • JobList (coverage unknown - estimate 50%) in frontend/src/components/job/JobList.tsx - Enhance JobList.stories.tsx with job table, completion status, parallelism configuration, and job duration

Gateway API Components

  • GatewayDetails (coverage unknown - estimate 50%) in frontend/src/components/gateway/GatewayDetails.tsx - Enhance GatewayDetails.stories.tsx with gateway configuration, listeners, addresses, and gateway status
  • HTTPRouteDetails (coverage unknown - estimate 50%) in frontend/src/components/gateway/HTTPRouteDetails.tsx - Enhance HTTPRouteDetails.stories.tsx with route rules, hostname matches, path matching, and backend references
  • GRPCRouteDetails (coverage unknown - estimate 50%) in frontend/src/components/gateway/GRPCRouteDetails.tsx - Enhance GRPCRouteDetails.stories.tsx with gRPC route rules, service matching, and backend configuration

Policy & Configuration

  • NetworkPolicyDetails (coverage unknown - estimate 50%) in frontend/src/components/networkpolicy/Details.tsx - Enhance NetworkPolicyDetails.stories.tsx with policy rules, ingress/egress rules, pod selector, and namespace selector
  • LimitRangeDetails (coverage unknown - estimate 50%) in frontend/src/components/limitRange/Details.tsx - Enhance LimitRangeDetails.stories.tsx with resource limits, default limits, and limit types
  • ResourceQuotaDetails (coverage unknown - estimate 50%) in frontend/src/components/resourceQuota/resourceQuotaDetails.tsx - Enhance resourceQuotaDetails.stories.tsx with quota limits, used resources, and quota scope
  • PodDisruptionBudgetDetails (coverage unknown - estimate 50%) in frontend/src/components/podDisruptionBudget/pdbDetails.tsx - Enhance pdbDetails.stories.tsx with disruption policy, min available, max unavailable, and current status

Security & Admission

  • MutatingWebhookConfigDetails (coverage unknown - estimate 50%) in frontend/src/components/webhookconfiguration/MutatingWebhookConfigDetails.tsx - Enhance MutatingWebhookConfigDetails.stories.tsx with webhook rules, client configuration, admission policy, and failure policy
  • ValidatingWebhookConfigDetails (coverage unknown - estimate 50%) in frontend/src/components/webhookconfiguration/ValidatingWebhookConfigDetails.tsx - Enhance ValidatingWebhookConfigDetails.stories.tsx with validation rules, webhook configuration, match policy, and timeout configuration
  • PriorityClassDetails (coverage unknown - estimate 50%) in frontend/src/components/priorityClass/priorityClassDetails.tsx - Enhance priorityClassDetails.stories.tsx with priority value, global default flag, preemption policy, and description

Autoscaling Components

  • HPADetails (coverage unknown - estimate 50%) in frontend/src/components/horizontalPodAutoscaler/HPADetails.tsx - Enhance HPADetails.stories.tsx with scaling metrics, current/desired replicas, scaling policy, and metric targets
  • VPADetails (coverage unknown - estimate 50%) in frontend/src/components/verticalPodAutoscaler/VPADetails.tsx - Enhance VPADetails.stories.tsx with resource recommendations, update policy, target reference, and recommendation status

Configuration & Secrets

  • ConfigMapDetails (coverage unknown - estimate 50%) in frontend/src/components/configmap/Details.tsx - Enhance ConfigMapDetails.stories.tsx with config data display, binary data handling, immutable flag, and data size limits
  • SecretDetails (coverage unknown - estimate 50%) in frontend/src/components/secret/Details.tsx - Enhance SecretDetails.stories.tsx with secret data (masked), secret type, immutable flag, and secret usage in pods

Service & Networking

  • ServiceDetails (coverage unknown - estimate 50%) in frontend/src/components/service/ServiceDetails.tsx - Enhance ServiceDetails.stories.tsx with service type (ClusterIP/NodePort/LoadBalancer), port configuration, selector, and endpoint status
  • IngressDetails (coverage unknown - estimate 50%) in frontend/src/components/ingress/Details.tsx - Enhance IngressDetails.stories.tsx with ingress rules, TLS configuration, backend services, and ingress class

Testing Recommendations

Priority 1 (Critical - Week 1)

Focus on components with under 20% coverage that have significant user interaction:

  • ColorPicker.tsx - Color validation and selection
  • Auth.tsx - Authentication flow with errors
  • KubeConfigLoader.tsx - File loading with errors and timeouts
  • Notifications.tsx - Notification states

Priority 2 (High - Week 2)

Components with critical operations that need error handling:

  • DeleteMultipleButton.tsx - Batch operations with partial failures
  • ScaleButton.tsx - Validation and error states
  • ApiResourcePicker.tsx - Loading and error states
  • Activity.tsx - Loading and empty states

Priority 3 (Medium - Week 3-4)

Advanced features and terminal components:

  • NodeShellTerminal.tsx - Connection states and errors
  • PodDebugTerminal.tsx - Debug session states
  • PortForward.tsx - Port forwarding workflow
  • ProjectDetails.tsx - Project management flows

Priority 4 (Low - Ongoing)

Resource glance components and remaining coverage:

  • All *Glance.tsx components - Quick overview cards
  • Branch coverage improvements for Layout, TopBar, RouteSwitcher

Components that need stories

There's a number of components that still don't have any stories written for them.

Please write in the issue if you want to start on one, and then tick it off here when it's merged in.

Components that need stories improving

Some stories test only one possible state. These stories need improving.

How can you find these ones that need more states?

If you run make frontend-test from the root of the repo you'll see it prints out some code coverage.
cd frontend && npm run test -- --coverage

From that you could see if there's any more major code paths that might need covering with more story states.
(There's a html report in coverage/index.html as well with more details)

Sub-issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    frontendIssues related to the frontendgood first issueDenotes an issue ready for a new contributor, according to the "help wanted" guidelines.help wantedDenotes an issue that needs help from a contributor. Must meet "help wanted" guidelines.lfxtesting

    Type

    No type

    Projects

    Headlamp Release Plan / Roadmap

    Status

    Queued

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions