Fork me on GitHub
#re-frame
<
2018-02-21
>
danielcompton04:02:35

Hi folks, we've been working away at re-frame-10x (née re-frame-trace) for quite a while and we're now ready to step out of the shadows and tell the world about it. re-frame-10x is a debugging tool for re-frame that helps you become 10x more productive working on re-frame apps. Give it a go at https://github.com/Day8/re-frame-10x and let us know how you find it. We've got more planned for it to make it even better, but we think it's incredibly useful today.

genekim05:02:54

Wonderful! I’m already using re-frame-trace — looking forward to trying this out!!! Thank you!

jakemcc17:02:33

Nice. Looks great.

gadfly36104:02:57

@danielcompton I am truly impressed by the tooling that has been emerging around re-frame 🎉

genekim05:02:39

I’m wondering if you could help me think through re-frame xhrio/ajax call testing… In my first couple of AJAX experiments, I used the async cljs-http library (https://github.com/r0man/cljs-http), which was great, because I finally learned how to use async channels and go blocks. Then I learned about the re-frame-http-fx effect handler, which I wrote new AJAX routines in — I loved the reasoning that the AJAX calls were now more declarative. Long overdue, I’ve spend the last couple of days writing doo and cljs.test tests for those AJAX calls — I started with the cljs-http AJAX calls first.. After some head-pounding to get async tests running, it’s been fabulous. Automated tests have made it feel safe enough to doing some refactoring. (And I loved using the dynamic vars to point the CLJS client to localhost:3000 during testing! Another first! 🙂 It has felt incredibly worthwhile writing these tests, and even have them running inside of CircleCI now… I’ve written automated test for all the cljs-http calls, which are used by re-frame event handlers… But now I’m looking at all the re-frame :xhrio effects handlers I wrote, and am wondering how to write automated tests for those — I’d like to test that given a set of AJAX inputs, I get the right set of expected outputs from my CLJ server. - Should I turn the :xhrio effects back into cljs-http calls? (yuck). - Should I call the re-frame events from cljs.test? (seems odd? not idiomatic?) - Should I write these in re-frame-test? (https://github.com/Day8/re-frame-test) - Should I leave the :xhrio effects in re-frame, but write duplicate cljs-http AJAX calls? (doesn’t seem right — now two places for errors…) I’d love some advice. Many thanks! (Here’s a snippet of cljs.test / cljs-http AJAX calls that I’m just loving…)

genekim05:02:24

(As I wrote this up, it occurs to me that I’m actually testing my CLJ server, almost as much as I’m testing the CLJS/re-frame client… Not sure how that informs the right choice…)

mikethompson05:02:20

So there's four parts to this: 1. Test that your event handlers are returning the right effects (to trigger HTTP) 2. Test that the effects handlers work as expected (does the HTTP actually happen) 3. Test that on-success and on-failure (event handlers) work 4. The server end 1 and 3 are pretty straight forward. 2. will be fiddly and messy to test (it is stateful), but perhaps sufficiently simple that it requires no testing. Effects handlers should be made a simple as possible. 4. Is that just testing your server-side route handlers? Is out of scope for re-frame? If you want to do integration testsing of all 4, then re-frame-test maybe of interest. Actually re-frame-test may be of interest either way.

mikethompson05:02:03

re-frame-test offers the possibility of doing your entire integration test in clojure, and not involving clojurescript. I have no experience doing this. But it was written to allow it.

genekim05:02:35

@mikethompson Thank you as always for your thoughtful comments… It helped me understand that re-frame has made #1 and #3 almost non-issues for me… Although I’d like to write test for those eventually, I’m sufficiently sloppy and inexperienced that my BIG pain points are #2 and #4, which are indeed outside of re-frame — I break the server all the time w/small changes, and I need to validate that my transformation of server results in CLJS are correct. And because of that, I think I’m going to write cljs-http AJAX calls for each of my xhrio calls, and use that to write tests inside of cljs.test, just to ensure correctness of all my server endpoints, and that these test running all the time. THANKS AGAIN! (PS: congrats to you and @danielcompton and team for getting re-frame-10x out!)

mikethompson05:02:17

@genekim I'm puzzled that #2 is a problem

mikethompson05:02:13

Just using re-frame-http-fx for #2 should remove the need for testing (assuming it works as advertised)

mikethompson05:02:53

But I feel like we must thinking differently about #2. Puzzled.

genekim06:02:17

@mikethompson CLJS reframe client is making an AJAX call to a CLJ server I wrote, which is making OAuth calls to Trello. Because I wrote it, it definitely needs testing. Here are some of the failures I ran into today — for your amusement: - in CLJ server, my incorrect use of require/refer for pprint caused server to no longer compile/run entirely - in CLJ server, when I deleted logging/println of Trello keys, accidentally broke something there, too :) - in CLJS, had to relearn how to unpack return values: multiple levels of text > JSON > CLJS - for circleCI, had to use dynamic vars to point AJAX calls to localhost Instead of Heroku - wrong environment vars with Trello keys can break server, too, I discovered I make a lot of errors in Category #2, sadly. And that’s just today! :) imagine me trying to get oauth working! :)

curlyfry06:02:10

@genekim I'd probably test the server endpoints separated from re-frame. Perhaps using https://github.com/ring-clojure/ring-mock

genekim07:02:28

This was almost exactly what I needed. I ended up using peridot (https://github.com/xeqi/peridot), because it could hold session state. Thanks!!!

genekim07:02:14

And I totally love that it drives the testing into the Clojure server, instead of in the CLJS components. Thanks for the great advice!

genekim06:02:49

Thx @curlyfry — I had that on my list to research. I’ll study it more tomorrow!

genekim17:02:58

@curlyfry ring-mock looks great, but a basic question? Right now, on a Mac, I have two terminal windows open during my daily work: 1) lein doo phantom test; 2) lein ring server-headless. (I used to have a 3rd to run lein figwheel to have REPL, but that now runs inside of Cursive.) It seems like now I’ll need a 3rd window for Clojure ring/unit tests… Is this how other people are running all these things?

gklijs17:02:53

Sometimes, I’ve also used https://github.com/kouphax/lein-cooper to start several processes in one go.

genekim07:02:19

lein-cooper is amazing. It’s working great. Thank you!!!!

fabrao17:02:19

Hello all, I have an application that build an dashboard and have many datasources in it. What is the best way to fill the datasources for each element of dash using re-frame? Can I use something like (defn fill-data [] (rf/dispatch [:ds-1]) (rf/dispatch [:ds-2]) ...) ? Or is there a better way to do multiple dispatches?

nrako19:02:20

@fabrao To answer your question, you might find dispatch-n helpful (https://github.com/Day8/re-frame/blob/master/docs/API.md#dispatch-n). That said, re-frame is built on the premise of a single app-db. Perhaps this just semantics, or perhaps you are managing multiple stores? I am not familiar enough with the framework to offer best practices on hydrating data in the db, so will defer to others for that...

fabrao19:02:30

@nrako Thanks, that is the thing I need

genekim21:02:06

ooooh…. color coded, too, @gklijs…. cool! Thanks!!!!!

feihong21:02:18

I have simple re-frame app that uses the web speech API to speak some user-inputted text in response to a button click. Works totally as expected on Firefox and Chrome, but not at all in mobile Chrome and Safari! I suspect that the issue is due to the callback distance (not sure if that is the right term) between the button click event and the speechSynthesis.speak() invocation, but I haven't looked into it very deeply yet. Also, web speech demos using vanilla js work fine in all my browsers.

joelsanchez23:02:28

(I have no questions, I just wanted to share)