Live data from Hacker News

Tremor – The React library to build dashboards fast

tremor.so

41–50 of 84 posts

Re: Tremor – The React library to build dashboards fast

#41

I started a react component library project that has been going for 4 years now and gets about 40k downloads a month. If it wasn't for my test suite, things would have been a giant mess long ago and I probably would have abandoned it. I can't think of doing a react project without a test suite because over time, any dependencies you have (including on react) will end up breaking things in ways that you don't know. Wi…

My personal projects generally have a better test suite than what I do for work. First of all, I do it at my own pace, but more importantly - it makes the whole thing possible, as you said.

The nature of a personal project is such that I may not come back to it for months, sometimes even years. The first thing I always do is run the test suite. It's my lodestar. It helps me understand what state the project is in so I can confidently pick up where I had left it.

It is also my requirements documentation - as code.

Re: Tremor – The React library to build dashboards fast

#42

Earlier quoted context omitted.

We have hundreds of tests for our client side projects (web app, mobile app), and they definitely do more than what you describe. Some are simple (although very few are as simple as your example) and some are complex, depending on the portion of the app being tested. Some are basically integration tests for components/widgets, where it runs it in isolation to test the inputs and outputs. Others are more like traditio…

Could you give an example? Most UI tests I see are either a) trivial/tautological, b) test implementation details, or c) doesn’t actually even test the UI , i.e “what is visually painted on-screen.”

Almost none of the e2e tests for https://www.executeprogram.com meet this description. They're all tests like:

  - Visit a lesson page with a code example that returns a string.
  - Enter the correct answer to that code example, but without the quotes around it.
  - Assert that the text "Almost, but the answer is a string so it needs quotes." now exists on the page.
No implementation knowledge, nothing faked, real UI behavior tested. You can test most app behavior like this. E.g, we test our entire billing system like this, making these kinds of real assertions.

(To make sure that we know when actual rendered pixels change unexpectedly, we use Percy, which is a separate topic.)

Re: Tremor – The React library to build dashboards fast

#43

I started a react component library project that has been going for 4 years now and gets about 40k downloads a month. If it wasn't for my test suite, things would have been a giant mess long ago and I probably would have abandoned it. I can't think of doing a react project without a test suite because over time, any dependencies you have (including on react) will end up breaking things in ways that you don't know. Wi…

My personal projects generally have a better test suite than what I do for work. First of all, I do it at my own pace, but more importantly - it makes the whole thing possible, as you said. The nature of a personal project is such that I may not come back to it for months, sometimes even years. The first thing I always do is run the test suite. It's my lodestar. It helps me understand what state the project is in so…

People are often given timelines at work that don't include testing. As a believer in agile, I generally push back hard to include testing.

I'd rather dole out incomplete MVP's with tests and fewer features than to skip tests entirely just to hit crazy timelines with a buggy product. Experience says this almost always has positive long term results.

Re: Tremor – The React library to build dashboards fast

#45

Earlier quoted context omitted.

No, that's not what I meant. I mean tests are great on the backend, but I've never seen them prevent a bug on the frontend, especially in react where it's usually obvious what effect your changes will have. In fact, many frontend tests don't even truly test the UI

https://github.com/lookfirst/mui-rff/blob/master/test/Autoco...

> disables input when disabled is passed

That's exactly the kind of test double I'm talking about

Re: Tremor – The React library to build dashboards fast

#46

Earlier quoted context omitted.

https://github.com/lookfirst/mui-rff/blob/master/test/Autoco...

> disables input when disabled is passed That's exactly the kind of test double I'm talking about

And? There was an actual bug filed around that and the issue was resolved with a test that ensures it doesn't happen again. That is all I care about. Make sure we don't make the same mistake twice and that over time things continue to work with new versions.

Re: Tremor – The React library to build dashboards fast

#47

I've gotten so jaded on these "batteries included! everything you'll ever need!" component libraries over the years. Inevitably you'll run into a component that is half-baked or incompatible with your architecture, which forces you to install a 3rd party alternative. Then it happens again. And again... Eventually you're left pulling in this huge library with 2MB of CSS just for the four components you're still using…

I've gotten jaded with that approach too. The same thing happens, just on an individual component scale. (The number of times I've gotten written into a corner with $dropdown_component is too damn high.) My pendulum has swung to do it all yourself with ample links in the source to other projects on GitHub for inspiration.

Re: Tremor – The React library to build dashboards fast

#48

Earlier quoted context omitted.

https://github.com/lookfirst/mui-rff/blob/master/test/Autoco...

> disables input when disabled is passed That's exactly the kind of test double I'm talking about

Can you elaborate on what’s problematic with this test? Testing that the component does what expected based on input is telling me the component is working as expected.

Re: Tremor – The React library to build dashboards fast

#49
post #22

Earlier quoted context omitted.

What does your test suite look like? (What's the library is maybe a better question)

Good question. `@testing-library/react` and jest to run it. snapshots and a bunch of action code too. There are more modern frameworks now too that can be used for integration tests, but I haven't bothered yet as the snapshots have almost always caught the issue. It boggles my mind that react.dev doesn't start off teaching, with writing tests.

Are snapshot tests the things that fail because they can't tell "background-color: #ff0000" and "background-color:#f00" are the same?

Re: Tremor – The React library to build dashboards fast

#50

Earlier quoted context omitted.

Good question. `@testing-library/react` and jest to run it. snapshots and a bunch of action code too. There are more modern frameworks now too that can be used for integration tests, but I haven't bothered yet as the snapshots have almost always caught the issue. It boggles my mind that react.dev doesn't start off teaching, with writing tests.

Are snapshot tests the things that fail because they can't tell "background-color: #ff0000" and "background-color:#f00" are the same?

Yes, that’s right… they are of dubious utility imho.
Post reply on HN