GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 22:21:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add unit tests for Panel.getInteractions

Browse Source
This commit is contained in:
Gert Hengeveld 2022-06-29 11:06:26 +02:00
parent e5b2c3dc5b
commit c530eae065
2 changed files with 266 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
addons/interactions/src/Panel.test.ts Normal file
View File

@ -0,0 +1,265 @@
import { Call, CallStates, LogItem } from '@storybook/instrumenter';
import { getInteractions } from './Panel';
describe('Panel', () => {
describe('getInteractions', () => {
const log: LogItem[] = [
{
callId: 'story--id [4] findByText',
status: CallStates.DONE,
},
{
callId: 'story--id [5] click',
status: CallStates.DONE,
},
{
callId: 'story--id [6] waitFor',
status: CallStates.DONE,
},
{
callId: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
parentId: 'story--id [6] waitFor',
status: CallStates.DONE,
},
];
const calls = new Map<Call['id'], Call>(
[
{
id: 'story--id [0] action',
storyId: 'story--id',
cursor: 0,
path: [],
method: 'action',
args: [{ __function__: { name: 'onSubmit' } }],
interceptable: false,
retain: true,
},
{
id: 'story--id [1] action',
storyId: 'story--id',
cursor: 1,
path: [],
method: 'action',
args: [{ __function__: { name: 'onTransactionStart' } }],
interceptable: false,
retain: true,
},
{
id: 'story--id [2] action',
storyId: 'story--id',
cursor: 2,
path: [],
method: 'action',
args: [{ __function__: { name: 'onTransactionEnd' } }],
interceptable: false,
retain: true,
},
{
id: 'story--id [3] within',
storyId: 'story--id',
cursor: 3,
path: [],
method: 'within',
args: [{ __element__: { localName: 'div', id: 'root', innerText: 'Click' } }],
interceptable: false,
retain: false,
},
{
id: 'story--id [4] findByText',
storyId: 'story--id',
cursor: 4,
path: [{ __callId__: 'story--id [3] within' }],
method: 'findByText',
args: ['Click'],
interceptable: true,
retain: false,
},
{
id: 'story--id [5] click',
storyId: 'story--id',
cursor: 5,
path: ['userEvent'],
method: 'click',
args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
interceptable: true,
retain: false,
},
{
id: 'story--id [6] waitFor [0] expect',
parentId: 'story--id [6] waitFor',
storyId: 'story--id',
cursor: 0,
path: [],
method: 'expect',
args: [{ __callId__: 'story--id [0] action', retain: true }],
interceptable: true,
retain: false,
},
{
id: 'story--id [6] waitFor [1] stringMatching',
parentId: 'story--id [6] waitFor',
storyId: 'story--id',
cursor: 1,
path: ['expect'],
method: 'stringMatching',
args: [{ __regexp__: { flags: 'gi', source: '([A-Z])\\w+' } }],
interceptable: false,
retain: false,
},
{
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
parentId: 'story--id [6] waitFor',
storyId: 'story--id',
cursor: 2,
path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
method: 'toHaveBeenCalledWith',
args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
interceptable: true,
retain: false,
},
{
id: 'story--id [6] waitFor',
storyId: 'story--id',
cursor: 6,
path: [],
method: 'waitFor',
args: [{ __function__: { name: '' } }],
interceptable: true,
retain: false,
},
].map((v) => [v.id, v])
);
const collapsed = new Set<Call['id']>();
const setCollapsed = () => {};
it('returns list of interactions', () => {
expect(getInteractions({ log, calls, collapsed, setCollapsed })).toEqual([
{
...calls.get('story--id [4] findByText'),
status: CallStates.DONE,
childCallIds: undefined,
isCollapsed: false,
toggleCollapsed: expect.any(Function),
},
{
...calls.get('story--id [5] click'),
status: CallStates.DONE,
childCallIds: undefined,
isCollapsed: false,
toggleCollapsed: expect.any(Function),
},
{
...calls.get('story--id [6] waitFor'),
status: CallStates.DONE,
childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
isCollapsed: false,
toggleCollapsed: expect.any(Function),
},
{
...calls.get('story--id [6] waitFor [2] toHaveBeenCalledWith'),
status: CallStates.DONE,
childCallIds: undefined,
isCollapsed: false,
toggleCollapsed: expect.any(Function),
},
]);
});
it('omits calls for which the parent is collapsed', () => {
const withCollapsed = new Set<Call['id']>(['story--id [6] waitFor']);
expect(getInteractions({ log, calls, collapsed: withCollapsed, setCollapsed })).toEqual([
expect.objectContaining({
...calls.get('story--id [4] findByText'),
childCallIds: undefined,
isCollapsed: false,
}),
expect.objectContaining({
...calls.get('story--id [5] click'),
childCallIds: undefined,
isCollapsed: false,
}),
expect.objectContaining({
...calls.get('story--id [6] waitFor'),
childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
isCollapsed: true,
}),
]);
});
it('uses status from log', () => {
const withError = log.slice(0, 3).concat({ ...log[3], status: CallStates.ERROR });
expect(getInteractions({ log: withError, calls, collapsed, setCollapsed })).toEqual([
expect.objectContaining({
id: 'story--id [4] findByText',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [5] click',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [6] waitFor',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
status: CallStates.ERROR,
}),
]);
});
it('keeps status active for errored child calls while parent is active', () => {
const withActiveError = log.slice(0, 2).concat([
{ ...log[2], status: CallStates.ACTIVE },
{ ...log[3], status: CallStates.ERROR },
]);
expect(getInteractions({ log: withActiveError, calls, collapsed, setCollapsed })).toEqual([
expect.objectContaining({
id: 'story--id [4] findByText',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [5] click',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [6] waitFor',
status: CallStates.ACTIVE,
}),
expect.objectContaining({
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
status: CallStates.ACTIVE, // not ERROR
}),
]);
});
it('does not override child status other than error for active parent', () => {
const withActiveWaiting = log.slice(0, 2).concat([
{ ...log[2], status: CallStates.ACTIVE },
{ ...log[3], status: CallStates.WAITING },
]);
expect(getInteractions({ log: withActiveWaiting, calls, collapsed, setCollapsed })).toEqual([
expect.objectContaining({
id: 'story--id [4] findByText',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [5] click',
status: CallStates.DONE,
}),
expect.objectContaining({
id: 'story--id [6] waitFor',
status: CallStates.ACTIVE,
}),
expect.objectContaining({
id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
status: CallStates.WAITING,
}),
]);
});
});
});

2
addons/interactions/src/Panel.tsx
View File

@ -21,7 +21,7 @@ const INITIAL_CONTROL_STATES = {
end: false,
};
const getInteractions = ({
export const getInteractions = ({
log,
calls,
collapsed,