From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Mon, 6 Jan 2020 16:30:48 +0000 (+0100)
Subject: SONAR-12717 Only first category starts expanded
X-Git-Tag: 8.2.0.32929~148
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=1a3ff367b206fefd992efc8abc86e284c233fa29;p=sonarqube.git

SONAR-12717 Only first category starts expanded
---

diff --git a/server/sonar-web/src/main/js/apps/securityHotspots/SecurityHotspotsAppRenderer.tsx b/server/sonar-web/src/main/js/apps/securityHotspots/SecurityHotspotsAppRenderer.tsx
index 4e815b87701..527dc9b8c98 100644
--- a/server/sonar-web/src/main/js/apps/securityHotspots/SecurityHotspotsAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/securityHotspots/SecurityHotspotsAppRenderer.tsx
@@ -81,54 +81,58 @@ export default function SecurityHotspotsAppRenderer(props: SecurityHotspotsAppRe
 
             <A11ySkipTarget anchor="security_hotspots_main" />
 
-            <DeferredSpinner className="huge-spacer-left big-spacer-top" loading={loading}>
-              {hotspots.length === 0 ? (
-                <div className="display-flex-column display-flex-center">
-                  <img
-                    alt={translate('hotspots.page')}
-                    className="huge-spacer-top"
-                    height={166}
-                    src={`${getBaseUrl()}/images/hotspot-large.svg`}
-                  />
-                  <h1 className="huge-spacer-top">{translate('hotspots.no_hotspots.title')}</h1>
-                  <div className="abs-width-400 text-center big-spacer-top">
-                    {translate('hotspots.no_hotspots.description')}
-                  </div>
-                  <Link
-                    className="big-spacer-top"
-                    target="_blank"
-                    to={{ pathname: '/documentation/user-guide/security-hotspots/' }}>
-                    {translate('hotspots.learn_more')}
-                  </Link>
-                </div>
-              ) : (
-                <div className="layout-page">
-                  <div className="sidebar">
-                    <HotspotList
-                      hotspots={hotspots}
-                      hotspotsTotal={hotspotsTotal}
-                      isStaticListOfHotspots={isStaticListOfHotspots}
-                      loadingMore={loadingMore}
-                      onHotspotClick={props.onHotspotClick}
-                      onLoadMore={props.onLoadMore}
-                      securityCategories={securityCategories}
-                      selectedHotspotKey={selectedHotspotKey}
-                      statusFilter={filters.status}
+            {loading ? (
+              <DeferredSpinner className="huge-spacer-left big-spacer-top" />
+            ) : (
+              <>
+                {hotspots.length === 0 ? (
+                  <div className="display-flex-column display-flex-center">
+                    <img
+                      alt={translate('hotspots.page')}
+                      className="huge-spacer-top"
+                      height={166}
+                      src={`${getBaseUrl()}/images/hotspot-large.svg`}
                     />
+                    <h1 className="huge-spacer-top">{translate('hotspots.no_hotspots.title')}</h1>
+                    <div className="abs-width-400 text-center big-spacer-top">
+                      {translate('hotspots.no_hotspots.description')}
+                    </div>
+                    <Link
+                      className="big-spacer-top"
+                      target="_blank"
+                      to={{ pathname: '/documentation/user-guide/security-hotspots/' }}>
+                      {translate('hotspots.learn_more')}
+                    </Link>
                   </div>
-                  <div className="main">
-                    {selectedHotspotKey && (
-                      <HotspotViewer
-                        branchLike={branchLike}
-                        hotspotKey={selectedHotspotKey}
-                        onUpdateHotspot={props.onUpdateHotspot}
+                ) : (
+                  <div className="layout-page">
+                    <div className="sidebar">
+                      <HotspotList
+                        hotspots={hotspots}
+                        hotspotsTotal={hotspotsTotal}
+                        isStaticListOfHotspots={isStaticListOfHotspots}
+                        loadingMore={loadingMore}
+                        onHotspotClick={props.onHotspotClick}
+                        onLoadMore={props.onLoadMore}
                         securityCategories={securityCategories}
+                        selectedHotspotKey={selectedHotspotKey}
+                        statusFilter={filters.status}
                       />
-                    )}
+                    </div>
+                    <div className="main">
+                      {selectedHotspotKey && (
+                        <HotspotViewer
+                          branchLike={branchLike}
+                          hotspotKey={selectedHotspotKey}
+                          onUpdateHotspot={props.onUpdateHotspot}
+                          securityCategories={securityCategories}
+                        />
+                      )}
+                    </div>
                   </div>
-                </div>
-              )}
-            </DeferredSpinner>
+                )}
+              </>
+            )}
           </div>
         )}
       </ScreenPositionHelper>
diff --git a/server/sonar-web/src/main/js/apps/securityHotspots/__tests__/__snapshots__/SecurityHotspotsAppRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/securityHotspots/__tests__/__snapshots__/SecurityHotspotsAppRenderer-test.tsx.snap
index c9336052d04..01dc28affce 100644
--- a/server/sonar-web/src/main/js/apps/securityHotspots/__tests__/__snapshots__/SecurityHotspotsAppRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/securityHotspots/__tests__/__snapshots__/SecurityHotspotsAppRenderer-test.tsx.snap
@@ -44,45 +44,39 @@ exports[`should render correctly 2`] = `
     <A11ySkipTarget
       anchor="security_hotspots_main"
     />
-    <DeferredSpinner
-      className="huge-spacer-left big-spacer-top"
-      loading={false}
-      timeout={100}
+    <div
+      className="display-flex-column display-flex-center"
     >
+      <img
+        alt="hotspots.page"
+        className="huge-spacer-top"
+        height={166}
+        src="/images/hotspot-large.svg"
+      />
+      <h1
+        className="huge-spacer-top"
+      >
+        hotspots.no_hotspots.title
+      </h1>
       <div
-        className="display-flex-column display-flex-center"
+        className="abs-width-400 text-center big-spacer-top"
       >
-        <img
-          alt="hotspots.page"
-          className="huge-spacer-top"
-          height={166}
-          src="/images/hotspot-large.svg"
-        />
-        <h1
-          className="huge-spacer-top"
-        >
-          hotspots.no_hotspots.title
-        </h1>
-        <div
-          className="abs-width-400 text-center big-spacer-top"
-        >
-          hotspots.no_hotspots.description
-        </div>
-        <Link
-          className="big-spacer-top"
-          onlyActiveOnIndex={false}
-          style={Object {}}
-          target="_blank"
-          to={
-            Object {
-              "pathname": "/documentation/user-guide/security-hotspots/",
-            }
-          }
-        >
-          hotspots.learn_more
-        </Link>
+        hotspots.no_hotspots.description
       </div>
-    </DeferredSpinner>
+      <Link
+        className="big-spacer-top"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        target="_blank"
+        to={
+          Object {
+            "pathname": "/documentation/user-guide/security-hotspots/",
+          }
+        }
+      >
+        hotspots.learn_more
+      </Link>
+    </div>
   </div>
 </div>
 `;
@@ -108,66 +102,60 @@ exports[`should render correctly with hotspots 1`] = `
     <A11ySkipTarget
       anchor="security_hotspots_main"
     />
-    <DeferredSpinner
-      className="huge-spacer-left big-spacer-top"
-      loading={false}
-      timeout={100}
+    <div
+      className="layout-page"
     >
       <div
-        className="layout-page"
+        className="sidebar"
       >
-        <div
-          className="sidebar"
-        >
-          <HotspotList
-            hotspots={
-              Array [
-                Object {
-                  "author": "Developer 1",
-                  "component": "com.github.kevinsawicki:http-request:com.github.kevinsawicki.http.HttpRequest",
-                  "creationDate": "2013-05-13T17:55:39+0200",
-                  "key": "h1",
-                  "line": 81,
-                  "message": "'3' is a magic number.",
-                  "project": "com.github.kevinsawicki:http-request",
-                  "resolution": undefined,
-                  "rule": "checkstyle:com.puppycrawl.tools.checkstyle.checks.coding.MagicNumberCheck",
-                  "securityCategory": "command-injection",
-                  "status": "TO_REVIEW",
-                  "updateDate": "2013-05-13T17:55:39+0200",
-                  "vulnerabilityProbability": "HIGH",
-                },
-                Object {
-                  "author": "Developer 1",
-                  "component": "com.github.kevinsawicki:http-request:com.github.kevinsawicki.http.HttpRequest",
-                  "creationDate": "2013-05-13T17:55:39+0200",
-                  "key": "h2",
-                  "line": 81,
-                  "message": "'3' is a magic number.",
-                  "project": "com.github.kevinsawicki:http-request",
-                  "resolution": undefined,
-                  "rule": "checkstyle:com.puppycrawl.tools.checkstyle.checks.coding.MagicNumberCheck",
-                  "securityCategory": "command-injection",
-                  "status": "TO_REVIEW",
-                  "updateDate": "2013-05-13T17:55:39+0200",
-                  "vulnerabilityProbability": "HIGH",
-                },
-              ]
-            }
-            hotspotsTotal={2}
-            isStaticListOfHotspots={true}
-            loadingMore={false}
-            onHotspotClick={[MockFunction]}
-            onLoadMore={[MockFunction]}
-            securityCategories={Object {}}
-            statusFilter="TO_REVIEW"
-          />
-        </div>
-        <div
-          className="main"
+        <HotspotList
+          hotspots={
+            Array [
+              Object {
+                "author": "Developer 1",
+                "component": "com.github.kevinsawicki:http-request:com.github.kevinsawicki.http.HttpRequest",
+                "creationDate": "2013-05-13T17:55:39+0200",
+                "key": "h1",
+                "line": 81,
+                "message": "'3' is a magic number.",
+                "project": "com.github.kevinsawicki:http-request",
+                "resolution": undefined,
+                "rule": "checkstyle:com.puppycrawl.tools.checkstyle.checks.coding.MagicNumberCheck",
+                "securityCategory": "command-injection",
+                "status": "TO_REVIEW",
+                "updateDate": "2013-05-13T17:55:39+0200",
+                "vulnerabilityProbability": "HIGH",
+              },
+              Object {
+                "author": "Developer 1",
+                "component": "com.github.kevinsawicki:http-request:com.github.kevinsawicki.http.HttpRequest",
+                "creationDate": "2013-05-13T17:55:39+0200",
+                "key": "h2",
+                "line": 81,
+                "message": "'3' is a magic number.",
+                "project": "com.github.kevinsawicki:http-request",
+                "resolution": undefined,
+                "rule": "checkstyle:com.puppycrawl.tools.checkstyle.checks.coding.MagicNumberCheck",
+                "securityCategory": "command-injection",
+                "status": "TO_REVIEW",
+                "updateDate": "2013-05-13T17:55:39+0200",
+                "vulnerabilityProbability": "HIGH",
+              },
+            ]
+          }
+          hotspotsTotal={2}
+          isStaticListOfHotspots={true}
+          loadingMore={false}
+          onHotspotClick={[MockFunction]}
+          onLoadMore={[MockFunction]}
+          securityCategories={Object {}}
+          statusFilter="TO_REVIEW"
         />
       </div>
-    </DeferredSpinner>
+      <div
+        className="main"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -193,73 +181,67 @@ exports[`should render correctly with hotspots 2`] = `
     <A11ySkipTarget
       anchor="security_hotspots_main"
     />
-    <DeferredSpinner
-      className="huge-spacer-left big-spacer-top"
-      loading={false}
-      timeout={100}
+    <div
+      className="layout-page"
     >
       <div
-        className="layout-page"
+        className="sidebar"
       >
-        <div
-          className="sidebar"
-        >
-          <HotspotList
-            hotspots={
-              Array [
-                Object {
-                  "author": "Developer 1",
-                  "component": "com.github.kevinsawicki:http-request:com.github.kevinsawicki.http.HttpRequest",
-                  "creationDate": "2013-05-13T17:55:39+0200",
-                  "key": "h1",
-                  "line": 81,
-                  "message": "'3' is a magic number.",
-                  "project": "com.github.kevinsawicki:http-request",
-                  "resolution": undefined,
-                  "rule": "checkstyle:com.puppycrawl.tools.checkstyle.checks.coding.MagicNumberCheck",
-                  "securityCategory": "command-injection",
-                  "status": "TO_REVIEW",
-                  "updateDate": "2013-05-13T17:55:39+0200",
-                  "vulnerabilityProbability": "HIGH",
-                },
-                Object {
-                  "author": "Developer 1",
-                  "component": "com.github.kevinsawicki:http-request:com.github.kevinsawicki.http.HttpRequest",
-                  "creationDate": "2013-05-13T17:55:39+0200",
-                  "key": "h2",
-                  "line": 81,
-                  "message": "'3' is a magic number.",
-                  "project": "com.github.kevinsawicki:http-request",
-                  "resolution": undefined,
-                  "rule": "checkstyle:com.puppycrawl.tools.checkstyle.checks.coding.MagicNumberCheck",
-                  "securityCategory": "command-injection",
-                  "status": "TO_REVIEW",
-                  "updateDate": "2013-05-13T17:55:39+0200",
-                  "vulnerabilityProbability": "HIGH",
-                },
-              ]
-            }
-            hotspotsTotal={3}
-            isStaticListOfHotspots={true}
-            loadingMore={false}
-            onHotspotClick={[MockFunction]}
-            onLoadMore={[MockFunction]}
-            securityCategories={Object {}}
-            selectedHotspotKey="h2"
-            statusFilter="TO_REVIEW"
-          />
-        </div>
-        <div
-          className="main"
-        >
-          <HotspotViewer
-            hotspotKey="h2"
-            onUpdateHotspot={[MockFunction]}
-            securityCategories={Object {}}
-          />
-        </div>
+        <HotspotList
+          hotspots={
+            Array [
+              Object {
+                "author": "Developer 1",
+                "component": "com.github.kevinsawicki:http-request:com.github.kevinsawicki.http.HttpRequest",
+                "creationDate": "2013-05-13T17:55:39+0200",
+                "key": "h1",
+                "line": 81,
+                "message": "'3' is a magic number.",
+                "project": "com.github.kevinsawicki:http-request",
+                "resolution": undefined,
+                "rule": "checkstyle:com.puppycrawl.tools.checkstyle.checks.coding.MagicNumberCheck",
+                "securityCategory": "command-injection",
+                "status": "TO_REVIEW",
+                "updateDate": "2013-05-13T17:55:39+0200",
+                "vulnerabilityProbability": "HIGH",
+              },
+              Object {
+                "author": "Developer 1",
+                "component": "com.github.kevinsawicki:http-request:com.github.kevinsawicki.http.HttpRequest",
+                "creationDate": "2013-05-13T17:55:39+0200",
+                "key": "h2",
+                "line": 81,
+                "message": "'3' is a magic number.",
+                "project": "com.github.kevinsawicki:http-request",
+                "resolution": undefined,
+                "rule": "checkstyle:com.puppycrawl.tools.checkstyle.checks.coding.MagicNumberCheck",
+                "securityCategory": "command-injection",
+                "status": "TO_REVIEW",
+                "updateDate": "2013-05-13T17:55:39+0200",
+                "vulnerabilityProbability": "HIGH",
+              },
+            ]
+          }
+          hotspotsTotal={3}
+          isStaticListOfHotspots={true}
+          loadingMore={false}
+          onHotspotClick={[MockFunction]}
+          onLoadMore={[MockFunction]}
+          securityCategories={Object {}}
+          selectedHotspotKey="h2"
+          statusFilter="TO_REVIEW"
+        />
+      </div>
+      <div
+        className="main"
+      >
+        <HotspotViewer
+          hotspotKey="h2"
+          onUpdateHotspot={[MockFunction]}
+          securityCategories={Object {}}
+        />
       </div>
-    </DeferredSpinner>
+    </div>
   </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/securityHotspots/components/HotspotCategory.tsx b/server/sonar-web/src/main/js/apps/securityHotspots/components/HotspotCategory.tsx
index 91b142503e4..be732964b3b 100644
--- a/server/sonar-web/src/main/js/apps/securityHotspots/components/HotspotCategory.tsx
+++ b/server/sonar-web/src/main/js/apps/securityHotspots/components/HotspotCategory.tsx
@@ -25,19 +25,17 @@ import { RawHotspot } from '../../../types/security-hotspots';
 import HotspotListItem from './HotspotListItem';
 
 export interface HotspotCategoryProps {
-  category: {
-    key: string;
-    title: string;
-  };
   hotspots: RawHotspot[];
   onHotspotClick: (key: string) => void;
   selectedHotspotKey: string | undefined;
+  startsExpanded: boolean;
+  title: string;
 }
 
 export default function HotspotCategory(props: HotspotCategoryProps) {
-  const { category, hotspots, selectedHotspotKey } = props;
+  const { hotspots, selectedHotspotKey, startsExpanded, title } = props;
 
-  const [expanded, setExpanded] = React.useState(true);
+  const [expanded, setExpanded] = React.useState(startsExpanded);
 
   if (hotspots.length < 1) {
     return null;
@@ -51,7 +49,7 @@ export default function HotspotCategory(props: HotspotCategoryProps) {
         className="hotspot-category-header display-flex-space-between display-flex-center"
         href="#"
         onClick={() => setExpanded(!expanded)}>
-        <strong className="flex-1">{category.title}</strong>
+        <strong className="flex-1">{title}</strong>
         <span>
           <span className="counter-badge">{hotspots.length}</span>
           {expanded ? (
diff --git a/server/sonar-web/src/main/js/apps/securityHotspots/components/HotspotList.tsx b/server/sonar-web/src/main/js/apps/securityHotspots/components/HotspotList.tsx
index d6b31fb2042..286e9a30b85 100644
--- a/server/sonar-web/src/main/js/apps/securityHotspots/components/HotspotList.tsx
+++ b/server/sonar-web/src/main/js/apps/securityHotspots/components/HotspotList.tsx
@@ -73,7 +73,7 @@ export default function HotspotList(props: HotspotListProps) {
         )}
       </h1>
       <ul className="big-spacer-bottom">
-        {groupedHotspots.map(riskGroup => (
+        {groupedHotspots.map((riskGroup, groupIndex) => (
           <li className="big-spacer-bottom" key={riskGroup.risk}>
             <div className="hotspot-risk-header little-spacer-left">
               <span>{translate('hotspots.risk_exposure')}</span>
@@ -82,13 +82,14 @@ export default function HotspotList(props: HotspotListProps) {
               </div>
             </div>
             <ul>
-              {riskGroup.categories.map(cat => (
+              {riskGroup.categories.map((cat, catIndex) => (
                 <li className="spacer-bottom" key={cat.key}>
                   <HotspotCategory
-                    category={{ key: cat.key, title: cat.title }}
                     hotspots={cat.hotspots}
                     onHotspotClick={props.onHotspotClick}
                     selectedHotspotKey={selectedHotspotKey}
+                    startsExpanded={groupIndex === 0 && catIndex === 0}
+                    title={cat.title}
                   />
                 </li>
               ))}
diff --git a/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/HotspotCategory-test.tsx b/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/HotspotCategory-test.tsx
index 757850291aa..99a432c2b5d 100644
--- a/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/HotspotCategory-test.tsx
+++ b/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/HotspotCategory-test.tsx
@@ -23,12 +23,13 @@ import { mockRawHotspot } from '../../../../helpers/mocks/security-hotspots';
 import HotspotCategory, { HotspotCategoryProps } from '../HotspotCategory';
 
 it('should render correctly', () => {
-  expect(shallowRender()).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot('empty');
 });
 
 it('should render correctly with hotspots', () => {
   const hotspots = [mockRawHotspot({ key: 'h1' }), mockRawHotspot({ key: 'h2' })];
   expect(shallowRender({ hotspots })).toMatchSnapshot();
+  expect(shallowRender({ hotspots, startsExpanded: false })).toMatchSnapshot('collapsed');
 });
 
 it('should handle collapse and expand', () => {
@@ -46,10 +47,11 @@ it('should handle collapse and expand', () => {
 function shallowRender(props: Partial<HotspotCategoryProps> = {}) {
   return shallow(
     <HotspotCategory
-      category={{ key: 'class-injection', title: 'Class Injection' }}
       hotspots={[]}
       onHotspotClick={jest.fn()}
       selectedHotspotKey=""
+      startsExpanded={true}
+      title="Class Injection"
       {...props}
     />
   );
diff --git a/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/__snapshots__/HotspotCategory-test.tsx.snap b/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/__snapshots__/HotspotCategory-test.tsx.snap
index 66a40e18e94..a075d958dfe 100644
--- a/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/__snapshots__/HotspotCategory-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/__snapshots__/HotspotCategory-test.tsx.snap
@@ -83,8 +83,6 @@ exports[`should handle collapse and expand 2`] = `
 </div>
 `;
 
-exports[`should render correctly 1`] = `""`;
-
 exports[`should render correctly with hotspots 1`] = `
 <div
   className="hotspot-category HIGH"
@@ -164,3 +162,33 @@ exports[`should render correctly with hotspots 1`] = `
   </ul>
 </div>
 `;
+
+exports[`should render correctly with hotspots: collapsed 1`] = `
+<div
+  className="hotspot-category HIGH"
+>
+  <a
+    className="hotspot-category-header display-flex-space-between display-flex-center"
+    href="#"
+    onClick={[Function]}
+  >
+    <strong
+      className="flex-1"
+    >
+      Class Injection
+    </strong>
+    <span>
+      <span
+        className="counter-badge"
+      >
+        2
+      </span>
+      <ChevronDownIcon
+        className="big-spacer-left"
+      />
+    </span>
+  </a>
+</div>
+`;
+
+exports[`should render correctly: empty 1`] = `""`;
diff --git a/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/__snapshots__/HotspotList-test.tsx.snap b/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/__snapshots__/HotspotList-test.tsx.snap
index 872890c7764..07c77d60fa5 100644
--- a/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/__snapshots__/HotspotList-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/__snapshots__/HotspotList-test.tsx.snap
@@ -105,12 +105,6 @@ exports[`should render correctly with hotspots: no pagination 1`] = `
           key="cat1"
         >
           <HotspotCategory
-            category={
-              Object {
-                "key": "cat1",
-                "title": "cat1",
-              }
-            }
             hotspots={
               Array [
                 Object {
@@ -132,6 +126,8 @@ exports[`should render correctly with hotspots: no pagination 1`] = `
             }
             onHotspotClick={[MockFunction]}
             selectedHotspotKey="h2"
+            startsExpanded={true}
+            title="cat1"
           />
         </li>
         <li
@@ -139,12 +135,6 @@ exports[`should render correctly with hotspots: no pagination 1`] = `
           key="cat2"
         >
           <HotspotCategory
-            category={
-              Object {
-                "key": "cat2",
-                "title": "cat2",
-              }
-            }
             hotspots={
               Array [
                 Object {
@@ -166,6 +156,8 @@ exports[`should render correctly with hotspots: no pagination 1`] = `
             }
             onHotspotClick={[MockFunction]}
             selectedHotspotKey="h2"
+            startsExpanded={false}
+            title="cat2"
           />
         </li>
       </ul>
@@ -192,12 +184,6 @@ exports[`should render correctly with hotspots: no pagination 1`] = `
           key="cat1"
         >
           <HotspotCategory
-            category={
-              Object {
-                "key": "cat1",
-                "title": "cat1",
-              }
-            }
             hotspots={
               Array [
                 Object {
@@ -234,6 +220,8 @@ exports[`should render correctly with hotspots: no pagination 1`] = `
             }
             onHotspotClick={[MockFunction]}
             selectedHotspotKey="h2"
+            startsExpanded={false}
+            title="cat1"
           />
         </li>
         <li
@@ -241,12 +229,6 @@ exports[`should render correctly with hotspots: no pagination 1`] = `
           key="cat2"
         >
           <HotspotCategory
-            category={
-              Object {
-                "key": "cat2",
-                "title": "cat2",
-              }
-            }
             hotspots={
               Array [
                 Object {
@@ -268,6 +250,8 @@ exports[`should render correctly with hotspots: no pagination 1`] = `
             }
             onHotspotClick={[MockFunction]}
             selectedHotspotKey="h2"
+            startsExpanded={false}
+            title="cat2"
           />
         </li>
       </ul>
@@ -318,12 +302,6 @@ exports[`should render correctly with hotspots: pagination 1`] = `
           key="cat1"
         >
           <HotspotCategory
-            category={
-              Object {
-                "key": "cat1",
-                "title": "cat1",
-              }
-            }
             hotspots={
               Array [
                 Object {
@@ -345,6 +323,8 @@ exports[`should render correctly with hotspots: pagination 1`] = `
             }
             onHotspotClick={[MockFunction]}
             selectedHotspotKey="h2"
+            startsExpanded={true}
+            title="cat1"
           />
         </li>
         <li
@@ -352,12 +332,6 @@ exports[`should render correctly with hotspots: pagination 1`] = `
           key="cat2"
         >
           <HotspotCategory
-            category={
-              Object {
-                "key": "cat2",
-                "title": "cat2",
-              }
-            }
             hotspots={
               Array [
                 Object {
@@ -379,6 +353,8 @@ exports[`should render correctly with hotspots: pagination 1`] = `
             }
             onHotspotClick={[MockFunction]}
             selectedHotspotKey="h2"
+            startsExpanded={false}
+            title="cat2"
           />
         </li>
       </ul>
@@ -405,12 +381,6 @@ exports[`should render correctly with hotspots: pagination 1`] = `
           key="cat1"
         >
           <HotspotCategory
-            category={
-              Object {
-                "key": "cat1",
-                "title": "cat1",
-              }
-            }
             hotspots={
               Array [
                 Object {
@@ -447,6 +417,8 @@ exports[`should render correctly with hotspots: pagination 1`] = `
             }
             onHotspotClick={[MockFunction]}
             selectedHotspotKey="h2"
+            startsExpanded={false}
+            title="cat1"
           />
         </li>
         <li
@@ -454,12 +426,6 @@ exports[`should render correctly with hotspots: pagination 1`] = `
           key="cat2"
         >
           <HotspotCategory
-            category={
-              Object {
-                "key": "cat2",
-                "title": "cat2",
-              }
-            }
             hotspots={
               Array [
                 Object {
@@ -481,6 +447,8 @@ exports[`should render correctly with hotspots: pagination 1`] = `
             }
             onHotspotClick={[MockFunction]}
             selectedHotspotKey="h2"
+            startsExpanded={false}
+            title="cat2"
           />
         </li>
       </ul>