From ee71fe05d463222f9135c7ba3656709474467f68 Mon Sep 17 00:00:00 2001 From: lonyele Date: Thu, 1 Aug 2019 12:54:16 +0900 Subject: [PATCH 1/7] feat: add default route when child is not specified on existing story --- lib/api/src/modules/stories.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts index 43aa703f8985..57e509cd5d42 100644 --- a/lib/api/src/modules/stories.ts +++ b/lib/api/src/modules/stories.ts @@ -286,6 +286,11 @@ Did you create a path that uses the separator char accidentally, such as 'Vue Date: Thu, 1 Aug 2019 14:19:20 +0900 Subject: [PATCH 2/7] feat: add test and fix regression test --- lib/api/src/modules/stories.ts | 2 +- lib/api/src/tests/stories.test.js | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts index 57e509cd5d42..a13114485b15 100644 --- a/lib/api/src/modules/stories.ts +++ b/lib/api/src/modules/stories.ts @@ -286,7 +286,7 @@ Did you create a path that uses the separator char accidentally, such as 'Vue { expect(navigate).toHaveBeenCalledWith('/story/a--1'); }); + it( + 'navigates to the first child story of the parent story if a ' + + 'story exsits but child was not specified', + () => { + const navigate = jest.fn(); + const store = { + getState: () => ({ viewMode: 'story', storyId: 'b-c' }), + setState: jest.fn(), + }; + + const { + api: { setStories }, + } = initStories({ store, navigate }); + + setStories(storiesHash); + expect(navigate).toHaveBeenCalledWith('/story/b-c--1'); + } + ); + it('does not navigate if a existing story was selected', () => { const navigate = jest.fn(); const store = { From 20f3b5066813dcb4f8656b4e108dc08802bd3761 Mon Sep 17 00:00:00 2001 From: lonyele Date: Wed, 11 Sep 2019 23:06:52 +0900 Subject: [PATCH 3/7] feat: improve finding leaf story from any given depth --- lib/api/src/modules/stories.ts | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts index a13114485b15..bfef31a2e6f6 100644 --- a/lib/api/src/modules/stories.ts +++ b/lib/api/src/modules/stories.ts @@ -179,6 +179,17 @@ const initStoriesApi = ({ id: toKey(name), }); + // Recursively traverse storiesHash from the initial storyId until finding + // the leaf story. + const findLeafStoryId = (storiesHash: StoriesHash, storyId: string): string => { + if (storiesHash[storyId].isLeaf) { + return storyId; + } + + const childStoryId = storiesHash[storyId].children[0]; + return findLeafStoryId(storiesHash, childStoryId); + }; + const setStories = (input: StoriesRaw) => { const hash: StoriesHash = {}; const storiesHashOutOfOrder = Object.values(input).reduce((acc, item) => { @@ -286,11 +297,14 @@ Did you create a path that uses the separator char accidentally, such as 'Vue Date: Thu, 12 Sep 2019 00:48:08 +0900 Subject: [PATCH 4/7] fix: failing regression tests --- lib/api/src/modules/stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts index bfef31a2e6f6..8542c82d4682 100644 --- a/lib/api/src/modules/stories.ts +++ b/lib/api/src/modules/stories.ts @@ -297,7 +297,7 @@ Did you create a path that uses the separator char accidentally, such as 'Vue Date: Thu, 12 Sep 2019 01:25:16 +0900 Subject: [PATCH 5/7] chore: remove unnecessary logic --- lib/api/src/modules/stories.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts index 8542c82d4682..908fdec9b9ba 100644 --- a/lib/api/src/modules/stories.ts +++ b/lib/api/src/modules/stories.ts @@ -300,10 +300,7 @@ Did you create a path that uses the separator char accidentally, such as 'Vue Date: Thu, 12 Sep 2019 01:34:44 +0900 Subject: [PATCH 6/7] test: add more story items to the storiesHash --- lib/api/src/tests/stories.test.js | 100 ++++++++++++++++++++++++++++-- 1 file changed, 94 insertions(+), 6 deletions(-) diff --git a/lib/api/src/tests/stories.test.js b/lib/api/src/tests/stories.test.js index 7ed0e8faa3b5..090237870933 100644 --- a/lib/api/src/tests/stories.test.js +++ b/lib/api/src/tests/stories.test.js @@ -35,6 +35,20 @@ describe('stories API', () => { path: 'b-c--1', id: 'b-c--1', }, + 'b-d--1': { + kind: 'b/d', + name: '1', + parameters, + path: 'b-d--1', + id: 'b-d--1', + }, + 'b-d--2': { + kind: 'b/d', + name: '2', + parameters, + path: 'b-d--2', + id: 'b-d--2', + }, }; describe('setStories', () => { it('stores basic kinds and stories w/ correct keys', () => { @@ -50,7 +64,17 @@ describe('stories API', () => { const { storiesHash: storedStoriesHash } = store.getState(); // We need exact key ordering, even if in theory JS doens't guarantee it - expect(Object.keys(storedStoriesHash)).toEqual(['a', 'a--1', 'a--2', 'b', 'b-c', 'b-c--1']); + expect(Object.keys(storedStoriesHash)).toEqual([ + 'a', + 'a--1', + 'a--2', + 'b', + 'b-c', + 'b-c--1', + 'b-d', + 'b-d--1', + 'b-d--2', + ]); expect(storedStoriesHash.a).toMatchObject({ id: 'a', children: ['a--1', 'a--2'], @@ -76,7 +100,7 @@ describe('stories API', () => { expect(storedStoriesHash.b).toMatchObject({ id: 'b', - children: ['b-c'], + children: ['b-c', 'b-d'], isRoot: false, isComponent: false, }); @@ -96,6 +120,30 @@ describe('stories API', () => { name: '1', parameters, }); + + expect(storedStoriesHash['b-d']).toMatchObject({ + id: 'b-d', + parent: 'b', + children: ['b-d--1', 'b-d--2'], + isRoot: false, + isComponent: true, + }); + + expect(storedStoriesHash['b-d--1']).toMatchObject({ + id: 'b-d--1', + parent: 'b-d', + kind: 'b/d', + name: '1', + parameters, + }); + + expect(storedStoriesHash['b-d--2']).toMatchObject({ + id: 'b-d--2', + parent: 'b-d', + kind: 'b/d', + name: '2', + parameters, + }); }); it('handles roots also', () => { @@ -116,14 +164,38 @@ describe('stories API', () => { path: 'b-c--1', id: 'b-c--1', }, + 'b-d--1': { + kind: 'b|d', + name: '1', + parameters, + path: 'b-d--1', + id: 'b-d--1', + }, + 'b-d--2': { + kind: 'b|d', + name: '2', + parameters, + path: 'b-d--2', + id: 'b-d--2', + }, }); const { storiesHash: storedStoriesHash } = store.getState(); // We need exact key ordering, even if in theory JS doens't guarantee it - expect(Object.keys(storedStoriesHash)).toEqual(['a', 'a--1', 'a--2', 'b', 'b-c', 'b-c--1']); + expect(Object.keys(storedStoriesHash)).toEqual([ + 'a', + 'a--1', + 'a--2', + 'b', + 'b-c', + 'b-c--1', + 'b-d', + 'b-d--1', + 'b-d--2', + ]); expect(storedStoriesHash.b).toMatchObject({ id: 'b', - children: ['b-c'], + children: ['b-c', 'b-d'], isRoot: true, isComponent: false, }); @@ -143,6 +215,22 @@ describe('stories API', () => { name: '1', parameters, }); + + expect(storedStoriesHash['b-d--1']).toMatchObject({ + id: 'b-d--1', + parent: 'b-d', + kind: 'b|d', + name: '1', + parameters, + }); + + expect(storedStoriesHash['b-d--2']).toMatchObject({ + id: 'b-d--2', + parent: 'b-d', + kind: 'b|d', + name: '2', + parameters, + }); }); // Stories can get out of order for a few reasons -- see reproductions on @@ -314,7 +402,7 @@ describe('stories API', () => { const { api: { setStories, jumpToStory }, state, - } = initStories({ store, navigate, storyId: 'b-c--1', viewMode: 'story' }); + } = initStories({ store, navigate, storyId: 'b-d--2', viewMode: 'story' }); store.setState(state); setStories(storiesHash); @@ -388,7 +476,7 @@ describe('stories API', () => { const { api: { setStories, jumpToComponent }, state, - } = initStories({ store, navigate, storyId: 'b-c--1', viewMode: 'story' }); + } = initStories({ store, navigate, storyId: 'b-d--2', viewMode: 'story' }); store.setState(state); setStories(storiesHash); From 86753c5090579fc9c842de37b759ee2da1b70d00 Mon Sep 17 00:00:00 2001 From: lonyele Date: Thu, 12 Sep 2019 01:55:11 +0900 Subject: [PATCH 7/7] test: add test cases of different depth --- lib/api/src/tests/stories.test.js | 43 +++++++++++++++++++------------ 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/lib/api/src/tests/stories.test.js b/lib/api/src/tests/stories.test.js index 090237870933..d9ee55a1de1d 100644 --- a/lib/api/src/tests/stories.test.js +++ b/lib/api/src/tests/stories.test.js @@ -295,24 +295,35 @@ describe('stories API', () => { expect(navigate).toHaveBeenCalledWith('/story/a--1'); }); - it( - 'navigates to the first child story of the parent story if a ' + - 'story exsits but child was not specified', - () => { - const navigate = jest.fn(); - const store = { - getState: () => ({ viewMode: 'story', storyId: 'b-c' }), - setState: jest.fn(), - }; + it('navigates to the first leaf story if a story exsits but it is not a leaf story(1)', () => { + const navigate = jest.fn(); + const store = { + getState: () => ({ viewMode: 'story', storyId: 'b' }), + setState: jest.fn(), + }; - const { - api: { setStories }, - } = initStories({ store, navigate }); + const { + api: { setStories }, + } = initStories({ store, navigate }); - setStories(storiesHash); - expect(navigate).toHaveBeenCalledWith('/story/b-c--1'); - } - ); + setStories(storiesHash); + expect(navigate).toHaveBeenCalledWith('/story/b-c--1'); + }); + + it('navigates to the first leaf story if a story exsits but it is not a leaf story(2)', () => { + const navigate = jest.fn(); + const store = { + getState: () => ({ viewMode: 'story', storyId: 'b-d' }), + setState: jest.fn(), + }; + + const { + api: { setStories }, + } = initStories({ store, navigate }); + + setStories(storiesHash); + expect(navigate).toHaveBeenCalledWith('/story/b-d--1'); + }); it('does not navigate if a existing story was selected', () => { const navigate = jest.fn();