Clojurians Log v2

https://github.com/day8/re-frame-template

⬆️ The lein template creates a shadow-cljs project.

would a tool like https://enzymejs.github.io/enzyme/ make sense for testing re-frame views?

actually got an answer for this after reading the testing section in re-frame documentation

we use react-testing-library at work and i enjoy it

Hi, I'm having a really weird issue with Re-frame. Everything was working fine, and I don't know what I changed to make this happen, but when I click on a link on my site it doesn't change pages anymore. Has anyone had this issue before? The URL changes in the browser like there's an event.preventDefault() happening, and the value of my current page changes in my re-frame database, but then Reagent doesn't change the page

This is the code in question

;;; events.cljs
(re-frame/reg-event-db ::set-active-panel
 (fn-traced [db [_ active-panel]]
            (assoc db :active-panel active-panel)))

;;; subs.cljs
(re-frame/reg-sub ::active-panel
 (fn [db _]
   (:active-panel db)))

;;; routes.cljs
(defroute "/" []
  (re-frame/dispatch [::events/set-active-panel :login-panel]))

(defroute "/faq" []
  (re-frame/dispatch [::events/set-active-panel :faq-panel]))

(defroute "/alerts" []
  (re-frame/dispatch [::events/set-active-panel :alert-panel])) 
; ...

;;; sidebar.cljs
[:a.flnnc {:href "#/alerts" :style {:color "white"}} [FiAlertCircle] "Alerts"]
[:a.flnnc {:href "#/faq" :style {:color "white"}} [RiQuestionAnswerLine] "FAQ"]

You're conflating a few topics. Reagent has nothing to do with page changes. If the value in the app-db is changed but you don't see the result, then you simply aren't using that value in a correct way.

Here's how I'm using it

;;; views.cljs
(defn- panels [panel-name]
  (case panel-name
    :alert-panel   [li/template alert/alert-page]
    :faq-panel     [li/template faq/faq-page]
    ;; ...
    ))

(defn main-panel []
  (let [active-panel (re-frame/subscribe [::subs/active-panel])]
    (println @active-panel) ;; Here I can see the value changing
    [panels @active-panel])))

In addition, if I click a link, then change my code to allow a hot-reload to happen, the page changes fine.

How do you call main-panel?

The default code from the template

(defn ^:dev/after-load mount-root []
  (re-frame/clear-subscription-cache!)
  (let [root-el (.getElementById js/document "app")]
    (rdom/unmount-component-at-node root-el)
    (rdom/render [views/main-panel] root-el)))

That all does look alright, so I can't really tell what's going on. If you create a repo with a minimal reproducible example then I can take a closer look.

In main-panel, try this:

^{:key (str "panel-" @active-panel)}
  [panel @active-panel]

That shouldn't affect anything because panel is a form-1 component. Also, you don't need to convert your keys into strings explicitly - Reagent does that for you.