Merge pull request #572 from dolthub/eric/more-cypress-tests

Add tests for diff viewer and create branch page

Author: eric-richardson1

web/renderer/components/DiffSelector/ForBranchCommitAndTag.tsx

@@ -29,6 +29,7 @@ export default function ForBranchCommitAndTag({ params }: Props) {
               params={params}
               selectedValue={toRef}
               onChangeValue={s => setToRef(s || "")}
+              dataCy="to-ref-selector"
             />
           </div>
           <div className={css.arrow}>
@@ -39,6 +40,7 @@ export default function ForBranchCommitAndTag({ params }: Props) {
               params={params}
               selectedValue={fromRef}
               onChangeValue={s => setFromRef(s || "")}
+              dataCy="from-ref-selector"
             />
           </div>
         </div>
@@ -52,7 +54,11 @@ export default function ForBranchCommitAndTag({ params }: Props) {
           })}
           className={css.viewDiffButton}
         >
-          <Button disabled={fromRef === toRef} className={css.button}>
+          <Button
+            disabled={fromRef === toRef}
+            className={css.button}
+            data-cy="view-diff-button"
+          >
             View Diff
           </Button>
         </Link>

web/renderer/components/FormSelectForRefs/BranchAndCommitSelector.tsx

@@ -48,6 +48,7 @@ export default function BranchAndCommitSelector(props: Props) {
       placeholder="select a branch or commit..."
       className={css.branchAndCommitSelect}
       selectedOptionFirst
+      data-cy="branch-and-commit-selector"
     />
   );
 }

web/renderer/components/FormSelectForRefs/BranchCommitAndTagSelector.tsx

@@ -11,6 +11,7 @@ type Props = {
   params: OptionalRefParams;
   selectedValue: Maybe<string>;
   onChangeValue: (s: Maybe<string>) => void;
+  dataCy: string;
 };
 
 export default function BranchCommitAndTagSelector(props: Props) {
@@ -53,6 +54,7 @@ export default function BranchCommitAndTagSelector(props: Props) {
       className={css.branchAndCommitSelect}
       selectedOptionFirst
       light
+      data-cy={props.dataCy}
     />
   );
 }

web/renderer/components/pageComponents/DatabasePage/ForBranches/BranchesPage/index.tsx

@@ -79,7 +79,7 @@ function Inner(props: InnerProps): JSX.Element {
           )}
           <HideForNoWritesWrapper params={props.params}>
             <Link {...createUrl} className={css.white}>
-              <Button>Create Branch</Button>
+              <Button data-cy="create-branch-page-button">Create Branch</Button>
             </Link>
           </HideForNoWritesWrapper>
         </div>

web/renderer/components/pageComponents/DatabasePage/ForBranches/NewBranchPage/NewBranchForm/index.tsx

@@ -69,14 +69,19 @@ export default function NewBranchForm(props: Props): JSX.Element {
             label="New branch name"
             placeholder="i.e. feature-branch"
             className={css.input}
+            data-cy="new-branch-name-input"
           />
           <ButtonsWithError
             onCancel={goToBranchesPage}
             left
             stackedButton={isMobile}
             error={err}
           >
-            <Button type="submit" disabled={!newBranchName || !fromRefName}>
+            <Button
+              type="submit"
+              disabled={!newBranchName || !fromRefName}
+              data-cy="create-branch-button"
+            >
               Create branch
             </Button>
           </ButtonsWithError>

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

@@ -6,8 +6,13 @@ import {
   newExpectationWithClickFlows,
 } from "@utils/helpers";
 import {
+  beDisabled,
   beVisible,
+  beVisibleAndContain,
+  shouldBeVisible,
   shouldFindAndContain,
+  shouldFindButton,
+  shouldTypeString,
 } from "@sharedTests/sharedFunctionsAndVariables";
 import { Expectation } from "@utils/types";
 
@@ -17,6 +22,38 @@ const currentPage = `/database/${dbName}/branches`;
 const connectionName = "CypressTestConnection";
 const hasDocs = true;
 
+const createBranchTest = (fromBranch: string) =>
+  newExpectationWithClickFlows(
+    "should go to create branch page",
+    formatDataCy("create-branch-page-button"),
+    beVisibleAndContain("Create Branch"),
+    [
+      newClickFlow(
+        formatDataCy("create-branch-page-button"),
+        [
+          newExpectationWithClickFlows(
+            "should fill out create branch form",
+            formatDataCy("create-branch-button"),
+            beDisabled,
+            [
+              newClickFlow(formatDataCy("branch-and-commit-selector"), [
+                shouldFindAndContain(`select-option-${fromBranch}`, fromBranch),
+              ]),
+              newClickFlow(formatDataCy(`select-option-${fromBranch}`), [
+                shouldBeVisible(`single-value-${fromBranch}`),
+              ]),
+              newClickFlow(formatDataCy("new-branch-name-input"), [
+                shouldTypeString("new-branch-name-input", "test-new-branch"),
+                shouldFindButton("create-branch-button"),
+              ]),
+            ],
+          ),
+        ],
+        formatDataCy("cancel-button"),
+      ),
+    ],
+  );
+
 const showDeleteBranchPopUpTest = (branchToClick: string): Expectation =>
   newExpectationWithClickFlows(
     "should show delete branch popup",
@@ -34,6 +71,7 @@ const showDeleteBranchPopUpTest = (branchToClick: string): Expectation =>
 describe(pageName, () => {
   const tests = [
     ...testDBHeader(connectionName, dbName, hasDocs),
+    createBranchTest("main"),
     showDeleteBranchPopUpTest("add-view"),
   ];
 

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

@@ -0,0 +1,58 @@
+import { runTests } from "@utils/index";
+import { testDBHeader } from "@sharedTests/dbHeaders";
+import { Expectation } from "@utils/types";
+import {
+  formatDataCy,
+  newClickFlow,
+  newExpectationWithClickFlows,
+} from "@utils/helpers";
+import {
+  beVisible,
+  shouldFindAndContain,
+  shouldNotExist,
+} from "@sharedTests/sharedFunctionsAndVariables";
+
+const pageName = "Branch diff page";
+const dbName = "us-jails";
+const currentPage = `/database/${dbName}/compare`;
+const connectionName = "CypressTestConnection";
+const hasDocs = true;
+
+const diffTest = (
+  toRef: string,
+  fromRef: string,
+  expectedDiffStat: string,
+): Expectation =>
+  newExpectationWithClickFlows(
+    "should show diff between two refs",
+    formatDataCy("diff-selector"),
+    beVisible,
+    [
+      newClickFlow(formatDataCy("to-ref-selector"), [
+        shouldFindAndContain(`select-option-${toRef}`, toRef),
+      ]),
+      newClickFlow(formatDataCy(`select-option-${toRef}`), [
+        shouldNotExist(`select-option-${toRef}`),
+      ]),
+      newClickFlow(formatDataCy("from-ref-selector"), [
+        shouldFindAndContain(`select-option-${fromRef}`, fromRef),
+      ]),
+      newClickFlow(formatDataCy(`select-option-${fromRef}`), [
+        shouldNotExist(`select-option-${fromRef}`),
+      ]),
+      newClickFlow(formatDataCy("view-diff-button"), [
+        shouldFindAndContain("diff-table-stats", expectedDiffStat),
+      ]),
+    ],
+  );
+
+const branchDiffTest = diffTest("main", "add-view", "1 Row Deleted");
+
+describe(pageName, () => {
+  const tests = [
+    ...testDBHeader(connectionName, dbName, hasDocs),
+    branchDiffTest,
+  ];
+
+  runTests({ tests, currentPage, pageName });
+});