Skip to content

Conversation

@Gopisokk
Copy link

@Gopisokk Gopisokk commented Nov 13, 2025

Closes #5534

Summary
Refactors accounts/pages/__tests__/accountsMain.spec.js to Vue Testing Library (sub-issue of #5060).

What changed

  • Replaced VTU-style instance testing with @testing-library/vue:
    • Uses render, screen, userEvent, and a renderComponent helper.
    • Queries favor a11y-first (getByLabelText / getByRole) with a single data-test="loginToProceed" hook.
  • Stable router/store setup:
    • Abstract router with named routes incl. AccountNotActivated.
    • Vuex store with a single login mock action; no deprecated methods stubbing.
  • Browser interaction fixes:
    • Stubbed window.location (assign/replace) to avoid jsdom navigation errors.
    • Removed setImmediate dependency.
  • Coverage added for workflows:
    • 7 tests total covering: render, empty submit validation, successful dispatch, ?next= banner + redirect, generic failure (no navigation), 405 → AccountNotActivated, and exact payload (email/username + password).
      • Note: next is asserted in the redirect test via window.location.assign, not as part of the action payload (matches current behavior).

Why (Testing Library principles)
Asserts user-visible behavior and dispatched actions rather than component internals, reducing brittleness and easing refactors (e.g., removing Vuetify).

Acceptance & guide alignment

  • Queries follow Testing Library priority.
  • No component-instance access; DOM/user-centric checks.
  • Avoids over-specifying implementation details.
  • Single reusable renderComponent with overridable router/store.

Risk / Impact

  • Test-only changes; no runtime code touched.

How to verify locally
pnpm install
pnpm run test -- accounts/pages/tests/accountsMain.spec.js

Expect: 7 passed

Security & privacy: N/A (tests only; no user data)
Internationalization: N/A (tests only; one non-user-facing test id)
LTR/RTL: N/A (no UI change)
Deployment/migrations: N/A
Linked issue: Sub-issue of #5060

@MisRob MisRob changed the title [VTL] Refactor AccountsMain tests to Testing Library issue #5534 (sub-issue of #5060) [Remove Vuetify from Studio] Convert Sign In page unit tests to Vue Testing Library Nov 18, 2025
@MisRob
Copy link
Member

MisRob commented Nov 18, 2025

Hi @Gopisokk, thanks. We will assign a reviewer. The tests are failing - can you check on it?

[wrapper, login] = await makeWrapper();
await wrapper.vm.$nextTick();
loginToProceed = wrapper.findAllComponents('[data-test="loginToProceed"]').at(0);
describe('AccountsMain (VTL)', () => {
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
describe('AccountsMain (VTL)', () => {
describe('AccountsMain', () => {

No need to mention what library is used in test descriptions.

await wrapper.vm.$nextTick();
loginToProceed = wrapper.findAllComponents('[data-test="loginToProceed"]').at(0);
describe('AccountsMain (VTL)', () => {
test('renders sign-in form', () => {
Copy link
Member

Choose a reason for hiding this comment

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

Convention in this codebase is it rather than test.

@bjester bjester self-assigned this Nov 18, 2025
@Gopisokk
Copy link
Author

Thanks for the review
Yes, I will fix the failing tests.
Working on the failing JS test now — I'll push the fixes shortly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Remove Vuetify from Studio] Convert Sign In page unit tests to Vue Testing Library

3 participants