Skip to content

Instantly share code, notes, and snippets.

@guilherme-teodoro

guilherme-teodoro/fulcro_testing_library_test.cljs

Last active January 14, 2022 17:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save guilherme-teodoro/ebd9b487c3d6210a3836f97dd4ed14e4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save guilherme-teodoro/ebd9b487c3d6210a3836f97dd4ed14e4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. guilherme-teodoro revised this gist Jan 14, 2022. 1 changed file with 10 additions and 12 deletions.
    22 changes: 10 additions & 12 deletions fulcro_testing_library_test.cljs
    View file
    Original file line number Diff line number Diff line change
    @@ -15,18 +15,16 @@
    (.removeChild (.-body js/document) (.getElementById js/document "app")))})

    (defn render-component
    [component {:keys [initial-state]}]
    #_:clj-kondo/ignore
    (let [app (app/fulcro-app)
    child-fabricated (comp/factory component)
    root (fn [child]
    (defsc Root
    [_this props]
    {:query [{:root (comp/get-query child)}]
    :initial-state (fn [_] {:root initial-state})}
    (dom/div
    (child-fabricated (:root props)))))]
    (app/mount! app (root component) "app")
    [component]
    (let [app (app/fulcro-app {:remotes {:remote (http/fulcro-http-remote {:url "/api"})}})
    child (comp/factory component)
    root (comp/configure-hooks-component! (fn [_this props]
    (child (:root props)))
    {:componentName ::Root
    :initial-state (fn [] {:root (comp/get-initial-state component)})
    :query (fn [] [{:root (comp/get-query component)}])})]
    (app/mount! app root "app")
    (routing/start! app "/")
    [(.-body js/document) app]))

    (defn fire-event
  2. guilherme-teodoro renamed this gist Jan 10, 2022. 1 changed file with 0 additions and 0 deletions.
    0 test_test.cljs → fulcro_testing_library_test.cljs
    View file
    File renamed without changes.
  3. guilherme-teodoro revised this gist Jan 4, 2022. 1 changed file with 1 addition and 5 deletions.
    6 changes: 1 addition & 5 deletions test_test.cljs
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    (ns test
    (:require ["@testing-library/dom" :refer [fireEvent getByRole getByText waitFor]]
    [backoffice.routing :as routing]
    [cljs.test :refer [deftest async testing use-fixtures]]
    [com.fulcrologic.fulcro.application :as app]
    [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
    @@ -61,7 +60,4 @@
    (testing "when button clicked counter must increment"
    (let [[screen] (render-component Counter {:initial-state {:counter 0}})]
    (fire-event (get-by-role screen "button") :click)
    (async done
    (waitFor (fn []
    (get-by-text screen "counter: 1"))
    (done)))))))
    (async done (waitFor #(get-by-text screen "counter: 1") (done)))))))
  4. guilherme-teodoro revised this gist Jan 4, 2022. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion test_test.cljs
    View file
    Original file line number Diff line number Diff line change
    @@ -28,7 +28,6 @@
    (dom/div
    (child-fabricated (:root props)))))]
    (app/mount! app (root component) "app")
    (routing/start! app "/")
    [(.-body js/document) app]))

    (defn fire-event
  5. guilherme-teodoro created this gist Jan 4, 2022.
    68 changes: 68 additions & 0 deletions test_test.cljs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    (ns test
    (:require ["@testing-library/dom" :refer [fireEvent getByRole getByText waitFor]]
    [backoffice.routing :as routing]
    [cljs.test :refer [deftest async testing use-fixtures]]
    [com.fulcrologic.fulcro.application :as app]
    [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
    [com.fulcrologic.fulcro.dom :as dom]
    [com.fulcrologic.fulcro.mutations :as m]))

    (use-fixtures :each
    {:before (fn []
    (let [el (.createElement js/document "div")]
    (.setAttribute el "id" "app")
    (.appendChild (.-body js/document) el)))
    :after (fn []
    (.removeChild (.-body js/document) (.getElementById js/document "app")))})

    (defn render-component
    [component {:keys [initial-state]}]
    #_:clj-kondo/ignore
    (let [app (app/fulcro-app)
    child-fabricated (comp/factory component)
    root (fn [child]
    (defsc Root
    [_this props]
    {:query [{:root (comp/get-query child)}]
    :initial-state (fn [_] {:root initial-state})}
    (dom/div
    (child-fabricated (:root props)))))]
    (app/mount! app (root component) "app")
    (routing/start! app "/")
    [(.-body js/document) app]))

    (defn fire-event
    [el event]
    (case event
    :click (.click fireEvent el)))

    (defn get-by-text
    [el text]
    (getByText el text))

    (defn get-by-role
    [el text]
    (getByRole el text))

    (m/defmutation increment [_]
    (action [{:keys [state]}]
    (swap! state update-in [:component/id :counter] inc)))

    (defsc Counter [this {:keys [counter]}]
    {:query [:counter]
    :ident [:component/id :counter]}
    (dom/div {}
    (dom/div {} (str "counter: " counter))
    (dom/button {:onClick #(comp/transact! this [(increment {})])} "+")))

    (deftest fulcro-counter
    (testing "render"
    (let [[screen] (render-component Counter {:initial-state {:counter 0}})]
    (get-by-text screen "counter: 0"))
    (testing "when button clicked counter must increment"
    (let [[screen] (render-component Counter {:initial-state {:counter 0}})]
    (fire-event (get-by-role screen "button") :click)
    (async done
    (waitFor (fn []
    (get-by-text screen "counter: 1"))
    (done)))))))