refactor(primevue): use new accordion component #834
Conversation
antoinezanardi
added
the
🔩 refactor
WalkthroughThe pull request introduces several changes across multiple files, primarily focusing on enhancing the Changes
Possibly related PRs
Suggested labels
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (6)
- app/components/pages/about/AboutAvailableRoles/AboutAvailableRoles.vue (1 hunks)
- config/eslint/flat-configs/eslint.vue-config.mjs (1 hunks)
- nuxt.config.ts (1 hunks)
- package.json (1 hunks)
- tests/acceptance/features/about/features/about.feature (1 hunks)
- tests/unit/specs/components/pages/about/AboutAvailableRoles/AboutAvailableRoles.nuxt.spec.ts (4 hunks)
Files skipped from review due to trivial changes (2)
- config/eslint/flat-configs/eslint.vue-config.mjs
- package.json
Additional comments not posted (12)
app/components/pages/about/AboutAvailableRoles/AboutAvailableRoles.vue (4)
19-21: Good use of<ClientOnly>for client-side rendering.The introduction of the
<ClientOnly>component with a fallback message improves the handling of client-side rendering and enhances user experience during loading states.
23-32: Proper implementation of conditional rendering for the loading spinner.The conditional rendering of the
TextProgressSpinnerbased on the absence ofrolesis correctly implemented. The use of internationalized text for the spinner enhances accessibility and user experience.
39-67: Effective use of<PrimeVueAccordion>and<PrimeVueAccordionPanel>.The transition to
<PrimeVueAccordionPanel>from the previous<PrimeVueAccordionTab>is well-implemented. The configuration allowing multiple panels to be open enhances user interaction. Each role is correctly displayed within its respective panel, maintaining the component's functionality and improving its semantic structure.
70-70: Well-organized script setup section.The script setup is appropriately structured, utilizing modern Vue features like the Composition API and Pinia for state management. The computed properties and internationalization functions are correctly implemented, supporting the dynamic aspects of the component.
nuxt.config.ts (1)
141-143: Proper registration of new accordion components.The addition of
AccordionPanel,AccordionHeader, andAccordionContentto the PrimeVue configuration innuxt.config.tsis correctly implemented. This change supports the updated component structure and enhances the accordion's functionality and customization options.tests/unit/specs/components/pages/about/AboutAvailableRoles/AboutAvailableRoles.nuxt.spec.ts (3)
3-4: Updated imports reflect component changes accurately.The imports for
AccordionPanelandAccordionHeaderare correctly updated to align with the new component structure in the Vue file. This ensures that the tests are consistent with the actual components being used.
26-36: Correct configuration of test stubs.The update in the global stubs configuration to include
AccordionPanel,AccordionHeader, andAccordionContentensures that the tests are isolated from external dependencies and focus on the component logic. This is a best practice in unit testing.
Line range hint
102-138: Comprehensive tests for accordion panels.The tests are well-designed to verify the correct rendering and functionality of the
AccordionPanelandAccordionHeadercomponents. They check for the presence of the correct number of panels, the correct ARIA labels, and the rendering of role descriptions, ensuring the component's functionality and accessibility.tests/acceptance/features/about/features/about.feature (4)
32-35: Review: Updated Button Names for ClarityThe changes to the button names from generic labels to more descriptive ones are well implemented. This enhances user understanding of what each button does, which is crucial for accessibility and usability.
37-41: Review: Consistency in Text ReferencesThe text references associated with the new button names are correctly updated. This ensures that the descriptive text matches the button's functionality, maintaining consistency and improving the user experience.
53-53: Review: Consistency in Image VisibilityThe change to hide the image under the "Click to expand the description of the Pied Piper role" when the button is clicked again is a good practice for toggle functionality. This ensures that the UI behaves as expected, providing a good user experience.
44-51: Review: Repeated Text Under Different ContextsThe text under the "Click to expand the description of the Werewolf role" and "Click to expand the description of the Pied Piper role" is repeated in multiple scenarios. This might be intentional to test visibility under different user actions, but it's important to ensure that these scenarios are necessary and not redundant.
|
## [1.32.0](v1.31.0...v1.32.0) (2024-09-18) ### 🚀 Features * **audio:** audio settings in local storage ([#831](#831)) ([cd8a2cb](cd8a2cb)) * **game-lobby:** all game lobby is responsive ([#877](#877)) ([aaccf38](aaccf38)) * **game-lobby:** auto-focus on player name input ([#860](#860)) ([7897da3](7897da3)) * **game-lobby:** auto-focus on player name input even after changing page ([#873](#873)) ([3bb8401](3bb8401)) * **game-lobby:** display disclaimer for small screens ([#853](#853)) ([81029b8](81029b8)) * **game-lobby:** game options confirm step in lobby ([#845](#845)) ([20cc2ce](20cc2ce)) * **game:** all game screens are responsive ([#880](#880)) ([b54b1dc](b54b1dc)) * **game:** game over screens are responsive ([#883](#883)) ([aacb761](aacb761)) * **misc-pages:** responsive for canceled game and not found game pages ([#888](#888)) ([deeb7b2](deeb7b2)) * **nuxt:** set route announcer ([#835](#835)) ([dd1115f](dd1115f)) * **nuxt:** typecheck on hooks and ci ([#832](#832)) ([794157f](794157f)) ### 🐛 Bug Fixes * **deps:** update dependency @primevue/themes to ^4.0.6 ([#842](#842)) ([4d3e063](4d3e063)) * **deps:** update dependency @primevue/themes to ^4.0.7 ([#855](#855)) ([2b80485](2b80485)) * **deps:** update dependency primevue to ^4.0.6 ([#843](#843)) ([3a20f01](3a20f01)) * **deps:** update dependency primevue to ^4.0.7 ([#856](#856)) ([6c75a61](6c75a61)) * **game-events:** icon animation null instance handler ([#889](#889)) ([ee0a17e](ee0a17e)) * **pwa:** remove redirect fallback ([#830](#830)) ([69c2c21](69c2c21)) ### 🔩 Refactor * **primevue:** use new accordion component ([#834](#834)) ([f611995](f611995)) * **primevue:** use new tab components ([#836](#836)) ([4f9c1b9](4f9c1b9)) ### ✅ Tests * **scapegoat:** acceptance tests ([#884](#884)) ([add895e](add895e)) ### 🔁 CI * **node:** use last node version in ci ([#848](#848)) ([aa047b3](aa047b3)) ### 🧹 Chore * **deps:** update commitlint monorepo to ^19.5.0 ([#852](#852)) ([cefe4af](cefe4af)) * **deps:** update dependency @cucumber/cucumber to ^11.0.1 ([#869](#869)) ([c00d3e7](c00d3e7)) * **deps:** update dependency @cucumber/cucumber to v11 ([#817](#817)) ([dcbad46](dcbad46)) * **deps:** update dependency @faker-js/faker to ^9.0.1 ([#870](#870)) ([da15f7c](da15f7c)) * **deps:** update dependency @nuxt/test-utils to ^3.14.2 ([#846](#846)) ([f0f715a](f0f715a)) * **deps:** update dependency @nuxtjs/i18n to ^8.5.2 ([#764](#764)) ([0fe9bf0](0fe9bf0)) * **deps:** update dependency @nuxtjs/i18n to ^8.5.3 ([#849](#849)) ([1689312](1689312)) * **deps:** update dependency @nuxtjs/robots to ^4.1.7 ([#861](#861)) ([4cf88c8](4cf88c8)) * **deps:** update dependency @primevue/nuxt-module to ^4.0.6 ([#841](#841)) ([7384c1e](7384c1e)) * **deps:** update dependency @primevue/nuxt-module to ^4.0.7 ([#854](#854)) ([22c3f4a](22c3f4a)) * **deps:** update dependency @stylistic/eslint-plugin to ^2.8.0 ([#838](#838)) ([1c15410](1c15410)) * **deps:** update dependency @types/qs to ^6.9.16 ([#868](#868)) ([8560a5d](8560a5d)) * **deps:** update dependency @vueuse/core to ^11.1.0 ([#875](#875)) ([b568680](b568680)) * **deps:** update dependency @vueuse/nuxt to ^11.1.0 ([#876](#876)) ([0f358b6](0f358b6)) * **deps:** update dependency circle-progress.vue to ^3.2.2 ([#878](#878)) ([4cd09ac](4cd09ac)) * **deps:** update dependency husky to ^9.1.6 ([#858](#858)) ([03b278b](03b278b)) * **deps:** update dependency msw to ^2.4.3 ([#827](#827)) ([6cd07ef](6cd07ef)) * **deps:** update dependency msw to ^2.4.4 ([#833](#833)) ([44814db](44814db)) * **deps:** update dependency msw to ^2.4.5 ([#850](#850)) ([773674a](773674a)) * **deps:** update dependency msw to ^2.4.6 ([#864](#864)) ([93b4a45](93b4a45)) * **deps:** update dependency msw to ^2.4.7 ([#871](#871)) ([b6cef68](b6cef68)) * **deps:** update dependency msw to ^2.4.8 ([#882](#882)) ([96d9d56](96d9d56)) * **deps:** update dependency node to v22.9.0 ([#886](#886)) ([8f28e99](8f28e99)) * **deps:** update dependency sass to ^1.79.1 ([#887](#887)) ([02e728a](02e728a)) * **deps:** update dependency semantic-release to ^24.1.1 ([#851](#851)) ([9a5d974](9a5d974)) * **deps:** update dependency tailwindcss to ^3.4.11 ([#857](#857)) ([74668ab](74668ab)) * **deps:** update dependency tailwindcss to ^3.4.12 ([#885](#885)) ([b2d182d](b2d182d)) * **deps:** update dependency tsx to ^4.19.1 ([#859](#859)) ([6e771c3](6e771c3)) * **deps:** update dependency type-fest to ^4.26.1 ([#829](#829)) ([7b715fd](7b715fd)) * **deps:** update dependency typescript to ^5.6.2 ([#839](#839)) ([69b99b1](69b99b1)) * **deps:** update dependency vue to ^3.5.4 ([#844](#844)) ([09fd254](09fd254)) * **deps:** update dependency vue to ^3.5.5 ([#865](#865)) ([13ae2b7](13ae2b7)) * **deps:** update dependency vue to ^3.5.6 ([#874](#874)) ([77302a2](77302a2)) * **deps:** update dependency vue-router to ^4.4.4 ([#847](#847)) ([23430aa](23430aa)) * **deps:** update dependency vue-router to ^4.4.5 ([#863](#863)) ([28a6c29](28a6c29)) * **deps:** update nuxtjs monorepo to ^3.13.2 ([#872](#872)) ([28e0e43](28e0e43)) * **deps:** update playwright monorepo to ^1.47.1 ([#866](#866)) ([ae9e014](ae9e014)) * **deps:** update pnpm to v9.10.0 ([#837](#837)) ([05be262](05be262)) * **deps:** update typescript-eslint monorepo to ^8.5.0 ([#840](#840)) ([b230013](b230013)) * **deps:** update typescript-eslint monorepo to ^8.6.0 ([#881](#881)) ([c291635](c291635)) * **deps:** update vitest monorepo to ^2.1.0 ([#862](#862)) ([b25b312](b25b312)) * **deps:** update vitest monorepo to ^2.1.1 ([#867](#867)) ([a1ad2f8](a1ad2f8)) * **screenshots:** missing screenshots for linux ([8bfa635](8bfa635))
|
🎉 This PR is included in version 1.32.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Summary by CodeRabbit
New Features
Bug Fixes
Tests