test: Create unit tests for react components in packages/ui/components/alert (tests-alert-component)

[gitstart-calcom]

Here is the GitStart Ticket for this pull request: feat:tests-alert-component

What does this PR do?

This PR is part of a larger task, with the objective of creating unit tests for components present in the packages/ui/components/ folder. In addition, in this PR we are setting up the vitest for this folder, to be used in the next PRs

Demo

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
api	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2024 3:29pm
cal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2024 3:29pm
cal-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2024 3:29pm
cal-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2024 3:29pm
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2024 3:29pm
web-staging	🔄 Building (Inspect)			Mar 19, 2024 3:29pm

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
dev	⬜️ Ignored (Inspect)			Mar 19, 2024 3:29pm
qa	⬜️ Ignored (Inspect)			Mar 19, 2024 3:29pm

[github-actions]

Thank you for following the naming conventions! 🙏

[socket-security]

No top level dependency changes detected. Learn more about Socket for GitHub ↗︎

[github-actions]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[deploysentinel]

Current Playwright Test Results Summary

✅ 71 Passing - ⚠️ 3 Flaky

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 07/19/2023 12:00:11pm UTC)

Run Details

Running Workflow PR Update on Github Actions

Commit: b3c89f4

Started: 07/19/2023 11:56:34am UTC

⚠️ Flakes

📄   apps/web/playwright/booking-pages.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
pro user Can cancel the recently created booking and rebook the same timeslot Retry 1 • Initial Attempt	0% (0) 0 / 307 runs failed over last 7 days	2.61% (8) 8 / 307 runs flaked over last 7 days

---

📄   apps/web/playwright/reschedule.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Reschedule Tests Should display former time when rescheduling availability Retry 1 • Initial Attempt	0.32% (1) 1 / 309 run failed over last 7 days	2.91% (9) 9 / 309 runs flaked over last 7 days

---

📄   apps/web/playwright/integrations-stripe.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Stripe integration Pending payment booking should not be confirmed by default Retry 1 • Initial Attempt	1.28% (4) 4 / 313 runs failed over last 7 days	9.90% (31) 31 / 313 runs flaked over last 7 days

---

View Detailed Build Results

---

[PeerRich]

why are we adding a new testing library? We already have playwright

[gitstart-calcom]

Hi @PeerRich! We are using vitest to make the tests (a lib already installed on the project), we are just using the RTL to render the components. We can try to use only playwright for it but this lib is used to test pages instead only specifc components, but this can be more complicated

[alwaysmeticulous]

🤖 Meticulous spotted visual differences in 33 of 169 screens tested: view and approve differences detected.

_{Last updated for commit b3c89f4. This comment will update as new commits are pushed.}

[keithwillcode]

Overall, I like these since they test the inner logic around severity controlling what is rendered.

In regards to asserting specific classes though, I'm in favor of not adding tests like those due to the brittle nature it brings to the test.

[gitstart-calcom]

Hi @keithwillcode we made the requested changes now, thanks for the feedback! 😄