Welcome friends 👋
This month I wrote quite a few unit tests in Vue, so this issue will take a look a the seven pillars of frontend testing. When I was working at the university, all our student projects had to go at least through some user testing to evaluate and improve their projects. I think it is probably the first kind of testing every developer has to go through and a testing method that provides immense value but is often overlooked.
For user testing, there are many tools and great guides on how to conduct different user testing methods. The usability and UX area is very close to frontend development and there are a lot of basics usability concepts to keep in mind while developing applications. As a frontend developer, I invested some time in reading usability blogs like the Niels Norman Group or usabilitygeek to understand some of the important usability basics.
In terms of Accessibility Testing, I believe it goes hand in hand with good usability. Accessible sites in most cases will also be more usable. Personally, I love to use the Wave Tool as a browser extension to spot major accessibility issues. Pa11y and Axe are two more tools that are great for accessibility testing and automation.
Performance Testing I also consider as part of the basics, since the mobile use of the web is growing and a lot of people visit sites on mobile data. Two tools I regularly use to test things concerning performance are webpagetest and lighthouse inside Chromes DevTools. Both do a great job in quickly showing you areas of improvement.
As for Unit and Integration Testing, I think these are the ones that are harder to get into for beginners since they require more implementation and testing knowledge. But both provide immense value in larger software projects, because they will find bugs and improve the readability and stability of your codebase. For Unit Testing, frameworks like React, Vue or Angular provide testing functionality out of the box and have excellent guides on how to get started. For End to End testing and browser testing, I have personally used Cypress a few times and can definitely recommend it. But there are of course other tools like Selenium, that also have their advantages.
The only testing I haven't implemented personally is Visual Regression Testing. What makes a lot of sense to me is the support by Storybook via Chromatic to add visual regression tests on a component level.
After taking a look at all the different ways we can test the frontend, it becomes pretty clear, that it's an increasingly complex area. It depends on users, limitations of use as well as context of use. Code bases and their architecture play a role, but also frameworks and technical requirements can influence the testing environments. It's also an area of expertise that really depends on a team's technical knowledge and that improves with years of experience.
-- Lisi
Links & Tools
SVGOmg
Tool
This is a tool I use weekly to optimize any kind of SVG. There are also great [plugins](https://www.sketch.com/extensions/plugins/svgo-compressor/) for it to automate SVG export in your design tools.
Squoosh App
Tool
Another performance booster tool that allows you to compress images with different algorithms and formats directly in the browser.
What I worked on this month
In March I spent a lot of time implementing a learning and course management system directly in our Storyblok App. It was great to work on a feature in the core product, that's completely new and shaped together with the expertise of my team. I'm also currently hacking on some fun IoT stuff, which I will share some time this month.