Skip Navigation
Best practices for testing web components?

I recently rebuilt a moderately sized jQuery application/component using Lit, with the end result being 6-7 components spread over around 2,000 lines of code.

We currently have no automated testing at all but I'd like to implement it, especially now as the markup/styles have been moved into JavaScript. It's much better overall - but it feels riskier.

But I have no idea where to even begin. Do I set up end to end tests using Playwright on site? Can I test the components individually? Keeping in mind as well that we don't use a build system/any sort of CI.

Just wanted to get people's thoughts/experiences here.

0
TerrariaClone: An incomprehensible hellscape of spaghetti code.
github.com GitHub - radian-software/TerrariaClone: 🔥 An incomprehensible hellscape of spaghetti code.

🔥 An incomprehensible hellscape of spaghetti code. - GitHub - radian-software/TerrariaClone: 🔥 An incomprehensible hellscape of spaghetti code.

GitHub - radian-software/TerrariaClone: 🔥 An incomprehensible hellscape of spaghetti code.
3
SCSS nesting
  • This file is over 20k lines long, and 400kB

  • It is nested over 10 levels deep in many places

  • There is no naming consistency. The original file used BEM, but now it switches randomly between whatever the devs felt like at the time. There are random contractions all over the place (eg, a parent container might have the class payment-items, but the children are p-item)

  • There is no style consistency. It switches randomly between kebab case, camel case, snake case, a mix of kebab and snake case (!!) or no case at all (just one long word with no separators). A parent element might use one case, but then the child element will use a different case for the exact same term

1
What is the new stubby vacuum engine bell made of?
  • My understanding is that it’s just the large nozzle extension that’s made of niobium as it’s radiatively cooled - the upper part of the bell and the combustion chamber is cooled by pumping propellant between the walls, so it can just be made of steel.

    This is what the Merlin Vacuum engine looks like without the nozzle extension (though this is 1C): Image

    It’s possible that the ‘stubby’ engine is just this.

  • Apparently I had a high tolerance for pain
  • You're right, this is some homebrew I wrote for my DS when I was in highschool.

    But it was nothing as clever or logical as that! I think I had read somewhere that floats were really expensive on the DS ARM9 CPU, as was division (?). So to allow fractional values for object positions, etc, you would store them in an integer at 256x their true value, then shift it by 8 to the right to 'divide' by 256 and get the proper value back.

    Not sure whether this was actually true, but either way this would've been completely cancelled out by calling that 'lowestXInObj' function 20 times per frame - it loops through every object in the scene!

  • InitialsDiceBearhttps://github.com/dicebear/dicebearhttps://creativecommons.org/publicdomain/zero/1.0/„Initials” (https://github.com/dicebear/dicebear) by „DiceBear”, licensed under „CC0 1.0” (https://creativecommons.org/publicdomain/zero/1.0/)ST
    stratts @programming.dev
    Posts 8
    Comments 3