refactor(listOfOptions): remove unnecessary slot name convention #52

Changes to be committed: modified: demo/demo.md modified: src/auro-menu.js modified: test/auro-menu.test.js
AlaskaAirlines · Jan 15, 2022 · 6862703 · 6862703
1 parent aec6fd5
commit 6862703
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 151 deletions.
diff --git a/demo/demo.md b/demo/demo.md
@@ -6,32 +6,32 @@ The `auro-menu` element should be used in situations where users will select one
 `auro-menu` will be used with `auro-dropdown`.
 
 
-### Submenu Example
+### index selected option 2;
 
 <div class="exampleWrapper">
-  <auro-menu id="auroMenu0" indexSelectedOption="5">
-    <auro-menu-option slot="listOfOptions" data-value="option 1">Option 1</auro-menu-option>
-    <auro-sub-menu slot="listOfOptions">
-      <auro-menu-option data-value="option 2">Option 2</auro-menu-option>
-      <auro-menu-option data-value="option 3">Option 3</auro-menu-option>
-    </auro-sub-menu>
-    <auro-menu-option slot="listOfOptions" data-value="option 4">Option 4</auro-menu-option>
-    <auro-menu-option slot="listOfOptions" data-value="option 5">Option 5</auro-menu-option>
-    <auro-menu-option slot="listOfOptions" data-value="option 6">Option 6</auro-menu-option>
-    <auro-menu-option slot="listOfOptions" data-value="option 7">Option 7</auro-menu-option>
-    <auro-menu-option slot="listOfOptions" data-value="option 8">Option 8</auro-menu-option>
+  <auro-menu id="auroMenu2" indexSelectedOption="2" checkmark>
+    <auro-menu-option data-value="Stops">Stops</auro-menu-option>
+    <auro-menu-option disabled data-value="Price">(disabled) Price</auro-menu-option>
+    <auro-menu-option data-value="Duration">Duration</auro-menu-option>
+    <auro-menu-option data-value="Departure">Departure</auro-menu-option>
+    <auro-menu-option data-value="Arrival">Arrival</auro-menu-option>
   </auro-menu>
 </div>
 
-### index selected option 2;
+### Submenu Example
 
 <div class="exampleWrapper">
-  <auro-menu id="auroMenu2" indexSelectedOption="2" checkmark>
-    <auro-menu-option slot="listOfOptions" data-value="Stops">Stops</auro-menu-option>
-    <auro-menu-option disabled slot="listOfOptions" data-value="Price">(disabled) Price</auro-menu-option>
-    <auro-menu-option slot="listOfOptions" data-value="Duration">Duration</auro-menu-option>
-    <auro-menu-option slot="listOfOptions" data-value="Departure">Departure</auro-menu-option>
-    <auro-menu-option slot="listOfOptions" data-value="Arrival">Arrival</auro-menu-option>
+  <auro-menu id="auroMenu0" indexSelectedOption="5">
+    <auro-menu-option data-value="option 1">Option 1</auro-menu-option>
+    <auro-sub-menu>
+      <auro-menu-option data-value="option 2">Option 2</auro-menu-option>
+      <auro-menu-option data-value="option 3">Option 3</auro-menu-option>
+    </auro-sub-menu>
+    <auro-menu-option data-value="option 4">Option 4</auro-menu-option>
+    <auro-menu-option data-value="option 5">Option 5</auro-menu-option>
+    <auro-menu-option data-value="option 6">Option 6</auro-menu-option>
+    <auro-menu-option data-value="option 7">Option 7</auro-menu-option>
+    <auro-menu-option data-value="option 8">Option 8</auro-menu-option>
   </auro-menu>
 </div>
 

diff --git a/src/auro-menu.js b/src/auro-menu.js
@@ -182,7 +182,7 @@ class AuroMenu extends LitElement {
   render() {
     return html`
       <ul>
-        <slot @slotchange=${this.handleSlotChange} name="listOfOptions"></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
       </ul>
     `;
   }

diff --git a/test/auro-menu.test.js b/test/auro-menu.test.js
@@ -17,27 +17,11 @@ describe('auro-menu', () => {
   });
 
   it('Preset value is selected', async () => {
-    const el = await generateFixtureWithParentIndex();
-    const index = 0;
+    const el = await defaultFixture();
+    const index = 1;
     const menuEl = el.querySelector('auro-menu');
-    let options = menuEl.shadowRoot.querySelector('slot[name=listOfOptions]').assignedNodes();
-    options[index].click();
-
-    for (let i = 0; i < options.length; i++) {
-      if (index === i) {
-        expect(options[i].hasAttribute('selected')).to.equal(true);
-      } else {
-        expect(options[i].hasAttribute('selected')).to.equal(false);
-      }
-    }
-  });
-
-  // selecting an option marks only that option as selected
+    let options = menuEl.shadowRoot.querySelector('slot').assignedNodes();
 
-  it('clicking on an option marks only that option as selected', async () => {
-    const el = await generateDefaultFixture();
-    const index = 0;
-    let options = el.shadowRoot.querySelector('slot[name=listOfOptions]').assignedNodes();
     options[index].click();
 
     for (let i = 0; i < options.length; i++) {
@@ -49,10 +33,13 @@ describe('auro-menu', () => {
     }
   });
 
-  it('pressing the Enter button when an option has focus marks only that option as selected', async () => {
-    const el = await generateDefaultFixture();
+
+  it('Enter keyboardEvent marks option as selected', async () => {
+    const el = await defaultFixture();
     const index = 1;
-    let options = el.shadowRoot.querySelector('slot[name=listOfOptions]').assignedNodes();
+    const menuEl = el.querySelector('auro-menu');
+    let options = menuEl.shadowRoot.querySelector('slot').assignedNodes();
+
     options[index].dispatchEvent(new KeyboardEvent('keydown', {
       bubbles: true,
       composed: true,
@@ -68,55 +55,18 @@ describe('auro-menu', () => {
     }
   });
 
-  it('pressing the Space button when an option has focus marks only that option as selected', async () => {
-    const el = await generateDefaultFixture();
+  it('Spacebar keyboardEvent marks option as selected', async () => {
+    const el = await defaultFixture();
     const index = 2;
-    let options = el.shadowRoot.querySelector('slot[name=listOfOptions]').assignedNodes();
-    options[index].dispatchEvent(new KeyboardEvent('keydown', {
+    const menuEl = el.querySelector('auro-menu');
+    let options = menuEl.shadowRoot.querySelector('slot').assignedNodes();
+
+    options[2].dispatchEvent(new KeyboardEvent('keydown', {
       bubbles: true,
       composed: true,
       'key': ' '
-    }));
-
-    for (let i = 0; i < options.length; i++) {
-      if (index === i) {
-        expect(options[i].hasAttribute('selected')).to.equal(true);
-      } else {
-        expect(options[i].hasAttribute('selected')).to.equal(false);
-      }
-    }
-  });
-
-  it('clicking through different options results in only 1 option being selected at a time', async () => {
-    const el = await generateDefaultFixture();
-    let options = el.shadowRoot.querySelector('slot[name=listOfOptions]').assignedNodes();
-    let index = 0;
-
-    options[index].click();
-
-    for (let i = 0; i < options.length; i++) {
-      if (index === i) {
-        expect(options[i].hasAttribute('selected')).to.equal(true);
-      } else {
-        expect(options[i].hasAttribute('selected')).to.equal(false);
-      }
     }
-
-    index = 5;
-
-    options[index].click();
-
-    for (let i = 0; i < options.length; i++) {
-      if (index === i) {
-        expect(options[i].hasAttribute('selected')).to.equal(true);
-      } else {
-        expect(options[i].hasAttribute('selected')).to.equal(false);
-      }
-    }
-
-    index = 3;
-
-    options[index].click();
+    ));
 
     for (let i = 0; i < options.length; i++) {
       if (index === i) {
@@ -126,76 +76,14 @@ describe('auro-menu', () => {
       }
     }
   });
-
-  // selecting an option dispatches an event with information about the index of the option
-
-  it('clicking on an option dispatches an event signifying the option was selected', async () => {
-    const el = await generateDefaultFixture();
-    let options = el.shadowRoot.querySelector('slot[name=listOfOptions]').assignedNodes();
-    options[0].click();
-
-    expect(currentlySelectedIndex).to.equal(0);
-  });
-
-  it('pressing the Enter button when an option has focus dispatches an event signifying the option was selected', async () => {
-    const el = await generateDefaultFixture();
-    let options = el.shadowRoot.querySelector('slot[name=listOfOptions]').assignedNodes();
-
-    options[1].dispatchEvent(new KeyboardEvent('keydown', {
-      bubbles: true,
-      composed: true,
-      'key': 'Enter' }
-    ));
-    // await listener;
-
-    expect(currentlySelectedIndex).to.equal(1);
-  });
-
-  it('pressing the Space button when an option has focus dispatches an event signifying the option was selected', async () => {
-    const el = await generateDefaultFixture();
-    let options = el.shadowRoot.querySelector('slot[name=listOfOptions]').assignedNodes();
-    options[2].dispatchEvent(new KeyboardEvent('keydown', {
-      bubbles: true,
-      composed: true,
-      'key': ' '
-    }
-    ));
-
-    expect(currentlySelectedIndex).to.equal(2);
-  });
-
 });
 
 
 // Template fixture used in all the tests
-async function generateDefaultFixture() {
-  return await fixture(html`
-      <auro-menu indexselectedoption="0">
-        <auro-menu-option slot="listOfOptions" data-value="the value for option 1">option 1</auro-menu-option>
-        <auro-menu-option slot="listOfOptions" data-value="the value for option 2">option 2</auro-menu-option>
-        <auro-menu-option slot="listOfOptions" data-value="the value for option 3">option 3</auro-menu-option>
-        <auro-menu-option slot="listOfOptions" data-value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menu-option>
-        <auro-menu-option slot="listOfOptions" data-value="departures">Departures</auro-menu-option>
-        <auro-menu-option slot="listOfOptions" data-value="arrivals">Arrivals</auro-menu-option>
-        <auro-sub-menu slot="listOfOptions">
-          <auro-menu-option data-value="the value for option 2">Everett, WA (PAE-Paine Field)</auro-menu-option>
-          <auro-menu-option data-value="the value for option 3">Seattle, WA (SEA-Seattle/Tacoma Intl.)</auro-menu-option>
-        </auro-sub-menu>
-      </auro-menu>
-  `);
-}
-
-async function generateFixtureWithParentIndex() {
+async function defaultFixture() {
   return await fixture(html`
-      <div indexSelectedOption="0">
-        <auro-menu>
-          <auro-menu-option slot="listOfOptions" data-value="the value for option 1">option 1</auro-menu-option>
-          <auro-menu-option slot="listOfOptions" data-value="the value for option 2">option 2</auro-menu-option>
-          <auro-menu-option slot="listOfOptions" data-value="the value for option 3">option 3</auro-menu-option>
-          <auro-menu-option slot="listOfOptions" data-value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menu-option>
-          <auro-menu-option slot="listOfOptions" data-value="departures">Departures</auro-menu-option>
-          <auro-menu-option slot="listOfOptions" data-value="arrivals">Arrivals</auro-menu-option>
-        </auro-menu>
+      <div>
+        <auro-menu><auro-menu-option data-value="option 1">option 1</auro-menu-option><auro-menu-option data-value="option 2">option 2</auro-menu-option><auro-menu-option data-value="option 3">option 3</auro-menu-option><auro-menu-option data-value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menu-option><auro-menu-option data-value="departures">Departures</auro-menu-option><auro-menu-option data-value="arrivals">Arrivals</auro-menu-option><auro-sub-menu><auro-menu-option data-value="option 4">option 4</auro-menu-option><auro-menu-option data-value="option 5">option 5</auro-menu-option></auro-sub-menu></auro-menu>
       </div>
   `);
 }