added unit test

adobecom · Jan 9, 2025 · ed4152c · ed4152c
1 parent 5b7fd9f
commit ed4152c
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 0 deletions.
diff --git a/test/blocks/tabs/mocks/body.html b/test/blocks/tabs/mocks/body.html
@@ -339,3 +339,81 @@ <h2>Stacked Mobile Tabs</h2>
   </div>
 </div>
 <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere dignissim leo quis rhoncus. Suspendisse potenti. Nulla ac dolor dui. Vivamus posuere porttitor lectus, et vestibulum nisi varius cursus. Phasellus bibendum non lectus sit amet bibendum. Vivamus dapibus ultrices nisi. Praesent consequat lorem vitae gravida suscipit. Sed facilisis lacinia neque, ac tincidunt ex placerat a. Vivamus ultrices arcu sed laoreet tincidunt.</p></div>
+
+<!-- Same width tabs with colors -->
+<div id="colored" class="section">
+  <div class="tabs center same-width">
+     <div>
+        <div data-valign="middle">
+           <ol>
+              <li>Individuals</li>
+              <li>Business</li>
+              <li>Students</li>
+           </ol>
+        </div>
+     </div>
+     <div>
+        <div data-valign="middle">active tab</div>
+        <div data-valign="middle">1</div>
+     </div>
+     <div>
+        <div data-valign="middle">id</div>
+        <div data-valign="middle">colored</div>
+     </div>
+  </div>
+</div>
+
+<div class="section">
+  <p>Individuals content</p>
+  <div class="section-metadata">
+     <div>
+        <div>tab</div>
+        <div>colored, 1</div>
+     </div>
+     <div>
+        <div>background</div>
+        <div>#FAFAFA</div>
+     </div>
+     <div>
+        <div>tab-background</div>
+        <div>#FF0000</div>
+     </div>
+  </div>
+</div>
+
+<div class="section">
+  <p>Business content</p>
+  <div class="section-metadata">
+     <div>
+        <div>tab</div>
+        <div>colored, 2</div>
+     </div>
+     <div>
+        <div>background</div>
+        <div>#FAFAFA</div>
+     </div>
+     <div>
+        <div>tab-background</div>
+        <div>#FFFF00</div>
+     </div>
+  </div>
+</div>
+
+<div class="section">
+<p>Students content</p>
+<div class="section-metadata">
+  <div>
+     <div>tab</div>
+     <div>colored, 3</div>
+  </div>
+  <div>
+     <div>background</div>
+     <div>#FAFAFA</div>
+  </div>
+  <div>
+     <div>tab-background</div>
+     <div>#FFA500</div>
+  </div>
+</div>
+</div>
+
diff --git a/test/blocks/tabs/tabs.test.js b/test/blocks/tabs/tabs.test.js
@@ -106,4 +106,23 @@ describe('tabs', () => {
       expect(newPosition).to.be.above(oldPosition);
     });
   });
+
+  describe('tabs with background color', () => {
+    it('sets the background color of the active tab', async () => {
+      const coloredTabs = document.querySelector('#colored');
+      const tabs = coloredTabs.querySelectorAll('button');
+      expect(coloredTabs).to.exist;
+      expect(tabs[0].style.backgroundColor).to.equal('rgb(255, 0, 0)');
+      expect(tabs[1].style.backgroundColor).to.equal('');
+      expect(tabs[2].style.backgroundColor).to.equal('');
+      tabs[1].click();
+      expect(tabs[0].style.backgroundColor).to.equal('');
+      expect(tabs[1].style.backgroundColor).to.equal('rgb(255, 255, 0)');
+      expect(tabs[2].style.backgroundColor).to.equal('');
+      tabs[2].click();
+      expect(tabs[0].style.backgroundColor).to.equal('');
+      expect(tabs[1].style.backgroundColor).to.equal('');
+      expect(tabs[2].style.backgroundColor).to.equal('rgb(255, 165, 0)');
+    });
+  });
 });