#19 Magically write browser tests, getting started with Fortify/Sanctum, and more

Welcome to the 19th issue of The VOLT newsletter! Here's a few things from the last couple weeks:

Introducing the Magic Test package

Earlier this week, Mateus Guimarães released a brand new package out of the blue to help auto-generate browser tests for you, Magic Test ✨. Inspired by a Rails package that shares the same name, it lets you build browser tests by interacting with your Laravel application’s frontend and a handful of keyboard shortcuts.

Mateus Guimarães @mateusjatenee

This is a little something I've been working on for the past week. It's called Magic Test and I'm very excited! Imagine if instead of manually writing your browser tests, you could simply click around and have a test generated for you? Check out the video 👇🏻 1/2

Browser tests are something that I think is fairly fundamental to have when you start building tests for an application. However, the process can be both tedious and time-consuming. Magic Test aims to remedy both of those issues, in a pretty slick way.

Getting started with Laravel Fortify + Sanctum

At the beginning of this month I released a new video on my YouTube channel, showing how to install, configure, and use the official Laravel authentication packages Fortify and Sanctum. It’s the second part of a 3-part series on the current Laravel authentication ecosystem.

If you don’t want to sit through the whole tutorial, check out the description for helpful links to specific parts of the video that I’ve highlighted.

Auth guards in Laravel made easy

I stumbled across a pretty interesting package last week called Nightguard. Built by Luke Downing, it’s a Laravel package designed to help you scaffold out authentication guards based on Eloquent models, using a single artisan command and a few lines of code.

Let’s say that you have an Administrator model connected to your application’s authentication. Using Nightguard, all we have to do to secure a route is run the artisan nightguard:model command, and add a Nightguard::create() call to your AuthServiceProvider.php file with the Eloquent model class and role name.

Highlighting an active menu item on a static HTML site

Statically-generated sites are awesome. They can be deployed easily, don’t contain any access points for malicious intruders, and (usually) load up incredibly fast. But, those positives come with the downside of missing interactivity through a server-side layer.

For instance, what if I wanted to track my current route and add a class to a navigation’s menu item reflecting the active state? On PHP this could be accomplished with something like

<?php echo ($_SERVER['REQUEST_URI'] === '/home') ? 'active' : '' ?>

But we don’t have that power with a static site. Instead, we’ll have to rely on something like JavaScript.

I ended up using a little bit of jQuery too, mostly because it was already being loaded into the site. The above code determines what navigation link contains the current url as the href attribute, and applies some active Tailwind styles to it.

Today I learned

The helpful hint this time comes from Kyle Shevlin’s Twitter. If you use Chrome DevTools, there’s a “Capture node screenshot” option that let’s you save an image of a particular element (div, container, image, heading, etc.) from a site’s markup.

Kyle Shevlin @kyleshevlin

TIL that Chrome DevTools has "Capture node screenshot". Holy smokes, Batman. That's pretty friggin' cool. - Select node - Right click on element in DevTools - Select "Capture node screenshot" - Profit

That’s it for now! If you have any questions about the above, or have something you’d like me to check out, please feel free to let me know on Twitter.