yellowadmin/pp-tcms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create test run editor

Browse Source
This commit is contained in:
Takeshi Kimata
2024-04-13 00:18:11 +09:00
parent 5f9d849ee1
commit 4b2608d176
10 changed files with 238 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/caseControl.ts
View File

@@ -1,5 +1,6 @@
import Config from "@/config/config";
const apiServer = Config.apiServer;
import { CaseType } from "@/types/case";
/**
* fetch case
@@ -76,7 +77,7 @@ async function fetchDeleteStep(stepId: number, parentCaseId: number) {
}
/**
* Update folder
* Update case
*/
async function updateCase(updateCaseData: CaseType) {
const fetchOptions = {

182
frontend/app/projects/[projectId]/runs/RunDialog.tsx
View File

@@ -1,182 +0,0 @@
"use client";
import React from "react";
import { useState, useEffect } from "react";
import {
Button,
Input,
Textarea,
Select,
SelectItem,
Modal,
ModalContent,
ModalHeader,
ModalBody,
ModalFooter,
} from "@nextui-org/react";
import { testRunStatus } from "@/config/selection";
import { RunType } from "@/types/run";
const defaultTestRun = {
id: 0,
name: "",
configurations: 0,
description: "",
state: 0,
projectId: 0,
};
type Props = {
isOpen: boolean;
editingRun: RunType;
onCancel: () => void;
onSubmit: (testRun: RunType) => void;
};
export default function RunDialog({
isOpen,
editingRun,
onCancel,
onSubmit,
}: Props) {
const [testRun, setTestRun] = useState<RunType>(
editingRun ? editingRun : defaultTestRun
);
const [isNameInvalid, setIsNameInvalid] = useState<boolean>(false);
// const [runName, setRunName] = useState({
// text: editingRun ? editingRun.name : "",
// isValid: false,
// errorMessage: "",
// });
// const [runDetail, setRunDetail] = useState({
// text: editingRun ? editingRun.detail : "",
// isValid: false,
// errorMessage: "",
// });
// useEffect(() => {
// if (editingRun) {
// setRunName({
// ...runName,
// text: editingRun.name,
// });
// setRunDetail({
// ...runDetail,
// text: editingRun.detail ? editingRun.detail : "",
// });
// } else {
// setRunName({
// ...runName,
// text: "",
// });
// setRunDetail({
// ...runDetail,
// text: "",
// });
// }
// }, [editingRun]);
// const clear = () => {
// setRunName({
// isValid: false,
// text: "",
// errorMessage: "",
// });
// setRunDetail({
// isValid: false,
// text: "",
// errorMessage: "",
// });
// };
const validate = () => {
// do validation
onSubmit(testRun);
// clear();
};
return (
<Modal
isOpen={isOpen}
size="3xl"
onOpenChange={() => {
onCancel();
}}
>
<ModalContent>
<ModalHeader className="flex flex-col gap-1">Run</ModalHeader>
<ModalBody>
<div className="container mx-auto">
<div className="flex flex-wrap-mx-4">
<div className="w-1/2 px-4">
<Input
size="sm"
type="text"
variant="bordered"
label="Run Name"
value={testRun.name}
isInvalid={isNameInvalid}
errorMessage={isNameInvalid ? "please enter name" : ""}
onChange={(e) => {
setTestRun({ ...testRun, name: e.target.value });
}}
className="mt-3"
/>
<Textarea
size="sm"
variant="bordered"
label="Run Detail"
value={testRun.description}
onValueChange={(changeValue) => {
setTestRun({ ...testRun, description: changeValue });
}}
className="mt-3"
/>
<Select
size="sm"
variant="bordered"
selectedKeys={[testRunStatus[testRun.state].uid]}
onSelectionChange={(e) => {
const selectedUid = e.anchorKey;
const index = testRunStatus.findIndex(
(template) => template.uid === selectedUid
);
setTestRun({ ...testRun, state: index });
}}
label="template"
className="mt-3 max-w-xs"
>
{testRunStatus.map((state, index) => (
<SelectItem key={state.uid} value={index}>
{state.name}
</SelectItem>
))}
</Select>
</div>
<div className="w-1/2 px-4">
<Button color="primary" onPress={onCancel}>
Select Test Cases
</Button>
</div>
</div>
</div>
</ModalBody>
<ModalFooter>
<Button variant="light" onPress={onCancel}>
Close
</Button>
<Button color="primary" onPress={validate}>
{editingRun ? "Update" : "Create"}
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
}

65
frontend/app/projects/[projectId]/runs/RunsPage.tsx
View File

@@ -2,15 +2,8 @@
import { useEffect, useState } from "react";
import { Button } from "@nextui-org/react";
import { Plus } from "lucide-react";
import { RunType } from "@/types/run";
import RunsTable from "./RunsTable";
import RunDialog from "./RunDialog";
import {
fetchRuns,
createRun,
updateRun,
deleteRun,
} from "./runsControl";
import { fetchRuns, createRun, deleteRun } from "./runsControl";
type Props = {
projectId: string;
@@ -32,42 +25,15 @@ export default function RunsPage({ projectId }: Props) {
fetchDataEffect();
}, []);
// dialog
const [isRunDialogOpen, setIsRunDialogOpen] = useState(false);
const [editingRun, setEditingRun] = useState<RunType | null>(
null
);
const openDialogForCreate = () => {
setIsRunDialogOpen(true);
setEditingRun(null);
};
const closeDialog = () => {
setIsRunDialogOpen(false);
setEditingRun(null);
};
const onSubmit = async (name: string, detail: string) => {
if (editingRun) {
const updatedRun = await updateRun(
editingRun.id,
name,
detail
);
const updatedRuns = runs.map((run) =>
run.id === updatedRun.id ? updatedRun : run
);
setRuns(updatedRuns);
} else {
const newRun = await createRun(name, detail);
setRuns([...runs, newRun]);
const onCreateClick = async () => {
try {
const newRun = await createRun(projectId);
const updateRuns = [...runs];
updateRuns.push(newRun);
setRuns(updateRuns);
} catch (error) {
console.error("Error deleting run:", error);
}
closeDialog();
};
const onEditClick = (run: RunType) => {
setEditingRun(run);
setIsRunDialogOpen(true);
};
const onDeleteClick = async (runId: number) => {
@@ -80,7 +46,7 @@ export default function RunsPage({ projectId }: Props) {
};
return (
<div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
<div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
<div className="w-full p-3 flex items-center justify-between">
<h3 className="font-bold">Runs</h3>
<div>
@@ -88,7 +54,7 @@ export default function RunsPage({ projectId }: Props) {
startContent={<Plus size={16} />}
size="sm"
color="primary"
onClick={openDialogForCreate}
onClick={onCreateClick}
>
New Run
</Button>
@@ -96,17 +62,10 @@ export default function RunsPage({ projectId }: Props) {
</div>
<RunsTable
projectId={projectId}
runs={runs}
onEditRun={onEditClick}
onDeleteRun={onDeleteClick}
/>
<RunDialog
isOpen={isRunDialogOpen}
editingRun={editingRun}
onCancel={closeDialog}
onSubmit={onSubmit}
/>
</div>
);
}

9
frontend/app/projects/[projectId]/runs/RunsTable.tsx
View File

@@ -27,12 +27,12 @@ const headerColumns = [
];
type Props = {
projectId: string;
runs: RunType[];
onEditRun: (run: RunType) => void;
onDeleteRun: (runId: number) => void;
};
export default function RunsTable({ runs, onEditRun, onDeleteRun }: Props) {
export default function RunsTable({ projectId, runs, onDeleteRun }: Props) {
const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
column: "id",
direction: "ascending",
@@ -62,7 +62,7 @@ export default function RunsTable({ runs, onEditRun, onDeleteRun }: Props) {
return (
<Link
underline="hover"
href={`/runs/${run.id}/home`}
href={`/projects/${projectId}/runs/${run.id}`}
className="text-blue-500"
>
{cellValue}
@@ -87,9 +87,6 @@ export default function RunsTable({ runs, onEditRun, onDeleteRun }: Props) {
</Button>
</DropdownTrigger>
<DropdownMenu aria-label="run actions">
<DropdownItem onClick={() => onEditRun(run)}>
Edit run
</DropdownItem>
<DropdownItem
className="text-danger"
onClick={() => onDeleteRun(run.id)}

144
frontend/app/projects/[projectId]/runs/[runId]/RunEditor.tsx Normal file
View File

@@ -0,0 +1,144 @@
"use client";
import React from "react";
import { useState, useEffect } from "react";
import {
Button,
Input,
Textarea,
Select,
SelectItem,
Tooltip,
} from "@nextui-org/react";
import { useRouter } from "next/navigation";
import { Save, ArrowLeft, Plus } from "lucide-react";
import { testRunStatus } from "@/config/selection";
import { RunType } from "@/types/run";
import { fetchRun, updateRun } from "../runsControl";
const defaultTestRun = {
id: 0,
title: "",
configurations: 0,
description: "",
state: 0,
projectId: 0,
};
type Props = {
projectId: string;
runId: string;
};
export default function RunEditor({ projectId, runId }: Props) {
const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
const [isTitleInvalid, setIsTitleInvalid] = useState<boolean>(false);
const [isUpdating, setIsUpdating] = useState<boolean>(false);
const router = useRouter();
useEffect(() => {
async function fetchDataEffect() {
try {
const data = await fetchRun(runId);
setTestRun(data);
} catch (error) {
console.error("Error in effect:", error.message);
}
}
fetchDataEffect();
}, []);
return (
<>
<div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
<div className="flex items-center">
<Tooltip content="Back to runs" placement="left">
<Button
isIconOnly
size="sm"
className="rounded-full bg-neutral-50 dark:bg-neutral-600"
onPress={() => router.push(`/projects/${projectId}/runs`)}
>
<ArrowLeft size={16} />
</Button>
</Tooltip>
<h3 className="font-bold ms-2">{testRun.title}</h3>
</div>
<Button
startContent={<Save size={16} />}
size="sm"
color="primary"
isLoading={isUpdating}
onPress={async () => {
setIsUpdating(true);
await updateRun(testRun);
setIsUpdating(false);
}}
>
{isUpdating ? "Updating..." : "Update"}
</Button>
</div>
<div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
<Input
size="sm"
type="text"
variant="bordered"
label="Title"
value={testRun.title}
isInvalid={isTitleInvalid}
errorMessage={isTitleInvalid ? "please enter title" : ""}
onChange={(e) => {
setTestRun({ ...testRun, title: e.target.value });
}}
className="mt-3"
/>
<Button
startContent={<Plus size={16} />}
size="sm"
color="primary"
onPress={async () => {}}
className="mt-3"
>
Select test case
</Button>
<Textarea
size="sm"
variant="bordered"
label="Description"
placeholder="Test run description"
value={testRun.description}
onValueChange={(changeValue) => {
setTestRun({ ...testRun, description: changeValue });
}}
className="mt-3"
/>
<div>
<Select
size="sm"
variant="bordered"
selectedKeys={[testRunStatus[testRun.state].uid]}
onSelectionChange={(e) => {
const selectedUid = e.anchorKey;
const index = testRunStatus.findIndex(
(template) => template.uid === selectedUid
);
setTestRun({ ...testRun, state: index });
}}
label="template"
className="mt-3 max-w-xs"
>
{testRunStatus.map((state, index) => (
<SelectItem key={state.uid} value={index}>
{state.name}
</SelectItem>
))}
</Select>
</div>
</div>
</>
);
}

9
frontend/app/projects/[projectId]/runs/[runId]/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
import RunEditor from "./RunEditor";
export default function Page({
params,
}: {
params: { projectId: string; runId: string };
}) {
return <RunEditor projectId={params.projectId} runId={params.runId} />;
}

51
frontend/app/projects/[projectId]/runs/runsControl.ts
View File

@@ -1,5 +1,28 @@
import Config from "@/config/config";
const apiServer = Config.apiServer;
import { RunType } from "@/types/run";
async function fetchRun(runId: string) {
const url = `${apiServer}/runs/${runId}`;
try {
const response = await fetch(url, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error("Error fetching data:", error.message);
}
}
async function fetchRuns(projectId: string) {
const url = `${apiServer}/runs?projectId=${projectId}`;
@@ -23,10 +46,13 @@ async function fetchRuns(projectId: string) {
}
}
async function createRun(name: string, detail: string) {
const newProjectData = {
name: name,
detail: detail,
async function createRun(projectId: string) {
const newTestRun = {
name: "untitled run",
configurations: 0,
description: "",
state: 0,
projectId: projectId,
};
const fetchOptions = {
@@ -34,7 +60,7 @@ async function createRun(name: string, detail: string) {
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(newProjectData),
body: JSON.stringify(newTestRun),
};
const url = `${apiServer}/runs`;
@@ -47,26 +73,21 @@ async function createRun(name: string, detail: string) {
const data = await response.json();
return data;
} catch (error) {
console.error("Error creating new project:", error);
console.error("Error creating new test run:", error);
throw error;
}
}
async function updateRun(runId: number, name: string, detail: string) {
const updatedProjectData = {
name: name,
detail: detail,
};
async function updateRun(updateTestRun: RunType) {
const fetchOptions = {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(updatedProjectData),
body: JSON.stringify(updateTestRun),
};
const url = `${apiServer}/runs/${runId}`;
const url = `${apiServer}/cases/${updateTestRun.id}`;
try {
const response = await fetch(url, fetchOptions);
@@ -102,4 +123,4 @@ async function deleteRun(runId: number) {
}
}
export { fetchRuns, createRun, updateRun, deleteRun };
export { fetchRun, fetchRuns, createRun, updateRun, deleteRun };