fix: Add itemSize config to workflows view recycle scroller (no-changelog) (#6238)

* fix: Add itemSize config to workflows view recycle scroller (no-changelog)

* test: add unit tests to cover recycle scroller height

* fix: revert allWorkflows change

* fix: fix linting issue

* fix: fix sharing e2e test flakiness
This commit is contained in:
Alex Grozav 2023-05-16 12:07:55 +03:00 committed by GitHub
parent 4a0e1b9e02
commit b4fd9ba94d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 44 additions and 2 deletions

View file

@ -161,7 +161,7 @@ describe('Sharing', () => {
cy.waitForLoad();
cy.visit(workflowsPage.url);
workflowsPage.getters.workflowCard('Workflow W2').click();
workflowsPage.getters.workflowCard('Workflow W2').click('top');
workflowPage.actions.executeWorkflow();
});

View file

@ -0,0 +1,28 @@
import { render } from '@testing-library/vue';
import N8nRecycleScroller from '../RecycleScroller.vue';
const itemSize = 100;
const itemKey = 'id';
const items = [...(new Array(100) as number[])].map((item, index) => ({
id: index,
name: `Item ${index}`,
}));
describe('components', () => {
describe('N8nRecycleScroller', () => {
it('should render correctly', () => {
const wrapper = render(N8nRecycleScroller, {
propsData: {
itemSize,
itemKey,
items,
},
});
expect(wrapper.container.querySelector('.recycle-scroller')).toHaveStyle(
`height: ${itemSize * items.length}px`,
);
expect(wrapper.html()).toMatchSnapshot();
});
});
});

View file

@ -0,0 +1,13 @@
// Vitest Snapshot v1
exports[`components > N8nRecycleScroller > should render correctly 1`] = `
"<div class=\\"recycle-scroller-wrapper\\">
<div class=\\"recycle-scroller\\" style=\\"height: 10000px;\\">
<div class=\\"recycle-scroller-items-wrapper\\" style=\\"transform: translateY(0px);\\">
<div class=\\"recycle-scroller-item\\"></div>
<div class=\\"recycle-scroller-item\\"></div>
<div class=\\"recycle-scroller-item\\"></div>
</div>
</div>
</div>"
`;

View file

@ -300,7 +300,7 @@ export default mixins(debounceHelper).extend({
typeProps: {
type: Object as PropType<{ itemSize: number } | { columns: DatatableColumn[] }>,
default: () => ({
itemSize: 0,
itemSize: 80,
}),
},
},

View file

@ -5,6 +5,7 @@
:resources="allWorkflows"
:filters="filters"
:additional-filters-handler="onFilter"
:type-props="{ itemSize: 80 }"
:show-aside="allWorkflows.length > 0"
:shareable="isShareable"
:initialize="initialize"