1 files changed, 56 insertions, 0 deletions
diff --git a/apps/files/src/composables/useFileListWidth.cy.ts b/apps/files/src/composables/useFileListWidth.cy.ts
new file mode 100644
index 00000000000..b0d42c4a2d6
--- /dev/null
+++ b/apps/files/src/composables/useFileListWidth.cy.ts
@@ -0,0 +1,56 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineComponent } from 'vue'
+import { useFileListWidth } from './useFileListWidth.ts'
+
+const ComponentMock = defineComponent({
+	template: '<div id="test-component" style="width: 100%;background: white;">{{ fileListWidth }}</div>',
+	setup() {
+		return {
+			fileListWidth: useFileListWidth(),
+		}
+	},
+})
+const FileListMock = defineComponent({
+	template: '<main id="app-content-vue" style="width: 100%;"><component-mock /></main>',
+	components: {
+		ComponentMock,
+	},
+})
+
+describe('composable: fileListWidth', () => {
+
+	it('Has initial value', () => {
+		cy.viewport(600, 400)
+
+		cy.mount(FileListMock, {})
+		cy.get('#app-content-vue')
+			.should('be.visible')
+			.and('contain.text', '600')
+	})
+
+	it('Is reactive to size change', () => {
+		cy.viewport(600, 400)
+		cy.mount(FileListMock)
+		cy.get('#app-content-vue').should('contain.text', '600')
+
+		cy.viewport(800, 400)
+		cy.screenshot()
+		cy.get('#app-content-vue').should('contain.text', '800')
+	})
+
+	it('Is reactive to style changes', () => {
+		cy.viewport(600, 400)
+		cy.mount(FileListMock)
+		cy.get('#app-content-vue')
+			.should('be.visible')
+			.and('contain.text', '600')
+			.invoke('attr', 'style', 'width: 100px')
+
+		cy.get('#app-content-vue')
+			.should('contain.text', '100')
+	})
+})