forked from dyad-sh/dyad
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathselect_component.spec.ts
More file actions
188 lines (149 loc) · 5.98 KB
/
Copy pathselect_component.spec.ts
File metadata and controls
188 lines (149 loc) · 5.98 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
import { expect } from "@playwright/test";
import { testSkipIfWindows, Timeout } from "./helpers/test_helper";
testSkipIfWindows("select component", async ({ po }) => {
await po.setUp();
await po.sendPrompt("tc=basic");
await po.previewPanel.clickTogglePreviewPanel();
await po.previewPanel.clickPreviewPickElement();
await po.previewPanel
.getPreviewIframeElement()
.contentFrame()
.getByRole("heading", { name: "Welcome to Your Blank App" })
.click();
await po.previewPanel.snapshotPreview();
await po.previewPanel.snapshotSelectedComponentsDisplay();
await po.sendPrompt("[dump] make it smaller");
await po.previewPanel.snapshotPreview();
await expect(
po.previewPanel.getSelectedComponentsDisplay(),
).not.toBeVisible();
await po.snapshotServerDump("all-messages");
// Send one more prompt to make sure it's a normal message.
await po.sendPrompt("[dump] tc=basic");
await po.snapshotServerDump("last-message");
});
testSkipIfWindows("select multiple components", async ({ po }) => {
await po.setUp();
await po.sendPrompt("tc=basic");
await po.previewPanel.clickTogglePreviewPanel();
await po.previewPanel.clickPreviewPickElement();
await po.previewPanel
.getPreviewIframeElement()
.contentFrame()
.getByRole("heading", { name: "Welcome to Your Blank App" })
.click();
await po.previewPanel
.getPreviewIframeElement()
.contentFrame()
.getByText("Made with Dyad")
.click();
await po.previewPanel.snapshotPreview();
await po.previewPanel.snapshotSelectedComponentsDisplay();
await po.sendPrompt("[dump] make both smaller");
await po.previewPanel.snapshotPreview();
await expect(
po.previewPanel.getSelectedComponentsDisplay(),
).not.toBeVisible();
await po.snapshotServerDump("last-message");
});
testSkipIfWindows("deselect component", async ({ po }) => {
await po.setUp();
await po.sendPrompt("tc=basic");
await po.previewPanel.clickTogglePreviewPanel();
await po.previewPanel.clickPreviewPickElement();
await po.previewPanel
.getPreviewIframeElement()
.contentFrame()
.getByRole("heading", { name: "Welcome to Your Blank App" })
.click();
await po.previewPanel.snapshotPreview();
await po.previewPanel.snapshotSelectedComponentsDisplay();
// Deselect the component and make sure the state has reverted
await po.previewPanel.clickDeselectComponent();
await po.previewPanel.snapshotPreview();
await expect(
po.previewPanel.getSelectedComponentsDisplay(),
).not.toBeVisible();
// Send one more prompt to make sure it's a normal message.
await po.sendPrompt("[dump] tc=basic");
await po.snapshotServerDump("last-message");
});
testSkipIfWindows(
"deselect individual component from multiple",
async ({ po }) => {
await po.setUp();
await po.sendPrompt("tc=basic");
await po.previewPanel.clickTogglePreviewPanel();
await po.previewPanel.clickPreviewPickElement();
await po.previewPanel
.getPreviewIframeElement()
.contentFrame()
.getByRole("heading", { name: "Welcome to Your Blank App" })
.click();
await po.previewPanel
.getPreviewIframeElement()
.contentFrame()
.getByText("Made with Dyad")
.click();
await po.previewPanel.snapshotSelectedComponentsDisplay();
await po.previewPanel.clickDeselectComponent({ index: 0 });
await po.previewPanel.snapshotPreview();
await po.previewPanel.snapshotSelectedComponentsDisplay();
await expect(po.previewPanel.getSelectedComponentsDisplay()).toBeVisible();
},
);
testSkipIfWindows("upgrade app to select component", async ({ po }) => {
await po.setUp();
await po.importApp("select-component");
await po.appManagement.getTitleBarAppNameButton().click();
await po.appManagement.clickAppUpgradeButton({
upgradeId: "component-tagger",
});
await po.appManagement.expectAppUpgradeButtonIsNotVisible({
upgradeId: "component-tagger",
});
await po.snapshotAppFiles({ name: "app-upgraded" });
await po.appManagement.clickOpenInChatButton();
// There should be another version from the upgrade being committed.
await expect(po.page.getByText("Version 2")).toBeVisible();
await po.clickRestart();
await po.previewPanel.clickPreviewPickElement();
await po.previewPanel
.getPreviewIframeElement()
.contentFrame()
.getByRole("heading", { name: "Launch Your Next Project" })
.click();
await po.sendPrompt("[dump] make it smaller");
await po.snapshotServerDump("last-message");
});
testSkipIfWindows("select component next.js", async ({ po }) => {
await po.setUp();
await po.navigation.goToHubAndSelectTemplate("Next.js Template");
await po.chatActions.selectChatMode("build");
await po.sendPrompt("tc=basic");
await po.previewPanel.clickTogglePreviewPanel();
// Wait for the preview iframe to be visible before interacting
// Next.js apps take longer to compile and start the dev server
await po.previewPanel.expectPreviewIframeIsVisible();
// Wait for the heading to be visible in the iframe before interacting
// This ensures the Next.js page has fully loaded
const heading = po.previewPanel
.getPreviewIframeElement()
.contentFrame()
.getByRole("heading", { name: "Blank page" });
await expect(heading).toBeVisible({ timeout: Timeout.EXTRA_LONG });
// Click pick element button to enter component selection mode
await po.previewPanel.clickPreviewPickElement();
// Click the heading to select it as a component
await heading.click();
// Wait for the selected component display to appear after clicking the component
// Use toPass() for retry logic since component selection may take time to register
await expect(async () => {
await expect(po.previewPanel.getSelectedComponentsDisplay()).toBeVisible();
}).toPass({ timeout: Timeout.MEDIUM });
await po.previewPanel.snapshotPreview();
await po.previewPanel.snapshotSelectedComponentsDisplay();
await po.sendPrompt("[dump] make it smaller");
await po.previewPanel.snapshotPreview();
await po.snapshotServerDump("all-messages");
});