@nyaruka/temba-components 0.39.0 → 0.40.0

package/out-tsc/test/temba-menu.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-menu.test.js","sourceRoot":"","sources":["../../test/temba-menu.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEvE,MAAM,GAAG,GAAG,YAAY,CAAC;AACzB,MAAM,OAAO,GAAG,KAAK,EAAE,QAAa,EAAE,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE;IACnD,MAAM,IAAI,GAAG,CAAC,MAAM,YAAY,CAC9B,GAAG,EACH,KAAK,EACL,EAAE,EACF,KAAK,EACL,CAAC,EACD,sBAAsB,CACvB,CAAc,CAAC;IAEhB,qBAAqB;IACrB,MAAM,IAAI,CAAC,YAAY,CAAC;IAExB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,IAAI,GAAc,MAAM,OAAO,EAAE,CAAC;QACxC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;QACnC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,IAAI,GAAc,MAAM,OAAO,CAAC;YACpC,QAAQ,EAAE,kCAAkC;SAC7C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC3C,MAAM,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;QAChC,MAAM,IAAI,GAAc,MAAM,OAAO,CAAC;YACpC,QAAQ,EAAE,kCAAkC;SAC7C,CAAC,CAAC;QAEH,uBAAuB;QACvB,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE,CAAC;QACnC,MAAM,IAAI,CAAC,YAAY,CAAC;QAExB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEpD,MAAM,gBAAgB,CAAC,mBAAmB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { assert, expect } from '@open-wc/testing';\n\nimport { TembaMenu } from '../src/list/TembaMenu';\nimport { assertScreenshot, getClip, getComponent } from './utils.test';\n\nconst TAG = 'temba-menu';\nconst getMenu = async (attrs: any = {}, width = 0) => {\n  const menu = (await getComponent(\n    TAG,\n    attrs,\n    '',\n    width,\n    0,\n    'display:inline-block'\n  )) as TembaMenu;\n\n  // wait for the fetch\n  await menu.httpComplete;\n\n  return menu;\n};\n\ndescribe('temba-menu', () => {\n  it('can be created', async () => {\n    const list: TembaMenu = await getMenu();\n    assert.instanceOf(list, TembaMenu);\n    expect(list.root).is.undefined;\n  });\n\n  it('renders with endpoint', async () => {\n    const menu: TembaMenu = await getMenu({\n      endpoint: '/test-assets/list/menu-root.json',\n    });\n\n    expect(menu.root.items.length).to.equal(2);\n    await assertScreenshot('list/menu-root', getClip(menu));\n  });\n\n  it('supports submenu', async () => {\n    const menu: TembaMenu = await getMenu({\n      endpoint: '/test-assets/list/menu-root.json',\n    });\n\n    // click our first item\n    menu.getDiv('#menu-tasks').click();\n    await menu.httpComplete;\n\n    expect(menu.root.items[0].items.length).to.equal(3);\n\n    await assertScreenshot('list/menu-submenu', getClip(menu));\n  });\n});\n"]}
+{"version":3,"file":"temba-menu.test.js","sourceRoot":"","sources":["../../test/temba-menu.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { assert, expect } from '@open-wc/testing';\n\nimport { TembaMenu } from '../src/list/TembaMenu';\nimport { assertScreenshot, getClip, getComponent } from './utils.test';\n\nconst TAG = 'temba-menu';\nconst getMenu = async (attrs: any = {}, width = 0) => {\n  const menu = (await getComponent(\n    TAG,\n    attrs,\n    '',\n    width,\n    0,\n    'display:inline-block'\n  )) as TembaMenu;\n\n  // wait for the fetch\n  await menu.httpComplete;\n\n  return menu;\n};\n\nconst IDX_CHOOSER = 0;\nconst IDX_TASKS = 1;\nconst IDX_SCHEDULE = 2;\n\ndescribe('temba-menu', () => {\n  it('can be created', async () => {\n    const list: TembaMenu = await getMenu();\n    assert.instanceOf(list, TembaMenu);\n    expect(list.root).is.undefined;\n  });\n\n  it('renders with endpoint', async () => {\n    const menu: TembaMenu = await getMenu({\n      endpoint: '/test-assets/menu/menu-root.json',\n    });\n\n    expect(menu.root.items.length).to.equal(3);\n    await assertScreenshot('menu/menu-root', getClip(menu));\n  });\n\n  it('supports submenu', async () => {\n    const menu: TembaMenu = await getMenu({\n      endpoint: '/test-assets/menu/menu-root.json',\n    });\n\n    // click our tasks\n    menu.getDiv('#menu-tasks').click();\n    await menu.httpComplete;\n    menu.requestUpdate();\n    // await menu.updateComplete;\n\n    expect(menu.root.items[IDX_TASKS].items.length).to.equal(3);\n    await assertScreenshot('menu/menu-submenu', getClip(menu));\n  });\n\n  it('sets focus', async () => {\n    // setting focus just shows the selection, it does\n    // not trigger events such as loading or dispatching\n\n    const menu: TembaMenu = await getMenu({\n      endpoint: '/test-assets/menu/menu-root.json',\n    });\n\n    // click our tasks\n    menu.getDiv('#menu-tasks').click();\n    await menu.httpComplete;\n\n    // now set the focus manually\n    menu.setFocusedItem('schedule');\n\n    // setting focus does NOT fetch items\n    expect(menu.root.items[IDX_SCHEDULE].items).to.equal(undefined);\n\n    // now load the items explicitly\n    menu.getDiv('#menu-schedule').click();\n    await menu.httpComplete;\n    expect(menu.root.items[IDX_SCHEDULE].items.length).to.equal(3);\n\n    await assertScreenshot('menu/menu-focused-with items', getClip(menu));\n\n    menu.setFocusedItem('tasks');\n    await assertScreenshot('menu/menu-tasks', getClip(menu));\n\n    menu.setFocusedItem('tasks/todo');\n    await assertScreenshot('menu/menu-tasks-nextup', getClip(menu));\n  });\n\n  it('refreshes', async () => {\n    // the menu should refresh along the selection path without destroying state\n    const menu: TembaMenu = await getMenu({\n      endpoint: '/test-assets/menu/menu-root.json',\n    });\n\n    // click our tasks\n    menu.getDiv('#menu-tasks').click();\n    menu.requestUpdate();\n    await menu.httpComplete;\n    // await menu.updateComplete;\n\n    // now click on the todo\n    menu.getDiv('#menu-todo').click();\n    menu.requestUpdate();\n    // await menu.updateComplete;\n\n    expect(menu.root.items[IDX_TASKS].items.length).to.equal(3);\n    await assertScreenshot('menu/menu-refresh-1', getClip(menu));\n\n    // now refresh!\n    menu.refresh();\n    await menu.httpComplete;\n\n    // we should still have our task items\n    expect(menu.root.items[IDX_TASKS].items.length).to.equal(3);\n    await assertScreenshot('menu/menu-refresh-2', getClip(menu));\n  });\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/contacts/ContactBadges.ts

@@ -4,9 +4,9 @@ import { Icon } from '../vectoricon';
 import { ContactStoreElement } from './ContactStoreElement';
 
 const STATUS = {
-  stopped: { name: 'Stopped', icon: 'x-octagon' },
-  blocked: { name: 'Blocked', icon: 'slash' },
-  archived: { name: 'Archived', icon: 'archive' },
+  stopped: { name: 'Stopped' },
+  blocked: { name: 'Blocked' },
+  archived: { name: 'Archived' },
 };
 
 export class ContactBadges extends ContactStoreElement {
@@ -32,9 +32,9 @@ export class ContactBadges extends ContactStoreElement {
           ${status && this.data.status !== 'active'
             ? html`
                 <temba-label
-                  icon="${status.icon}"
+                  icon="icon.contact_${this.data.status}"
                   onclick="goto(event)"
-                  href="/contact/${status.name.toLowerCase()}"
+                  href="/contact/${status.name.toLowerCase()}/"
                   secondary
                   clickable
                   shadow

package/src/list/TembaMenu.ts

@@ -18,7 +18,6 @@ export interface MenuItem {
   loading?: boolean;
   bottom?: boolean;
   level?: number;
-  trigger?: string;
   href?: string;
   show_header?: boolean;
   items?: MenuItem[];
@@ -122,9 +121,6 @@ export class TembaMenu extends RapidElement {
         display: none;
       }
 
-      .submenu {
-      }
-
       .level-0 > .item,
       .level-0 > temba-dropdown > div[slot='toggle'] > .avatar {
         background: var(--color-primary-dark);
@@ -185,9 +181,6 @@ export class TembaMenu extends RapidElement {
         font-size: 0.7em;
       }
 
-      .level-0.expanding {
-      }
-
       .level-0.expanded {
         background: inherit;
       }
@@ -218,9 +211,6 @@ export class TembaMenu extends RapidElement {
         margin-right: 0.5em;
       }
 
-      .item.inline > temba-icon {
-      }
-
       .item > .details > .name {
         flex-grow: 1;
         white-space: nowrap;
@@ -270,9 +260,6 @@ export class TembaMenu extends RapidElement {
         border-bottom-right-radius: var(--curvature);
       }
 
-      .level-0 > .selected-top {
-      }
-
       .level-0 > .item:hover {
         background: rgba(var(--primary-rgb), 0.85);
         --icon-color: #fff;
@@ -284,12 +271,6 @@ export class TembaMenu extends RapidElement {
         cursor: default;
       }
 
-      .inline-children {
-      }
-
-      .inline-children .item {
-      }
-
       .item.inline {
         border: 0px solid transparent;
       }
@@ -330,9 +311,6 @@ export class TembaMenu extends RapidElement {
         transition: min-width var(--transition-speed) !important;
       }
 
-      .level-1 .item .details {
-      }
-
       .collapsed .item {
         overflow: hidden;
         min-width: 0;
@@ -346,12 +324,6 @@ export class TembaMenu extends RapidElement {
         align-items: center;
       }
 
-      .item .details .name {
-      }
-
-      .item temba-icon {
-      }
-
       .collapsed .item {
         margin-bottom: 0.5em;
       }
@@ -536,7 +508,6 @@ export class TembaMenu extends RapidElement {
 
   root: MenuItem;
   selection: string[] = [];
-  pending: string[] = [];
   state: { [id: string]: MenuItemState } = {};
 
   constructor() {
@@ -566,14 +537,6 @@ export class TembaMenu extends RapidElement {
   }
 
   public updated(changes: Map<string, any>) {
-    if (changes.has('value')) {
-      this.setSelection((this.value || '').split('/'));
-    }
-
-    if (changes.has('submenu') && !changes.has('value')) {
-      this.setSelection([this.submenu]);
-    }
-
     if (changes.has('endpoint')) {
       this.root = {
         level: -1,
@@ -582,9 +545,16 @@ export class TembaMenu extends RapidElement {
 
       if (!this.wait) {
         this.loadItems(this.root);
+      } else {
+        this.fireCustomEvent(CustomEventType.Ready);
       }
+    }
 
-      this.fireCustomEvent(CustomEventType.Ready);
+    if (changes.has('root')) {
+      if (this.value) {
+        this.setFocusedItem(this.value);
+        this.value = null;
+      }
     }
   }
 
@@ -592,53 +562,36 @@ export class TembaMenu extends RapidElement {
     this.loadItems(this.root);
   }
 
-  public refresh(path: string[] = null) {
-    if (!path) {
-      path = [...this.selection];
-    }
-
-    // go up the tree until we find an endpoint
-    const item = this.getMenuItemForSelection(path);
+  public refresh() {
+    const path = [...this.selection];
+    let item = this.root;
 
-    if (item) {
-      if (item.endpoint) {
-        this.loadItems(item, false);
-      } else {
-        path.pop();
-        this.refresh(path);
-      }
+    while (path.length > 0) {
+      this.loadItems(item);
+      const id = path.shift();
+      item = item.items.find(_item => _item.id == id);
     }
-  }
-
-  private fireNoPath(missingId: string) {
-    const item = this.getMenuItem();
-
-    if (item) {
-      const details = {
-        item: item.id,
-        selection: '/' + this.selection.join('/'),
-        endpoint: item.endpoint,
-        path:
-          missingId + '/' + this.pending.join('/') + document.location.search,
-      };
-
-      // remove any excess from our selection
-      const selection = this.selection.join('/');
-      selection.replace(details.path, '');
-      this.selection = selection.split('/');
 
-      this.fireCustomEvent(CustomEventType.NoPath, details);
-      this.pending = [];
-      this.requestUpdate('root');
-    }
+    this.loadItems(item);
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  private loadItems(item: MenuItem, selectFirst = true) {
+  private loadItems(item: MenuItem, selectFirst = false) {
     if (item && item.endpoint) {
       item.loading = true;
       this.httpComplete = fetchResults(item.endpoint).then(
         (items: MenuItem[]) => {
+          items.forEach(newItem => {
+            if (!newItem.items) {
+              const prevItem = (item.items || []).find(
+                prev => prev.id == newItem.id
+              );
+              if (prevItem && prevItem.items) {
+                newItem.items = prevItem.items;
+              }
+            }
+          });
+
           // update our item level
           items.forEach(subItem => {
             subItem.level = item.level + 1;
@@ -646,42 +599,30 @@ export class TembaMenu extends RapidElement {
             if (subItem.items) {
               subItem.items.forEach(inlineItem => {
                 inlineItem.level = item.level + 2;
-                // inlineItem.parent = subItem;
               });
             }
           });
 
           item.items = items;
           item.loading = false;
+
+          if (this.submenu && this.selection.length == 0) {
+            const sub = this.getMenuItemForSelection([this.submenu]);
+            this.handleItemClicked(null, sub);
+          }
+
+          if (!this.wait) {
+            this.fireCustomEvent(CustomEventType.Ready);
+            this.wait = true;
+          }
+
+          // once we've set our items check if we need to auto-select
+          if (selectFirst && item.items.length > 0) {
+            this.handleItemClicked(null, item.items[0]);
+          }
+
           this.requestUpdate('root');
           this.scrollSelectedIntoView();
-          if (this.pending && this.pending.length > 0) {
-            // auto select the next pending click
-            const nextId = this.pending.shift();
-            if (nextId && items.length > 0) {
-              const nextItem = findItem(items, nextId);
-              if (nextItem.item) {
-                this.handleItemClicked(null, nextItem.item);
-              } else {
-                this.fireNoPath(nextId);
-              }
-            }
-          } else {
-            // auto select the first item
-            if (
-              selectFirst &&
-              items.length > 0 &&
-              this.selection.length >= 1 &&
-              !item.inline
-            ) {
-              for (const item of items) {
-                if (!item.type) {
-                  this.handleItemClicked(null, item);
-                  break;
-                }
-              }
-            }
-          }
         }
       );
     }
@@ -692,15 +633,27 @@ export class TembaMenu extends RapidElement {
     menuItem: MenuItem,
     parent: MenuItem = null
   ) {
-    this.fireCustomEvent(CustomEventType.ButtonClicked, {
-      item: menuItem,
-      parent,
-    });
     if (parent && parent.popup) {
+      if (event) {
+        this.fireCustomEvent(CustomEventType.ButtonClicked, {
+          item: menuItem,
+          selection: this.getSelection(),
+          parent,
+        });
+      }
+
       return;
     }
 
     if (menuItem.popup) {
+      if (event) {
+        this.fireCustomEvent(CustomEventType.ButtonClicked, {
+          item: menuItem,
+          selection: this.getSelection(),
+          parent,
+        });
+      }
+
       return;
     }
 
@@ -717,63 +670,37 @@ export class TembaMenu extends RapidElement {
       event.stopPropagation();
     }
 
-    if (menuItem.trigger) {
-      new Function(menuItem.trigger)();
+    // update our selection
+    if (menuItem.level >= this.selection.length) {
+      this.selection.push(menuItem.vanity_id || menuItem.id);
     } else {
-      if (menuItem.level === 0) {
-        /* this.expanding = menuItem.id;
-        window.setTimeout(() => {
-          this.expanding = null;
-        }, 60);
-        */
-      }
-
-      // update our selection
-      if (menuItem.level >= this.selection.length) {
-        this.selection.push(menuItem.vanity_id || menuItem.id);
-      } else {
-        this.selection.splice(
-          menuItem.level,
-          this.selection.length - menuItem.level,
-          menuItem.vanity_id || menuItem.id
-        );
-      }
+      this.selection.splice(
+        menuItem.level,
+        this.selection.length - menuItem.level,
+        menuItem.vanity_id || menuItem.id
+      );
+    }
 
-      if (menuItem.endpoint) {
-        this.loadItems(menuItem, this.pending.length == 0);
+    if (menuItem.endpoint) {
+      this.loadItems(menuItem, !!event);
 
-        // make sure change events fire for events with hrefs
-        if (!menuItem.href) {
-          return;
-        }
-      } else {
-        if (this.pending && this.pending.length > 0) {
-          // auto select the next pending click
-          const nextId = this.pending.shift();
-          const item = this.getMenuItem();
-          if (nextId && item && item.items && item.items.length > 0) {
-            const nextItem = findItem(item.items, nextId).item;
-            if (nextItem) {
-              this.handleItemClicked(null, nextItem);
-              return;
-            } else {
-              this.fireNoPath(nextId);
-              this.requestUpdate('root');
-              return;
-            }
-          } else {
-            this.fireNoPath(nextId);
-            this.requestUpdate('root');
-            return;
-          }
-        }
-        this.requestUpdate('root');
+      // make sure change events fire for events with hrefs
+      if (!menuItem.href) {
+        return;
       }
+    } else {
+      this.requestUpdate();
+    }
 
-      if (this.pending.length == 0 || this.getMenuItem().href) {
-        this.dispatchEvent(new Event('change'));
-      }
+    if (menuItem.href) {
+      this.dispatchEvent(new Event('change'));
     }
+
+    this.fireCustomEvent(CustomEventType.ButtonClicked, {
+      item: menuItem,
+      selection: this.getSelection(),
+      parent,
+    });
   }
 
   public scrollSelectedIntoView() {
@@ -828,28 +755,6 @@ export class TembaMenu extends RapidElement {
     return this.selection;
   }
 
-  public setSelection(path: string[]) {
-    this.pending = [...path];
-    this.selection = [];
-
-    if (this.wait) {
-      this.wait = false;
-      this.loadItems(this.root);
-    }
-  }
-
-  public setSelectionPath(path: string) {
-    const asPath = path.split('/').filter(step => !!step);
-
-    // first try to click in the current space
-    const clicked = this.clickItem(asPath[asPath.length - 1]);
-
-    if (!clicked) {
-      this.wait = true;
-      this.setSelection(asPath);
-    }
-  }
-
   public handleExpand() {
     this.collapsed = false;
   }
@@ -860,6 +765,9 @@ export class TembaMenu extends RapidElement {
 
   public async setFocusedItem(path: string) {
     const focusedPath = path.split('/').filter(step => !!step);
+    if (!this.root) {
+      return;
+    }
 
     // if we don't match at the first level, we are a noop
     if (focusedPath.length > 0) {
@@ -875,7 +783,7 @@ export class TembaMenu extends RapidElement {
       const nextId = focusedPath.shift();
       if (nextId) {
         if (!level.items) {
-          this.loadItems(level, false);
+          this.loadItems(level);
           await this.httpComplete;
         }
 

package/src/utils/index.ts

@@ -179,6 +179,7 @@ export interface WebResponse {
   url?: string;
   headers: Headers;
   controller?: AbortController;
+  redirected?: boolean;
 }
 
 export const postUrl = (
@@ -213,6 +214,8 @@ export const postUrl = (
             json,
             headers: response.headers,
             status: response.status,
+            redirected: response.redirected,
+            url: response.url,
           });
         });
       })

package/src/vectoricon/index.ts

@@ -21,6 +21,7 @@ export enum Icon {
   checkbox = 'square',
   checkbox_checked = 'check-square',
   contact = 'user-01',
+  contact_archived = 'archive',
   contact_blocked = 'message-x-square',
   contact_stopped = 'slash-octagon',
   contact_updated = 'user-edit',
@@ -43,6 +44,7 @@ export enum Icon {
   group = 'users-01',
   group_smart = 'atom-01',
   help = 'help-circle',
+  home = 'home-smile',
   inbox = 'inbox-01',
   label = 'tag-01',
   language = 'globe-01',

package/test/temba-label.test.ts

@@ -15,13 +15,13 @@ describe('temba-label', () => {
   });
 
   it('renders icon', async () => {
-    const label: Label = await getLabel('Default', { icon: 'home' });
+    const label: Label = await getLabel('Default', { icon: 'check' });
     await assertScreenshot('label/default-icon', getClip(label));
   });
 
   it('renders shadow', async () => {
     const label: Label = await getLabel('Shadow', {
-      icon: 'loader',
+      icon: 'check',
       shadow: true,
     });
     await assertScreenshot('label/shadow', getClip(label));
@@ -58,7 +58,7 @@ describe('temba-label', () => {
 
   it('renders danger', async () => {
     const label: Label = await getLabel('Danger', {
-      icon: 'alert-triangle',
+      icon: 'check',
       danger: true,
     });
     await assertScreenshot('label/danger', getClip(label));
@@ -66,7 +66,7 @@ describe('temba-label', () => {
 
   it('renders custom', async () => {
     const label: Label = await getLabel('Custom Orange', {
-      icon: 'tool',
+      icon: 'check',
       backgroundColor: 'rgb(240, 176, 29)',
       textColor: '#ffff',
     });

package/test/temba-menu.test.ts

@@ -20,6 +20,10 @@ const getMenu = async (attrs: any = {}, width = 0) => {
   return menu;
 };
 
+const IDX_CHOOSER = 0;
+const IDX_TASKS = 1;
+const IDX_SCHEDULE = 2;
+
 describe('temba-menu', () => {
   it('can be created', async () => {
     const list: TembaMenu = await getMenu();
@@ -29,24 +33,86 @@ describe('temba-menu', () => {
 
   it('renders with endpoint', async () => {
     const menu: TembaMenu = await getMenu({
-      endpoint: '/test-assets/list/menu-root.json',
+      endpoint: '/test-assets/menu/menu-root.json',
     });
 
-    expect(menu.root.items.length).to.equal(2);
-    await assertScreenshot('list/menu-root', getClip(menu));
+    expect(menu.root.items.length).to.equal(3);
+    await assertScreenshot('menu/menu-root', getClip(menu));
   });
 
   it('supports submenu', async () => {
     const menu: TembaMenu = await getMenu({
-      endpoint: '/test-assets/list/menu-root.json',
+      endpoint: '/test-assets/menu/menu-root.json',
+    });
+
+    // click our tasks
+    menu.getDiv('#menu-tasks').click();
+    await menu.httpComplete;
+    menu.requestUpdate();
+    // await menu.updateComplete;
+
+    expect(menu.root.items[IDX_TASKS].items.length).to.equal(3);
+    await assertScreenshot('menu/menu-submenu', getClip(menu));
+  });
+
+  it('sets focus', async () => {
+    // setting focus just shows the selection, it does
+    // not trigger events such as loading or dispatching
+
+    const menu: TembaMenu = await getMenu({
+      endpoint: '/test-assets/menu/menu-root.json',
     });
 
-    // click our first item
+    // click our tasks
     menu.getDiv('#menu-tasks').click();
     await menu.httpComplete;
 
-    expect(menu.root.items[0].items.length).to.equal(3);
+    // now set the focus manually
+    menu.setFocusedItem('schedule');
+
+    // setting focus does NOT fetch items
+    expect(menu.root.items[IDX_SCHEDULE].items).to.equal(undefined);
+
+    // now load the items explicitly
+    menu.getDiv('#menu-schedule').click();
+    await menu.httpComplete;
+    expect(menu.root.items[IDX_SCHEDULE].items.length).to.equal(3);
+
+    await assertScreenshot('menu/menu-focused-with items', getClip(menu));
+
+    menu.setFocusedItem('tasks');
+    await assertScreenshot('menu/menu-tasks', getClip(menu));
+
+    menu.setFocusedItem('tasks/todo');
+    await assertScreenshot('menu/menu-tasks-nextup', getClip(menu));
+  });
+
+  it('refreshes', async () => {
+    // the menu should refresh along the selection path without destroying state
+    const menu: TembaMenu = await getMenu({
+      endpoint: '/test-assets/menu/menu-root.json',
+    });
+
+    // click our tasks
+    menu.getDiv('#menu-tasks').click();
+    menu.requestUpdate();
+    await menu.httpComplete;
+    // await menu.updateComplete;
+
+    // now click on the todo
+    menu.getDiv('#menu-todo').click();
+    menu.requestUpdate();
+    // await menu.updateComplete;
+
+    expect(menu.root.items[IDX_TASKS].items.length).to.equal(3);
+    await assertScreenshot('menu/menu-refresh-1', getClip(menu));
+
+    // now refresh!
+    menu.refresh();
+    await menu.httpComplete;
 
-    await assertScreenshot('list/menu-submenu', getClip(menu));
+    // we should still have our task items
+    expect(menu.root.items[IDX_TASKS].items.length).to.equal(3);
+    await assertScreenshot('menu/menu-refresh-2', getClip(menu));
   });
 });