Add missing unit tests in frontend

[nicki182]

Terms

• [x] I have searched open and closed feature requests
• [x] I agree to follow activist's Code of Conduct

Description

Create unit tests for the following components and entities, including tests for their styles (classes, dynamic props, and responsive behavior):

Paths to main components:

• CardSearchResultEntity: frontend/app/components/card/search-result-entity/CardSearchResultEntity.vue
• CardSearchResultEntityOrganization: frontend/app/components/card/search-result-entity/CardSearchResultEntityOrganization.vue
• CardSearchResultEntityGroup: frontend/app/components/card/search-result-entity/CardSearchResultEntityGroup.vue
• CardSearchResultEntityEvent: frontend/app/components/card/search-result-entity/CardSearchResultEntityEvent.vue
• ModalBase: frontend/app/components/modal/ModalBase.vue
• Sidebar (Left): frontend/app/components/sidebar/left/SidebarLeft.vue and related files
• BtnAction: frontend/app/components/btn/action/BtnAction.vue and related button components (BtnActionDropdown.vue, BtnTag.vue, BtnRouteInternal.vue, BtnRouteExternal.vue)
• FormSelectorCombobox: frontend/app/components/form/FormSelectorCombobox.vue
• FormResource: frontend/app/components/form/FormResource.vue
• FormFAQEntry: frontend/app/components/form/FormFAQEntry.vue

Composables to add tests for:

• useFileManager: frontend/app/composables/useFileManager.ts
• useBreakpoint: frontend/app/composables/useBreakpoint.ts
• usePasswordRules: frontend/app/composables/usePasswordRules.ts
• useToaster: frontend/app/composables/useToaster.ts

Testing suggestions:

• Write unit tests for logic and rendering for each component and its main variants (User, Organization, Group, Event).
• Add tests that cover dynamic styling, class changes (e.g., collapsed/expanded in Sidebar, cta in BtnAction, imageModal in ModalBase), and responsiveness (media queries, dynamic classes).
• Check for accessibility attributes and aria-labels.
• For Sidebar, test dynamic state changes and styling via useSidebar and sidebarUtils.
• For BtnAction and related, test getBtnDynamicClass and style propagation.
• For ModalBase, test modal open/close logic, event emission, and style variants.
• Use frontend/app/assets/css/tailwind.css for reference for styles and test class application where relevant.
• Consider adding tests for reusable composables in frontend/app/composables/.
• Add suitable test coverage for composables and helper functions related to frontend logic.

Other components/entities to consider:

• Any reusable UI elements without existing unit tests (search for files in frontend/app/components/ and frontend/app/composables/).
• Menu, Tooltip, Dropdown, and Form components used in the platform.
• Ensure that tests are written for both logic and style coverage, including edge cases and incorrect prop usage.

Document any additional components or composables identified during review. Link the relevant paths in the issue description for clarity.

---

This issue covers both logic and style unit testing needs. Please reference the provided file paths for implementation.

Contribution

I will be doing the reviewing and helping to identify missing components to be tested

[Amir777-Z]

I will work on it

[ayushdoesdev]

Can I work on it? I just started my first open source contribution and want to go more. Or please suggest me any other task.

[nicki182]

ok, I can assign but first communicate between each other which component each one will start with and try not to step to each other will doing so.

[ayushdoesdev]

ok, I can assign but first communicate between each other which component each one will start with and try not to step to each other will doing so.

Hi @Amir777-Z , can you please help with this? as this will be my first contribution.

[aasimsyed]

I was also interested in contributing to this. Perhaps can create sub-issues and assign individually?

[KubanjaElijahEldred]

HLO there i have liked you project please assign me this this issue

[Amir777-Z]

@ayushdoesdev sure! I can do CardSearchResultEntity, CardSearchResultEntityOrganization, ModalBase and BTN action. You can do the others

[ayushdoesdev]

Thanks @Amir777-Z , I will check it. cc @nicki182

[nicki182]

I created the sub issues @Amir777-Z, @ayushdoesdev, @KubanjaElijahEldred write in those to assign them to each one of you. @aasimsyed how do you feel about working for the services one? If any of you find a new component to work on tag me here and I will create a subissue for you

[KubanjaElijahEldred]

i will work on this Unit tests for Menu components #1654

[ayushdoesdev]

@nicki182 I can work on

https://github.com/activist-org/activist/issues/1652 https://github.com/activist-org/activist/issues/1653 https://github.com/activist-org/activist/issues/1655

cc @Amir777-Z @KubanjaElijahEldred

[nicki182]

ok, write on the issues so I can assign them to each one of you

[ayushdoesdev]

ok, write on the issues so I can assign them to each one of you

done, please check

[andrewtavis]

Thanks all so much for the communication here, and also @nicki182 for making all of these issues! 🚀

[henriquercz]

Olá! Gostaria de contribuir com esse issue. Alguma dica ou recomendação inicial que possa me ajudar a começar?

[nicki182]

note:@henriquercz Puedo ver en los próximos días podría crear nuevos issues pero también podes ver el código y si hay algún componente activo que vos veas que puedas contribuir para testear tageame y te creo el issue para que trabajes, ok? Mañana puede que cree issues para los inputs. Estate atento para escribir en el issue y te lo asignó praise:gracias por tus ganas de contribuir en el proyecto. ;)

[hgcl]

Hi @nicki182! Thank you for overviewing this issue 😊 Should I create extra sub-issues for tests that haven't been covered in frontend/app/components/ or frontend/app/composables/ if I want to work on them?

[nicki182]

@hgcl exactly. But just in case check here if it's being used or not. We need to do a purge of files in the frontend since over the years it has changed and morphed a lot.

[nicki182]

@hgcl I was going to make more issues with unit tests since they are mostly done now, so people like you can work on them.

[hgcl]

@hgcl exactly. But just in case check here if it's being used or not. We need to do a purge of files in the frontend since over the years it has changed and morphed a lot.

Sounds good! How about the following components for instance? @nicki182

• frontend/app/components/shield
• frontend/app/components/meta-tag

[nicki182]

@hgcl yeah, they are being used. You make unit tests for them.