I find that Playwright offers a great testing experience, and the new UI mode makes it even better. In this blog post, we'll take a look at the UI mode and see how it improves the overall experience.
Luckily there's a function called `forwardRef` to solve a circular dependency between two Angular Standalone Components. A use case for this is a recursive component that renders its parent component.
Concurrency in recurrent jobs can cause race condition issues. However, we can prevent such problems by queuing new jobs when the same job is still pending. This approach helps to manage the job execution and avoids issues that may arise when multiple instances of the same job are active at the same time. In this post we'll see how we can ensure that only one instance of the job is running at any given time, thus preventing conflicts and ensuring a reliable job execution.
Let's take a look at how shifting the auth responsibility from a front-end application to a Backend For Frontend (BFF) affects our Angular applications.
You probably already know the built-in retry mechanism for locators and matchers, but are you already familiar with the retry and polling APIs? Let's take a look at the different retry APIs that Playwright has to offer, and when to use them.
To improve the security of our Single Page Applications, let's ditch the access tokens in the browser and make the Backend for Frontend (BFF) responsible for the authentication process using the Authorization Code flow with PKCE. To achieve this, we'll use the Duende.BFF NuGet package and let it communicate with Auth0.
To save us some time in the process to verify that a file is correct, let's automate the actions to download a file and add it to the Playwright test report for easy access.
Entity Framework 8 brings a new feature allowing us to execute and return unmapped types from SQL select statements. In this blog post we'll take a quick look at how we can accomplish this, and why this is an important tool to have in your toolkit.
At some point in time you'll want to run a subset of your tests. Organizing your tests with Playwright test tags helps you to do this in a clean way. Using tags allows you to target specific tests in specific scenarios, and can help to scale your pipeline(s).
Playwright (v1.31) introduces a new feature to make the authentication process easier. This approach unifies the authentication flow with the rest of the test cases, and more importantly makes it possible to test with different user roles.
Standalone components give you a better foundation to build on, as your Angular component becomes less affected by its internals. It doesn't matter if the component has its own template, or if it's using child components. This makes your test cases less brittle than before with Angular Modules. To interact with the component we're still using the Angular Testing Library because it provides useful utilities to interact and query the component.
Let's migrate an Angular application using @NgModules to the standalone API. For this task, we use the automatic schematic that's available in Angular v15.2.0-next.2. We also take a look at the manual steps that are required to fully migrate the application to use the new functional APIs.
Take advantage of soft assertions in Playwright to improve your test experience and reduce the amount of time spent on fixing bugs. Soft assertions allow that multiple assertions can fail in a single test, rather than stopping the test execution after the first failure.
How to register the OpenTelemetry web packages to automatically create traces and send them to a backend. The result is a helpful dashboard containing insights about the Angular application.
Using DbFunctions is a method to use database-specific functions in your Entity Framework queries. They allow you to take advantage of features that are specific to a particular database provider, such as SQL Server and use them in your Entity Framework queries in a provider-agnostic way. As an example, let's use the SOUNDEX SQL function.
In most cases, I write tests for Angular components without using Test Harnesses, but finding the correct element(s) is not always straightforward. Here, Test Harnesses play a part in easily finding and interacting with those components that can't be queried. Using Test Harnesses is also a good practice into keeping your tests readable and resilient to changes.
Intercepting HTTP requests is a useful feature, let's take a look at how you can intercept an HTTP request with Playwright and discuss some of the possibilities.
NgRx isn't what it used to be. Take advantage of the updated APIs to improve your code base. The result is a more maintainable code base that is easier to read and navigate.
Before the application gets access to the location of the user, the user receives a prompt asking for permission to share their location. This is not different in Playwright tests. In this blog post, we see how to handle this prompt for your Playwright tests.
Leverage the Playwright test.step function to divide your tests into logical steps. These steps create a well-organized summary in the Playwright report and have the benefit that tests become more readable and easier to maintain, especially when a failed test is displayed in the Playwright report.
How to run your Playwright tests against your Azure Static Web App preview environment, which is build and deployed with the Azure/static-web-apps-deploy GitHub Action.
Let's implement a naive feature flag, refactor the code with the .NET Feature Management API, and to top things off, the Azure Feature Management Feature is thrown into the mix to tweak the feature flags dynamically without having an impact on the users.
Utilizing a matrix within your GitHub workflow to create a "test shard matrix" is a major improvement to your CI. This practice can cut the time in half (or better) to run your Playwright test suite.
The Consolidate view is dead, long live `Directory.Packages.props`. Use the `Directory.Packages.props` file to define your NuGet package versions in a single file.
Angular directives allow us to extend components without changing their internal code. This is useful to bring a consistent UX to 3rd party components. The directive can be configured to always be applicable, or can be used in an opt-in or opt-out basis.
Creating sub-components comes with a cost. So what do I think of before creating a new component, because if a component passes the x lines of code isn't a valid reason.
Let's explore how we can stop writing tests and at the same time be more confident in the code we write. We do this by using the new XState test package, in combination with Cypress and Testing Library.
Having an accessible website is important. With the combination of Cypress and axe you can verify that your website is accessible, with only 2 extra lines of code.
I keep being surprised by how reactive Svelte feels. In this article, we take a glance at the Svelte internals to see how Svelte accomplishes this. This is important if we want to use RxJS in Svelte.
If you're using Angular, there's a good chance that you're using a component-based architecture. We can use this architecture to our advantage. Instead of creating one big print stylesheet with some selectors, which becomes unmanageable complex when you have to support multiple printable pages. We can move some of the layout back to the components.
The createAction creator function opened opportunities in the NgRx world. With it came two other creator functions, createReducer and createEffect. Let's take a look at what's so special about it and why it's important.
In this article, we'll iterate over an implementation to introduce multiple independent instances of a NgRx store slice. In an application, these instances can be represented by a tab-like interface. To come to a solution we'll use the Angular Router, NgRx Effects, and NgRx Router Store. We'll also see meta-reducers, helper reducer functions, and smart and dumb components.
The Angular Component pearl-lullaby (v9.0.0-rc.0) release introduces the second official @angular/component component, a Google Maps component. In this post, we take a look at getting started with the Google Maps component.
The new Angular Material release brings us a new CDK clipboard module to interact with the clipboard. In this post, we'll explore how to use the new Clipboard CDK by going over some examples.
By using a Cypress task it's possible to run code JavaScript code in Node.js. We can leverage this API to reseed a database with data we're in control of. Having control over the data allows us to write specific and isolated scenarios to run tests against.
The Angular Testing Library provides utility functions to interact with Angular components, in the same way as a user would. This brings more maintainability to our tests, gives us more confidence that our component does what it's supposed to do, and it improves the accessibility which is better for our users. All these benefits, plus you'll see that it's fun to write tests in this way.
A lot of Angular modules need to be imported with a static forRoot() function, via this function it allows us to configure the module. But sometimes we make the mistake to use the forRoot function more than once throughout an application. We might not notice it when this happens but often it is the cause of unexpected behavior, which is sadly hard to debug. In this post, we'll look into a solution.
Imagine having a form that you want to use at multiple places inside your application. The form will have the same layout but the validation will be different. In our case, this form is used in a procedure and in each step of the procedure the form gets more restrictive. Can you keep it DRY? We had this problem and came up with the following solution.
I discovered XState a year ago, I already had encountered state machines and statecharts before but I missed the point. Now a year further, I'm here to tell you that these are worth looking into and that XState is a the library to get you started. For me, the most important points to use XState or statecharts would be that it's declarative and explicit, it's hard to create invalid state. The nice extra's that you get with it, is the tooling around it and the portability across frameworks.
At first when I heard of css variables, I was a bit skeptical. Why would anyone use it if there are extension languages as scss, sass, less and stylus. After several years, I stated to notice more and more peoples using it, writing about it and talking about it. I was missing out on something... After a while of using it, I was hooked.
In our quest to build a twelve-factor app where we build once and deploy to multiple environment we encountered some problems, but we managed to solve them. Read here how we did it.
I believe that to become a better engineer it all comes down to practice, practice and more practice. Especially when you just started your career. The problem is that when you're just getting started, there is much more to it than just writing lines of code.
At our company, we struggled with Angular Forms at the start. This is because we dived in head first, without talking about how we would want to use it throughout our projects. This post shows how we're currently using Angular Forms to be more productive.
It's easy to create metadata tags with Gridsome, I was so happy with it that I wanted to write this post 😃. There is also a page in the docs on how to create metadata tags, but let's translate the theory into a real world example.
You're probably only using ngrx/effects to handle the communication to an external source by triggering an effect with a NgRx action. But you can do more.
Often when working with a CRUD heavy application you find yourself or someone else asking the question, what should be done when multiple users are using the same screens at the same time.