feat: add modelcollapse to primitive models

[twjasa]

Add collapse to primitive models

Description

Now primitive-model is wrapped inside a ModelCollapse component to let the user expand and collapse all the content of each primitive models such as (string, number, integer and boolean)

Motivation and Context

This is a fix to the following issue number #7549

How Has This Been Tested?

• Create a new test.yaml file inside ./dev-helpers/ and paste the yaml code that is in the issue link. (Swagger UI expand/collapse for Enum component. #7549)
• In ./dev-helpers/index.html change url parameter of ui variable to: ./dev-helpers/test.yaml
• run npm run dev in terminal
• Open http://localhost:3200/
• Check if TypeEnum can expand and collapse

Screenshots (if appropriate):

Screen.Recording.2021-10-14.at.6.04.23.PM.mov

Checklist

My PR contains...

• No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
• Dependency changes (any modification to dependencies in package.json)
• Bug fixes (non-breaking change which fixes an issue)
• Improvements (misc. changes to existing features)
• Features (non-breaking change which adds functionality)

My changes...

• are breaking changes to a public API (config options, System API, major UI change, etc).
• are breaking changes to a private API (Redux, component props, utility functions, etc.).
• are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
• are not breaking changes.

Documentation

• My changes do not require a change to the project documentation.
• My changes require a change to the project documentation.
• If yes to above: I have updated the documentation accordingly.

Automated tests

• My changes can not or do not need to be tested.
• My changes can and should be tested by unit and/or integration tests.
• If yes to above: I have added tests to cover my changes.
• If yes to above: I have taken care to cover edge cases in my tests.
• All new and existing tests passed.

[mathis-m]

@twjasa can you have a look at the failing tests please? I'll review this initially tomorrow and when tests are green! Thanks for your work so far :)

[mathis-m]

@twjasa looks like the test is failing because the click is called on multiple elements in the features/model-collapse.js tests:

• Swagger 2.0: Model should collapse and expand when toggled clicking button
• Swagger 3.0: Model should collapse and expand when toggled clicking button

[twjasa]

Hey @mathis-m thanks for the suggestion, will look into it in a few hours.

[twjasa]

I just commited new changes to the behavior of collapse in primitivemodel. Now all tests passed 😄 . Never worked with cypress, it's amazing what it can do.

[mathis-m]

@twjasa nice thanks for your effort, I will have a look at this later today.
If you are interested in frontend testing frameworks for your own projects have a look at https://github.com/microsoft/playwright, it's the new kid on the marked and has grown fast, it almost has the same star count on GitHub.

[twjasa]

@twjasa nice thanks for your effort, I will have a look at this later today. If you are interested in frontend testing frameworks for your own projects have a look at https://github.com/microsoft/playwright, it's the new kid on the marked and has grown fast, it almost has the same star count on GitHub.

Thanks! I will definitely see it.

[tim-lai]

@twjasa Thanks for the PR! In reviewing the proposed changes, I don't think that the existing unit tests should be removed. At a glance, it looks like you would just need to add a prop to expandDepth to force the component to display as expanded, so that you can test for elements inside.

[twjasa]

Hey @tim-lai thanks for the suggestion, you were right about expandDepth and I recover back those tests with some changes to make it work with ModelCollapse.

Please take a look whenever you can. Thanks again.

[tim-lai]

@twjasa PR merged! Thanks for the update and contribution!

[gcardoso22]

This seems to have caused #8008