Will Fry

IT guy from Southeast London. I like all things Data, Dogs, Running, Food.

[Will Fry @WillFry]

@MichaelThiessen @vuejs I built an app that visualised a word's etymological origins on a network graph, using data scraped from Wiktionary.

It had over a million words from a few hundred languages. It was cool, but the code was awful - I learnt a lot from it!

[Will Fry @WillFry]

@jacobmparis @AdamRackis This exists already - it's called Futsal. There's also 5-a-side and 7-a-side football which are kind of like what you're describing.

[Will Fry @WillFry]

@andrecasaldev @housecor I think you've got it right - roll your own solution until it becomes too much of a maintenance burden and then consider Storybook.

I use Storybook useful for components as simple as a button. 6-7 props is plenty for me to rather write a story for all the prop permutations.

[Will Fry @WillFry]

@andrecasaldev @housecor I prefer Storybook for its ability to show all variations of props.

Got a component with n boolean props? That's 2^n components you need to add to your page. If configured correctly, Storybook will automatically add controls for any new props you add to that component.

[Will Fry @WillFry]

@housecor This will be extremely useful, thanks!

[Will Fry @WillFry]

@MichaelThiessen I find unit/integration labels unhelpful for frontend testing. Like you said, it's all about mocking - when testing a feature, the questions we should ask are "(what?) should I mock" , and "how should I mock it".

The answers inform how we write the tests - jsdom/browser/visual.

[Will Fry @WillFry]

@MichaelThiessen @vuejs (2/2) I also find it annoying to test navbar type components. Either I build a mock array of routes or I import actual routes and then mock deeper dependencies (e.g. Auth hooks). Maybe I'm missing something?

It doesn't help that I compare it to Pinia which is excellent to test

[Will Fry @WillFry]

@MichaelThiessen @vuejs (1/2) I'd say it's annoying rather than difficult.

I don't like how I need to mock it in each test's `global` property - it's easily forgotten by other devs when the file is extended in the future. Many of my colleagues dislike tests and this adds a small amount of friction.

[Will Fry @WillFry]

@MichaelThiessen @vuejs What's your reason for applying the v-if to the wrapping divs, and not directly to the custom components (which would then include those divs)?

[Will Fry @WillFry]

@hhhx9000 @2sush My opinion is that you don't write unit tests for those flows.

Instead I'd write a small number of E2E tests for the happy paths, and try to find sensible ways to break down the solution into small chunks that can be unit tested as a black box with minimal mocking.

[Will Fry @WillFry]

@m00nreal @RealNeilC @housecor I've used flags in a couple different companies, and the main use case has been to enable deploying unfinished features, and for canary releases. It's rare that we decide to "go back to an old version" (although being able to revert a release without a code change is useful).

[Will Fry @WillFry]

@housecor I sometimes follow this pattern but it depends on the size of the diff between the flag variations, and the length of time I expect the flag to be evaluated for.

If the diff is only a few lines then I just use an if statement in one file - less chance of the files diverging.

[Will Fry @WillFry]

@thekp_97 @housecor @playwrightweb I take this approsch and the main reason is that we use MSW to generate mocks when running the app locally (so we can develop against unreleased API endpoints, we can mock specific responses) - it's easier to use the mocks we already have, and these mocks are type safe.

[Will Fry @WillFry]

@housecor @playwrightweb Nice! This is the exact setup that we're currently adding at my current place.

Quick question - say you're building a new feature (a largeish feature requiring multiple Playwright tests). How do you decide which test cases should be e2e and which should be mocked?

[Will Fry @WillFry]

@kentcdodds The way I see it, unit/integration is a spectrum and the more you mock, the closer you move to "pure unit" on that spectrum.

Knowing what to mock and how to mock it is very important (and often difficult).

[Will Fry @WillFry]

@philip_holroyd Weird, what's the url it's trying to hit? I sent a CURL request to https://t.co/DS5Ztdr7ZC and got JSON back as expected. I deprecated an endpoint last week because of technical limitations (the same URL but with no '/api'). If you were hitting that endpoint I'd expect errors.

[Will Fry @WillFry]

@philip_holroyd To elaborate a bit more, there are some funky routing rules in place that mean that requests are routed to the frontend/backend by path rather than by domain.

[Will Fry @WillFry]

@philip_holroyd A perfect example of how it's difficult to procedurally generate good quiz questions! Axl Rose toured with AC/DC in 2016, and so Wikidata includes an RDF Triple of "Axl Rose"|"Member of"|"AC/DC". 🤯https://t.co/tVD7wc5MWz

I've deleted the question.