Upgrade React Mega Menu Application Customizer Extension to latest version of SPFx - Refresh Rangers Hacktoberfest Event

[Adam-it]

🎯Aim

The aim of this issue is to upgrade the React Mega Menu Application Customizer Extension extension sample to the latest version of SPFx (1.20)

🤔 Tips how to get started

To support you in this issue you may use the below tooling:

• CLI for Microsoft 365 has a command that will generate upgrade guidance for this SPFx project m365 spfx project upgrade
• SPFx Toolkit VS Code extension has an Upgrade Project action which generates an .md report with upgrade guidance to the latest supported SPFx version

📣 What's this event all about

Refresh Rangers is a unique Hacktoberfest event aiming to update our most popular samples 🚀.
During this, you may obtain a unique Microsoft 365 & Power Platform Community badge - Refresh Rangers 🎖️
To obtain this badge besides opening a PR you also need to opt-in the Microsoft 365 & Power Platform Community Recognition Program and fill out this form

[ervingayle]

Hi @Adam-it,
I would also like to take this one.

[Adam-it]

Hi @Adam-it,
I would also like to take this one.

All Yours 👍
Please do double check if the project still works after upgrading to latest version of SPFx.
To get a badge from Microsoft 365 & Power Platform community you need to join the recognition program: https://pnp.github.io/recognitionprogram/
You only need to do that one time so if you done already in the past you don't need to fill the form again.

To get a badge from the Hacktoberfest organizers you need to register to Hacktoberfest event: https://hacktoberfest.com/participation/

You Rock 🤩👏👏👏

[Adam-it]

@ervingayle what is the status on this one?
The event is ending with October and this will mean that this won't count toward the Hacktoberfest event if you participated in this one (here there is nothing we may do about it)
BUT a PR for this issue will be created even after October this will still count to get the Refresh Ranger badge from the Microsoft 365 and Power Platform Community

[ervingayle]

Hi @Adam-it
I am working on this and hoping to submit the PR tomorrow EST time. There are a few issues that I am working through and also the test functionality. It was my hope to finish this today and potentially get one more task if someone wanted to reassign it to have it done by the end of October.

[Adam-it]

Hi @Adam-it
I am working on this and hoping to submit the PR tomorrow EST time. There are a few issues that I am working through and also the test functionality. It was my hope to finish this today and potentially get one more task if someone wanted to reassign it to have it done by the end of October.

All good and no rush. Just wanted to align with you where we are 👍. Awesome work 👏

Happy Coding 🤩

[Adam-it]

hey @ervingayle there is no pressure or priority on this issue but I was wondering if you have any updates on this case?

[ervingayle]

Hey @Adam-it I have an updated solution to SPFx version 1.20. The issue that has delayed me is migrating all of the tests from Enzyme with or without the React 17 adapter. The third party adapter supports React 17.0.2 and this causes a warning for SPFx packages. I tried moving to the React Testing Library. The mocks for office-ui-fabric-react and sp-core-library are working. What remains is just determining if it is worthwhile to migrate the tests that verify state (which react testing library does not support) or not. Perhaps I can remove the tests for the initial commit. What are your thoughts?

[Adam-it]

Thanks for the feed.
Are we talking about removing all of the tests or just some couple of them that test the state?

[ervingayle]

@Adam-it Some tests are also not working which count the number of items that have been added to the menu in addition to what I mentioned about the state. This is specific to the tests and not the actual implementation itself.

[Adam-it]

@Adam-it Some tests are also not working which count the number of items that have been added to the menu in addition to what I mentioned about the state. This is specific to the tests and not the actual implementation itself.

But do they fail because now we have a different number of items or they just don't work due to state management?

[ervingayle]

Hi @Adam-it . Sorry if it is not clear. There are state tests failing and after component mount tests that check the number of items that are present that are failing. However, there is a test that I added to check the presence of the data source as a before component did mount action and that shows the correct number of items. However, it doesn't work in the second set of tests.

[Adam-it]

Hi @Adam-it . Sorry if it is not clear. There are state tests failing and after component mount tests that check the number of items that are present that are failing. However, there is a test that I added to check the presence of the data source as a before component did mount action and that shows the correct number of items. However, it doesn't work in the second set of tests.

I get it. If we double check and confirm all is working fine and it is just a problem with tests due to a lack of support in the react testing library then I think we may remove them and skip the additional effort of migrating them.

[ervingayle]

Hi @Adam-it. I figured out what was happening with the tests (state, screen and elements) and its working. PR will be created shortly

[Adam-it]

Hi @Adam-it. I figured out what was happening with the tests (state, screen and elements) and its working. PR will be created shortly

Awesome news!
Thank you for opening the PR. I will try to review it ASAP.
BTW Happy New Year!

[ervingayle]

Hi @Adam-it, Happy New Year to you as well. Thank you for your contributions, guidance and help through all of this. I made a slight update to my PR to disable the debug setting for the mega menu. Just an FYI.