Andrew Schmelyun's Newsletter

Share this post

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

aschmelyun.substack.com

#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:

Andrew Schmelyun
Mar 16, 2021
Share this post

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

aschmelyun.substack.com

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.

Twitter avatar for @mateusjatenee
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
Image
12:44 PM ∙ Mar 8, 2021
592Likes141Retweets

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.

Image

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.

Screenshot of JavaScript and jQuery code. On document ready, find the active link with nav a[href^="/' + location.pathname.split("/")[1]. Then, remove Tailwind classes associated with inactive links, add ones for active links, and continue. Do the same this when a nav link is clicked.

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.

Twitter avatar for @kyleshevlin
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
Selecting a tweet for DevTools inspection
The context menu where you can select "Capture node screenshot"
A perfect screenshot of the tweet that I selected to capture
11:37 PM ∙ Feb 25, 2021
41Likes2Retweets

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.

Share this post

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

aschmelyun.substack.com
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Andrew Schmelyun
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing