Fork me on GitHub
#clojurescript
<
2021-02-01
>
Ricardo Cabral16:02:03

Hello all, could someone give me a direction about testing clojurescript with reagent? I have setup luminus, figwheel, doo, karma and reagent and I have found a library called cljs-react-test, however I am getting a lot of errors with the sample in their github example and I would like to know what is the best approach to test components like a simple input text. Could someone, please, let me know what is the best approach to learn clojurescript using TDD/BDD?

athomasoriginal01:02:13

hey! here is the test setup that I use for clojurescript: https://betweentwoparens.com/clojurescript-test-setup

athomasoriginal01:02:37

You will notice that it’s a lean setup and this is on purpose. I try to avoid too many tools and wrappers in general and lean on the JS ecosystem

athomasoriginal01:02:29

RE: testing reagent I use a combination of react test tools and https://testing-library.com/docs/react-testing-library/intro/

athomasoriginal01:02:13

RE: learning TDD/BDD Can you elaborate of what you are looking to learn?

Ricardo Cabral07:02:03

Hi @U6GNVEWQG thanks for replying to me. I have a looked in the link which you have sent. I am able to run lein test and also write normal test cases like: (deftest sample-test (is (= true true))). What I want to achieve is something like: I have a “home-page” component, a “menu” component and a “login”component. So there is a if inside my function if the user is logged in render the menu, otherwise a login page will be rendered.

Ricardo Cabral07:02:16

Something as simple as : (defn home-layout [] (if-let [user (session/get :identity)] [home-user-layout] [home-login-layout] ) ) My components are simple as (defn home-login-layout [] [:div [h/render-header] [:div.columns [:div.column [l/login-component]]]])

Ricardo Cabral07:02:19

I am trying to learn by writing the test first and for instance: when the user is not logged in it should render the login page. I will check the links you have shared. thank you

Ricardo Cabral08:02:16

I believe this will help mehttps://francisvitullo.medium.com/a-way-of-testing-views-in-clojurescript-apps-98aaf57c5c2a however I have just realized that I need to read about re-frame

cap10morgan18:02:10

Is there a way to build webworkers with :target :bundle? I see that :webworker is another value for the :target key, but it seems like I need both for a :target :bundle build. Or am I misunderstanding something?

dnolen18:02:02

I feel like we did something for that already

dnolen18:02:25

but I don't use webworkers - I think maybe @kommen might have worked on this?

Fredrik Andersson19:02:12

Is there any prefered way to unfold an vector into another when building hiccup? I got it working with "into" but I wonder if there is a better way? "concat" didn't work

dpsutton19:02:55

into or apply vector?

p-himik19:02:54

I don't think there's a better way than into, assuming you mean something like (into [:div] children). A bit relevant - note also that Reagent supports React fragments via :<>.

Fredrik Andersson19:02:04

ok i dont know what react fragments is, need to look it up

p-himik19:02:44

Ah, and often you can even use just [:div children]. But my memory is a bit hazy here - I think only vectors are supported and seqs will whine about missing :key.

Fredrik Andersson19:02:20

okay, i was trying to make something like (menu {:prop xx :prop yy :items [(item {:prop...}]})

Fredrik Andersson19:02:42

where i in menu need to inject the :items into the menu div

Atiq Gauri19:02:57

I am generating source maps in cljs using shadow-cljs compiler config:

:electron-main     {:target           :node-script
                                :main             mutesync.inspect.electron.background.main/init
                                :devtools         {:after-load mutesync.inspect.electron.background.main/done}
                                :compiler-options {:optimizations :simple
                                                   :source-map true
                                                   :source-map-include-sources-content true
                                                   :source-map-detail-level :all}
                                :output-to        "shells/electron/js/background/main.js"}
generated map files: main.js and main.js.map I am trying to use this in sentry but they aren't working and as suggested I tried validating this sourcemap: using this https://github.com/mozilla/source-map output: { source: null, line: null, column: null, name: null } using this https://www.npmjs.com/package/sourcemap-validator output: error: "The map is not valid JSON" shadow-cljs version: 2.11.15

thheller19:02:19

it is valid json and the map is valid

thheller19:02:29

that library just doesn't like it for some reason

thheller19:02:37

browsers like it fine

Atiq Gauri19:02:50

how can I validate these map in any browser then