Skip to content

Conversation

@slifty
Copy link
Contributor

@slifty slifty commented Jan 10, 2026

This PR removes our use of shallow-render and replaces it with ng-mock which is a commonly used mocking library with more community support.

This is an extensive set of changes, so it's broken into smaller parts for easier review; ultimately, however, we will want to squash the commits into a single migration commit.

Resolves #879

@slifty slifty force-pushed the 879-migrate-to-ng-mocks branch from 555318f to 245fe0f Compare January 10, 2026 01:39
@slifty slifty marked this pull request as draft January 10, 2026 01:40
@slifty slifty force-pushed the 879-migrate-to-ng-mocks branch 4 times, most recently from 08b325a to c3c009b Compare January 13, 2026 15:41
@codecov
Copy link

codecov bot commented Jan 13, 2026

Codecov Report

❌ Patch coverage is 52.50000% with 19 lines in your changes missing coverage. Please review.
✅ Project coverage is 47.85%. Comparing base (20cebec) to head (804017f).

Files with missing lines Patch % Lines
src/test/ng-mocks-matchers.ts 34.48% 15 Missing and 4 partials ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #883      +/-   ##
==========================================
+ Coverage   47.13%   47.85%   +0.72%     
==========================================
  Files         372      351      -21     
  Lines       11495    11292     -203     
  Branches     1913     1888      -25     
==========================================
- Hits         5418     5404      -14     
+ Misses       5889     5695     -194     
- Partials      188      193       +5     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Replace shallow-render with ng-mocks for Angular component testing.
ng-mocks provides better TypeScript support and more flexible mocking
capabilities.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@slifty
Copy link
Contributor Author

slifty commented Jan 13, 2026

It passes! I'm going to have Claude attempt to organize things into better clumps of commits that we can review in pieces, and then it's possible would still want to squash them into changes.

slifty and others added 14 commits January 13, 2026 10:47
- Replace shallow-render configuration with ng-mocks equivalents
- Add ngMocks.autoSpy('jasmine') for automatic spy creation
- Configure globalReplace for RouterModule -> RouterTestingModule
- Add globalKeep for NgBootstrap modules and CountUp directive
- Add custom Jasmine matchers (toHaveFoundOne, toHaveFound) for
  ng-mocks compatibility with existing test assertions

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Migrate button, checkbox, form-input, and toggle component tests from
shallow-render to ng-mocks using MockBuilder and TestBed patterns.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Migrate auth and login component tests from shallow-render to ng-mocks.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Migrate android-app-notify and announcement component tests from
shallow-render to ng-mocks.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Migrate manage-metadata and all subcomponent tests (category-add,
category-edit, form-create, form-edit, value-add, value-edit) from
shallow-render to ng-mocks.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Migrate account-settings, advanced-settings, archive-settings-dialog,
billing-settings, gift-storage, invitations-dialog, manage-tags,
public-settings, redeem-gift, storage-dialog, two-factor-auth, and
upload-progress component tests from shallow-render to ng-mocks.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Migrate directive-display, directive-edit, legacy-contact-display, and
legacy-contact-edit component tests from shallow-render to ng-mocks.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Migrate edit-tags, file-viewer, publish, sharing-dialog, and sidebar
component tests from shallow-render to ng-mocks.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Migrate featured-archive, gallery-header, gallery, and public-archives-list
component tests from shallow-render to ng-mocks.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Migrate all onboarding component tests from shallow-render to ng-mocks,
including archive-creation-with-share, create-new-archive, glam-pending-archives,
all glam subcomponents, header, onboarding, and welcome-screen.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Migrate new-pledge, public-archive, and search-box component tests from
shallow-render to ng-mocks.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Migrate mobile-banner, new-archive-form, thumbnail, and zooming-image-viewer
component tests from shallow-render to ng-mocks.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Migrate account.service, refreshAccount, device.service, event.service,
mobile-banner.service, and profile.service tests from shallow-render to
ng-mocks.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Migrate task-icon and user-checklist component tests from shallow-render
to ng-mocks.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@slifty slifty force-pushed the 879-migrate-to-ng-mocks branch from c3c009b to 804017f Compare January 13, 2026 15:53
@slifty slifty requested a review from aasandei-vsp January 13, 2026 15:58
@slifty slifty marked this pull request as ready for review January 13, 2026 15:58
@slifty slifty changed the title WIP: Migrate to ng-mock Migrate to ng-mock Jan 13, 2026
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 shallow-render dependency

2 participants