feat: add cohesive e2e tests for the web terminal, apps, and workspaces (#8140)

* feat: add cohesive e2e tests for the web terminal, apps, and workspaces

* Fix web terminal flake

site/src/api/typesGenerated.ts

@@ -614,6 +614,7 @@ export interface PrometheusConfig {
 // From codersdk/deployment.go
 export interface ProvisionerConfig {
   readonly daemons: number
+  readonly daemons_echo: boolean
   readonly daemon_poll_interval: number
   readonly daemon_poll_jitter: number
   readonly force_cancel_interval: number

site/src/components/FileUpload/FileUpload.tsx

@@ -117,6 +117,7 @@ export const FileUpload: FC<FileUploadProps> = ({
 
       <input
         type="file"
+        data-testid="file-upload"
         ref={inputRef}
         className={styles.input}
         accept={extension}

site/src/components/FormFooter/FormFooter.tsx

@@ -36,6 +36,7 @@ export const FormFooter: FC<FormFooterProps> = ({
         color="primary"
         type="submit"
         disabled={submitDisabled}
+        data-testid="form-submit"
       >
         {submitLabel}
       </LoadingButton>

site/src/components/Resources/AgentStatus.tsx

@@ -26,6 +26,7 @@ const ReadyLifecycle = () => {
   return (
     <div
       role="status"
+      data-testid="agent-status-ready"
       aria-label={t("agentStatus.connected.ready") || "Ready"}
       className={combineClasses([styles.status, styles.connected])}
     />

site/src/components/TerminalLink/TerminalLink.tsx

@@ -44,6 +44,7 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
           "width=900,height=600",
         )
       }}
+      data-testid="terminal"
     >
       <SecondaryAgentButton>{Language.linkText}</SecondaryAgentButton>
     </Link>

site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

@@ -51,6 +51,7 @@ export const WorkspaceStatusText: FC<
       <Cond>
         <span
           role="status"
+          data-testid="build-status"
           className={combineClasses([
             className,
             styles.root,

site/src/pages/SetupPage/SetupPageView.tsx

@@ -96,6 +96,7 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({
                   defaultChecked
                   value={form.values.trial}
                   onChange={form.handleChange}
+                  data-testid="trial"
                 />
               </div>
 
@@ -110,7 +111,12 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({
               </Box>
             </Box>
           </div>
-          <LoadingButton fullWidth loading={isLoading} type="submit">
+          <LoadingButton
+            fullWidth
+            loading={isLoading}
+            type="submit"
+            data-testid="create"
+          >
             {Language.create}
           </LoadingButton>
         </Stack>

site/src/utils/tar.test.ts

@@ -15,7 +15,7 @@ test("tar", async () => {
     group: "codergroup",
     mode: parseInt("777", 8),
   })
-  const blob = await writer.write()
+  const blob = (await writer.write()) as Blob
 
   // Read
   const reader = new TarReader()

site/src/utils/tar.ts

@@ -232,7 +232,12 @@ export class TarWriter {
       view.set(data, offset + 512)
       offset += 512 + 512 * Math.floor((item.size + 511) / 512)
     }
-    return new Blob([this.buffer], { type: "application/x-tar" })
+    // Required so it works in the browser and node.
+    if (typeof Blob !== "undefined") {
+      return new Blob([this.buffer], { type: "application/x-tar" })
+    } else {
+      return this.buffer
+    }
   }
 
   private writeString(str: string, offset: number, size: number) {

site/src/xServices/createTemplate/createTemplateXService.ts

@@ -11,6 +11,7 @@ import {
 import {
   ProvisionerJob,
   ProvisionerJobLog,
+  ProvisionerType,
   Template,
   TemplateExample,
   TemplateVersion,
@@ -33,6 +34,10 @@ import { assign, createMachine } from "xstate"
 // 5.create template with the successful template version ID
 // https://github.com/coder/coder/blob/b6703b11c6578b2f91a310d28b6a7e57f0069be6/cli/templatecreate.go#L169-L170
 
+const provisioner: ProvisionerType =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Playwright needs to use a different provisioner type!
+  typeof (window as any).playwright !== "undefined" ? "echo" : "terraform"
+
 export interface CreateTemplateData {
   name: string
   display_name: string
@@ -356,7 +361,7 @@ export const createTemplateMachine =
             return createTemplateVersion(organizationId, {
               storage_method: "file",
               example_id: exampleId,
-              provisioner: "terraform",
+              provisioner: provisioner,
               tags: {},
             })
           }
@@ -371,7 +376,7 @@ export const createTemplateMachine =
             return createTemplateVersion(organizationId, {
               storage_method: "file",
               file_id: version.job.file_id,
-              provisioner: "terraform",
+              provisioner: provisioner,
               tags: {},
             })
           }
@@ -380,7 +385,7 @@ export const createTemplateMachine =
             return createTemplateVersion(organizationId, {
               storage_method: "file",
               file_id: uploadResponse.hash,
-              provisioner: "terraform",
+              provisioner: provisioner,
               tags: {},
             })
           }
@@ -402,7 +407,7 @@ export const createTemplateMachine =
           return createTemplateVersion(organizationId, {
             storage_method: "file",
             file_id: version.job.file_id,
-            provisioner: "terraform",
+            provisioner: provisioner,
             user_variable_values: templateData.user_variable_values,
             tags: {},
           })

site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts

@@ -326,7 +326,7 @@ export const templateVersionEditorMachine = createMachine(
 
           tar.addFolder(fullPath)
         })
-        const blob = await tar.write()
+        const blob = (await tar.write()) as Blob
         return API.uploadTemplateFile(new File([blob], "template.tar"))
       },
       createBuild: (ctx) => {