From 5f095e1cf339eebbda147a02a55aa413730fe864 Mon Sep 17 00:00:00 2001 From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com> Date: Sun, 21 Jul 2024 21:42:02 +0900 Subject: [PATCH] feat: test case detail dialog --- frontend/messages/en.json | 2 + frontend/messages/ja.json | 1 + .../[projectId]/runs/[runId]/RunEditor.tsx | 4 + .../runs/[runId]/TestCaseDetailDialog.tsx | 128 ++++++++++++++---- .../runs/[runId]/TestCaseSelector.tsx | 28 ++-- .../[projectId]/runs/[runId]/page.tsx | 21 +++ frontend/types/run.ts | 13 +- 7 files changed, 138 insertions(+), 59 deletions(-) diff --git a/frontend/messages/en.json b/frontend/messages/en.json index dcb0910..598c61b 100644 --- a/frontend/messages/en.json +++ b/frontend/messages/en.json @@ -252,6 +252,8 @@ "no_cases_found": "No cases found", "are_you_sure_leave": "Are you sure you want to leave the page?", "type": "Type", + "test_detail": "Test detail", + "steps": "Steps", "preconditions": "Preconditions", "expected_result": "Expected result", "details_of_the_step": "Details of the step", diff --git a/frontend/messages/ja.json b/frontend/messages/ja.json index a5c419a..9f4567e 100644 --- a/frontend/messages/ja.json +++ b/frontend/messages/ja.json @@ -254,6 +254,7 @@ "are_you_sure_leave": "ページを離れてもよろしいですか", "type": "タイプ", "test_detail": "テスト詳細", + "steps": "ステップ", "preconditions": "前提条件", "expected_result": "期待結果", "details_of_the_step": "ステップ詳細", diff --git a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx index 7acdab7..098bc4f 100644 --- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx +++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx @@ -39,6 +39,7 @@ import { useTheme } from 'next-themes'; import { useFormGuard } from '@/utils/formGuard'; import { PriorityMessages } from '@/types/priority'; import { RunStatusMessages, TestRunCaseStatusMessages } from '@/types/status'; +import { TestTypeMessages } from '@/types/testType'; const defaultTestRun = { id: 0, @@ -58,6 +59,7 @@ type Props = { runStatusMessages: RunStatusMessages; testRunCaseStatusMessages: TestRunCaseStatusMessages; priorityMessages: PriorityMessages; + testTypeMessages: TestTypeMessages; locale: string; }; @@ -68,6 +70,7 @@ export default function RunEditor({ runStatusMessages, testRunCaseStatusMessages, priorityMessages, + testTypeMessages, locale, }: Props) { const context = useContext(TokenContext); @@ -333,6 +336,7 @@ export default function RunEditor({ messages={messages} testRunCaseStatusMessages={testRunCaseStatusMessages} priorityMessages={priorityMessages} + testTypeMessages={testTypeMessages} /> diff --git a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx index e84553a..61ba36c 100644 --- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx +++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx @@ -1,31 +1,84 @@ -import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react'; +import { useState, useEffect, useContext } from 'react'; +import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Avatar, Textarea } from '@nextui-org/react'; import { testTypes, templates } from '@/config/selection'; import { RunMessages } from '@/types/run'; -import { CaseType } from '@/types/case'; +import { CaseType, StepType } from '@/types/case'; import { PriorityMessages } from '@/types/priority'; import TestCasePriority from '@/components/TestCasePriority'; +import { TokenContext } from '@/utils/TokenProvider'; +import { fetchCase } from '@/utils/caseControl'; +import { TestTypeMessages } from '@/types/testType'; type Props = { isOpen: boolean; - testCase: CaseType; + caseId: number; onCancel: () => void; onChangeStatus: (changeCaseId: number, status: number) => {}; messages: RunMessages; + testTypeMessages: TestTypeMessages; priorityMessages: PriorityMessages; }; -export default function showTestCaseDetailDialog({ +const defaultTestCase = { + id: 0, + title: '', + state: 0, + priority: 0, + type: 0, + automationStatus: 0, + description: '', + template: 0, + preConditions: '', + expectedResults: '', + folderId: 0, +}; + +export default function TestCaseDetailDialog({ isOpen, - testCase, + caseId, onCancel, onChangeStatus, messages, + testTypeMessages, priorityMessages, }: Props) { + const context = useContext(TokenContext); + const [testCase, setTestCase] = useState(defaultTestCase); + + useEffect(() => { + async function fetchDataEffect() { + if (!context.isSignedIn()) { + return; + } + + if (!caseId || caseId <= 0) { + return; + } + + try { + const data = await fetchCase(context.token.access_token, Number(caseId)); + if (data.Steps && data.Steps.length > 0) { + data.Steps.sort((a: StepType, b: StepType) => { + const stepNoA = a.caseSteps.stepNo; + const stepNoB = b.caseSteps.stepNo; + return stepNoA - stepNoB; + }); + } + + setTestCase(data); + } catch (error: any) { + console.error('Error in effect:', error.message); + } + } + + fetchDataEffect(); + }, [context, caseId]); + return ( { onCancel(); }} @@ -48,40 +101,55 @@ export default function showTestCaseDetailDialog({

{messages.type}

-
{messages[testTypes[testCase.type].uid]}
+
{testTypeMessages[testTypes[testCase.type].uid]}
{templates[testCase.template].uid === 'text' ? ( -
-
-

{messages.preconditions}

-
{testCase.preConditions}
+ <> +

{messages.testDetail}

+
+
+

{messages.preconditions}

+
{testCase.preConditions}
+
+
+

{messages.expectedResult}

+
{testCase.expectedResults}
+
- -
-

{messages.expectedResult}

-
{testCase.expectedResults}
-
-
+ ) : ( -
+ <> +

{messages.steps}

{testCase.Steps && - testCase.Steps.map((step, index) => ( - <> -
-

{messages.preconditions}

-
{step.step}
+ testCase.Steps.map((step) => ( +
+ +
+
+