mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 08:01:20 +08:00
Fix tests + Add tests for hierarchy
This commit is contained in:
igor
commit
3fde529259
@ -1,12 +1,13 @@
|
||||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import Stories from './stories';
|
||||
import createHierarchy from '../../libs/hierarchy';
|
||||
|
||||
describe('manager.ui.components.left_panel.stories', () => {
|
||||
describe('render', () => {
|
||||
test('should render stories - empty', () => {
|
||||
const data = [];
|
||||
const wrap = shallow(<Stories stories={data} />);
|
||||
const data = createHierarchy([]);
|
||||
const wrap = shallow(<Stories storiesHierarchy={data} />);
|
||||
|
||||
const list = wrap.find('div').first().children('div').last();
|
||||
|
||||
@ -14,8 +15,13 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
});
|
||||
|
||||
test('should render stories', () => {
|
||||
const data = [{ kind: 'a', stories: ['a1', 'a2'] }, { kind: '20', stories: ['b1', 'b2'] }];
|
||||
const wrap = shallow(<Stories stories={data} selectedKind="20" selectedStory="b2" />);
|
||||
const data = createHierarchy([
|
||||
{ kind: 'a', stories: ['a1', 'a2'] },
|
||||
{ kind: '20', stories: ['b1', 'b2'] },
|
||||
]);
|
||||
const wrap = shallow(
|
||||
<Stories storiesHierarchy={data} selectedKind="20" selectedStory="b2" />
|
||||
);
|
||||
|
||||
const output = wrap.html();
|
||||
|
||||
@ -23,18 +29,16 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
expect(output).toMatch(/b2/);
|
||||
});
|
||||
|
||||
test('should render stories with hierarchy - leftPanelHierarchy is true', () => {
|
||||
const data = [
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
];
|
||||
test('should render stories with hierarchy - resolveStoryHierarchy is defined', () => {
|
||||
const data = createHierarchy(
|
||||
[
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
],
|
||||
name => name.split('.')
|
||||
);
|
||||
const wrap = shallow(
|
||||
<Stories
|
||||
stories={data}
|
||||
selectedKind="another.space.20"
|
||||
selectedStory="b2"
|
||||
leftPanelHierarchy
|
||||
/>
|
||||
<Stories storiesHierarchy={data} selectedKind="another.space.20" selectedStory="b2" />
|
||||
);
|
||||
|
||||
const output = wrap.html();
|
||||
@ -51,18 +55,13 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
expect(output).toMatch(/b2/);
|
||||
});
|
||||
|
||||
test('should render stories without hierarchy - leftPanelHierarchy is false', () => {
|
||||
const data = [
|
||||
test('should render stories without hierarchy - resolveStoryHierarchy is not defined', () => {
|
||||
const data = createHierarchy([
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
];
|
||||
]);
|
||||
const wrap = shallow(
|
||||
<Stories
|
||||
stories={data}
|
||||
selectedKind="another.space.20"
|
||||
selectedStory="b2"
|
||||
leftPanelHierarchy={false}
|
||||
/>
|
||||
<Stories storiesHierarchy={data} selectedKind="another.space.20" selectedStory="b2" />
|
||||
);
|
||||
|
||||
const output = wrap.html();
|
||||
@ -78,10 +77,18 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
|
||||
describe('events', () => {
|
||||
test('should call the onSelectStory prop when a kind is clicked', () => {
|
||||
const data = [{ kind: 'a', stories: ['a1', 'a2'] }, { kind: 'b', stories: ['b1', 'b2'] }];
|
||||
const data = createHierarchy([
|
||||
{ kind: 'a', stories: ['a1', 'a2'] },
|
||||
{ kind: 'b', stories: ['b1', 'b2'] },
|
||||
]);
|
||||
const onSelectStory = jest.fn();
|
||||
const wrap = shallow(
|
||||
<Stories stories={data} selectedKind="b" selectedStory="b2" onSelectStory={onSelectStory} />
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
selectedKind="b"
|
||||
selectedStory="b2"
|
||||
onSelectStory={onSelectStory}
|
||||
/>
|
||||
);
|
||||
|
||||
const kind = wrap.find('a').filterWhere(el => el.text() === 'a').last();
|
||||
@ -91,10 +98,18 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
});
|
||||
|
||||
test('should call the onSelectStory prop when a story is clicked', () => {
|
||||
const data = [{ kind: 'a', stories: ['a1', 'a2'] }, { kind: 'b', stories: ['b1', 'b2'] }];
|
||||
const data = createHierarchy([
|
||||
{ kind: 'a', stories: ['a1', 'a2'] },
|
||||
{ kind: 'b', stories: ['b1', 'b2'] },
|
||||
]);
|
||||
const onSelectStory = jest.fn();
|
||||
const wrap = shallow(
|
||||
<Stories stories={data} selectedKind="b" selectedStory="b2" onSelectStory={onSelectStory} />
|
||||
<Stories
|
||||
storiesHierarchy={data}
|
||||
selectedKind="b"
|
||||
selectedStory="b2"
|
||||
onSelectStory={onSelectStory}
|
||||
/>
|
||||
);
|
||||
|
||||
const kind = wrap.find('a').filterWhere(el => el.text() === 'b1').last();
|
||||
@ -103,19 +118,22 @@ describe('manager.ui.components.left_panel.stories', () => {
|
||||
expect(onSelectStory).toHaveBeenCalledWith('b', 'b1');
|
||||
});
|
||||
|
||||
test('should call the onSelectStory prop when a namespace is clicked - leftPanelHierarchy is true', () => {
|
||||
const data = [
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
];
|
||||
test('should call the onSelectStory prop when a namespace is clicked - resolveStoryHierarchy is defined', () => {
|
||||
const data = createHierarchy(
|
||||
[
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
],
|
||||
name => name.split('.')
|
||||
);
|
||||
|
||||
const onSelectStory = jest.fn();
|
||||
const wrap = shallow(
|
||||
<Stories
|
||||
stories={data}
|
||||
storiesHierarchy={data}
|
||||
selectedKind="some.name.item1"
|
||||
selectedStory="a2"
|
||||
onSelectStory={onSelectStory}
|
||||
leftPanelHierarchy
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
155
lib/ui/src/modules/ui/libs/hierarchy.test.js
Normal file
155
lib/ui/src/modules/ui/libs/hierarchy.test.js
Normal file
@ -0,0 +1,155 @@
|
||||
import createHierarchy from './hierarchy';
|
||||
|
||||
describe('manager.ui.libs.hierarchy', () => {
|
||||
describe('should return root hierarchy node if stories are undefined', () => {
|
||||
test('', () => {
|
||||
const result = createHierarchy();
|
||||
|
||||
expect(result).toEqual({
|
||||
namespace: '',
|
||||
current: '',
|
||||
map: new Map(),
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('should return root hierarchy node if stories are empty', () => {
|
||||
test('', () => {
|
||||
const result = createHierarchy([]);
|
||||
|
||||
expect(result).toEqual({
|
||||
namespace: '',
|
||||
current: '',
|
||||
map: new Map(),
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('should return flat hierarchy if resolve function is undefined', () => {
|
||||
test('', () => {
|
||||
const stories = [
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
];
|
||||
|
||||
const result = createHierarchy(stories);
|
||||
|
||||
const expected = [
|
||||
[
|
||||
'some.name.item1',
|
||||
[
|
||||
{
|
||||
kind: 'some.name.item1',
|
||||
name: 'some.name.item1',
|
||||
namespaces: ['some.name.item1'],
|
||||
stories: ['a1', 'a2'],
|
||||
},
|
||||
],
|
||||
],
|
||||
[
|
||||
'another.space.20',
|
||||
[
|
||||
{
|
||||
kind: 'another.space.20',
|
||||
name: 'another.space.20',
|
||||
namespaces: ['another.space.20'],
|
||||
stories: ['b1', 'b2'],
|
||||
},
|
||||
],
|
||||
],
|
||||
];
|
||||
|
||||
expect(result.map).toEqual(new Map(expected));
|
||||
});
|
||||
});
|
||||
|
||||
describe('should return hierarchy if resolve function is defined', () => {
|
||||
test('', () => {
|
||||
const stories = [
|
||||
{ kind: 'some.name.item1', stories: ['a1', 'a2'] },
|
||||
{ kind: 'another.space.20', stories: ['b1', 'b2'] },
|
||||
];
|
||||
|
||||
const result = createHierarchy(stories, name => name.split('.'));
|
||||
|
||||
const expected = new Map([
|
||||
[
|
||||
'some',
|
||||
[
|
||||
{
|
||||
current: 'some',
|
||||
firstKind: 'some.name.item1',
|
||||
isNamespace: true,
|
||||
namespace: 'some.',
|
||||
map: new Map([
|
||||
[
|
||||
'name',
|
||||
[
|
||||
{
|
||||
current: 'name',
|
||||
firstKind: 'some.name.item1',
|
||||
isNamespace: true,
|
||||
namespace: 'some.name.',
|
||||
map: new Map([
|
||||
[
|
||||
'item1',
|
||||
[
|
||||
{
|
||||
kind: 'some.name.item1',
|
||||
name: 'item1',
|
||||
namespaces: ['some', 'name', 'item1'],
|
||||
stories: ['a1', 'a2'],
|
||||
},
|
||||
],
|
||||
],
|
||||
]),
|
||||
},
|
||||
],
|
||||
],
|
||||
]),
|
||||
},
|
||||
],
|
||||
],
|
||||
[
|
||||
'another',
|
||||
[
|
||||
{
|
||||
current: 'another',
|
||||
firstKind: 'another.space.20',
|
||||
isNamespace: true,
|
||||
namespace: 'another.',
|
||||
map: new Map([
|
||||
[
|
||||
'space',
|
||||
[
|
||||
{
|
||||
current: 'space',
|
||||
firstKind: 'another.space.20',
|
||||
isNamespace: true,
|
||||
namespace: 'another.space.',
|
||||
map: new Map([
|
||||
[
|
||||
'20',
|
||||
[
|
||||
{
|
||||
kind: 'another.space.20',
|
||||
name: '20',
|
||||
namespaces: ['another', 'space', '20'],
|
||||
stories: ['b1', 'b2'],
|
||||
},
|
||||
],
|
||||
],
|
||||
]),
|
||||
},
|
||||
],
|
||||
],
|
||||
]),
|
||||
},
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
||||
expect(result.map).toEqual(expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user