Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(game-lobby): all game lobby is responsive #877

Merged
merged 5 commits into from
Sep 16, 2024

Conversation

antoinezanardi
Copy link
Owner

@antoinezanardi antoinezanardi commented Sep 16, 2024

Summary by CodeRabbit

Release Notes

  • New Features

    • Introduced responsive design adjustments across various components, enhancing usability on different screen sizes.
    • Added a new constant for styling field set legends, promoting consistency in design.
    • Enhanced the tab view functionality with a scrollable attribute for better navigation.
  • Bug Fixes

    • Improved layout and visibility of components in the game lobby, ensuring a better user experience.
  • Style

    • Updated CSS classes for responsive behavior in multiple components, including headers, buttons, and cards.
    • Enhanced visual presentation with margin and padding adjustments for better alignment and spacing.
    • Adjusted component layouts to ensure appropriate display on smaller screens.

@antoinezanardi antoinezanardi added the 🚀 feature New feature or request label Sep 16, 2024
@antoinezanardi antoinezanardi self-assigned this Sep 16, 2024
Copy link

coderabbitai bot commented Sep 16, 2024

Caution

Review failed

The pull request is closed.

Walkthrough

The changes involve a series of modifications across multiple Vue.js components, primarily focusing on enhancing the responsiveness and maintainability of the user interface. Key updates include the introduction of a new constant for styling fieldset legends, adjustments to CSS classes for improved layout on various screen sizes, and refinements to the visibility of elements based on screen dimensions. These changes aim to create a more adaptive and user-friendly experience within the game lobby.

Changes

Files Change Summary
.../RecipientRoleAdditionalCardsDisclaimer.vue Updated <h4> class for responsive bottom margin adjustments.
.../RecipientRoleAdditionalCardsManager.vue Changed pt property to use FIELD_SETS_LEGEND_CLASSES constant; modified class attributes.
.../RecipientRoleAdditionalCardsMultiSelect.vue Enhanced styling and responsiveness; added computed property for dynamic image sizing.
.../GameLobbyHeaderAdditionalCardsManagerButton.vue Updated button text visibility for responsive design.
.../GameLobbyHeaderOptionsButton.vue Modified button text visibility for responsive design.
.../GameLobbyHeaderPositionCoordinatorButton.vue Restructured button template for simplified accessibility and responsiveness.
.../GameLobbyHeaderSetupButtons.vue Adjusted button layout and responsiveness for various screen sizes.
.../GameLobbyOptionsHub.vue Modified content padding for better responsiveness on medium screens.
.../GameLobbyOptionsHubFooter.vue Adjusted spacing between child elements in the footer.
.../GameLobbyOptionsHubRolesTab*.vue Replaced hardcoded legend classes with FIELD_SETS_LEGEND_CLASSES constant across multiple files.
.../GameLobbyPositionCoordinator.vue Updated layout for responsive design; adjusted visibility of components based on screen size.
.../GameLobbyRolePicker.vue Enhanced modal layout and responsiveness.
.../GameOptionInputGroup.vue Modified layout for improved responsiveness across screen sizes.
.../PlayerCard.vue Updated class for full-width display of player cards.
.../field-sets.constants.ts Introduced FIELD_SETS_LEGEND_CLASSES constant for centralized styling.
.../eslint.constants.mjs Added new ignore patterns for ESLint to exclude specific test-related files.
package.json Downgraded nuxt package version from ^3.13.2 to ^3.13.1.
.../tests/unit/specs/components/pages/game-lobby/.../*.nuxt.spec.ts Enhanced tests for responsive behavior and added mocks for hooks from @vueuse/core.

Possibly related PRs

🐇 In the garden, changes bloom,
With margins shifting, making room.
Buttons dance, and labels hide,
Responsive magic, we take in stride.
A constant here, a class anew,
A joyful hop, for me and you! 🌼


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?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    -- I pushed a fix in commit <commit_id>, please review it.
    -- Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    -- @coderabbitai generate unit testing code for this file.
    -- @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    -- @coderabbitai generate interesting stats about this repository and render them as a table.
    -- @coderabbitai read src/utils.ts and generate unit testing code.
    -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    -- @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Tip

Early access features: enabled

We are currently testing the following features in early access:

  • OpenAI o1 for code reviews: OpenAI's new o1 model is being tested for code reviews. This model has advanced reasoning capabilities and can provide more nuanced feedback on your code.

Note:

  • You can enable or disable early access features from the CodeRabbit UI or by updating the CodeRabbit configuration file.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Outside diff range and nitpick comments (1)
config/eslint/eslint.constants.mjs (1)

66-69: Simplify the ESLint ignore patterns for the .nuxt-test-cucumber directory.

The added patterns for ignoring files and directories under the .nuxt-test-cucumber directory seem redundant. Consider simplifying them to a single pattern for better maintainability and readability.

Apply this diff to simplify the patterns:

-  ".nuxt-test-cucumber/*",
-  ".nuxt-test-cucumber/*/",
-  ".nuxt-test-cucumber/**/*",
-  ".nuxt-test-cucumber/**/*/",
+  ".nuxt-test-cucumber/**",

The pattern ".nuxt-test-cucumber/**" will ignore all files and directories under the .nuxt-test-cucumber directory, making the other patterns unnecessary.

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between d20d9a5 and 1430fd8.

Files ignored due to path filters (49)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
  • tests/acceptance/screenshots/darwin/Game Lobby Additional Cards Manager with 5 cards.png is excluded by !**/*.png
  • tests/acceptance/screenshots/darwin/Game Lobby Additional Cards Manager without cards.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game Lobby Additional Cards Manager with 5 cards.png is excluded by !**/*.png
  • tests/acceptance/screenshots/linux/Game Lobby Additional Cards Manager without cards.png is excluded by !**/*.png
  • tests/unit/specs/components/pages/game-lobby/GameLobbyAdditionalCardsManager/GameLobbyAdditionalCardsManagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsDisclaimer/__snapshots__/RecipientRoleAdditionalCardsDisclaimer.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyAdditionalCardsManager/GameLobbyAdditionalCardsManagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsMultiSelect/__snapshots__/RecipientRoleAdditionalCardsMultiSelect.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyAdditionalCardsManager/GameLobbyAdditionalCardsManagerContent/RecipientRoleAdditionalCardsManager/__snapshots__/RecipientRoleAdditionalCardsManager.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderAdditionalCardsManagerButton/__snapshots__/GameLobbyHeaderAdditionalCardsManagerButton.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderOptionsButton/__snapshots__/GameLobbyHeaderOptionsButton.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderPositionCoordinatorButton/__snapshots__/GameLobbyHeaderPositionCoordinatorButton.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/__snapshots__/GameLobbyHeaderSetupButtons.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubFooter/__snapshots__/GameLobbyOptionsHubFooter.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubCompositionTab/__snapshots__/GameLobbyOptionsHubCompositionTab.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabActor/__snapshots__/GameLobbyOptionsHubRolesTabActor.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabBearTamer/__snapshots__/GameLobbyOptionsHubRolesTabBearTamer.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabBigBadWolf/__snapshots__/GameLobbyOptionsHubRolesTabBigBadWolf.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabCupid/__snapshots__/GameLobbyOptionsHubRolesTabCupid.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabDefender/__snapshots__/GameLobbyOptionsHubRolesTabDefender.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabElder/__snapshots__/GameLobbyOptionsHubRolesTabElder.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabFox/__snapshots__/GameLobbyOptionsHubRolesTabFox.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabGeneral/__snapshots__/GameLobbyOptionsHubRolesTabGeneral.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabIdiot/__snapshots__/GameLobbyOptionsHubRolesTabIdiot.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabLittleGirl/__snapshots__/GameLobbyOptionsHubRolesTabLittleGirl.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabPiedPiper/__snapshots__/GameLobbyOptionsHubRolesTabPiedPiper.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabPrejudicedManipulator/__snapshots__/GameLobbyOptionsHubRolesTabPrejudicedManipulator.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabScandalmonger/__snapshots__/GameLobbyOptionsHubRolesTabScandalmonger.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabSeer/__snapshots__/GameLobbyOptionsHubRolesTabSeer.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabSheriff/GameLobbyOptionsHubRolesTabSheriffElection/__snapshots__/GameLobbyOptionsHubRolesTabSheriffElection.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabSheriff/__snapshots__/GameLobbyOptionsHubRolesTabSheriff.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabStutteringJudge/__snapshots__/GameLobbyOptionsHubRolesTabStutteringJudge.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabThief/__snapshots__/GameLobbyOptionsHubRolesTabThief.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabThreeBrothers/__snapshots__/GameLobbyOptionsHubRolesTabThreeBrothers.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabTwoSisters/__snapshots__/GameLobbyOptionsHubRolesTabTwoSisters.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabWerewolf/__snapshots__/GameLobbyOptionsHubRolesTabWerewolf.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabWhiteWerewolf/__snapshots__/GameLobbyOptionsHubRolesTabWhiteWerewolf.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabWildChild/__snapshots__/GameLobbyOptionsHubRolesTabWildChild.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabWitch/__snapshots__/GameLobbyOptionsHubRolesTabWitch.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubRolesTab/GameLobbyOptionsHubRolesTabWolfHound/__snapshots__/GameLobbyOptionsHubRolesTabWolfHound.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubVotesTab/__snapshots__/GameLobbyOptionsHubVotesTab.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/__snapshots__/GameLobbyOptionsHubTabView.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyPlayersParty/GameLobbyPlayerCard/__snapshots__/GameLobbyPlayerCard.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyPositionCoordinator/GameLobbyPositionCoordinatorSorter/__snapshots__/GameLobbyPositionCoordinatorSorter.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyRolePicker/GameLobbyRolePickerDescription/__snapshots__/GameLobbyRolePickerDescription.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyRolePicker/GameLobbyRolePickerGrid/GameLobbyRolePickerGridElement/__snapshots__/GameLobbyRolePickerGridElement.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyRolePicker/GameLobbyRolePickerGrid/__snapshots__/GameLobbyRolePickerGrid.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/pages/game-lobby/GameLobbyRolePicker/GameLobbyRolePickerHeader/__snapshots__/GameLobbyRolePickerHeader.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/shared/game/game-options/GameOptionInputGroup/__snapshots__/GameOptionInputGroup.nuxt.spec.ts.snap is excluded by !**/*.snap
  • tests/unit/specs/components/shared/game/player/PlayerCard/__snapshots__/PlayerCard.nuxt.spec.ts.snap is excluded by !**/*.snap
Files selected for processing (5)
  • app/components/pages/game-lobby/GameLobbyRolePicker/GameLobbyRolePickerDescription/GameLobbyRolePickerDescription.vue (3 hunks)
  • config/eslint/eslint.constants.mjs (1 hunks)
  • package.json (1 hunks)
  • tests/unit/specs/components/pages/game-lobby/GameLobbyAdditionalCardsManager/GameLobbyAdditionalCardsManagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsMultiSelect/RecipientRoleAdditionalCardsMultiSelect.nuxt.spec.ts (4 hunks)
  • tests/unit/specs/components/pages/game-lobby/GameLobbyRolePicker/GameLobbyRolePickerDescription/GameLobbyRolePickerDescription.nuxt.spec.ts (4 hunks)
Files skipped from review as they are similar to previous changes (1)
  • app/components/pages/game-lobby/GameLobbyRolePicker/GameLobbyRolePickerDescription/GameLobbyRolePickerDescription.vue
Additional comments not posted (8)
tests/unit/specs/components/pages/game-lobby/GameLobbyRolePicker/GameLobbyRolePickerDescription/GameLobbyRolePickerDescription.nuxt.spec.ts (5)

12-17: LGTM!

The hoisted mock object provides controlled implementations of the useScroll and useBreakpoints hooks for testing purposes. This allows for precise testing of the component's behavior based on the mocked scroll position and screen size.


19-23: LGTM!

Mocking the @vueuse/core module with the controlled implementations of useBreakpoints and useScroll hooks ensures that the component's behavior can be precisely tested based on the mocked responses. Returning the original module alongside the mocked hooks maintains the functionality of other hooks and utilities from the module.


38-39: LGTM!

Setting up the mocked implementations of useBreakpoints and useScroll hooks before each test case ensures a consistent initial state for the component. The default values represent a non-small screen and no vertical scroll, providing a predictable starting point for the tests.


56-68: LGTM!

The new test cases verify the conditional rendering of the RoleFlippingImage component based on the screen size. By mocking the useBreakpoints.smaller function to return different values, the tests ensure that the component sets the correct size for the RoleFlippingImage based on the viewport size. This improves the test coverage and validates the responsive behavior of the component.


88-92: LGTM!

The updated test case for scrolling back to the top when the picked role changes now utilizes the mocked useScroll hook to simulate a non-zero scroll position. By setting the useScroll.y value to 20 before changing the picked role, the test case effectively simulates a scenario where the user has scrolled down the page. After changing the picked role and waiting for the next tick, the test case verifies that the useScroll.y value is reset to 0, ensuring that the page has scrolled back to the top. This enhances the test coverage and validates the expected behavior of the component when the picked role changes.

tests/unit/specs/components/pages/game-lobby/GameLobbyAdditionalCardsManager/GameLobbyAdditionalCardsManagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsMultiSelect/RecipientRoleAdditionalCardsMultiSelect.nuxt.spec.ts (3)

22-31: LGTM!

The mock implementation for useBreakpoints is set up correctly using vi.hoisted and provides a way to simulate different screen sizes in the tests.


110-110: LGTM!

Setting the default return value of useBreakpoints.smaller to false ensures that the existing test cases continue to work as expected.


130-136: LGTM!

The new test case is well-structured and covers an important scenario of verifying the component's behavior when the screen is smaller than the medium size. The snapshot comparison ensures that the component adapts correctly to smaller screens.

Copy link

sonarcloud bot commented Sep 16, 2024

@antoinezanardi antoinezanardi merged commit aaccf38 into develop Sep 16, 2024
15 checks passed
@antoinezanardi antoinezanardi deleted the feat/responsive-game-lobby branch September 16, 2024 13:53
antoinezanardi pushed a commit that referenced this pull request Sep 18, 2024
## [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))
@antoinezanardi
Copy link
Owner Author

🎉 This PR is included in version 1.32.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🚀 feature New feature or request released
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant