add ui test coverage for the sharing explainer (#1659)

* update nav identifiers * add header button identifiers * add identifiers for sharing explainer * fix mistake in identifiers * add spec file for sharing explainer tests * Apply suggestions from code review Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * Update test spec after pr feedback * lingui extract Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: GitHub Actions <actions@github.com>
ChainSafe · Oct 27, 2021 · ea9cc10 · ea9cc10
1 parent 9e06503
commit ea9cc10
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 11 deletions.
diff --git a/packages/files-ui/cypress/support/page-objects/modals/sharingExplainerModal.ts b/packages/files-ui/cypress/support/page-objects/modals/sharingExplainerModal.ts
@@ -0,0 +1,5 @@
+export const sharingExplainerModal = {
+  body: () => cy.get("[data-testId=modal-container-sharing-explainer]"),
+  gotItButton: () => cy.get("[data-cy=button-got-it]"),
+  nextButton: () => cy.get("[data-cy=button-next]")
+}
diff --git a/packages/files-ui/cypress/support/page-objects/navigationMenu.ts b/packages/files-ui/cypress/support/page-objects/navigationMenu.ts
@@ -2,12 +2,13 @@ import { basePage } from "./basePage"
 
 export const navigationMenu = {
   ...basePage,
-  homeNavButton: () => cy.get("[data-cy=home-nav]"),
-  binNavButton: () => cy.get("[data-cy=bin-nav]"),
-  settingsNavButton: () => cy.get("[data-cy=settings-nav]"),
+  homeNavButton: () => cy.get("[data-cy=link-home]"),
+  binNavButton: () => cy.get("[data-cy=link-bin]"),
+  settingsNavButton: () => cy.get("[data-cy=link-settings]"),
+  sharedNavButton: () => cy.get("[data-cy=link-shared]"),
   spaceUsedLabel: () => cy.get("[data-cy=label-space-used]", { timeout: 10000 }),
   spaceUsedProgressBar: () => cy.get("[data-cy=progress-bar-space-used]"),
-  sendFeedbackNavButton: () => cy.get("[data-cy=send-feedback-nav]"),
+  reportABugButton: () => cy.get("[data-cy=button-report-bug]"),
   // mobile view only
   signOutButton: () => cy.get("[data-cy=signout-nav]")
 }
diff --git a/packages/files-ui/cypress/tests/sharing-explainer-spec.ts b/packages/files-ui/cypress/tests/sharing-explainer-spec.ts
@@ -0,0 +1,57 @@
+import { navigationMenu } from "../support/page-objects/navigationMenu"
+import { sharingExplainerModal } from "../support/page-objects/modals/sharingExplainerModal"
+
+describe("Sharing Explainer", () => {
+
+  context("desktop", () => {
+
+    const sharingKey = "csf.dismissedSharingExplainer"
+
+    it("User can view and dismiss the sharing explainer", () => {
+      // intercept and stub the response to ensure the explainer is displayed
+      cy.intercept("GET", "**/user/store", {
+        body: { [sharingKey]: "false" }
+      })
+
+      cy.web3Login()
+      navigationMenu.sharedNavButton().click()
+      sharingExplainerModal.body().should("be.visible")
+
+      // set up a spy for the POST response
+      cy.intercept("POST", "**/user/store").as("storePost").then(() => {
+
+        // dismiss the sharing explainer
+        sharingExplainerModal.nextButton().click()
+        sharingExplainerModal.nextButton().click()
+        sharingExplainerModal.gotItButton().click()
+        sharingExplainerModal.body().should("not.exist")
+
+        // intercept POST to ensure the key was updated after the explainer is dismissed
+        cy.wait("@storePost").its("request.body").should("contain", {
+          [sharingKey]: "true"
+        })
+      })
+    })
+
+    it("User should not see sharing explainer if previously dismissed", () => {
+      cy.intercept("GET", "**/user/store", {
+        body: { [sharingKey]: "true" }
+      })
+
+      cy.web3Login()
+
+      navigationMenu.sharedNavButton().click()
+      sharingExplainerModal.body().should("not.exist")
+    })
+
+    it("User should see the sharing explainer if api response is empty", () => {
+      cy.intercept("GET", "**/user/store", {
+        body: {}
+      })
+
+      cy.web3Login()
+      navigationMenu.sharedNavButton().click()
+      sharingExplainerModal.body().should("be.visible")
+    })
+  })
+})
diff --git a/packages/files-ui/src/Components/Layouts/AppHeader.tsx b/packages/files-ui/src/Components/Layouts/AppHeader.tsx
@@ -222,7 +222,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
               <section className={classes.buttonsSection}>
                 <Button
                   data-posthog="Report-a-bug"
-                  data-cy="send-feedback-nav"
+                  data-cy="button-report-bug"
                   variant="tertiary"
                   size="small"
                   onClick={onReportBugClick}
@@ -231,7 +231,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                 </Button>
                 <Button
                   data-posthog="Start-a-team"
-                  data-cy="start-team-nav"
+                  data-cy="button-start-team"
                   variant="tertiary"
                   size="small"
                   onClick={onStartATeamClick}

diff --git a/packages/files-ui/src/Components/Layouts/AppNav.tsx b/packages/files-ui/src/Components/Layouts/AppNav.tsx
@@ -270,7 +270,7 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
             </Typography>
             <nav className={classes.navMenu}>
               <Link
-                data-cy="home-nav"
+                data-cy="link-home"
                 onClick={() => {
                   handleOnClick()
                 }}
@@ -286,6 +286,7 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
                 </Typography>
               </Link>
               <Link
+                data-cy="link-shared"
                 onClick={handleOnClick}
                 className={classes.navItem}
                 to={ROUTE_LINKS.SharedFolders}
@@ -299,7 +300,7 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
                 </Typography>
               </Link>
               <Link
-                data-cy="bin-nav"
+                data-cy="link-bin"
                 onClick={handleOnClick}
                 className={classes.navItem}
                 to={ROUTE_LINKS.Bin("/")}
@@ -318,7 +319,7 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
             </Typography>
             <nav className={classes.navMenu}>
               <Link
-                data-cy="settings-nav"
+                data-cy="link-settings"
                 onClick={handleOnClick}
                 className={classes.navItem}
                 to={ROUTE_LINKS.SettingsDefault}

diff --git a/packages/files-ui/src/Components/SharingExplainerModal.tsx b/packages/files-ui/src/Components/SharingExplainerModal.tsx
@@ -153,6 +153,7 @@ const SharingExplainerModal = ({ showModal, onHide }: Props) => {
       maxWidth="sm"
       onClose={onHide}
       mobileStickyBottom={false}
+      testId="sharing-explainer"
     >
       <div className={classes.root}>
         <Typography
@@ -164,6 +165,7 @@ const SharingExplainerModal = ({ showModal, onHide }: Props) => {
           <Button
             className={classes.nextButton}
             onClick={() => onNextStep(step + 1)}
+            data-cy={step === STEP_NUMBER ? "button-got-it" : "button-next"}
           >
             {step === STEP_NUMBER ? t`Got it` : t`Next`}
           </Button>

diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
@@ -5,8 +5,7 @@ msgstr ""
 "POT-Creation-Date: 2021-04-23 11:05+0200\n"
 "PO-Revision-Date: 2021-10-27 02:40+0000\n"
 "Last-Translator: J. Lavoie <j.lavoie@net-c.ca>\n"
-"Language-Team: French <https://hosted.weblate.org/projects/chainsafe-files/"
-"chainsafe-files-user-interface/fr/>\n"
+"Language-Team: French <https://hosted.weblate.org/projects/chainsafe-files/chainsafe-files-user-interface/fr/>\n"
 "Language: fr\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"