Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Always collapse an expanded kind without changing selected story #1590

Merged
merged 2 commits into from
Aug 4, 2017
Merged

Always collapse an expanded kind without changing selected story #1590

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b57ceee
Always collapse an expanded kind without changing selected story
Hypnosphi Aug 3, 2017
6c22e3c
Reduce duplication in stories_tree tests
Hypnosphi Aug 4, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/ui/src/modules/ui/components/left_panel/stories_tree/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ class Stories extends React.Component {
onToggle(node, toggled) {
if (node.story) {
this.fireOnKindAndStory(node.kind, node.story);
} else if (node.kind) {
} else if (node.kind && toggled) {
this.fireOnKind(node.kind);
}

Expand Down
140 changes: 51 additions & 89 deletions lib/ui/src/modules/ui/components/left_panel/stories_tree/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,27 @@ import Stories from './index';
import { createHierarchy } from '../../../libs/hierarchy';

describe('manager.ui.components.left_panel.stories', () => {
const data = createHierarchy([
{ kind: 'a', stories: ['a1', 'a2'] },
{ kind: 'b', stories: ['b1', 'b2'] },
]);
const dataWithoutSeparator = createHierarchy([
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
]);
const dataWithSeparator = createHierarchy(
[
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
],
'\\.'
);

describe('render', () => {
test('should render stories - empty', () => {
const data = createHierarchy([]);
const wrap = shallow(
<Stories
storiesHierarchy={data}
storiesHierarchy={createHierarchy([])}
selectedKind={''}
selectedStory={''}
selectedHierarchy={[]}
Expand All @@ -22,36 +37,25 @@ describe('manager.ui.components.left_panel.stories', () => {
});

test('should render stories', () => {
const data = createHierarchy([
{ kind: 'a', stories: ['a1', 'a2'] },
{ kind: '20', stories: ['b1', 'b2'] },
]);
const wrap = shallow(
<Stories
storiesHierarchy={data}
selectedKind="20"
selectedKind="b"
selectedStory="b2"
selectedHierarchy={['20']}
selectedHierarchy={['b']}
/>
);

const output = wrap.html();

expect(output).toMatch(/20/);
expect(output).toMatch(/b/);
expect(output).toMatch(/b2/);
});

test('should render stories with hierarchy - hierarchySeparator is defined', () => {
const data = createHierarchy(
[
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
],
'\\.'
);
const wrap = shallow(
<Stories
storiesHierarchy={data}
storiesHierarchy={dataWithSeparator}
selectedKind="another.space.20"
selectedStory="b2"
selectedHierarchy={['another', 'space', '20']}
Expand All @@ -73,13 +77,9 @@ describe('manager.ui.components.left_panel.stories', () => {
});

test('should render stories without hierarchy - hierarchySeparator is not defined', () => {
const data = createHierarchy([
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
]);
const wrap = shallow(
<Stories
storiesHierarchy={data}
storiesHierarchy={dataWithoutSeparator}
selectedKind="another.space.20"
selectedStory="b2"
selectedHierarchy={['another.space.20']}
Expand All @@ -97,16 +97,9 @@ describe('manager.ui.components.left_panel.stories', () => {
});

test('should render stories with initially selected nodes according to the selectedHierarchy', () => {
const data = createHierarchy(
[
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
],
'\\.'
);
const wrap = shallow(
<Stories
storiesHierarchy={data}
storiesHierarchy={dataWithSeparator}
selectedKind="another.space.20"
selectedStory="b2"
selectedHierarchy={['another', 'space', '20']}
Expand All @@ -123,16 +116,9 @@ describe('manager.ui.components.left_panel.stories', () => {
});

test('should contain state with all selected nodes after clicking on the nodes', () => {
const data = createHierarchy(
[
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
],
'\\.'
);
const wrap = mount(
<Stories
storiesHierarchy={data}
storiesHierarchy={dataWithSeparator}
selectedKind="another.space.20"
selectedStory="b2"
selectedHierarchy={['another', 'space', '20']}
Expand All @@ -153,16 +139,9 @@ describe('manager.ui.components.left_panel.stories', () => {
});

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}
storiesHierarchy={dataWithSeparator}
selectedKind="another.space.20"
selectedStory="b2"
selectedHierarchy={[]}
Expand All @@ -181,16 +160,9 @@ describe('manager.ui.components.left_panel.stories', () => {
});

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}
storiesHierarchy={dataWithSeparator}
selectedKind="another.space.20"
selectedStory="b2"
selectedHierarchy={['another', 'space', '20']}
Expand All @@ -213,16 +185,9 @@ describe('manager.ui.components.left_panel.stories', () => {

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}
storiesHierarchy={dataWithSeparator}
selectedKind="another.space.20"
selectedStory="b2"
selectedHierarchy={selectedHierarchy}
Expand All @@ -239,11 +204,7 @@ describe('manager.ui.components.left_panel.stories', () => {
});

describe('events', () => {
test('should call the onSelectStory prop when a kind is clicked', () => {
const data = createHierarchy([
{ kind: 'a', stories: ['a1', 'a2'] },
{ kind: 'b', stories: ['b1', 'b2'] },
]);
test('should call the onSelectStory prop when a collapsed kind is clicked', () => {
const onSelectStory = jest.fn();
const wrap = mount(
<Stories
Expand All @@ -261,11 +222,28 @@ describe('manager.ui.components.left_panel.stories', () => {
expect(onSelectStory).toHaveBeenCalledWith('a', null);
});

test("shouldn't call the onSelectStory prop when an expanded kind is clicked", () => {
const onSelectStory = jest.fn();
const wrap = mount(
<Stories
storiesHierarchy={data}
selectedKind="b"
selectedStory="b2"
selectedHierarchy={['b']}
onSelectStory={onSelectStory}
/>
);

const kind = wrap.find('a').filterWhere(el => el.text() === 'a').last();
kind.simulate('click');

onSelectStory.mockClear();
kind.simulate('click');

expect(onSelectStory).not.toHaveBeenCalled();
});

test('should call the onSelectStory prop when a story is clicked', () => {
const data = createHierarchy([
{ kind: 'a', stories: ['a1', 'a2'] },
{ kind: 'b', stories: ['b1', 'b2'] },
]);
const onSelectStory = jest.fn();
const wrap = mount(
<Stories
Expand All @@ -284,18 +262,10 @@ describe('manager.ui.components.left_panel.stories', () => {
});

test('should call the onSelectStory prop when a story is clicked - hierarchySeparator is defined', () => {
const data = createHierarchy(
[
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
],
'\\.'
);

const onSelectStory = jest.fn();
const wrap = mount(
<Stories
storiesHierarchy={data}
storiesHierarchy={dataWithSeparator}
selectedKind="some.name.item1"
selectedStory="a2"
selectedHierarchy={['some', 'name', 'item1']}
Expand All @@ -315,18 +285,10 @@ describe('manager.ui.components.left_panel.stories', () => {
});

test('should call the onSelectStory prop when a story is selected with enter key', () => {
const data = createHierarchy(
[
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
],
'\\.'
);

const onSelectStory = jest.fn();
const wrap = mount(
<Stories
storiesHierarchy={data}
storiesHierarchy={dataWithSeparator}
selectedKind="some.name.item1"
selectedStory="a2"
selectedHierarchy={['some', 'name', 'item1']}
Expand Down