Advertisement · 728 × 90

Posts by Younes Jaaidi

Preview
a baby is playing with a yellow toy that has a star in it ALT: a baby is playing with a yellow toy that has a star in it

🤣🤣🤣

4 days ago 0 0 0 0
Preview
a woman is holding a crystal ball in front of her face . ALT: a woman is holding a crystal ball in front of her face .

Does April 10 still count as Q1 😇

4 days ago 0 0 1 0
Post image

@vitest.dev just surpassed Jest in npm weekly downloads 📈

npmx.dev/compare?pack...

5 days ago 101 5 3 0
Preview
Pragmatic Angular Testing Workshop | Marmicode There are two ways to keep a product stable: **never touch it — or cook up a solid testing strategy.** So… how’s yours holding up? * Refactor something and watch the tests boil over? * Maintaining...

With agentic dev workflows, intent matters. Tests express it.

Last chance to join the next #Angular #Testing Workshop session — starting April 1st — and learn how to write tests with clear intent.

marmicode.io/workshops/pr...

2 weeks ago 1 1 0 0
Man with curly hair and beard at a conference coffee break, pointing at a closed laptop on a small round table. In the background, attendees stand near a buffet counter with drinks and glasses.

Man with curly hair and beard at a conference coffee break, pointing at a closed laptop on a small round table. In the background, attendees stand near a buffet counter with drinks and glasses.

👋 If you are at #VDZ26 and wanna come say hi or wanna chat about #angular, #testing, #nx and AI dev workflows such as #ChartedCoding, you will find me here.

3 weeks ago 3 0 0 0
Post image Post image

Just jumped over a few mountains to talk about future-proof testing with #Vitest

#VoxxedDaysZurich is kicking off 🍿

3 weeks ago 9 0 0 0
Code snippet of a Vitest Angular test titled “search for a cookbook.”
It enables fake timers with vi.useFakeTimers(), creates a component using TestBed.createComponent(SearchForm), and then awaits fixture.whenStable(), annotated with a comment indicating a timeout issue (“⏳ test timeout 🤔”).

Code snippet of a Vitest Angular test titled “search for a cookbook.” It enables fake timers with vi.useFakeTimers(), creates a component using TestBed.createComponent(SearchForm), and then awaits fixture.whenStable(), annotated with a comment indicating a timeout issue (“⏳ test timeout 🤔”).

Your component has a 300ms debounce. How do you test it?

With real timer, you "wait long enough and hope."

With #Vitest fake timers in manual mode, time freezes — and so does #Angular's synchronization, unless...

... you read my last cookbook's recipe 😊

cookbook.marmicode.io/angular/test...

3 weeks ago 5 2 0 0
Advertisement
Preview
Pragmatic Angular Testing • 🇬🇧 English · Luma Three days to turn your testing approach into a well-seasoned strategy. Learn to build tests that survive refactors, migrations, and deadlines. 👉 More info…

👨🏻‍🏫 Workshops are great for hands-on learning.
📺 Courses let you control the pace.
🤖 An AI tutor helps you retry exercises on your own.
👨🏻‍🍳 Coaching helps adapt learnings.

What if you could get all of this in one package?

✅ Pragmatic #Angular #Testing Workshop — April 1–3

🎟️ luma.com/36dp2b0w

3 weeks ago 2 1 0 0

These services manipulate entities that you fully control and are coupled to your "core" (if we think hexagonal architecture). They are long term models that do not evolve if you do not need to.

On the other hand, the OpenAPI specification or GraphQL schema of the backend might evolve any time

3 weeks ago 1 0 0 0

When complexity is higher, you have to narrow your tests even more therefore the test double should be provided closer to the "system under test".

Generally, this means providing a test double at the infrastructure adapter level. In other words, it is your: ProductRepository or CartGateway service

3 weeks ago 1 0 1 0

At the end, it mostly comes to how "narrow" your test is
Cf. cookbook.marmicode.io/angular/test...

- If complexity is low, then a test that interacts with the sandbox production API is ok.
- Another intermediate option is to have the "backend team" provide a reusable and portable test double.
...

3 weeks ago 1 0 1 0

Let's focus on the http test doubles. There are 2 main problems:
- HTTP is an implementation detail. If I migrate to something else, I don't want to go and rethink all my tests.
- Is the consumer (e.g. frontend team) in the right position to maintain a test double (msw) that mimicks the backend?
...

3 weeks ago 1 0 1 0

Short term solutions are often more appealing than long term.
The good part about MSW is that it's encouraging users to write fakes (mimicking real behavior) and not mocks (pre-programmed responses).

...

3 weeks ago 1 0 1 0
Preview
Fake It Till You Mock It | Marmicode Cookbook Tame Angular test doubles, from pragmatic fakes to the rare true mock, and know when each one keeps your tests lean.

I see. Legit 😊

Generally speaking, I would recommend to never “mock” APIs you do not fully control.
Instead, you could ideally provide an abstraction and a test double for it. This might help: cookbook.marmicode.io/angular/test...

4 weeks ago 1 0 1 0

It does 😊

I’m curious though why you assumed it wouldn’t?

4 weeks ago 1 0 1 0
Advertisement
Preview
📝 Request a Recipe | Marmicode Cookbook Form not loading? 

🙌

And if you need anything else, know that you can submit content requests on my cookbook 😉

cookbook.marmicode.io/angular/test...

4 weeks ago 0 0 0 0
Slide comparing manual vs automatic handling of fake timers in a Vitest test.

Top-left code shows a test using fake timers manually:
	•	vi.runAllTimersAsync() to flush framework internals (e.g. Angular sync)
	•	vi.advanceTimersByTimeAsync(300) to handle debounce
Annotations explain both steps are required and can slow tests.

Bottom-left note explains that since Vitest 4.1.0, a “fast-forward” mode can automatically advance timers.

Right side shows simplified code using:
	•	vi.setTimerTickMode('nextTimerAsync')
No manual timer flushing or advancing is needed.

Footer includes author handle (@yjaaidi / @younesjd.dev) and a link to marmicode testing content.

Slide comparing manual vs automatic handling of fake timers in a Vitest test. Top-left code shows a test using fake timers manually: • vi.runAllTimersAsync() to flush framework internals (e.g. Angular sync) • vi.advanceTimersByTimeAsync(300) to handle debounce Annotations explain both steps are required and can slow tests. Bottom-left note explains that since Vitest 4.1.0, a “fast-forward” mode can automatically advance timers. Right side shows simplified code using: • vi.setTimerTickMode('nextTimerAsync') No manual timer flushing or advancing is needed. Footer includes author handle (@yjaaidi / @younesjd.dev) and a link to marmicode testing content.

Debounces, delays, intervals... they either break your tests or slow them down.

⏩ Since @vitest.dev 4.1.0, you can now "fast-forward" time in your tests with `nextTimerAsync` tick mode.

❤️ credit goes to Andrew Scott (@angular.dev team)

🧑‍🍳 recipe → cookbook.marmicode.io/angular/test...

4 weeks ago 37 5 3 0

🤣

4 weeks ago 2 1 0 0
Slack DM from November 15th, 2024. Younes Jaaidi: "My speculation is that Vitest will surpass Jest usage by Q1 2026 🔮". Brandon Roberts replies: "2026! 💀"

Slack DM from November 15th, 2024. Younes Jaaidi: "My speculation is that Vitest will surpass Jest usage by Q1 2026 🔮". Brandon Roberts replies: "2026! 💀"

npmx.dev chart showing Jest vs Vitest monthly downloads from Nov 2024 to Mar 2026. Vitest grows from ~30M to 155.5M, surpassing Jest which sits at 143.3M. The lines cross around Q1 2026.

npmx.dev chart showing Jest vs Vitest monthly downloads from Nov 2024 to Mar 2026. Vitest grows from ~30M to 155.5M, surpassing Jest which sits at 143.3M. The lines cross around Q1 2026.

I just need a few more of you to migrate to @vitest.dev so I can prove that crystal balls work 🔮 😉

(the charts from npmx.dev are so neat ❤️)

4 weeks ago 45 8 2 1
Post image

My takeaway quote of #AngularGraz

“An LLM is a parrot who is into statistics”
— @manfredsteyer.bsky.social

1 month ago 4 0 0 0
Post image

Great talk by @gerome.dev at #AngularGraz So refreshing to see someone advocating for incremental migrations over big bang rewrites 🪜👏

1 month ago 3 2 0 0
Preview
feat: update vite to stable v8.0.0 by brandonroberts · Pull Request #2111 · analogjs/analog Summary Update root Vite dependency from ^8.0.0-beta.18 to ^8.0.0 Update template apps (latest, blog, minimal) from ^7.0.0 to ^8.0.0 and add vite overrides Update peer dependencies in platform and...

👏 Enjoy faster builds with @analogjs.org, @angular.dev and @vite.dev 8 ⚡️

github.com/analogjs/ana...

1 month ago 24 5 2 0
Post image

⚡Let’s explore in @younesjd.dev’s talk why Vitest isn’t just trendy - it’s built on hard-earned lessons in speed, reliability & dev experience.

You’ll learn:
•Partial vs Full Browser Mode
•Test architecture patterns
•Fakes & Object Mothers
•Testronaut

Catch it at React Summit!

1 month ago 1 1 0 0
Post image

🧪 In the latest release of @analogjs.org, you can migrate to @vitest.dev with browser mode for @playwright.dev enabled and automatically configured using an @angular.dev schematic!

analogjs.org/docs/feature...

1 month ago 13 4 0 0
GitHub pull request page showing ‘refactor: remove experimental Jest and Web Test Runner builders #32582’ merged into angular:main. The screenshot highlights the pull request summary with 29 files changed, 34 checks, and a large red ‘−2,938’ code deletion indicator pointed to by a purple arrow.

GitHub pull request page showing ‘refactor: remove experimental Jest and Web Test Runner builders #32582’ merged into angular:main. The screenshot highlights the pull request summary with 29 files changed, 34 checks, and a large red ‘−2,938’ code deletion indicator pointed to by a purple arrow.

This is my favorite kind of changes.
Experimental runners out, clarity in.
@vitest.dev is the path.

Thanks Alan!

github.com/angular/angu...

1 month ago 17 2 0 0
Advertisement
Ng-News 26/07: Angular's Router, Vitest, Hashbrown, History & Popularity
Ng-News 26/07: Angular's Router, Vitest, Hashbrown, History & Popularity YouTube video by ng-news

Ng-News 26/07:

• @armenvardanyan.dev, Andrew Scott: router resources, RxJS, ngxtension, TypeScript/Go
• @younesjd.dev: Vitest browser mode
• @manfredsteyer.bsky.social: Hashbrown + AI in Angular
#Angular Popularity
• Maximilian Schwarzmüller: 10 years of Angular

youtu.be/3oTeWPzVPtY

1 month ago 9 5 0 0
A timeline displays milestones in a GitHub developer's journey, including commits, pull requests, and issues from 2015 to 2024.

A timeline displays milestones in a GitHub developer's journey, including commits, pull requests, and issues from 2015 to 2024.

Introducing commitstory.io transform your GitHub commits history into stories.

The GitHub login and app gets the read only access to your profile and reads the history.

You can also create a timeline based on the the GitHub commit history.

Go ahead and share your story and tim
eline.

1 month ago 5 1 0 0

Thanks for your feedback Logan!
I have to polish that page indeed.
I’ll keep you posted

1 month ago 2 0 1 0
Preview
a man in a suit and tie is giving a thank you sign . ALT: a man in a suit and tie is giving a thank you sign .
1 month ago 1 0 0 0

May I use a screenshot of your post for my next talk?

1 month ago 1 0 1 0