Merge remote-tracking branch 'origin/151-story-hierarchy' into 151-st…

…ory-hierarchy
storybookjs · Jul 6, 2017 · 3096cde · 3096cde
2 parents 957ff8f + 9120949
commit 3096cde
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 15 deletions.
diff --git a/app/vue/package.json b/app/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "3.2.0-alpha.5",
+  "version": "3.2.0-alpha.6",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",
   "bugs": {

diff --git a/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.js b/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.js
@@ -1,6 +1,7 @@
 import { Treebeard } from 'storybook-react-treebeard';
 import PropTypes from 'prop-types';
 import React from 'react';
+import deepEqual from 'deep-equal';
 import treeNodeTypes from './tree_node_type';
 import treeDecorators from './tree_decorators';
 import treeStyle from './tree_style';
@@ -50,21 +51,16 @@ class Stories extends React.Component {
     const { selectedHierarchy: nextSelectedHierarchy = [] } = nextProps;
     const { selectedHierarchy: currentSelectedHierarchy = [] } = this.props;
 
-    if (
-      currentSelectedHierarchy.length === nextSelectedHierarchy.length &&
-      currentSelectedHierarchy.every((item, index) => item === nextSelectedHierarchy[index])
-    ) {
-      return;
-    }
-
-    const selectedNodes = getSelectedNodes(nextSelectedHierarchy);
+    if (!deepEqual(nextSelectedHierarchy, currentSelectedHierarchy)) {
+      const selectedNodes = getSelectedNodes(nextSelectedHierarchy);
 
-    this.setState(prevState => ({
-      nodes: {
-        ...prevState.nodes,
-        ...selectedNodes,
-      },
-    }));
+      this.setState(prevState => ({
+        nodes: {
+          ...prevState.nodes,
+          ...selectedNodes,
+        },
+      }));
+    }
   }
 
   onToggle(node, toggled) {

diff --git a/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.test.js b/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.test.js
@@ -151,6 +151,91 @@ describe('manager.ui.components.left_panel.stories', () => {
         'some@namespace': true,
       });
     });
+
+    test('should recalculate selected nodes after selectedHierarchy changes', () => {
+      const data = createHierarchy(
+        [
+          { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+          { kind: 'another.space.20', stories: ['b1', 'b2'] },
+        ],
+        '\\.'
+      );
+      const wrap = mount(
+        <Stories
+          storiesHierarchy={data}
+          selectedKind="another.space.20"
+          selectedStory="b2"
+          selectedHierarchy={[]}
+        />
+      );
+
+      wrap.setProps({ selectedHierarchy: ['another', 'space', '20'] });
+
+      const { nodes } = wrap.state();
+
+      expect(nodes).toEqual({
+        'another@namespace': true,
+        'another@space@namespace': true,
+        'another@space@20@component': true,
+      });
+    });
+
+    test('should add selected nodes to the state after selectedHierarchy changes with a new value', () => {
+      const data = createHierarchy(
+        [
+          { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+          { kind: 'another.space.20', stories: ['b1', 'b2'] },
+        ],
+        '\\.'
+      );
+      const wrap = mount(
+        <Stories
+          storiesHierarchy={data}
+          selectedKind="another.space.20"
+          selectedStory="b2"
+          selectedHierarchy={['another', 'space', '20']}
+        />
+      );
+
+      wrap.setProps({ selectedHierarchy: ['some', 'name', 'item1'] });
+
+      const { nodes } = wrap.state();
+
+      expect(nodes).toEqual({
+        'another@namespace': true,
+        'another@space@namespace': true,
+        'another@space@20@component': true,
+        'some@namespace': true,
+        'some@name@namespace': true,
+        'some@name@item1@component': true,
+      });
+    });
+
+    test('should not call setState when selectedHierarchy prop changes with the same value', () => {
+      const selectedHierarchy = ['another', 'space', '20'];
+      const data = createHierarchy(
+        [
+          { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+          { kind: 'another.space.20', stories: ['b1', 'b2'] },
+        ],
+        '\\.'
+      );
+      const wrap = mount(
+        <Stories
+          storiesHierarchy={data}
+          selectedKind="another.space.20"
+          selectedStory="b2"
+          selectedHierarchy={selectedHierarchy}
+        />
+      );
+
+      const setState = jest.fn();
+      wrap.instance().setState = setState;
+
+      wrap.setProps({ selectedHierarchy });
+
+      expect(setState).not.toHaveBeenCalled();
+    });
   });
 
   describe('events', () => {