From c132164cb407f8dc2e25f4eca68623d671ef9879 Mon Sep 17 00:00:00 2001 From: axel7083 <42176370+axel7083@users.noreply.github.com> Date: Tue, 30 Apr 2024 10:40:33 +0200 Subject: [PATCH] chore(LoadingIconButton): adding unit tests (#7014) test(LoadingIconButton): ensuring expected behaviour Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> --- .../src/lib/ui/LoadingIconButton.spec.ts | 186 ++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 packages/renderer/src/lib/ui/LoadingIconButton.spec.ts diff --git a/packages/renderer/src/lib/ui/LoadingIconButton.spec.ts b/packages/renderer/src/lib/ui/LoadingIconButton.spec.ts new file mode 100644 index 00000000000..315a30528ef --- /dev/null +++ b/packages/renderer/src/lib/ui/LoadingIconButton.spec.ts @@ -0,0 +1,186 @@ +/********************************************************************** + * Copyright (C) 2024 Red Hat, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + ***********************************************************************/ +import '@testing-library/jest-dom/vitest'; + +import { faPlayCircle } from '@fortawesome/free-solid-svg-icons'; +import { render, screen } from '@testing-library/svelte'; +import { expect, test, vi } from 'vitest'; + +import type { ILoadingStatus } from '/@/lib/preferences/Util'; +import LoadingIconButton from '/@/lib/ui/LoadingIconButton.svelte'; +import { capitalize } from '/@/lib/ui/Util'; + +type TestScenario = { + name: string; + action: string; + color: 'primary' | 'secondary' | undefined; + state: ILoadingStatus | undefined; + expected: { disabled: boolean; classes: string[] }; +}; + +const EXPECT_ENABLE = { + disabled: false, + classes: ['text-white', 'hover:text-gray-700'], +}; + +const EXPECT_DISABLE = { + disabled: true, + classes: ['text-gray-900', 'cursor-not-allowed'], +}; + +function assert(action: string, expected: { disabled: boolean; classes: string[] }): void { + // Get the button + const button: HTMLButtonElement = screen.getByRole('button', { name: capitalize(action) }); + + // Ensure it match the expected states + expect(button.disabled).toBe(expected.disabled); + + // Ensure the classes + expected.classes.forEach(mClass => { + expect(button.classList).toContain(mClass); + }); +} + +test.each(['start', 'restart', 'stop', 'delete', 'update'])('action $action in progress should be disabled', action => { + render(LoadingIconButton, { + action: action, + state: { + inProgress: true, + status: 'unknown', + }, + leftPosition: '', + icon: faPlayCircle, + clickAction: vi.fn(), + }); + + assert(action, EXPECT_DISABLE); +}); + +test.each([ + // Start action + { + name: 'start action with stopped status should be enable', + action: 'start', + state: { + status: 'stopped', + inProgress: false, + }, + expected: EXPECT_ENABLE, + }, + { + name: 'start action with failed status should be enable', + action: 'start', + state: { + status: 'failed', + inProgress: false, + }, + expected: EXPECT_ENABLE, + }, + { + name: 'primary enable should have purple colors', + color: 'primary', + action: 'start', + state: { + status: 'stopped', + inProgress: false, + }, + expected: { + disabled: false, + classes: ['text-purple-600', 'hover:text-purple-500'], + }, + }, + { + name: 'primary disable should have disabled classes', + color: 'primary', + action: 'start', + state: { + status: 'started', + inProgress: false, + }, + expected: EXPECT_DISABLE, + }, + // Restart action + { + name: 'restart action with stopped status should be disabled', + action: 'restart', + state: { + status: 'stopped', + inProgress: false, + }, + expected: EXPECT_DISABLE, + }, + // Stop action + { + name: 'stop action in started status should be enable', + action: 'stop', + state: { + status: 'started', + inProgress: false, + }, + expected: EXPECT_ENABLE, + }, + // Delete action + { + name: 'delete action in stopped stopped should be enable', + action: 'delete', + state: { + status: 'stopped', + inProgress: false, + }, + expected: EXPECT_ENABLE, + }, + { + name: 'delete action in unknown stopped should be enable', + action: 'delete', + state: { + status: 'unknown', + inProgress: false, + }, + expected: EXPECT_ENABLE, + }, + { + name: 'delete action in started stopped should be disabled', + action: 'delete', + state: { + status: 'started', + inProgress: false, + }, + expected: EXPECT_DISABLE, + }, + // Update action + { + name: 'update action in unknown status should be disabled', + action: 'update', + state: { + status: 'unknown', + inProgress: false, + }, + expected: EXPECT_DISABLE, + }, +] as TestScenario[])('$name', ({ action, color, state, expected }) => { + render(LoadingIconButton, { + action: action, + state: state, + color: color, + leftPosition: '', + icon: faPlayCircle, + clickAction: vi.fn(), + }); + + assert(action, expected); +});