diff --git a/webviews/src/App.tsx b/webviews/src/App.tsx index b18a0b7..bb2cb66 100644 --- a/webviews/src/App.tsx +++ b/webviews/src/App.tsx @@ -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: diff --git a/webviews/src/StatusCheck.test.tsx b/webviews/src/StatusCheck.test.tsx index 9709b0d..86487ea 100644 --- a/webviews/src/StatusCheck.test.tsx +++ b/webviews/src/StatusCheck.test.tsx @@ -28,21 +28,27 @@ jest.mock('react-icons/vsc', () => ({
PassFilled
+ )), + VscStopCircle: jest.fn(props => ( +
+ StopCircle +
)) })); // 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(); @@ -84,6 +90,15 @@ describe('StatusCheck Component', () => { ); }); + it('renders stopped type with Stop icon', () => { + const { getByTestId } = render(); + 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(); expect(getByTestId('vsc-circle-large')).toBeInTheDocument(); @@ -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 => { diff --git a/webviews/src/StatusCheck.tsx b/webviews/src/StatusCheck.tsx index c7a94d7..05536a8 100644 --- a/webviews/src/StatusCheck.tsx +++ b/webviews/src/StatusCheck.tsx @@ -1,7 +1,7 @@ -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; @@ -9,6 +9,7 @@ export interface StatusCheckProps { } const DEFAULT_COLOR = "var(--vscode-textLink-foreground)"; +const ERROR_COLOR = "var(--vscode-errorForeground)"; export const StatusCheck: React.FC = ({ type, title }: StatusCheckProps) => { switch (type) { @@ -20,6 +21,8 @@ export const StatusCheck: React.FC = ({ type, title }: StatusC return ; case "partial": return ; + case "stopped": + return default: //"missing" return ; }