Assign selected facets as an empty array if null (#15)

* Assign selected facets as an empty array if null * Update depdendencies and fix snapshot tests Co-authored-by: amunozpomer <amunoz@ebi.ac.uk>
ebi-gene-expression-group · Sep 10, 2020 · f93a6ad · f93a6ad
1 parent 69ddeeb
commit f93a6ad
Show file tree

Hide file tree

Showing 18 changed files with 5,962 additions and 3,159 deletions.
diff --git a/packages/scxa-faceted-search-results/.eslintrc.json b/packages/scxa-faceted-search-results/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "eslint-config-gene-expression"
-}
+  "extends": "@ebi-gene-expression-group"
+}
diff --git a/packages/scxa-faceted-search-results/__test__/FacetedSearchContainer.test.js b/packages/scxa-faceted-search-results/__test__/FacetedSearchContainer.test.js
@@ -4,7 +4,7 @@ import Enzyme from 'enzyme'
 import { mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
-import {episodes, ExperimentTableHeader, ExperimentTableCard} from './TestUtils'
+import { episodes, ExperimentTableHeader, ExperimentTableCard } from './TestUtils'
 
 import FacetedSearchContainer from '../src/FacetedSearchContainer'
 import FilterSidebar from '../src/FilterSidebar'
@@ -66,7 +66,23 @@ describe(`FacetedSearchContainer`, () => {
   })
 
   test(`matches snapshot`, () => {
-    const tree = renderer.create(<FacetedSearchContainer {...props} />).toJSON()
+    // The latest version of React Tooltip at the time of writing creates dynamically UID-like generated class names
+    // that break snapshot tests, so we don’t want descriptions
+    const withoutTooltips =
+      episodes.map(episode => (
+        {
+          element: episode.element,
+          facets: episode.facets.map(facet => (
+            {
+              group: facet.group,
+              value: facet.value,
+              label: facet.label
+            }
+          ))
+        }
+      ))
+
+    const tree = renderer.create(<FacetedSearchContainer {...props} results={withoutTooltips} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
 })
diff --git a/packages/scxa-faceted-search-results/__test__/TestUtils.js b/packages/scxa-faceted-search-results/__test__/TestUtils.js
@@ -241,4 +241,4 @@ const episodes = [
   }
 ]
 
-export {getRandomInt, vindicators, episodes, ExperimentTableCard, ExperimentTableHeader}
+export { getRandomInt, vindicators, episodes, ExperimentTableCard, ExperimentTableHeader }
diff --git a/...es/scxa-faceted-search-results/__test__/__snapshots__/FacetedSearchContainer.test.js.snap b/...es/scxa-faceted-search-results/__test__/__snapshots__/FacetedSearchContainer.test.js.snap
@@ -61,40 +61,26 @@ exports[`FacetedSearchContainer matches snapshot 1`] = `
     >
       <h4>
         Guest character
-        <sup>
-          <span
-            className="icon icon-generic"
-            data-html={true}
-            data-icon="i"
-            data-tip="<span>Guest characters that tag along for the<br>adventures in this episodes</span>"
-            style={
-              Object {
-                "color": "lightgrey",
-                "fontSize": "smaller",
-              }
-            }
-          />
-        </sup>
       </h4>
       <div
-        className="css-1pcexqc-container"
+        className=" css-2b097c-container"
         onKeyDown={[Function]}
       >
         <div
-          className="css-12emboz"
+          className=" css-15r8ym2-Control"
           onMouseDown={[Function]}
           onTouchEnd={[Function]}
         >
           <div
-            className="css-1hwfws3"
+            className=" css-g1d714-ValueContainer"
           >
             <div
-              className="css-151xaom-placeholder"
+              className=" css-1wa3eu0-placeholder"
             >
               Select...
             </div>
             <div
-              className="css-1g6gooi"
+              className="css-b8ldur-Input"
             >
               <div
                 className=""
@@ -152,10 +138,10 @@ exports[`FacetedSearchContainer matches snapshot 1`] = `
             </div>
           </div>
           <div
-            className="css-1wy0on6"
+            className=" css-1hb7zxy-IndicatorsContainer"
           >
             <span
-              className="sc-bxivhb iCJrRm"
+              className="sc-AxhCb ifMswC"
               cx={[Function]}
             />
           </div>
@@ -167,40 +153,26 @@ exports[`FacetedSearchContainer matches snapshot 1`] = `
     >
       <h4>
         Planet
-        <sup>
-          <span
-            className="icon icon-generic"
-            data-html={true}
-            data-icon="i"
-            data-tip="<span>Planets where events in this episode take<br>place</span>"
-            style={
-              Object {
-                "color": "lightgrey",
-                "fontSize": "smaller",
-              }
-            }
-          />
-        </sup>
       </h4>
       <div
-        className="css-1pcexqc-container"
+        className=" css-2b097c-container"
         onKeyDown={[Function]}
       >
         <div
-          className="css-12emboz"
+          className=" css-15r8ym2-Control"
           onMouseDown={[Function]}
           onTouchEnd={[Function]}
         >
           <div
-            className="css-1hwfws3"
+            className=" css-g1d714-ValueContainer"
           >
             <div
-              className="css-151xaom-placeholder"
+              className=" css-1wa3eu0-placeholder"
             >
               Select...
             </div>
             <div
-              className="css-1g6gooi"
+              className="css-b8ldur-Input"
             >
               <div
                 className=""
@@ -258,10 +230,10 @@ exports[`FacetedSearchContainer matches snapshot 1`] = `
             </div>
           </div>
           <div
-            className="css-1wy0on6"
+            className=" css-1hb7zxy-IndicatorsContainer"
           >
             <span
-              className="sc-bxivhb iCJrRm"
+              className="sc-AxhCb ifMswC"
               cx={[Function]}
             />
           </div>
@@ -277,16 +249,16 @@ exports[`FacetedSearchContainer matches snapshot 1`] = `
         
       </h4>
       <div
-        className="sc-htpNat jYhomY"
+        className="sc-AxiKw ivgkfy"
       >
         <div
-          className="sc-bdVaJa edgMnc"
+          className="sc-AxjAm feCCqm"
           onClick={[Function]}
         >
           Meow
         </div>
         <div
-          className="sc-bwzfXH laSsVf"
+          className="sc-AxirZ gEVUAG"
           onClick={[Function]}
         >
           Wow wow
@@ -329,9 +301,5 @@ exports[`FacetedSearchContainer matches snapshot 1`] = `
       </div>
     </div>
   </div>
-  <div
-    className="__react_component_tooltip place-top type-dark "
-    data-id="tooltip"
-  />
 </div>
 `;
diff --git a/packages/scxa-faceted-search-results/__test__/__snapshots__/FilterList.test.js.snap b/packages/scxa-faceted-search-results/__test__/__snapshots__/FilterList.test.js.snap
@@ -6,16 +6,16 @@ exports[`FilterList matches snapshot 1`] = `
     
   </h4>
   <div
-    className="sc-htpNat jYhomY"
+    className="sc-AxiKw ivgkfy"
   >
     <div
-      className="sc-bdVaJa edgMnc"
+      className="sc-AxjAm feCCqm"
       onClick={[Function]}
     >
       Meow
     </div>
     <div
-      className="sc-bwzfXH laSsVf"
+      className="sc-AxirZ gEVUAG"
       onClick={[Function]}
     >
       Wow wow

diff --git a/packages/scxa-faceted-search-results/__test__/__snapshots__/FilterSidebar.test.js.snap b/packages/scxa-faceted-search-results/__test__/__snapshots__/FilterSidebar.test.js.snap
@@ -72,24 +72,24 @@ Array [
       </sup>
     </h4>
     <div
-      className="css-1pcexqc-container"
+      className=" css-2b097c-container"
       onKeyDown={[Function]}
     >
       <div
-        className="css-12emboz"
+        className=" css-15r8ym2-Control"
         onMouseDown={[Function]}
         onTouchEnd={[Function]}
       >
         <div
-          className="css-1hwfws3"
+          className=" css-g1d714-ValueContainer"
         >
           <div
-            className="css-151xaom-placeholder"
+            className=" css-1wa3eu0-placeholder"
           >
             Select...
           </div>
           <div
-            className="css-1g6gooi"
+            className="css-b8ldur-Input"
           >
             <div
               className=""
@@ -147,10 +147,10 @@ Array [
           </div>
         </div>
         <div
-          className="css-1wy0on6"
+          className=" css-1hb7zxy-IndicatorsContainer"
         >
           <span
-            className="sc-bxivhb iCJrRm"
+            className="sc-AxhCb ifMswC"
             cx={[Function]}
           />
         </div>
@@ -178,24 +178,24 @@ Array [
       </sup>
     </h4>
     <div
-      className="css-1pcexqc-container"
+      className=" css-2b097c-container"
       onKeyDown={[Function]}
     >
       <div
-        className="css-12emboz"
+        className=" css-15r8ym2-Control"
         onMouseDown={[Function]}
         onTouchEnd={[Function]}
       >
         <div
-          className="css-1hwfws3"
+          className=" css-g1d714-ValueContainer"
         >
           <div
-            className="css-151xaom-placeholder"
+            className=" css-1wa3eu0-placeholder"
           >
             Select...
           </div>
           <div
-            className="css-1g6gooi"
+            className="css-b8ldur-Input"
           >
             <div
               className=""
@@ -253,10 +253,10 @@ Array [
           </div>
         </div>
         <div
-          className="css-1wy0on6"
+          className=" css-1hb7zxy-IndicatorsContainer"
         >
           <span
-            className="sc-bxivhb iCJrRm"
+            className="sc-AxhCb ifMswC"
             cx={[Function]}
           />
         </div>
@@ -270,24 +270,24 @@ Array [
       Show
     </h4>
     <div
-      className="css-1pcexqc-container"
+      className=" css-2b097c-container"
       onKeyDown={[Function]}
     >
       <div
-        className="css-12emboz"
+        className=" css-15r8ym2-Control"
         onMouseDown={[Function]}
         onTouchEnd={[Function]}
       >
         <div
-          className="css-1hwfws3"
+          className=" css-g1d714-ValueContainer"
         >
           <div
-            className="css-151xaom-placeholder"
+            className=" css-1wa3eu0-placeholder"
           >
             Select...
           </div>
           <div
-            className="css-1g6gooi"
+            className="css-b8ldur-Input"
           >
             <div
               className=""
@@ -345,10 +345,10 @@ Array [
           </div>
         </div>
         <div
-          className="css-1wy0on6"
+          className=" css-1hb7zxy-IndicatorsContainer"
         >
           <span
-            className="sc-bxivhb iCJrRm"
+            className="sc-AxhCb ifMswC"
             cx={[Function]}
           />
         </div>

diff --git a/...-faceted-search-results/__test__/__snapshots__/MultiselectDropdownFacetGroup.test.js.snap b/...-faceted-search-results/__test__/__snapshots__/MultiselectDropdownFacetGroup.test.js.snap
@@ -22,24 +22,24 @@ exports[`MultiselectDropdownFacetGroup matches snapshot 1`] = `
     </sup>
   </h4>
   <div
-    className="css-1pcexqc-container"
+    className=" css-2b097c-container"
     onKeyDown={[Function]}
   >
     <div
-      className="css-12emboz"
+      className=" css-15r8ym2-Control"
       onMouseDown={[Function]}
       onTouchEnd={[Function]}
     >
       <div
-        className="css-1hwfws3"
+        className=" css-g1d714-ValueContainer"
       >
         <div
-          className="css-151xaom-placeholder"
+          className=" css-1wa3eu0-placeholder"
         >
           Select...
         </div>
         <div
-          className="css-1g6gooi"
+          className="css-b8ldur-Input"
         >
           <div
             className=""
@@ -97,10 +97,10 @@ exports[`MultiselectDropdownFacetGroup matches snapshot 1`] = `
         </div>
       </div>
       <div
-        className="css-1wy0on6"
+        className=" css-1hb7zxy-IndicatorsContainer"
       >
         <span
-          className="sc-bxivhb iCJrRm"
+          className="sc-AxhCb ifMswC"
           cx={[Function]}
         />
       </div>

diff --git a/packages/scxa-faceted-search-results/html/fetch-loader/ExperimentCard.js b/packages/scxa-faceted-search-results/html/fetch-loader/ExperimentCard.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import formatNumber from 'format-number'
-import EbiSpeciesIcon from 'react-ebi-species'
+import EbiSpeciesIcon from '@ebi-gene-expression-group/react-ebi-species'
 
 const _formatNumber = formatNumber()