👷 Add e2e test to profile area

frontend/src/app/main/ui/auth/login.cljs

@@ -91,7 +91,8 @@
        [:& msgs/inline-banner
         {:type :warning
          :content message
-         :on-close #(reset! error nil)}])
+         :on-close #(reset! error nil)
+         :data-test "login-banner"}])
 
      [:& fm/form {:on-submit on-submit :form form}
       [:div.fields-row
@@ -111,7 +112,8 @@
 
       [:div.buttons-stack
        [:& fm/submit-button
-        {:label (tr "auth.login-submit")}]
+        {:label (tr "auth.login-submit")
+         :data-test "login-submit"}]
 
        (when (contains? @cf/flags :login-with-ldap)
          [:& fm/submit-button
@@ -149,7 +151,7 @@
   [{:keys [params] :as props}]
   [:div.generic-form.login-form
    [:div.form-container
-    [:h1 (tr "auth.login-title")]
+    [:h1 {:data-test "login-title"} (tr "auth.login-title")]
     [:div.subtitle (tr "auth.login-subtitle")]
 
     [:& login-form {:params params}]
@@ -163,18 +165,21 @@
 
     [:div.links
      [:div.link-entry
-      [:a {:on-click #(st/emit! (rt/nav :auth-recovery-request))}
+      [:a {:on-click #(st/emit! (rt/nav :auth-recovery-request))
+           :data-test "forgot-password"}
        (tr "auth.forgot-password")]]
 
      (when (contains? @cf/flags :registration)
        [:div.link-entry
         [:span (tr "auth.register") " "]
-        [:a {:on-click #(st/emit! (rt/nav :auth-register {} params))}
+        [:a {:on-click #(st/emit! (rt/nav :auth-register {} params))
+             :data-test "register-submit"}
          (tr "auth.register-submit")]])]
 
     (when (contains? @cf/flags :demo-users)
       [:div.links.demo
        [:div.link-entry
         [:span (tr "auth.create-demo-profile") " "]
-        [:a {:on-click (st/emitf (du/create-demo-profile))}
+        [:a {:on-click (st/emitf (du/create-demo-profile))
+             :data-test "demo-account-link"}
          (tr "auth.create-demo-account")]]])]])

frontend/src/app/main/ui/auth/recovery_request.cljs

@@ -67,7 +67,8 @@
                     :type "text"}]]
 
      [:& fm/submit-button
-      {:label (tr "auth.recovery-request-submit")}]]))
+      {:label (tr "auth.recovery-request-submit")
+       :data-test "recovery-resquest-submit"}]]))
 
 
 ;; --- Recovery Request Page
@@ -82,5 +83,6 @@
 
     [:div.links
      [:div.link-entry
-      [:a {:on-click #(st/emit! (rt/nav :auth-login))}
+      [:a {:on-click #(st/emit! (rt/nav :auth-login))
+           :data-test "go-back-link"}
        (tr "labels.go-back")]]]]])

frontend/src/app/main/ui/auth/register.cljs

@@ -98,7 +98,8 @@
                     :name :email
                     :tab-index "2"
                     :help-icon i/at
-                    :label (tr "auth.email")}]]
+                    :label (tr "auth.email")
+                    :data-test "email-input"}]]
      [:div.fields-row
       [:& fm/input {:name :password
                     :tab-index "3"
@@ -108,12 +109,13 @@
 
      [:& fm/submit-button
       {:label (tr "auth.register-submit")
-       :disabled @submitted?}]]))
+       :disabled @submitted?
+       :data-test "register-form-submit"}]]))
 
 (mf/defc register-page
   [{:keys [params] :as props}]
   [:div.form-container
-   [:h1 (tr "auth.register-title")]
+   [:h1 {:data-test "registration-title"} (tr "auth.register-title")]
    [:div.subtitle (tr "auth.register-subtitle")]
 
    (when (contains? @cf/flags :demo-warning)
@@ -132,7 +134,8 @@
     [:div.link-entry
      [:span (tr "auth.already-have-account") " "]
      [:a {:on-click #(st/emit! (rt/nav :auth-login {} params))
-          :tab-index "4"}
+          :tab-index "4"
+          :data-test "login-here-link"}
       (tr "auth.login-here")]]
 
     (when (contains? @cf/flags :demo-users)

frontend/src/app/main/ui/components/file_uploader.cljs

@@ -12,7 +12,7 @@
 
 (mf/defc file-uploader
   {::mf/forward-ref true}
-  [{:keys [accept multi label-text label-class input-id on-selected] :as props} input-ref]
+  [{:keys [accept multi label-text label-class input-id on-selected data-test] :as props} input-ref]
   (let [opt-pick-one #(if multi % (first %))
 
         on-files-selected
@@ -37,5 +37,6 @@
        :accept accept
        :type "file"
        :ref input-ref
-       :on-change on-files-selected}]]))
+       :on-change on-files-selected
+       :data-test data-test}]]))
 

frontend/src/app/main/ui/components/forms.cljs

@@ -12,6 +12,7 @@
    [app.util.forms :as fm]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.object :as obj]
+   [clojure.string]
    [cuerdas.core :as str]
    [rumext.alpha :as mf]))
 
@@ -19,7 +20,7 @@
 (def use-form fm/use-form)
 
 (mf/defc input
-  [{:keys [label help-icon disabled form hint trim children] :as props}]
+  [{:keys [label help-icon disabled form hint trim children data-test] :as props}]
   (let [input-type   (get props :type "text")
         input-name   (get props :name)
         more-classes (get props :class)
@@ -112,7 +113,7 @@
          help-icon'])
       (cond
         (and touched? (:message error))
-        [:span.error (tr (:message error))]
+        [:span.error {:data-test (clojure.string/join [data-test "-error"]) }(tr (:message error))]
 
         (string? hint)
         [:span.hint hint])]]))
@@ -170,7 +171,7 @@
         [:span.hint hint])]]))
 
 (mf/defc select
-  [{:keys [options label form default] :as props
+  [{:keys [options label form default data-test] :as props
     :or {default ""}}]
   (let [input-name (get props :name)
 
@@ -181,7 +182,8 @@
 
     [:div.custom-select
      [:select {:value value
-               :on-change on-change}
+               :on-change on-change
+               :data-test data-test}
       (for [item options]
         [:option {:key (:value item) :value (:value item)} (:label item)])]
 
@@ -194,7 +196,7 @@
        i/arrow-slide]]]))
 
 (mf/defc submit-button
-  [{:keys [label form on-click disabled] :as props}]
+  [{:keys [label form on-click disabled data-test] :as props}]
   (let [form (or form (mf/use-ctx form-ctx))]
     [:input.btn-primary.btn-large
      {:name "submit"
@@ -202,6 +204,7 @@
       :disabled (or (not (:valid @form)) (true? disabled))
       :on-click on-click
       :value label
+      :data-test data-test
       :type "submit"}]))
 
 (mf/defc form

frontend/src/app/main/ui/dashboard/sidebar.cljs

@@ -501,25 +501,30 @@
              (st/emit! section))))]
 
     [:div.profile-section
-     [:div.profile {:on-click #(reset! show true)}
+     [:div.profile {:on-click #(reset! show true)
+                    :data-test "profile-btn"}
       [:img {:src photo}]
       [:span (:fullname profile)]
 
      [:& dropdown {:on-close #(reset! show false)
                    :show @show}
       [:ul.dropdown
-       [:li {:on-click (partial on-click :settings-profile)}
+       [:li {:on-click (partial on-click :settings-profile)
+             :data-test "profile-profile-opt"}
         [:span.icon i/user]
         [:span.text (tr "labels.profile")]]
-       [:li {:on-click (partial on-click :settings-password)}
+       [:li {:on-click (partial on-click :settings-password)
+              :data-test "password-profile-opt"}
         [:span.icon i/lock]
         [:span.text (tr "labels.password")]]
-       [:li {:on-click #(on-click (du/logout) %)}
+       [:li {:on-click #(on-click (du/logout) %)
+              :data-test "logout-profile-opt"}
         [:span.icon i/exit]
         [:span.text (tr "labels.logout")]]
 
        (when (contains? @cf/flags :user-feedback)
-         [:li.feedback {:on-click (partial on-click :settings-feedback)}
+         [:li.feedback {:on-click (partial on-click :settings-feedback)
+                         :data-test "feedback-profile-opt"}
           [:span.icon i/msg-info]
           [:span.text (tr "labels.give-feedback")]
           ])]]]

frontend/src/app/main/ui/messages.cljs

@@ -15,7 +15,7 @@
    [rumext.alpha :as mf]))
 
 (mf/defc banner
-  [{:keys [type position status controls content actions on-close] :as props}]
+  [{:keys [type position status controls content actions on-close data-test] :as props}]
   [:div.banner {:class (dom/classnames
                         :warning  (= type :warning)
                         :error    (= type :error)
@@ -34,7 +34,8 @@
                  i/msg-error)]
     [:div.content {:class (dom/classnames
                            :inline-actions (= controls :inline-actions)
-                           :bottom-actions (= controls :bottom-actions))}
+                           :bottom-actions (= controls :bottom-actions))
+                   :data-test data-test}
      content
      (when (or (= controls :bottom-actions) (= controls :inline-actions))
        [:div.actions
@@ -59,7 +60,7 @@
 
 (mf/defc inline-banner
   {::mf/wrap [mf/memo]}
-  [{:keys [type content on-close actions] :as props}]
+  [{:keys [type content on-close actions data-test] :as props}]
   [:& banner {:type type
               :position :inline
               :status :visible
@@ -70,5 +71,6 @@
                             :none))
               :content content
               :on-close on-close
-              :actions actions}])
+              :actions actions
+              :data-test data-test}])
 

frontend/src/app/main/ui/onboarding.cljs

@@ -27,14 +27,14 @@
     [:img {:src "images/login-on.jpg" :border "0" :alt (tr "onboarding.welcome.alt")}]]
    [:div.modal-right
     [:div.modal-title
-     [:h2 (tr "onboarding.welcome.title")]]
+     [:h2 {:data-test "onboarding-welcome"} (tr "onboarding.welcome.title")]]
     [:span.release "Beta version " (:main @cf/version)]
     [:div.modal-content
      [:p (tr "onboarding.welcome.desc1")]
      [:p (tr "onboarding.welcome.desc2")]
      [:p (tr "onboarding.welcome.desc3")]]
     [:div.modal-navigation
-     [:button.btn-secondary {:on-click next} (tr "labels.continue")]]]
+     [:button.btn-secondary {:on-click next :data-test "onboarding-next-btn"} (tr "labels.continue")]]]
    [:img.deco {:src "images/deco-left.png" :border "0"}]
    [:img.deco.right {:src "images/deco-right.png" :border "0"}]])
 
@@ -55,7 +55,7 @@
       "\u00A0"
       (tr "onboarding.contrib.desc2.2")]]
     [:div.modal-navigation
-     [:button.btn-secondary {:on-click next} (tr "labels.continue")]]]])
+     [:button.btn-secondary {:on-click next  :data-test "opsource-next-btn"} (tr "labels.continue")]]]])
 
 (defmulti render-slide :slide)
 
@@ -67,13 +67,14 @@
      [:img {:src "images/on-design.gif" :border "0" :alt (tr "onboarding.slide.0.alt")}]]
     [:div.modal-right
      [:div.modal-title
-      [:h2 (tr "onboarding.slide.0.title")]]
+      [:h2 {:data-test "slide-0-title"} (tr "onboarding.slide.0.title")]]
      [:div.modal-content
       [:p (tr "onboarding.slide.0.desc1")]
       [:p (tr "onboarding.slide.0.desc2")]]
      [:div.modal-navigation
-      [:button.btn-secondary {:on-click #(navigate 1)} (tr "labels.continue")]
-      [:span.skip {:on-click skip} (tr "labels.skip")]
+      [:button.btn-secondary {:on-click #(navigate 1)
+                              :data-test "slide-0-btn"} (tr "labels.continue")]
+      [:span.skip {:on-click skip :data-test "skip-btn"} (tr "labels.skip")]
       [:& rc/navigation-bullets
        {:slide slide
         :navigate navigate
@@ -87,13 +88,14 @@
      [:img {:src "images/on-proto.gif" :border "0" :alt (tr "onboarding.slide.1.alt")}]]
     [:div.modal-right
      [:div.modal-title
-      [:h2 (tr "onboarding.slide.1.title")]]
+      [:h2 {:data-test "slide-1-title"} (tr "onboarding.slide.1.title")]]
      [:div.modal-content
       [:p (tr "onboarding.slide.1.desc1")]
       [:p (tr "onboarding.slide.1.desc2")]]
      [:div.modal-navigation
-      [:button.btn-secondary {:on-click #(navigate 2)} (tr "labels.continue")]
-      [:span.skip {:on-click skip} (tr "labels.skip")]
+      [:button.btn-secondary {:on-click #(navigate 2)
+                              :data-test "slide-1-btn"} (tr "labels.continue")]
+      [:span.skip {:on-click skip :data-test "skip-btn"} (tr "labels.skip")]
       [:& rc/navigation-bullets
        {:slide slide
         :navigate navigate
@@ -107,12 +109,13 @@
      [:img {:src "images/on-feed.gif" :border "0" :alt (tr "onboarding.slide.2.alt")}]]
     [:div.modal-right
      [:div.modal-title
-      [:h2 (tr "onboarding.slide.2.title")]]
+      [:h2 {:data-test "slide-2-title"} (tr "onboarding.slide.2.title")]]
      [:div.modal-content
       [:p (tr "onboarding.slide.2.desc1")]]
      [:div.modal-navigation
-      [:button.btn-secondary {:on-click #(navigate 3)} (tr "labels.continue")]
-      [:span.skip {:on-click skip} (tr "labels.skip")]
+      [:button.btn-secondary {:on-click #(navigate 3)
+                              :data-test "slide-2-btn"} (tr "labels.continue")]
+      [:span.skip {:on-click skip :data-test "skip-btn"} (tr "labels.skip")]
       [:& rc/navigation-bullets
        {:slide slide
         :navigate navigate
@@ -126,12 +129,13 @@
      [:img {:src "images/on-handoff.gif" :border "0" :alt (tr "onboarding.slide.3.alt")}]]
     [:div.modal-right
      [:div.modal-title
-      [:h2 (tr "onboarding.slide.3.title")]]
+      [:h2 {:data-test "slide-3-title"} (tr "onboarding.slide.3.title")]]
      [:div.modal-content
       [:p (tr "onboarding.slide.3.desc1")]
       [:p (tr "onboarding.slide.3.desc2")]]
      [:div.modal-navigation
-      [:button.btn-secondary {:on-click skip} (tr "labels.start")]
+      [:button.btn-secondary {:on-click skip
+                              :data-test "slide-3-btn"} (tr "labels.start")]
       [:& rc/navigation-bullets
        {:slide slide
         :navigate navigate

frontend/src/app/main/ui/onboarding/team_choice.cljs

@@ -42,11 +42,12 @@
     [:div.modal-overlay
      [:div.modal-container.onboarding.final.animated.fadeInUp
       [:div.modal-top
-       [:h1 (tr "onboarding.welcome.title")]
+       [:h1 {:data-test "onboarding-welcome-title"} (tr "onboarding.welcome.title")]
        [:p (tr "onboarding.welcome.desc3")]]
       [:div.modal-columns
        [:div.modal-left
-        [:div.content-button {:on-click on-fly-solo}
+        [:div.content-button {:on-click on-fly-solo
+                              :data-test "fly-solo-op"}
          [:h2 (tr "onboarding.choice.fly-solo")]
          [:p (tr "onboarding.choice.fly-solo-desc")]]]
        [:div.modal-right

frontend/src/app/main/ui/onboarding/templates.cljs

@@ -70,7 +70,8 @@
      [:div.modal-container.onboarding-templates
       [:div.modal-header
        [:div.modal-close-button
-        {:on-click close-fn} i/close]]
+        {:on-click close-fn
+         :data-test "close-templates-btn"} i/close]]
 
       [:div.modal-content
        [:h3 (tr "onboarding.templates.title")]

frontend/src/app/main/ui/settings.cljs

@@ -22,7 +22,7 @@
   []
   [:header.dashboard-header
    [:div.dashboard-title
-    [:h1 (tr "dashboard.your-account-title")]]])
+    [:h1 {:data-test "account-title"} (tr "dashboard.your-account-title")]]])
 
 (mf/defc settings
   [{:keys [route] :as props}]

frontend/src/app/main/ui/settings/change_email.cljs

@@ -86,7 +86,8 @@
 
        [:div.modal-header
         [:div.modal-header-title
-         [:h2 (tr "modals.change-email.title")]]
+         [:h2 {:data-test "change-email-title"} 
+          (tr "modals.change-email.title")]]
         [:div.modal-close-button
          {:on-click on-close} i/close]]
 
@@ -108,7 +109,7 @@
                         :trim true}]]]]
 
        [:div.modal-footer
-        [:div.action-buttons
+        [:div.action-buttons {:data-test "change-email-submit"}
          [:& fm/submit-button
           {:label (tr "modals.change-email.submit")}]]]]]]))
 

frontend/src/app/main/ui/settings/delete_account.cljs

@@ -51,7 +51,8 @@
 
       [:div.modal-footer
        [:div.action-buttons
-        [:button.btn-warning.btn-large {:on-click on-accept}
+        [:button.btn-warning.btn-large {:on-click on-accept
+                                        :data-test "delete-account-btn"}
          (tr "modals.delete-account.confirm")]
         [:button.btn-secondary.btn-large {:on-click on-close}
          (tr "modals.delete-account.cancel")]]]]]))

frontend/src/app/main/ui/settings/options.cljs

@@ -48,20 +48,23 @@
      [:h2 (t locale "labels.language")]
 
      [:div.fields-row
-      [:& fm/select {:options (into [{:label "Auto (browser)" :value ""}]
+      [:& fm/select {:options (into [{:label "Auto (browser)" :value "default"}]
                                     i18n/supported-locales)
                      :label (t locale "dashboard.select-ui-language")
                      :default ""
-                     :name :lang}]]
+                     :name :lang
+                     :data-test "setting-lang"}]]
 
      [:h2 (t locale "dashboard.theme-change")]
      [:div.fields-row
       [:& fm/select {:label (t locale "dashboard.select-ui-theme")
                      :name :theme
                      :default "default"
-                     :options [{:label "Default" :value "default"}]}]]
+                     :options [{:label "Default" :value "default"}]
+                     :data-test "theme-lang"}]]
      [:& fm/submit-button
-      {:label (t locale "dashboard.update-settings")}]]))
+      {:label (t locale "dashboard.update-settings")
+       :data-test "submit-lang-change"}]]))
 
 ;; --- Password Page
 
@@ -72,4 +75,5 @@
 
   [:div.dashboard-settings
    [:div.form-container
+    {:data-test "settings-form"}
     [:& options-form {:locale locale}]]])

frontend/src/app/main/ui/settings/password.cljs

@@ -89,7 +89,8 @@
         :label (t locale "labels.confirm-password")}]]
 
      [:& fm/submit-button
-      {:label (t locale "dashboard.update-settings")}]]))
+      {:label (t locale "dashboard.update-settings")
+       :data-test "submit-password"}]]))
 
 ;; --- Password Page
 

frontend/src/app/main/ui/settings/profile.cljs

@@ -71,7 +71,8 @@
 
      [:div.links
       [:div.link-item
-       [:a {:on-click #(modal/show! :delete-account {})}
+       [:a {:on-click #(modal/show! :delete-account {})
+            :data-test "remove-acount-btn"}
         (t locale "dashboard.remove-account")]]]]))
 
 ;; --- Profile Photo Form
@@ -94,7 +95,8 @@
       [:& file-uploader {:accept "image/jpeg,image/png"
                          :multi false
                          :ref file-input
-                         :on-selected on-file-selected}]]]))
+                         :on-selected on-file-selected
+                         :data-test "profile-image-input"}]]]))
 
 ;; --- Profile Page
 

frontend/src/app/main/ui/settings/sidebar.cljs

@@ -80,7 +80,8 @@
         [:span.element-title (tr "labels.password")]]
 
        [:li {:class (when options? "current")
-             :on-click go-settings-options}
+             :on-click go-settings-options
+             :data-test "settings-profile"}
         i/tree
         [:span.element-title (tr "labels.settings")]]