Merge pull request #443 from dolthub/liuliu/cypress-add-connection-form

Liuliu/Cypress: add connection form test

Author: liuliu-dev

.github/workflows/tests_cypress.yaml

@@ -36,9 +36,11 @@ jobs:
         working-directory: ./workbench-cypress 
         run: |
           yarn
- 
+
       - name: Run tests
         working-directory: ./workbench-cypress 
+        env:
+          CYPRESS_WORKBENCH_CONNECTION_URL: ${{ secrets.WORKBENCH_CONNECTION_URL}}
         run: |
           # Start servers and store PIDs
           echo "Starting servers..."
@@ -49,6 +51,7 @@ jobs:
           # Run Cypress 
           cd ../workbench-cypress
           yarn cy-chrome
+      
 
       - name: Save screenshots of failed tests
         uses: actions/upload-artifact@v4

web/renderer/components/pageComponents/ConnectionsPage/ExistingConnections/Item.tsx

@@ -51,7 +51,11 @@ export default function Item({
 
   return (
     <>
-      <li key={conn.name} className={css.connectionContainer}>
+      <li
+        key={conn.name}
+        className={css.connectionContainer}
+        data-cy={`connection-${conn.name}`}
+      >
         <div
           className={cx(css.line, css[borderClassName], {
             [css.shorterLine]: shorterLine,
@@ -70,6 +74,7 @@ export default function Item({
             <Button.Link
               onClick={() => onDeleteClicked(conn.name)}
               className={css.delete}
+              data-cy={`delete-${conn.name}-button`}
             >
               <IoMdClose />
             </Button.Link>

web/renderer/components/pageComponents/ConnectionsPage/ExistingConnections/index.tsx

@@ -67,11 +67,15 @@ export default function ExistingConnections(props: Props) {
             <div className={css.leftLine} />
           </div>
         </div>
-        <Button className={css.newConnection} onClick={onClick}>
+        <Button
+          className={css.newConnection}
+          onClick={onClick}
+          data-cy="add-connection-button"
+        >
           Add Connection
         </Button>
         <div className={css.rightLine} />
-        <ul>
+        <ul data-cy="connections-list">
           {props.connections.map((conn, i) => (
             <Item
               conn={conn}
@@ -104,6 +108,7 @@ export default function ExistingConnections(props: Props) {
             ? "This action will permanently delete the local Dolt server and all associated data stored within it. This cannot be undone."
             : undefined
         }
+        buttonDataCy="delete-connection-confirm-button"
       />
     </div>
   );

web/renderer/components/pageComponents/ConnectionsPage/NewConnection/About.tsx

@@ -6,7 +6,7 @@ import {
   FormSelect,
   useTabsContext,
 } from "@dolthub/react-components";
-import { useState } from "react";
+import { SyntheticEvent, useState } from "react";
 import { DatabaseType } from "@gen/graphql-types";
 import CloneForm from "@components/CloneDatabaseForm/CloneForm";
 import { useConfigContext } from "./context/config";
@@ -22,12 +22,13 @@ export default function About() {
   const [startDoltServer, setStartDoltServer] = useState(false);
   const [cloneDolt, setCloneDolt] = useState(false);
 
-  const onNext = () => {
+  const onNext = (e: SyntheticEvent) => {
+    e.preventDefault();
     setActiveTabIndex(activeTabIndex + 1);
   };
 
   return (
-    <form onSubmit={onNext} className={css.form}>
+    <form onSubmit={onNext} className={css.form} data-cy="connection-tab-form">
       {forElectron && (
         <>
           <Checkbox
@@ -111,6 +112,7 @@ export default function About() {
             labelClassName={css.label}
             placeholder="my-database (required)"
             light
+            data-cy="connection-name-input"
           />
           <FormSelect
             outerClassName={css.typeSelect}
@@ -136,9 +138,15 @@ export default function About() {
             ]}
             hideSelectedOptions
             light
+            data-cy="connection-type-selector"
           />
           <ButtonsWithError error={error}>
-            <Button type="submit" disabled={!state.name} className={css.button}>
+            <Button
+              type="submit"
+              disabled={!state.name}
+              className={css.button}
+              data-cy="next-about"
+            >
               Next
             </Button>
           </ButtonsWithError>

web/renderer/components/pageComponents/ConnectionsPage/NewConnection/Advanced.tsx

@@ -14,7 +14,7 @@ export default function Advanced() {
   const { canSubmit, message } = getCanSubmit(state);
 
   return (
-    <form onSubmit={onSubmit} className={css.form}>
+    <form onSubmit={onSubmit} className={css.form} data-cy="advanced-tab-form">
       <Checkbox
         checked={state.useSSL}
         onChange={() => setState({ useSSL: !state.useSSL })}
@@ -39,6 +39,7 @@ export default function Advanced() {
         data-tooltip-id="submit-message"
         data-tooltip-content={message}
         data-tooltip-hidden={canSubmit}
+        data-cy="launch-workbench-button"
       >
         Launch Workbench
       </Button>

web/renderer/components/pageComponents/ConnectionsPage/NewConnection/Connection.tsx

@@ -14,7 +14,7 @@ export default function Connection() {
   };
 
   return (
-    <form onSubmit={onNext} className={css.form}>
+    <form onSubmit={onNext} className={css.form} data-cy="connection-tab-form">
       <FormInput
         value={state.connectionUrl}
         onChangeString={c => setState({ connectionUrl: c })}
@@ -25,6 +25,7 @@ export default function Connection() {
         horizontal
         light
         labelClassName={css.label}
+        data-cy="connection-url-input"
       />
       <div className={css.or}>OR</div>
       <FormInput
@@ -35,6 +36,7 @@ export default function Connection() {
         horizontal
         light
         labelClassName={css.label}
+        data-cy="connection-host-input"
       />
       <FormInput
         label="Port"
@@ -44,6 +46,7 @@ export default function Connection() {
         horizontal
         light
         labelClassName={css.label}
+        data-cy="connection-port-input"
       />
       <FormInput
         label="User"
@@ -53,6 +56,7 @@ export default function Connection() {
         horizontal
         light
         labelClassName={css.label}
+        data-cy="connection-user-input"
       />
       <FormInput
         label="Password"
@@ -63,6 +67,7 @@ export default function Connection() {
         horizontal
         light
         labelClassName={css.label}
+        data-cy="connection-password-input"
       />
       <FormInput
         label="Database"
@@ -72,11 +77,13 @@ export default function Connection() {
         horizontal
         light
         labelClassName={css.label}
+        data-cy="connection-database-input"
       />
       <Button
         type="submit"
         disabled={!state.connectionUrl && (!state.host || !state.port)}
         className={css.button}
+        data-cy="next-connection"
       >
         Next
       </Button>

web/renderer/components/pageComponents/ConnectionsPage/NewConnection/ConnectionTabs.tsx

@@ -24,12 +24,16 @@ export default function ConnectionTabs() {
       <TabList className={css.tabList}>
         {state.isLocalDolt
           ? [
-              <CustomTab key="About" index={0}>
+              <CustomTab key="About" index={0} data-cy="connection-tabs-about">
                 About
               </CustomTab>,
             ]
           : ["About", "Connection", "Advanced"].map((tab, i) => (
-              <CustomTab key={tab} index={i}>
+              <CustomTab
+                key={tab}
+                index={i}
+                data-cy={`connection-tabs-${tab.toLowerCase()}`}
+              >
                 {tab}
               </CustomTab>
             ))}
@@ -60,7 +64,11 @@ function CustomTabPanel(props: PanelProps) {
   );
 }
 
-function CustomTab(props: { index: number; children: string }) {
+function CustomTab(props: {
+  index: number;
+  children: string;
+  ["data-cy"]?: string;
+}) {
   const { activeTabIndex } = useTabsContext();
   const isActive = props.index === activeTabIndex;
   const { state } = useConfigContext();
@@ -76,7 +84,7 @@ function CustomTab(props: { index: number; children: string }) {
       disabled={getDisabled(props.children, state)}
     >
       {isCompleted && <FiCheck className={css.check} />}
-      <span>{props.children}</span>
+      <span data-cy={props["data-cy"]}>{props.children}</span>
     </Tab>
   );
 }

web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.tsx

@@ -16,7 +16,7 @@ type InnerProps = {
 
 function Inner({ showWelcomeMsg }: InnerProps) {
   return (
-    <div className={css.databaseForm}>
+    <div className={css.databaseForm} data-cy="add-connection-form">
       {showWelcomeMsg && <WelcomeMessage />}
       <div className={css.whiteContainer}>
         <div className={css.top}>

web/renderer/components/pageComponents/DatabasesPage/index.tsx

@@ -34,9 +34,9 @@ export default function DatabasesPage() {
             Choose an existing database or create a new database to get started.
           </p>
           {res.data?.databases.length ? (
-            <ul className={css.dbList}>
+            <ul className={css.dbList} data-cy="databases-list">
               {res.data.databases.map(db => (
-                <li key={db}>
+                <li key={db} data-cy={`database-${db}-button`}>
                   <Link {...database({ databaseName: db })}>
                     <div className={css.database}>
                       <FaDatabase />

workbench-cypress/cypress/e2e/connections/index.spec.ts

@@ -0,0 +1,30 @@
+import {
+  shouldFindAndContain,
+  shouldFindButton,
+} from "@sharedTests/sharedFunctionsAndVariables";
+import { newExpectation, newShouldArgs } from "@utils/helpers";
+import { runTests } from "@utils/index";
+
+const pageName = "Homepage";
+const currentPage = "/";
+
+describe(pageName, () => {
+  const tests = [
+    shouldFindAndContain("connections-title", "Connections"),
+    shouldFindAndContain(
+      "welcome-message",
+      "Connect the workbench to any MySQL or PostgreSQL compatible database. ",
+    ),
+    shouldFindButton("add-connection-button"),
+    newExpectation(
+      "should find connections list with at least 1 connection",
+      "[data-cy=connections-list] > li",
+      newShouldArgs("be.visible.and.have.length.of.at.least", 1),
+    ),
+    shouldFindAndContain(
+      "connection-CypressTestConnection",
+      "CypressTestConnection",
+    ),
+  ];
+  runTests({ tests, currentPage, pageName });
+});