feat: simplify devcards setup

Author: filipesilva

README.md

@@ -67,10 +67,7 @@ my-app
 |  └── favicon.ico
 └── src
    ├── app
-   |  ├── cards
-   |  |  ├── devcards_runner.cljs
-   |  |  ├── helpers.cljs        
-   |  |  └── test_runner.cljs    
+   |  ├── cards.cljs
    |  ├── core.cljs
    |  ├── hello.cljs
    |  └── hello_cards.cljs       

template/shadow-cljs.edn

@@ -4,11 +4,11 @@
         :output-dir "public/js"
         :target :browser}
   :cards {:asset-path "/js"
-          :modules {:main {:init-fn app.cards.devcards-runner/main}}
+          :modules {:main {:init-fn app.cards/main}}
           :compiler-options {:devcards true}
           :output-dir "public/js"
           :target :browser}
-  :test {:main app.cards.test-runner/main
+  :test {:ns-regexp "app.cards"
          :output-to "out/test.js"
          :target :node-test}
   :e2e {:ns-regexp "e2e.*"

template/src/app/cards/devcards_runner.cljs renamed to template/src/app/cards.cljs

@@ -1,12 +1,16 @@
-(ns app.cards.devcards-runner
+(ns app.cards
   (:require [cljsjs.react]
             [cljsjs.react.dom]
             ; devcards needs cljsjs.react and cljsjs.react.dom to be imported
             ; separately for shadow-cljs to add shims.
             [devcards.core :refer [start-devcard-ui!]]
+            ["jsdom-global" :as jsdom-global]
             ; Import all namespaces with cards here to load them.
             [app.hello-cards]))
 
+; Set jsdom to mock a dom environment for node testing.
+(jsdom-global)
+
 (defn ^:export main
   "Start the devcards UI."
   []

template/src/app/cards/helpers.cljs

@@ -3,8 +3,15 @@
             [devcards.core :as dc :refer [defcard deftest]]
             [cljs.test :include-macros true :refer [is]]
             ["@testing-library/react" :refer [render cleanup fireEvent]]
-            [app.hello :refer [click-counter hello]]
-            [app.cards.helpers :refer [testing-container]]))
+            [app.hello :refer [click-counter hello]]))
+
+(defn testing-container
+  "The container that should be used to render testing-library react components.
+  We want to provide our own container so that the rendered devcards aren't used."
+  []
+  (let [app-div (js/document.createElement "div")]
+    (.setAttribute app-div "id" "testing-lib")
+    (js/document.body.appendChild app-div)))
 
 (defcard
   "This is a live interactive development environment using [Devcards](https://github.com/bhauman/devcards).