fix(shell): publish the active view, so both navs follow the back path
The nav components learned where the user was from the `navigate` CustomEvent, which only the outbound path dispatches: `popstate` calls `handleNavigate()` directly. So a back-navigation left both of them highlighting the view just left — desktop included, at any width, on any back across two primary views. Opening a detail view was the same cause wearing a different symptom: `app-sidebar` guarded on its own item list and kept its highlight, `bottom-nav` did not and lit nothing. It cannot be fixed by re-dispatching `navigate` — `index.ts` is that event's document listener, so that is an infinite loop, and "please go to X" is not the statement being made. `activeViewStore` is the shell saying "the active view is now X", once per navigation, `popstate` included; both navs read it through a controller and hold no `activeView` of their own. A store rather than an event because a component that mounts *after* a navigation still has to know: `bottom-nav`'s drawer builds its `app-sidebar` on open, and that copy had heard nothing at all, so the drawer opened on Home from any page in the app. Closes #72
This commit is contained in:
@@ -1,11 +1,13 @@
|
||||
/**
|
||||
* The three small stores behind view chrome: the global search term,
|
||||
* the track list's column set, and the explore cache that keeps detail
|
||||
* pages from re-fetching what a search already returned.
|
||||
* The small stores behind view chrome: the global search term, the
|
||||
* active view both navs highlight, the track list's column set, and
|
||||
* the explore cache that keeps detail pages from re-fetching what a
|
||||
* search already returned.
|
||||
*/
|
||||
import { describe, expect, it, beforeEach } from 'vitest';
|
||||
|
||||
import { searchStore } from '@store/search-store';
|
||||
import { activeViewStore } from '@store/active-view-store';
|
||||
import { trackListStore } from '@store/tracklist-store';
|
||||
import { exploreCache, ARTIST_IMAGE_CACHE_LIMIT } from '@store/explore-cache';
|
||||
import { Events } from '../../src/events';
|
||||
@@ -80,6 +82,57 @@ describe('search store', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('active view store', () => {
|
||||
beforeEach(() => {
|
||||
activeViewStore.setView('home', true);
|
||||
});
|
||||
|
||||
it('holds the primary view the shell navigated to', () => {
|
||||
activeViewStore.setView('albums', true);
|
||||
|
||||
expect(activeViewStore.get()).toBe('albums');
|
||||
expect(activeViewStore.isActive('albums')).toBe(true);
|
||||
expect(activeViewStore.isActive('tracks')).toBe(false);
|
||||
});
|
||||
|
||||
it('leaves the primary view lit while a detail view is open', () => {
|
||||
activeViewStore.setView('albums', true);
|
||||
activeViewStore.setView('explore-album-details', false);
|
||||
|
||||
// #72's third finding, made deliberate: a detail view is not a
|
||||
// destination in either nav, and the tab it was opened from is
|
||||
// where the user still is. `app-sidebar` did this by accident (it
|
||||
// guarded on its own item list) and `bottom-nav` did not do it at
|
||||
// all, which is why one looked right and the other looked broken.
|
||||
expect(activeViewStore.get()).toBe('albums');
|
||||
});
|
||||
|
||||
it('does not notify when the view is unchanged', () => {
|
||||
let notifications = 0;
|
||||
const off = activeViewStore.subscribe(() => {
|
||||
notifications += 1;
|
||||
});
|
||||
|
||||
activeViewStore.setView('albums', true);
|
||||
activeViewStore.setView('albums', true);
|
||||
activeViewStore.setView('explore-album-details', false);
|
||||
off();
|
||||
|
||||
expect(notifications).toBe(1);
|
||||
});
|
||||
|
||||
it('lights nothing for a view with no name', () => {
|
||||
// The store starts empty rather than defaulting to a view, because
|
||||
// a written-down default is right only while `GetDefaultPage()`
|
||||
// agrees with it. That is only safe if the empty value matches
|
||||
// nothing: `isActive` compares strings, and a component asking
|
||||
// about an id it does not have must not light up.
|
||||
activeViewStore.setView('', true);
|
||||
|
||||
expect(activeViewStore.isActive('')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('track list store', () => {
|
||||
it('starts from the default column set', () => {
|
||||
expect(trackListStore.getState().columnIds.length).toBeGreaterThan(0);
|
||||
|
||||
Reference in New Issue
Block a user