Coding Design Systems - ep17 - Testing your Design Systems Components, with Gil Tayar

Every Tuesday at 5:30PM UTC, join @Georges_Gomes, @m4d_z, and their guests in a new live coding session about design systems, on Backlight.dev!

⎯⎯⎯ In this episode ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

00:00 - Intro: Welcome Gil Tayar 04:01 - The ECMAScript Type Annotations Proposal 09:06 - The bare-modules development trend 10:25 - A vision on how to test frontend architectures 14:11 - The Shift Left principle applied to design systems 18:39 - Distributing test across design systems components 22:20 - Micro-frontend architecture to ensure better tests quality 28:05 - Unit tests, integration tests, visual regression tests, and more 40:03 - Testing and visual previews in Backlight 46:30 - How to properly test design systems components 48:05 - Your frontend testing toolbelt 51:19 - Outro: test, test, test: it’s a way not to die

⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Testing might be impressive, but it shouldn’t. Thanks to his vast experience in scaling software architectures and front-ends, Gil Tayar is guiding us through the fantastic field of components testing. A vision of how to design systems help you to be more confident in your final product, by testing their components, from unit tests to visual regressions.

⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

• TC39 Type Annotations proposal: https://github.com/tc39/proposal-type-annotations

• The mushin way to frontend performance: shift left to a pure design system: https://m4dz.net/t/mushin-way/

• Micro frontends: https://micro-frontends.org/

• Write tests: https://kentcdodds.com/blog/write-tests

• 🐥 @giltayar: https://twitter.com/giltayar

• Gil’s blog: https://gils-blog.tayar.org/

Picks:

• JSdom: https://github.com/jsdom/jsdom

• AppliTools: https://applitools.com/

• ChaiJS: https://chaijs.com

• Playwright: https://playwright.dev/

• Puppeteer: https://developers.google.com/web/tools/puppeteer/

• React Testing Library: https://testing-library.com/docs/react-testing-library/intro/

• 🪄 Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=sessions%3Acds

• 🐥 m4dz: https://twitter.com/m4d_z