[brandyscarney]

What This Does

Adds tests for the app's functionality: switching tabs, the Explore UI Components link on Tab 1 and Tab 3, and taking, saving, loading, and deleting photos.

New Behavior

• The unit tests cover the photo gallery logic and the Photos page, on both the web and native code paths.
• The e2e tests run the real Capacitor Camera web flow (the pwa-elements camera modal) in Chromium with a fake camera, so CI checks the whole gallery flow end to end.
• The e2e tests also cover tab navigation and the Tab 1 and Tab 3 pages.

Changes

• usePhotoGallery.test.ts: the hook takes photos on the web and on native (including native file data returned as a Blob), loads saved photos, and deletes photos, with the Capacitor plugins and isPlatform mocked.
• Tab2.test.tsx: the page shows a thumbnail per photo, takes a photo from the camera button, and opens the action sheet when a photo is tapped. Delete deletes that photo and closes the sheet.
• e2e/app.spec.ts: the app opens on Tab 1; the tab bar switches between Tab 1, Photos, and Tab 3, with the right URL, title, and selected tab each time; Tab 1 and Tab 3 show their page name and an "Explore UI Components" link to https://ionicframework.com/docs/components that opens in a new tab.
• e2e/gallery.spec.ts: taking a photo adds it to the gallery; photos are still there after a reload, loaded from storage; Delete in the action sheet removes a photo, and after a reload the other photo loads and the deleted one stays gone; Cancel keeps the photo; a photo taken after a delete shows up as the only photo, including after a reload.
• ExploreContainer uses id="container" and #container styles, matching the Angular and Vue apps (it used a .container class).

Notes

• Each test was checked against deliberately broken versions of the code it covers (for example, appending instead of prepending new photos, skipping the save to Preferences, deleting the wrong photo, renaming Tab 3, or changing the docs link), and every break made a test fail.
• The e2e suite passed 45 of 45 runs locally (--repeat-each=5).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
tutorial-photo-gallery-react	Ready	Preview	Oct 23, 2026 9:57pm UTC