[unit-test]: overflow menu

[divya-281]

increases test coverage for overflow menu
#17499

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	f3493fd
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/673f083c531c7c000826a189
😎 Deploy Preview	https://deploy-preview-17875--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	c2bf0fa
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/671a8425435ce30008169b5f
😎 Deploy Preview	https://deploy-preview-17875--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	c2bf0fa
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/671a8425ea2e4e00086a133d
😎 Deploy Preview	https://deploy-preview-17875--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	f3493fd
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/673f083b3ba7800008cbd557
😎 Deploy Preview	https://deploy-preview-17875--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	f3493fd
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/673f083b68097d00081c0b1b
😎 Deploy Preview	https://deploy-preview-17875--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 82.64%. Comparing base (ab3eba8) to head (f3493fd).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #17875      +/-   ##
==========================================
+ Coverage   82.29%   82.64%   +0.34%     
==========================================
  Files         404      404              
  Lines       14303    14298       -5     
  Branches     4605     4605              
==========================================
+ Hits        11771    11816      +45     
+ Misses       2368     2321      -47     
+ Partials      164      161       -3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

---

🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles

[guidari]

Hey @divya-281, thanks for opening that PR!! 🚀
Do you think we could raise the coverage to over 80%? Currently it is 64,41%. But if there is no way to tests those parts, don't worry.

https://app.codecov.io/gh/carbon-design-system/carbon/pull/17875/blob/packages/react/src/components/OverflowMenu/OverflowMenu.tsx

[divya-281]

@guidari I was able to increase to 74%

[tay1orjones]

This is looking good, thanks for taking it on!

Looking at the coverage report, a few ideas to get this to 80%:

• Test that pressing escape closes the menu
• Find the path to get this.closeMenuAndFocus(); to be called. The steps to reproduce this bug could be helpful, as the fix was within the final condition before it's called. I think the assertion would be that the menu closed and focus returned to the trigger element.

carbon/packages/react/src/components/OverflowMenu/OverflowMenu.tsx

Lines 585 to 593 in 796f838

	if (
	!menuBody.contains(target) &&
	triggerEl &&
	!target.matches(
	`.${this.context}--overflow-menu:first-child,.${this.context}--overflow-menu-options:first-child`
	)
	) {
	this.closeMenuAndFocus();
	}

[divya-281]

@tay1orjones @guidari I added a test to check if the menu closes when pressing the esc key

[divya-281]

@tay1orjones @guidari Thanks for the suggestions, I was able to get the coverage upto 80%.

[guidari]

Thank you @divya-281
One question, is there any reason why we can't test the left right in th switch case? I see top bottom are being tested.

[divya-281]

@guidari

const triggerButtonPositionProps = {
  [DIRECTION_TOP]: 'bottom',
  [DIRECTION_BOTTOM]: 'top',
};

I only see bottom and top here, Can you let me know when the case left and right is triggered? Am I missing something?

[guidari]

Hey @divya-281 Interesting catch! I was taking a look in the code and seems like the left and right are never called.
The different types of direction are only called in the FeatureFlag OverflowMenu with menuAlignment
I guess we can comment or get rid of this line of code.

[divya-281]

@guidari I've commented those lines

[tay1orjones]

LGTM, thanks!

[guidari]

Thank you @divya-281