test: [M3-8948] Added cypress component test for firewall inbound and outbound rules for mouse drag and drop

[subsingh-akamai]

Description 📝

This PR is part of adding test for firewall drag and drop with mouse and keyboard. (M3-8862)

In this PR cypress component test is added for firewall inbound and outbound rules for mouse drag and drop

Changes 🔄

Cypress Test for Linode Firewall Inbound & Outbound Rules Table Mouse Drag and Drop Functionality

In this PR, I implemented and tested the drag-and-drop functionality in Cypress. Below is the approach I followed:

1. Using cypress trigger events: Attempted to simulate drag-and-drop actions using native Cypress trigger events, but this approach did not work as expected.
2. Using cypress-real-events:Tried using cypress-real-events to replicate drag-and-drop functionality. However, it also failed to work for this specific use case.
3. Using 4teamwork/cypress-drag-drop:Adopted the 4teamwork/cypress-drag-drop library, which successfully enabled the drag-and-drop functionality.

This implementation uses the 4teamwork/cypress-drag-drop plugin to ensure reliable and consistent test execution for drag-and-drop scenarios.

Jira

• M3-8948

How to test 🧪

yarn cy:component:run -s "cypress/component/features/firewalls/firewall-rule-table.spec.tsx"

Verification steps

When test executed using this command yarn cy:component:run -s "cypress/component/features/firewalls/firewall-rule-table.spec.tsx"all tests should pass successfully and you should see new test added as per below screenshot

As an Author I have considered 🤔

Check all that apply

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/Improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

[github-actions]

Coverage Report: ✅
Base Coverage: 86.78%
Current Coverage: 86.78%

[jdamore-linode]

Thanks @subsingh-akamai! Confirmed that the tests run nicely. Nice job!

I did notice that we're missing the changes to yarn.lock from installing the new dependency, and posted some thoughts about the spec filename, but otherwise this is looking nice!

[jdamore-linode]

Thanks for the quick changes Subodh! Tests look good and are passing reliably for me 👍

[coliu-akamai]

✅ confirm test passes

thank you! 🚀

[pmakode-akamai]

thanks @subsingh-akamai -- Once this PR is merged, I'll update the other PR to refactor and consolidate these changes

All tests pass ✅

[linode-gh-bot]

Cloud Manager UI test results

🎉 469 passing tests on test run #11 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	469 Passing	2 Skipped	93m 45s

[jdamore-linode]

Thanks for the last minute touch-ups @subsingh-akamai! Looks great!

[cypress]

Cloud Manager E2E    Run #6965

Run Properties:   Failed #6965  •  bfbd8222cc: test: [M3-8948] Added cypress component test for firewall inbound and outbound r...

Project	Cloud Manager E2E
Branch Review	develop
Run status	Failed #6965
Run duration	32m 28s
Commit	bfbd8222cc: test: [M3-8948] Added cypress component test for firewall inbound and outbound r...
Committer	subsingh-akamai
View all properties for this run ↗︎

---

Test results
Failures	2
Flaky	4
Pending	2
Skipped	0
Passing	467
View all changes introduced in this branch ↗︎

---

Tests for review

  cypress/e2e/core/linodes/rebuild-linode.spec.ts • 2 failed tests

View Output Video

Test		Artifacts
rebuild linode > rebuilds a linode from Community StackScript		Screenshots Video
rebuild linode > rebuilds a linode from Account StackScript		Screenshots Video

  linodes/switch-linode-state.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
switch linode state > powers off a linode from details page		Screenshots Video

  linodes/clone-linode.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
clone linode > can clone a Linode from Linode details page		Screenshots Video

  linodes/rebuild-linode.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
rebuild linode > rebuilds a linode from Image		Screenshots Video

  parentChild/account-switching.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
Parent/Child account switching > From Parent to Child > can switch from Parent account user to Proxy account user from Billing page		Screenshots Video