diff --git a/frontend/__tests__/components/Vuetify.spec.js b/frontend/__tests__/components/Vuetify.spec.js index bef2015749..3a334768aa 100644 --- a/frontend/__tests__/components/Vuetify.spec.js +++ b/frontend/__tests__/components/Vuetify.spec.js @@ -127,84 +127,38 @@ describe('components', () => { }) describe('v-data-table-virtual', () => { - // These tests basically test that nothing changes in the way vuetify renders the virtual table - // as the way it behaves in case no item-height is defined is kind of undeterministic - const TestTableRow = { - name: 'TestTableRow', - props: { - item: { - type: Object, - required: true, - }, - }, - template: '{{ item.name }}', - } - - function mountDataTableVirtual ({ itemHeight, itemsCount = 50 } = {}) { - const items = Array.from({ length: itemsCount }).map((_, i) => ({ - id: i, - name: `Item ${i}`, - })) - const columns = [ - { key: 'name', title: 'Name' }, - ] - + it('should be able to find v-table__wrapper element', () => { const Component = { - name: 'TestVirtualTable', - components: { - TestTableRow, - }, - template: ` - - - - - - - - `, - data () { - return { - items, - columns, - itemHeight, - } - }, + template: '', } - - return mount(Component, { + const wrapper = mount(Component, { global: { plugins: [ createVuetifyPlugin(), ], }, }) - } - - it('should render default number of rows if item-height is not defined', async () => { - const wrapper = mountDataTableVirtual({ itemsCount: 50 }) - await nextTick() - - const rows = wrapper.findAllComponents(TestTableRow) - expect(rows).toHaveLength(25) // by default, the table expects 16px tall rows + const footer = wrapper.find('.v-table__wrapper') + expect(footer.exists()).toBe(true) }) + }) - it('should only render the visible rows if item-height is defined', async () => { - const wrapper = mountDataTableVirtual({ - itemsCount: 50, - itemHeight: 40, + describe('v-data-table', () => { + it('should be able to find v-data-table-footer classes', () => { + const Component = { + template: '', + } + const wrapper = mount(Component, { + global: { + plugins: [ + createVuetifyPlugin(), + ], + }, }) - await nextTick() - - const rows = wrapper.findAllComponents(TestTableRow) - expect(rows).toHaveLength(10) // 400px / 40px = 10 rows + const footer = wrapper.find('.v-data-table-footer') + expect(footer.exists()).toBe(true) + const footerInfo = wrapper.find('.v-data-table-footer__info') + expect(footerInfo.exists()).toBe(true) }) }) @@ -240,7 +194,6 @@ describe('components', () => { }) const iconItem = wrapper.find('.v-icon') expect(iconItem.exists()).toBe(true) - expect(iconItem.classes()).toContain('v-icon') }) }) }) diff --git a/frontend/src/components/GDataTableFooter.vue b/frontend/src/components/GDataTableFooter.vue index 6ef7bb9f33..374fa06893 100644 --- a/frontend/src/components/GDataTableFooter.vue +++ b/frontend/src/components/GDataTableFooter.vue @@ -7,122 +7,27 @@ SPDX-License-Identifier: Apache-2.0 diff --git a/frontend/src/components/GScrollContainer.vue b/frontend/src/components/GScrollContainer.vue new file mode 100644 index 0000000000..1ad9edcb3f --- /dev/null +++ b/frontend/src/components/GScrollContainer.vue @@ -0,0 +1,66 @@ + + + + + + + diff --git a/frontend/src/components/GShootListRow.vue b/frontend/src/components/GShootListRow.vue index 753706ef77..02f8cf23a6 100644 --- a/frontend/src/components/GShootListRow.vue +++ b/frontend/src/components/GShootListRow.vue @@ -66,7 +66,7 @@ SPDX-License-Identifier: Apache-2.0 - + -
-
+