test: Add getPalette() tets

cypress/integration/api_spec.js

@@ -50,3 +50,24 @@ describe('getColor()', function() {
     //     });
     // })
 })
+
+function testPaletteCount(num) {
+    it(`returns ${num} color when colorCount set to ${num}`, function() {
+        cy.get(`[data-image="rainbow-horizontal.png"] .palette[data-count="${num}"] .output-palette`).should(($el) => {
+            const count = rgbCount($el.text())
+            expect(count).to.equal(num);
+        });
+    })
+}
+
+describe('getPalette()', function() {
+    beforeEach(function() {
+        cy.visit('http://localhost:8080');
+    })
+
+    // FULL TEST LIST = [1, 2, 3, 5, 7, 10, 20];
+
+    // Non-breaking tests
+    let testCounts = [5, 7];
+    testCounts.forEach((count) => testPaletteCount(count))
+})

index.html

@@ -22,7 +22,7 @@
 
     <script id="color-tpl" type="text/x-mustache">
         <div class="color">
-            <h3>Dominant Color</h3>
+            <h3>getColor(img)</h3>
             <div class="swatches">
                 <div class="swatch" style="background-color: rgb({{color.0}}, {{color.1}}, {{color.2}})"></div>
             </div>
@@ -34,8 +34,8 @@
     </script>
 
     <script id="palette-tpl" type="text/x-mustache">
-        <div class="palette">
+        <div class="palette" data-count="{{count}}">
-            <h3>Palette {{ count }}</h3>
+            <h3>getPalette(img, {{count}})</h3>
             <div class="swatches">
                 {{#palette}}
                     <div class="swatch" style="background-color: rgb({{0}}, {{1}}, {{2}})"></div>