Skip to content

Commit ebeb601

Browse files
johnstcnjohnstcn
committed
update storybook
1 parent 4336bc2 commit ebeb601

File tree

2 files changed

+167
-56
lines changed

2 files changed

+167
-56
lines changed

‎site/src/pages/TasksPage/TasksPage.stories.tsx

Lines changed: 69 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ import { API } from "api/api";
44
import { MockUsers } from "pages/UsersPage/storybookData/users";
55
import { reactRouterParameters } from "storybook-addon-remix-react-router";
66
import {
7+
MockAIPromptPresets,
8+
MockNewTaskData,
9+
MockPresets,
10+
MockTasks,
711
MockTemplate,
812
MockTemplateVersionExternalAuthGithub,
913
MockTemplateVersionExternalAuthGithubAuthenticated,
1014
MockUserOwner,
11-
MockWorkspace,
12-
MockWorkspaceAppStatus,
1315
mockApiError,
1416
} from "testHelpers/entities";
1517
import {
@@ -31,6 +33,7 @@ const meta: Meta<typeof TasksPage> = {
3133
},
3234
beforeEach: () => {
3335
spyOn(API, "getTemplateVersionExternalAuth").mockResolvedValue([]);
36+
spyOn(API, "getTemplateVersionPresets").mockResolvedValue(null);
3437
spyOn(API, "getUsers").mockResolvedValue({
3538
users: MockUsers,
3639
count: MockUsers.length,
@@ -53,7 +56,7 @@ type Story = StoryObj<typeof TasksPage>;
5356
export const LoadingAITemplates: Story = {
5457
beforeEach: () => {
5558
spyOn(data, "fetchAITemplates").mockImplementation(
56-
() => new Promise((res) => 1000 * 60 * 60),
59+
() => new Promise(() => 1000 * 60 * 60),
5760
);
5861
},
5962
};
@@ -79,7 +82,7 @@ export const LoadingTasks: Story = {
7982
beforeEach: () => {
8083
spyOn(data, "fetchAITemplates").mockResolvedValue([MockTemplate]);
8184
spyOn(data, "fetchTasks").mockImplementation(
82-
() => new Promise((res) => 1000 * 60 * 60),
85+
() => new Promise(() => 1000 * 60 * 60),
8386
);
8487
},
8588
play: async ({ canvasElement, step }) => {
@@ -119,15 +122,57 @@ export const LoadedTasks: Story = {
119122
},
120123
};
121124

122-
const newTaskData = {
123-
prompt: "Create a new task",
124-
workspace: {
125-
...MockWorkspace,
126-
id: "workspace-4",
127-
latest_app_status: {
128-
...MockWorkspaceAppStatus,
129-
message: "Task created successfully!",
130-
},
125+
export const LoadedTasksWithPresets: Story = {
126+
decorators: [withProxyProvider()],
127+
beforeEach: () => {
128+
const mockTemplateWithPresets = {
129+
...MockTemplate,
130+
id: "test-template-2",
131+
name: "template-with-presets",
132+
display_name: "Template with Presets",
133+
};
134+
135+
spyOn(data, "fetchAITemplates").mockResolvedValue([
136+
MockTemplate,
137+
mockTemplateWithPresets,
138+
]);
139+
spyOn(data, "fetchTasks").mockResolvedValue(MockTasks);
140+
spyOn(API, "getTemplateVersionPresets").mockImplementation(
141+
async (versionId) => {
142+
// Return presets only for the second template
143+
if (versionId === mockTemplateWithPresets.active_version_id) {
144+
return MockPresets;
145+
}
146+
return null;
147+
},
148+
);
149+
},
150+
};
151+
152+
export const LoadedTasksWithAIPromptPresets: Story = {
153+
decorators: [withProxyProvider()],
154+
beforeEach: () => {
155+
const mockTemplateWithPresets = {
156+
...MockTemplate,
157+
id: "test-template-2",
158+
name: "template-with-presets",
159+
display_name: "Template with AI Prompt Presets",
160+
};
161+
162+
spyOn(data, "fetchAITemplates").mockResolvedValue([
163+
MockTemplate,
164+
mockTemplateWithPresets,
165+
]);
166+
spyOn(data, "fetchTasks").mockResolvedValue(MockTasks);
167+
spyOn(API, "getTemplateVersionPresets").mockImplementation(
168+
async (versionId) => {
169+
// Return presets only for the second template
170+
if (versionId === mockTemplateWithPresets.active_version_id) {
171+
return MockAIPromptPresets;
172+
}
173+
return null;
174+
},
175+
);
131176
},
132177
};
133178

@@ -154,15 +199,15 @@ export const CreateTaskSuccessfully: Story = {
154199
spyOn(data, "fetchAITemplates").mockResolvedValue([MockTemplate]);
155200
spyOn(data, "fetchTasks")
156201
.mockResolvedValueOnce(MockTasks)
157-
.mockResolvedValue([newTaskData, ...MockTasks]);
158-
spyOn(data, "createTask").mockResolvedValue(newTaskData);
202+
.mockResolvedValue([MockNewTaskData, ...MockTasks]);
203+
spyOn(data, "createTask").mockResolvedValue(MockNewTaskData);
159204
},
160205
play: async ({ canvasElement, step }) => {
161206
const canvas = within(canvasElement);
162207

163208
await step("Run task", async () => {
164209
const prompt = await canvas.findByLabelText(/prompt/i);
165-
await userEvent.type(prompt, newTaskData.prompt);
210+
await userEvent.type(prompt, MockNewTaskData.prompt);
166211
const submitButton = canvas.getByRole("button", { name: /run task/i });
167212
await waitFor(() => expect(submitButton).toBeEnabled());
168213
await userEvent.click(submitButton);
@@ -208,8 +253,8 @@ export const WithAuthenticatedExternalAuth: Story = {
208253
beforeEach: () => {
209254
spyOn(data, "fetchTasks")
210255
.mockResolvedValueOnce(MockTasks)
211-
.mockResolvedValue([newTaskData, ...MockTasks]);
212-
spyOn(data, "createTask").mockResolvedValue(newTaskData);
256+
.mockResolvedValue([MockNewTaskData, ...MockTasks]);
257+
spyOn(data, "createTask").mockResolvedValue(MockNewTaskData);
213258
spyOn(API, "getTemplateVersionExternalAuth").mockResolvedValue([
214259
MockTemplateVersionExternalAuthGithubAuthenticated,
215260
]);
@@ -235,8 +280,8 @@ export const MissingExternalAuth: Story = {
235280
beforeEach: () => {
236281
spyOn(data, "fetchTasks")
237282
.mockResolvedValueOnce(MockTasks)
238-
.mockResolvedValue([newTaskData, ...MockTasks]);
239-
spyOn(data, "createTask").mockResolvedValue(newTaskData);
283+
.mockResolvedValue([MockNewTaskData, ...MockTasks]);
284+
spyOn(data, "createTask").mockResolvedValue(MockNewTaskData);
240285
spyOn(API, "getTemplateVersionExternalAuth").mockResolvedValue([
241286
MockTemplateVersionExternalAuthGithub,
242287
]);
@@ -246,7 +291,7 @@ export const MissingExternalAuth: Story = {
246291

247292
await step("Submit is disabled", async () => {
248293
const prompt = await canvas.findByLabelText(/prompt/i);
249-
await userEvent.type(prompt, newTaskData.prompt);
294+
await userEvent.type(prompt, MockNewTaskData.prompt);
250295
const submitButton = canvas.getByRole("button", { name: /run task/i });
251296
expect(submitButton).toBeDisabled();
252297
});
@@ -262,8 +307,8 @@ export const ExternalAuthError: Story = {
262307
beforeEach: () => {
263308
spyOn(data, "fetchTasks")
264309
.mockResolvedValueOnce(MockTasks)
265-
.mockResolvedValue([newTaskData, ...MockTasks]);
266-
spyOn(data, "createTask").mockResolvedValue(newTaskData);
310+
.mockResolvedValue([MockNewTaskData, ...MockTasks]);
311+
spyOn(data, "createTask").mockResolvedValue(MockNewTaskData);
267312
spyOn(API, "getTemplateVersionExternalAuth").mockRejectedValue(
268313
mockApiError({
269314
message: "Failed to load external auth",
@@ -275,7 +320,7 @@ export const ExternalAuthError: Story = {
275320

276321
await step("Submit is disabled", async () => {
277322
const prompt = await canvas.findByLabelText(/prompt/i);
278-
await userEvent.type(prompt, newTaskData.prompt);
323+
await userEvent.type(prompt, MockNewTaskData.prompt);
279324
const submitButton = canvas.getByRole("button", { name: /run task/i });
280325
expect(submitButton).toBeDisabled();
281326
});
@@ -308,35 +353,3 @@ export const NonAdmin: Story = {
308353
});
309354
},
310355
};
311-
312-
const MockTasks = [
313-
{
314-
workspace: {
315-
...MockWorkspace,
316-
latest_app_status: MockWorkspaceAppStatus,
317-
},
318-
prompt: "Create competitors page",
319-
},
320-
{
321-
workspace: {
322-
...MockWorkspace,
323-
id: "workspace-2",
324-
latest_app_status: {
325-
...MockWorkspaceAppStatus,
326-
message: "Avatar size fixed!",
327-
},
328-
},
329-
prompt: "Fix user avatar size",
330-
},
331-
{
332-
workspace: {
333-
...MockWorkspace,
334-
id: "workspace-3",
335-
latest_app_status: {
336-
...MockWorkspaceAppStatus,
337-
message: "Accessibility issues fixed!",
338-
},
339-
},
340-
prompt: "Fix accessibility issues",
341-
},
342-
];

‎site/src/testHelpers/entities.ts

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4571,3 +4571,101 @@ export function createTimestamp(minuteOffset: number, secondOffset: number) {
45714571
baseDate.setSeconds(baseDate.getSeconds() + secondOffset);
45724572
return baseDate.toISOString();
45734573
}
4574+
4575+
// Mock Presets for AI Tasks
4576+
export const MockPresets: TypesGen.Preset[] = [
4577+
{
4578+
ID: "preset-1",
4579+
Name: "Development",
4580+
Parameters: [
4581+
{ Name: "cpu", Value: "4" },
4582+
{ Name: "memory", Value: "8GB" },
4583+
],
4584+
Default: true,
4585+
},
4586+
{
4587+
ID: "preset-2",
4588+
Name: "Testing",
4589+
Parameters: [
4590+
{ Name: "cpu", Value: "2" },
4591+
{ Name: "memory", Value: "4GB" },
4592+
],
4593+
Default: false,
4594+
},
4595+
{
4596+
ID: "preset-3",
4597+
Name: "Production",
4598+
Parameters: [
4599+
{ Name: "cpu", Value: "8" },
4600+
{ Name: "memory", Value: "16GB" },
4601+
],
4602+
Default: false,
4603+
},
4604+
];
4605+
4606+
export const MockAIPromptPresets: TypesGen.Preset[] = [
4607+
{
4608+
ID: "ai-preset-1",
4609+
Name: "Code Review",
4610+
Parameters: [
4611+
{ Name: "AI Prompt", Value: "Review the code for best practices" },
4612+
{ Name: "cpu", Value: "4" },
4613+
{ Name: "memory", Value: "8GB" },
4614+
],
4615+
Default: true,
4616+
},
4617+
{
4618+
ID: "ai-preset-2",
4619+
Name: "Custom Prompt",
4620+
Parameters: [
4621+
{ Name: "cpu", Value: "4" },
4622+
{ Name: "memory", Value: "8GB" },
4623+
],
4624+
Default: false,
4625+
},
4626+
];
4627+
4628+
// Mock Tasks for AI Tasks page
4629+
export const MockTasks = [
4630+
{
4631+
workspace: {
4632+
...MockWorkspace,
4633+
latest_app_status: MockWorkspaceAppStatus,
4634+
},
4635+
prompt: "Create competitors page",
4636+
},
4637+
{
4638+
workspace: {
4639+
...MockWorkspace,
4640+
id: "workspace-2",
4641+
latest_app_status: {
4642+
...MockWorkspaceAppStatus,
4643+
message: "Avatar size fixed!",
4644+
},
4645+
},
4646+
prompt: "Fix user avatar size",
4647+
},
4648+
{
4649+
workspace: {
4650+
...MockWorkspace,
4651+
id: "workspace-3",
4652+
latest_app_status: {
4653+
...MockWorkspaceAppStatus,
4654+
message: "Accessibility issues fixed!",
4655+
},
4656+
},
4657+
prompt: "Fix accessibility issues",
4658+
},
4659+
];
4660+
4661+
export const MockNewTaskData = {
4662+
prompt: "Create a new task",
4663+
workspace: {
4664+
...MockWorkspace,
4665+
id: "workspace-4",
4666+
latest_app_status: {
4667+
...MockWorkspaceAppStatus,
4668+
message: "Task created successfully!",
4669+
},
4670+
},
4671+
};

0 commit comments

Comments
 (0)