increase test coverage

searchkit · Oct 13, 2017 · 902c545 · 902c545
1 parent de55cff
commit 902c545
Show file tree

Hide file tree

Showing 8 changed files with 212 additions and 71 deletions.
diff --git a/release/bundle.js b/release/bundle.js
diff --git a/src/components/display/view-switcher/ViewSwitcherHits.unit.tsx b/src/components/display/view-switcher/ViewSwitcherHits.unit.tsx
@@ -112,6 +112,19 @@ describe("View Switcher Hits component", () => {
       )
 
       expect(this.wrapper).toMatchSnapshot()
+      fastClick(this.wrapper.find("div[data-key='list']"))
+      expect(this.wrapper.find("div[data-key='list']").hasClass("is-active")).toBe(true)      
+      expect(this.wrapper).toMatchSnapshot()
+
+    })
+
+    it("renders null when no accessor available", ()=> {
+      this.wrapper = mount(
+        <div> 
+          <ViewSwitcherToggle searchkit={this.searchkit} translations={{ "Grid": "My Grid" }} />
+        </div>
+      )      
+      expect(this.wrapper).toMatchSnapshot()
     })
 
 

diff --git a/src/components/display/view-switcher/ViewSwitcherToggle.tsx b/src/components/display/view-switcher/ViewSwitcherToggle.tsx
@@ -45,9 +45,8 @@ export class ViewSwitcherToggle extends SearchkitComponent<ViewSwitcherProps, an
 				disabled:!this.hasHits(),
 				items:options,
 				selectedItems:[selectedOption],
-				toggleItem:this.setView.bind(this),
+				toggleItem:this.setView.bind(this),	
 				setItems: ([item]) => this.setView(item),
-				urlBuilder: (item) => this.getViewOptionsSwitcherAccessor().urlWithState(item.key),
 				translate:this.translate
 			})
     }

diff --git a/src/components/display/view-switcher/__snapshots__/ViewSwitcherHits.unit.tsx.snap b/src/components/display/view-switcher/__snapshots__/ViewSwitcherHits.unit.tsx.snap
@@ -78,6 +78,27 @@ exports[`View Switcher Hits component renders correctly Works with ViewSwitcherC
 </div>
 `;
 
+exports[`View Switcher Hits component renders correctly Works with ViewSwitcherConfig 2`] = `
+<div>
+  <!-- react-empty: 2 -->
+  <div data-qa="hits" class="sk-hits-list">
+    <div class="list-item">1</div>
+    <div class="list-item">2</div>
+  </div>
+  <div data-qa="options" class="sk-toggle">
+    <div class="sk-toggle-option sk-toggle__item" data-qa="option" data-key="grid">
+      <div data-qa="label" class="sk-toggle-option__text">My Grid</div>
+    </div>
+    <div class="sk-toggle-option sk-toggle__item is-active" data-qa="option" data-key="list">
+      <div data-qa="label" class="sk-toggle-option__text">List</div>
+    </div>
+    <div class="sk-toggle-option sk-toggle__item" data-qa="option" data-key="custom-list">
+      <div data-qa="label" class="sk-toggle-option__text">Custom List</div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`View Switcher Hits component renders correctly custom mod, className, listComponent 1`] = `
 <div>
   <div data-qa="hits" class="sk-hits-grid">
@@ -87,3 +108,9 @@ exports[`View Switcher Hits component renders correctly custom mod, className, l
   <div class="my-view-switcher customClass"><select><option value="grid">My Grid</option><option value="list">List</option><option value="custom-list">Custom List</option></select></div>
 </div>
 `;
+
+exports[`View Switcher Hits component renders correctly renders null when no accessor available 1`] = `
+<div>
+  <!-- react-empty: 2 -->
+</div>
+`;
diff --git a/src/components/search/filters/range-filter/test/RangeFilterSpec.tsx b/src/components/search/filters/range-filter/test/RangeFilterSpec.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import {mount} from "enzyme";
 import {RangeFilter} from "../src/RangeFilter";
+import { RangeSliderHistogram, RangeInput } from "../../../../../components"
 import {SearchkitManager, RangeAccessor} from "../../../../../core";
 import {
   fastClick, hasClass, printPrettyHtml
@@ -16,7 +17,13 @@ describe("Range Filter tests", () => {
     this.searchkit = SearchkitManager.mock()
     spyOn(this.searchkit, "performSearch")
     this.rangeFormatter = (count) => count + " score"
-    this.createWrapper = (withHistogram, interval=undefined) => {
+    this.createWrapper = ({
+      withHistogram=true, 
+      interval=undefined, 
+      rangeComponent=RangeSliderHistogram
+    }) => {
+
+
       this.wrapper = mount(
         <RangeFilter
           id="m"
@@ -28,31 +35,36 @@ describe("Range Filter tests", () => {
           interval={interval}
           translations={{"range.divider":" to "}}
           rangeFormatter={this.rangeFormatter}
+          rangeComponent={rangeComponent}
           showHistogram={withHistogram}/>
       );
 
+
       this.searchkit.setResults({
         "aggregations": {
           "m1": {
             "m": {
               "buckets": [
-                {key:"10", doc_count:1},
-                {key:"20", doc_count:3},
-                {key:"30", doc_count:1},
-                {key:"40", doc_count:1},
-                {key:"50", doc_count:1},
-                {key:"60", doc_count:5},
-                {key:"70", doc_count:1},
-                {key:"80", doc_count:1},
-                {key:"90", doc_count:1},
-                {key:"100", doc_count:1}
-
-              ]
+                { key: "10", doc_count: 1 },
+                { key: "20", doc_count: 3 },
+                { key: "30", doc_count: 1 },
+                { key: "40", doc_count: 1 },
+                { key: "50", doc_count: 1 },
+                { key: "60", doc_count: 5 },
+                { key: "70", doc_count: 1 },
+                { key: "80", doc_count: 1 },
+                { key: "90", doc_count: 1 },
+                { key: "100", doc_count: 1 }
+              ],
+              "value":10
             }
           }
         }
       })
 
+
+
+
       this.wrapper.update()
       this.accessor = this.searchkit.getAccessorByType(RangeAccessor)
     }
@@ -62,7 +74,7 @@ describe("Range Filter tests", () => {
 
 
   it("accessor has correct config", () => {
-    this.createWrapper(true)
+    this.createWrapper({withHistogram:true})
     expect(this.accessor.options).toEqual({
       id:"m",
       min:0,
@@ -81,15 +93,15 @@ describe("Range Filter tests", () => {
   })
 
   it('renders correctly', () => {
-    this.createWrapper(true)
-
+    this.createWrapper({withHistogram:true})    
     expect(this.wrapper).toMatchSnapshot()
   })
 
   it("renders without histogram", () => {
-    this.createWrapper(false)
+    this.createWrapper({withHistogram:false})
     expect(this.wrapper.find(".sk-range-histogram").length).toBe(0)
     expect(this.wrapper.find(".sk-range-histogram__bar").length).toBe(0)
+    expect(this.wrapper).toMatchSnapshot()
   })
 
   it("handle slider events correctly", ()=> {
@@ -107,25 +119,47 @@ describe("Range Filter tests", () => {
     expect(this.searchkit.performSearch).toHaveBeenCalled()
     let query = this.searchkit.buildQuery()
     expect(query.getSelectedFilters()[0].value).toEqual('40 score to 60 score')
+    expect(this.wrapper).toMatchSnapshot()
+
     // min/max should clear
     this.wrapper.node.sliderUpdateAndSearch({min:0,max:100})
     expect(this.accessor.state.getValue()).toEqual({})
+    expect(this.wrapper).toMatchSnapshot()
+
   })
 
   it("has default interval", ()=> {
-    this.createWrapper(true)
+    this.createWrapper({withHistogram:true})
     expect(this.accessor.getInterval()).toEqual(5)
   })
 
   it("handles interval correctly", ()=> {
-    this.createWrapper(true, 2)
+    this.createWrapper({ withHistogram: true, interval:2 })
     expect(this.accessor.getInterval()).toEqual(2)
   })
 
   it("renders limited range correctly", ()=> {
-    this.createWrapper(true)
+    this.createWrapper({ withHistogram: true })
+
     this.wrapper.node.sliderUpdate({min:30,max:70})
     expect(this.wrapper).toMatchSnapshot()
   })
 
+  it("renders with range input component", ()=> {
+    this.createWrapper({ withHistogram: false, rangeComponent:RangeInput })
+    expect(this.wrapper).toMatchSnapshot()       
+
+    this.wrapper.find("input[placeholder='min']")
+      .simulate('change', {target:{value:20}})    
+    this.wrapper.find("input[placeholder='max']")
+      .simulate('change', { target: { value: 80 } })    
+    this.wrapper.find("form").simulate('submit')
+    let query = this.searchkit.buildQuery()
+    expect(query.getSelectedFilters()[0].value)
+      .toEqual("20 score to 80 score")
+
+
+
+  })
+
 });
diff --git a/src/components/search/filters/range-filter/test/__snapshots__/RangeFilterSpec.tsx.snap b/src/components/search/filters/range-filter/test/__snapshots__/RangeFilterSpec.tsx.snap
@@ -1,5 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Range Filter tests handle slider events correctly 1`] = `
+<div class="sk-panel filter--m">
+  <div class="sk-panel__header">metascore</div>
+  <div class="sk-panel__content">
+    <div>
+      <div class="sk-range-histogram">
+        <div class="sk-range-histogram__bar is-out-of-bounds" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar is-out-of-bounds" style="height: 60%;"></div>
+        <div class="sk-range-histogram__bar is-out-of-bounds" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar" style="height: 100%;"></div>
+        <div class="sk-range-histogram__bar is-out-of-bounds" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar is-out-of-bounds" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar is-out-of-bounds" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar is-out-of-bounds" style="height: 20%;"></div>
+      </div>
+      <div class="sk-range-slider">
+        <div class="rc-slider rc-slider-with-marks">
+          <div class="rc-slider-rail"></div>
+          <div class="rc-slider-track rc-slider-track-1" style="visibility: visible; left: 40%; width: 20%;"></div>
+          <div class="rc-slider-step"><span class="rc-slider-dot" style="left: 0%;"></span><span class="rc-slider-dot" style="left: 100%;"></span></div>
+          <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" aria-disabled="false" class="rc-slider-handle rc-slider-handle-1"
+            style="left: 40%;"></div>
+          <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" aria-disabled="false" class="rc-slider-handle rc-slider-handle-2" style="left: 60%;"></div>
+          <div class="rc-slider-mark"><span class="rc-slider-mark-text" style="width: 90%; margin-left: -45%; left: 0%;">0 score</span><span class="rc-slider-mark-text" style="width: 90%; margin-left: -45%; left: 100%;">100 score</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Range Filter tests handle slider events correctly 2`] = `
+<div class="sk-panel filter--m">
+  <div class="sk-panel__header">metascore</div>
+  <div class="sk-panel__content">
+    <div>
+      <div class="sk-range-histogram">
+        <div class="sk-range-histogram__bar" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar" style="height: 60%;"></div>
+        <div class="sk-range-histogram__bar" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar" style="height: 100%;"></div>
+        <div class="sk-range-histogram__bar" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar" style="height: 20%;"></div>
+        <div class="sk-range-histogram__bar" style="height: 20%;"></div>
+      </div>
+      <div class="sk-range-slider">
+        <div class="rc-slider rc-slider-with-marks">
+          <div class="rc-slider-rail"></div>
+          <div class="rc-slider-track rc-slider-track-1" style="visibility: visible; left: 0%; width: 100%;"></div>
+          <div class="rc-slider-step"><span class="rc-slider-dot rc-slider-dot-active" style="left: 0%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="left: 100%;"></span></div>
+          <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
+            aria-disabled="false" class="rc-slider-handle rc-slider-handle-1" style="left: 0%;"></div>
+          <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-disabled="false" class="rc-slider-handle rc-slider-handle-2" style="left: 100%;"></div>
+          <div class="rc-slider-mark"><span class="rc-slider-mark-text rc-slider-mark-text-active" style="width: 90%; margin-left: -45%; left: 0%;">0 score</span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="width: 90%; margin-left: -45%; left: 100%;">100 score</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Range Filter tests renders correctly 1`] = `
 <div class="sk-panel filter--m">
   <div class="sk-panel__header">metascore</div>
@@ -65,3 +131,32 @@ exports[`Range Filter tests renders limited range correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`Range Filter tests renders with range input component 1`] = `
+<div class="sk-panel filter--m">
+  <div class="sk-panel__header">metascore</div>
+  <div class="sk-panel__content">
+    <form class="sk-range-input"><input type="number" class="sk-range-input__input" value="0" placeholder="min">
+      <div class="sk-range-input__to-label">-</div><input type="number" class="sk-range-input__input" value="100" placeholder="max"><button type="submit" class="sk-range-input__submit">Go</button></form>
+  </div>
+</div>
+`;
+
+exports[`Range Filter tests renders without histogram 1`] = `
+<div class="sk-panel filter--m">
+  <div class="sk-panel__header">metascore</div>
+  <div class="sk-panel__content">
+    <div class="sk-range-slider">
+      <div class="rc-slider rc-slider-with-marks">
+        <div class="rc-slider-rail"></div>
+        <div class="rc-slider-track rc-slider-track-1" style="visibility: visible; left: 0%; width: 100%;"></div>
+        <div class="rc-slider-step"><span class="rc-slider-dot rc-slider-dot-active" style="left: 0%;"></span><span class="rc-slider-dot rc-slider-dot-active" style="left: 100%;"></span></div>
+        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
+          aria-disabled="false" class="rc-slider-handle rc-slider-handle-1" style="left: 0%;"></div>
+        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-disabled="false" class="rc-slider-handle rc-slider-handle-2" style="left: 100%;"></div>
+        <div class="rc-slider-mark"><span class="rc-slider-mark-text rc-slider-mark-text-active" style="width: 90%; margin-left: -45%; left: 0%;">0 score</span><span class="rc-slider-mark-text rc-slider-mark-text-active" style="width: 90%; margin-left: -45%; left: 100%;">100 score</span></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/search/filters/tag-filter/TagFilter.unit.tsx b/src/components/search/filters/tag-filter/TagFilter.unit.tsx
@@ -94,4 +94,22 @@ describe("TagFilter tests", () => {
     fastClick(option2)
     expect(this.accessor.state.getValue()).toEqual([])
   })
+
+  it("test console warning for missing accessor", ()=> {
+    spyOn(console, "warn")
+    spyOn(console, "error")
+    this.createWrapper(
+      <div>
+        <TagFilter field="testId" value="test option 1" searchkit={this.searchkit} />        
+      </div>
+    )
+    expect(console.warn).toHaveBeenCalledWith(
+      'Missing accessor for', 'testId', 'in TagFilter, add TagFilterConfig if needed')
+    expect(console.error).not.toHaveBeenCalled()
+
+    fastClick(this.wrapper.find(".sk-tag-filter").at(0))
+
+    expect(console.error).toHaveBeenCalledWith(
+      'Missing accessor for', 'testId', 'in TagFilter, add TagFilterConfig if needed')
+  })
 });
diff --git a/src/components/search/pagination/src/PaginationUtils.ts b/src/components/search/pagination/src/PaginationUtils.ts
@@ -69,51 +69,6 @@ export class PaginationHelper {
 
 export const Paginator = {
 
-  full(currentPage, totalPages, translate, pageScope=3){
-    const builder = new PaginationHelper({
-      currentPage, totalPages, translate
-    })
-    builder.previous()
-
-    // First
-    if (currentPage > pageScope + 1) builder.page(1)
-    if (currentPage > pageScope + 2) builder.ellipsis()
-
-    // Pages
-    builder.range(currentPage - pageScope, currentPage-1)
-    builder.page(currentPage, {active: true})
-    builder.range(currentPage+1, currentPage + pageScope)
-
-    // Last ellipsis
-    if (currentPage < totalPages - pageScope) builder.ellipsis()
-
-    builder.next()
-    return builder.pages
-  },
-
-  relativePages(currentPage, totalPages, translate, pageScope=3){
-    const builder = new PaginationHelper({
-      currentPage, totalPages, translate
-    })
-
-    builder.range(currentPage - pageScope, currentPage-1)
-    builder.page(currentPage, {active: true})
-    builder.range(currentPage+1, currentPage + pageScope)
-
-    return builder.pages
-  },
-
-  previousNext(currentPage, totalPages, translate){
-    const builder = new PaginationHelper({
-      currentPage, totalPages, translate
-    })
-
-    builder.previous()
-    builder.next()
-
-    return builder.pages
-  },
-
   build({
       showNumbers=true,
       showPrevious=true,