Release 2.21.6: sort editor regions by name

test/templates.test.js

@@ -381,6 +381,71 @@ test('template designer generates default region names per type', () => {
   assert.ok(script.includes('Math.max(count, suffix)'));
 });
 
+test('region name sorting is case-insensitive, stable, and used by the template editor', () => {
+  const context = vm.createContext({ window: {} });
+  const utilsScript = fs.readFileSync(require.resolve('../src/web/public/js/templates/template-designer-utils.js'), 'utf8');
+  vm.runInContext(utilsScript, context);
+  const items = [
+    { name: 'Zulu' },
+    { name: 'alpha' },
+    { name: 'Alpha' },
+    { name: 'bravo' }
+  ];
+  const sorted = Array.from(context.window.templateDesignerUtils.sortByName(items, item => item.name));
+
+  assert.deepEqual(sorted, [items[1], items[2], items[3], items[0]]);
+  const designerSource = fs.readFileSync(require.resolve('../src/web/public/js/templates/template-designer.js'), 'utf8');
+  assert.match(designerSource, /utils\.sortByName\(cards, getRegionName\)/);
+});
+
+test('template region selector sorts options and preserves the selected card index', () => {
+  const designerSource = fs.readFileSync(require.resolve('../src/web/public/js/templates/template-designer.js'), 'utf8');
+  const match = designerSource.match(/  function renderRegionSidebar\(\) \{[^]*?\n  \}/);
+  assert.ok(match);
+
+  const cards = [
+    { name: 'Zulu', hidden: false },
+    { name: 'alpha', hidden: false },
+    { name: 'Bravo', hidden: false }
+  ];
+  const regionSelect = {
+    options: [],
+    disabled: false,
+    value: '',
+    set innerHTML(_value) { this.options = []; },
+    appendChild(option) { this.options.push(option); }
+  };
+  const regionList = { innerHTML: '' };
+  const context = vm.createContext({
+    cards,
+    regionSelect,
+    regionList,
+    selectedIndex: -1,
+    utils: { sortByName(items, getName) { return Array.from(items).sort((left, right) => getName(left).localeCompare(getName(right), undefined, { sensitivity: 'base' })); } },
+    getCards: () => cards,
+    getRegionName: card => card.name,
+    document: { createElement: () => ({}) },
+    updateCanvasSizeLock() {},
+    validateRegionNames() {},
+    updatePreviewCardVisibility() {}
+  });
+
+  vm.runInContext(match[0], context);
+  context.renderRegionSidebar();
+  assert.deepEqual(regionSelect.options.map(option => [option.textContent, option.value]), [
+    ['alpha', '1'],
+    ['Bravo', '2'],
+    ['Zulu', '0']
+  ]);
+  assert.equal(regionSelect.value, '1');
+  assert.deepEqual(cards.map(card => card.hidden), [true, false, true]);
+
+  context.selectedIndex = 0;
+  context.renderRegionSidebar();
+  assert.equal(regionSelect.value, '0');
+  assert.deepEqual(cards.map(card => card.hidden), [false, true, true]);
+});
+
 test('template designer warns when invalid region names block save', () => {
   const script = fs.readFileSync(require.resolve('../src/web/public/js/templates/template-designer.js'), 'utf8');