Convert remaining components to functional components

[m4theushw]

What does it do?

• Pulls all commits from develop and applies into hooks branch.
• Converts all class components to functional components.
• Fixes tests to work with hooks.

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• Updated documentation (if applicable)
• Added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• My changes generate no new warnings

[m4theushw]

I created it to emulate the callback arg in the old setState. In the future, this component can be refactored to not need it.

[coveralls]

Pull Request Test Coverage Report for Build 1533

• 164 of 167 (98.2%) changed or added relevant lines in 7 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.5%) to 94.541%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/tree/index.js	29	32	90.63%

Totals
Change from base Build 1507:	0.5%
Covered Lines:	669
Relevant Lines:	688

---

💛 - Coveralls

[mrchief]

This is awesome work @m4theushw !! Thanks for sending this. I'm gonna go over it this weekend and having the long weekend helps.

This is the first step towards having headless components and I'm glad we're heading in that direction.

[mrchief]

Findings so far...

[mrchief]

I vaguely remember having this kind of check which wasn't accurately detecting the dropdown state. state.showDropdown was more trusty as it gets set when the event handler gets called indicating the dropdown is being shown indeed. The only part trust in that case is the CSS properties actually render the div visible but we don't need to test the browser's CSS engine, so it was an acceptable compromise.

[m4theushw]

We could check if the role is "listbox" or "tree". That would be a more recommended approach if React Testing Library was used.

[mrchief]

Alright. So let's continue with this and tackle it later if we run into similar issues. Maybe moving to RTL could be another PR?

[m4theushw]

Yes, dropping enzyme in favor of RTL would be a great improvement in testing quality.

[mrchief]

This is interesting. So with this dispatch, do we still need the simulate('click')? Seems like they are both asserting the same thing?

[m4theushw]

I kept the simulate('click') because the old test had it, but it could be removed. The purpose of the dispatch is to ensure that, if the user clicks outside the dropdown, it stays open.

[m4theushw]

I had some problems passing the ref as inputRef. It seems like AVA can't deal with refs passed through custom named props.

[mrchief]

Trying to understand here - don't we do that already? What was the exact error/issue you ran into?

[m4theushw]

The error I got when using inputRef is:

 PointerLookupError {
    index: 10,
    message: 'Could not deserialize buffer: pointer 10 could not be resolved',
}

I found this relatated issue. I tried to upgrade AVA to the latest version but it didn't solve the problem.

[github-actions]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed in 10 days if no further activity occurs. Thank you for your contributions.