Learn Angularfire, Flux-architecture and Testing-library

In 2018, Kent C. Dodds wrote: "The more your tests resemble the way your software is used, the more confidence they can give you." This phrase became the guiding principle for the entire Testing Library ecosystem. 

A few years later, the React Testing Library became the de facto library for writing unit and integration tests in the React ecosystem.

Thanks to its user-centric perspective, our tests are closer to our user experience and far away from implementation details.

In this course, you will learn how to:

- render your components
- properly query your UI for elements while keeping accessibility and your users' experience in mind
- improve your testing experience with the usage of some utilities
- interact with your components to fire events
- leverage asynchronous utilities to customize your testing flow
- get rid of the annoying "not wrapped in act" warning

After this course, you should be able to write and debug any test using the React Testing Library!

The `@testing-library` family of packages helps you test UI components in a user-centric way.

You want to write maintainable tests that give you high confidence that your components are working for your users. As a part of this goal, you want your tests to avoid including implementation details so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.

Testing Library accomplish these goals so you can be confident your application will work when it gets to the end user.

testing-library

An Introduction to the React Testing Library

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Firebase provides a real-time syncing backend for your AngularJS applications in very few lines of code. In this lesson, you'll learn how to get started integrating it into your app.

Get Started with Firebase and AngularFire

AngularFire is the officially supported AngularJS binding for Firebase. Firebase is a backend service that provides data storage, file storage, authentication, and static website hosting for your Angular app.

angularfire

You'll learn the 2 Observables that Firebase Authentication provides to subscribe to the authentication state of your application, `authState` and `user`.

You'll see how they both return the same `User` object from Firebase Authentication.

And you'll learn that the difference is that `authState` triggers when the user logs in, or logs out of the application, while `user` is called both of those times, and also is called when Firebase refreshes the user's authentication token.

As a personal guideline, if I need to do an operation when the user's token is refreshed (_for example, update a 3rd party service_) I'll use `user`, if not, I'll default to `authState`.

Choose Between authState or user to Subscribe to Firebase Authentication State Changes

firebase

There are 2 different ways to get a document's ID when using `@angular/fire`.

You can add the parameter `{ idField: 'id' }` to your collection when using the `collectionData()` observable.

You can also use the observable `collectionChanges()` and access the internal metadata of the document to manually get the ID and add it to the resulting object.

Code sample: https://github.com/javebratt/angularfire-idField

Access a Firebase Document's ID Even when It's Not Stored in the Document with angularfire

Given how web pages are built nowadays, you might find yourself with multiple instances of the same element.

To avoid querying for a list of elements and then filtering them down, you can constrain your query to a specific area.

In this lesson, we are going to learn how to leverage the *within* helper to constrain our query to a specific element.

Constrain a Query to a Specific Element Using Within

Sometimes, you might need to wait for an element to disappear from your UI before proceeding with your test setup or making your assertion.

In this lesson, we will learn about a wrapper around the waitFor that allows you to wait until an element is removed from your UI: the *waitForElementToBeRemoved*.

Use the waitForElementToBeRemoved Async Util to Await Until an Element Disappears

Whilst fireEvent helps to interact with elements, that is not how a user interacts with them. When a user interacts with an element, more than a single event is fired. This means that by using fireEvent, we might be missing some scenarios that might be triggered accidentally by other events.

In this lesson, we are going to learn about the companion library of the React Testing Library that allows you to simulate full interactions with your elements: the *user-event* library.

Simulate All User Interactions With an Element by Using the user-event Library

After querying, the next important part of testing is interacting with our UI. To do this we need to fire events.

In this lesson, we are going to learn how we can fire a single event in our elements by using the *fireEvent*!

Fire a Single Event on an Element Using fireEvent

For many years, the most annoying thing about writing tests with the React Testing Library is when the "not wrapped in act(...)" warning appears in your console. act is a React testing util that ensures all UI updates are wrapped up before proceeding with your test case. What we often miss is that we actually don't need act and that this error is there to tell us something instead, and that is: You are not testing everything!

In this lesson, we are going to understand why the "not wrapped in act(...)" shows up and how to get rid of it!

Get Rid of the "not wrapped in act(...)" Warning

After querying and interacting with elements come assertions. Assertions are really important to assert that your test case really works. Sometimes due to the async nature of your code, your assertion might need to wait some time until it passes.

In this lesson, we will learn how to wait for a period of time until our assertion passes by using the *waitFor* util.

Leverage the waitFor Async Util to Await for an Assertion to Pass

There will be times when none of the queries accessible to everyone will work out for you. When this time arrives, you can resort to the semantic queries. While these queries make use of HTML5 and ARIa-compliant selectors the user experience when using these attributes varies across assistive technology and browsers.

In this lesson, we will look at one of the queries that are part of the semantic queries family and allow you to find an element by its title attribute: the *byTitle* query.



Get Elements With a Matching Title Attribute Using the byTitle Query

Navigating a form with a bunch of elements with filled-in values can be a way to refer to certain elements.

In this lesson, we will look at another one of the queries that are part of the queries accessible to everyone's family and helpful when querying for filled-in form values the *byDisplayValue* query.



Get Elements With a Matching Display Value Using the byDisplayValue Query

In order for you to interact with the elements in your tests, you need to query for them. Well, sometimes, they take time to show up in your UI.

In this lesson, we will learn about one of the query variants that allows you to search for something that you expect to show up eventually in your UI: the findBy*.


Use the findBy Query to get Elements that Will Show up on the Page

When interacting with form fields, the user knows what an element is supposed to do, thanks to its label. 

In this lesson, we will look at another one of the queries that are part of the queries accessible to everyone's family and really helpful when dealing with forms: the *byLabelText* query.



Get Elements Associated With a Label Using the byLabelText Query

Sometimes you may need to get more than just one result from your queries.

In this lesson, you are going to learn how you can leverage the AllBy variant to extend your queries to find an array of elements instead of a single one.

Use the AllBy variant to get Multiple Instances of an Element

In the previous lessons, we always destructured our queries for render. As your test grows and you need more queries, this can become annoying very quickly. 

Ideally, we would have an object that is pre-bound to the document.body and allows us to use all the queries without any need for restructuring.

In this lesson, we are going to see how to tidy our code and save some time by using the *screen* util.

Use the Screen Object to Avoid Query Destructuring From Render

Sometimes your form might be missing a label. Whilst they are not a label replacement, placeholders can help give feedback about what that element should be for.

In this lesson, we will look at another one of the queries that are part of the queries accessible to everyone's family and also helpful when dealing with forms: the *byPlaceholderText* query.



Get Elements With a Given Placeholder Text Using the byPlaceholderText Query

In order for you to interact with the elements in your tests, you need to query for them.

In this lesson, we will learn about one of the query variants that allows you to search for something that you expect to always be in your UI: the getBy.

We will also get introduced to one of the most useful jest-dom assertions: the toBeInTheDocument.

Use the getBy Query to get Elements that Should Always be on the Page

One thing is important to test your component, and that is rendering!

In this lesson, we will learn about a function that the React Testing Library gives you to do called *render*.

We will also look at some of the utilities that render gives you to use in your tests.

Render a Component Using the React Testing Library

In this lesson, we will look at one of the queries that are part of the semantic queries family and allow you to find an element by its alt text: the *byAltText* query.



Get Elements With a Matching alt Text Attribute Using the byAltText Query

Text is one of the main ways that the users of your page find what they are looking for.

In this lesson, we will look at another one of the queries that are part of the queries accessible to everyone's family and really helpful when finding non-interactive elements: the *byText* query.



Get Elements With a Given Text Match Using the byText Query

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

After this course, you should be able to leverage SolidStart to build your Solid applications.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

Getting Started with SolidStart

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Cascading Style Sheets bring order and beauty to our applications.

Create Professional Responsive Websites using Bootstrap

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

Scalable Signals Angular Architecture with NGRX Signal Store

Learn how the latest JavaScript features can help you improve your codebase. 

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Domain Data Modelling using TypeScript Aliases, Brand Types and Value Objects

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

Learn the fundamentals of React Query by going through the basic API and then implementing search in an employee tracking app.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Simplify State Management with React Query

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create Interactive 3D Experiences with TresJS

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

angular

Modernize State Management in Angular with Signals

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

Search

Search Results