fix: added edge case tests with multiSelect and disabled options

AlaskaAirlines · Dec 30, 2024 · 0c01c8b · 0c01c8b
1 parent 16dae12
commit 0c01c8b
Showing 1 changed file with 69 additions and 3 deletions.
diff --git a/components/menu/test/auro-menu.test.js b/components/menu/test/auro-menu.test.js
@@ -290,13 +290,79 @@ describe('multiSelect', () => {
     expect(menuEl.value).to.include('option2');
   });
 
+  it('should not allow selection of disabled options in multiSelect mode', async () => {
+    const el = await multiSelectFixture();
+    const menuEl = el.querySelector('auro-menu');
+    const options = getOptions(menuEl);
+
+    // Select disabled option
+    menuEl.index = 3;
+    menuEl.makeSelection();
+    await elementUpdated(menuEl);
+
+    // Verify disabled option remains unselected
+    expect(options[3].hasAttribute('selected')).to.be.false;
+    expect(options[3].getAttribute('aria-selected')).to.equal('false');
+
+    // Select valid options
+    menuEl.index = 0;
+    menuEl.makeSelection();
+    menuEl.index = 1;
+    menuEl.makeSelection();
+    await elementUpdated(menuEl);
+
+    // Select disabled option again
+    menuEl.index = 3;
+    menuEl.makeSelection();
+    await elementUpdated(menuEl);
+
+    // Verify previous selections remain intact
+    expect(options[0].hasAttribute('selected')).to.be.true;
+    expect(options[1].hasAttribute('selected')).to.be.true;
+    expect(options[3].hasAttribute('selected')).to.be.false;
+
+    // Verify excluded options are still excluded
+    expect(menuEl.value).to.include('option1');
+    expect(menuEl.value).to.include('option2');
+    expect(menuEl.value).to.not.include('option4');
+  });
+
+  it('should maintain disabled state when toggling other options in multiSelect mode', async () => {
+    const el = await multiSelectFixture();
+    const menuEl = el.querySelector('auro-menu');
+    const options = getOptions(menuEl);
+
+    // Select and deselect other options multiple times
+    menuEl.index = 0;
+    menuEl.makeSelection();
+    await elementUpdated(menuEl);
+
+    menuEl.index = 1;
+    menuEl.makeSelection();
+    await elementUpdated(menuEl);
+
+    menuEl.index = 0;
+    // Deselect first option
+    menuEl.makeSelection();
+    await elementUpdated(menuEl);
+
+    // Verify disabled option remained unselected
+    expect(options[3].hasAttribute('selected')).to.be.false;
+    expect(options[3].getAttribute('aria-selected')).to.equal('false');
+    expect(options[3].hasAttribute('disabled')).to.be.true;
+
+    // Verify other options can still be toggled
+    expect(options[0].hasAttribute('selected')).to.be.false;
+    expect(options[1].hasAttribute('selected')).to.be.true;
+  });
+
   describe('multiSelect programmatic updates', () => {
     it('should update selections when making multiple programmatic selections', async () => {
       const el = await multiSelectFixture();
       const menuEl = el.querySelector('auro-menu');
       const options = getOptions(menuEl);
 
-      // Make programmatic selections using the component's methods
+      // Make programmatic selections
       menuEl.index = 0;
       menuEl.makeSelection();
       await elementUpdated(menuEl);
@@ -356,15 +422,15 @@ describe('multiSelect', () => {
       const options = getOptions(menuEl);
 
       // Select disabled option
-      menuEl.index = 3; // Index of disabled option
+      menuEl.index = 3;
       menuEl.makeSelection();
       await elementUpdated(menuEl);
 
       // Verify disabled option remains unselected
       expect(options[3].hasAttribute('selected')).to.be.false;
       expect(options[3].getAttribute('aria-selected')).to.equal('false');
 
-      // Verify we can still select enabled options
+      // Verify selectable options remain selectable
       menuEl.index = 0;
       menuEl.makeSelection();
       await elementUpdated(menuEl);