Skip to content
This repository was archived by the owner on Mar 14, 2025. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion webviews/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ function App() {
case ServerStatus.installing:
return "installing";
case ServerStatus.stopped:
return "partial";
return "stopped";
case ServerStatus.started:
return "complete";
case ServerStatus.missing:
Expand Down
34 changes: 25 additions & 9 deletions webviews/src/StatusCheck.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,27 @@ jest.mock('react-icons/vsc', () => ({
<div data-testid="vsc-pass-filled" title={props.title}>
PassFilled
</div>
)),
VscStopCircle: jest.fn(props => (
<div data-testid="vsc-stop-circle" title={props.title}>
StopCircle
</div>
))
}));

// Import the mocked modules
const {
VscArrowCircleDown,
VscCircleLarge,
VscCircleLargeFilled,
VscPass,
VscPassFilled
const {
VscArrowCircleDown,
VscCircleLarge,
VscCircleLargeFilled,
VscPass,
VscPassFilled,
VscStopCircle
} = jest.requireMock('react-icons/vsc');

describe('StatusCheck Component', () => {
const defaultColor = "var(--vscode-textLink-foreground)";

const errorColor = "var(--vscode-errorForeground)";
beforeEach(() => {
// Clear mock calls before each test
jest.clearAllMocks();
Expand Down Expand Up @@ -84,6 +90,15 @@ describe('StatusCheck Component', () => {
);
});

it('renders stopped type with Stop icon', () => {
const { getByTestId } = render(<StatusCheck type="stopped" />);
expect(getByTestId('vsc-stop-circle')).toBeInTheDocument();
expect(VscStopCircle).toHaveBeenCalledWith(
expect.objectContaining({ color: errorColor }),
expect.any(Object)
);
});

it('renders missing type with CircleLarge icon', () => {
const { getByTestId } = render(<StatusCheck type="missing" />);
expect(getByTestId('vsc-circle-large')).toBeInTheDocument();
Expand All @@ -104,13 +119,14 @@ describe('StatusCheck Component', () => {
});

it('handles all possible status values', () => {
const statusValues: (StatusValue | null)[] = [null, 'complete', 'installing', 'partial', 'missing'];
const statusValues: (StatusValue | null)[] = [null, 'complete', 'installing', 'partial', 'missing', 'stopped'];
const testIds = {
null: 'vsc-circle-large-filled',
complete: 'vsc-pass-filled',
installing: 'vsc-arrow-circle-down',
partial: 'vsc-pass',
missing: 'vsc-circle-large'
missing: 'vsc-circle-large',
stopped: 'vsc-stop-circle'
};

statusValues.forEach(status => {
Expand Down
7 changes: 5 additions & 2 deletions webviews/src/StatusCheck.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { VscArrowCircleDown, VscCircleLarge, VscCircleLargeFilled, VscPass, VscPassFilled } from "react-icons/vsc";
import { VscArrowCircleDown, VscCircleLarge, VscCircleLargeFilled, VscPass, VscPassFilled, VscStopCircle } from "react-icons/vsc";


export type StatusValue = 'complete' | 'installing' | 'partial' | 'missing';
export type StatusValue = 'complete' | 'installing' | 'partial' | 'missing' | 'stopped';

export interface StatusCheckProps {
type: StatusValue | null;
title?: string;
}

const DEFAULT_COLOR = "var(--vscode-textLink-foreground)";
const ERROR_COLOR = "var(--vscode-errorForeground)";

export const StatusCheck: React.FC<StatusCheckProps> = ({ type, title }: StatusCheckProps) => {
switch (type) {
Expand All @@ -20,6 +21,8 @@ export const StatusCheck: React.FC<StatusCheckProps> = ({ type, title }: StatusC
return <VscArrowCircleDown color={DEFAULT_COLOR} title={title} />;
case "partial":
return <VscPass color={DEFAULT_COLOR} title={title} />;
case "stopped":
return <VscStopCircle color={ERROR_COLOR} title={title} />
default: //"missing"
return <VscCircleLarge title={title} />;
}
Expand Down
Loading