# This is a combination of 18 commits.

# This is the 1st commit message:

feat: create and edit rows from tables interactive widget

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #2:

fix: set store in widget

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #3:

fix: properly access store to create new row

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #4:

fix: search functionality

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #5:

fix: row reactivity

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #6:

feat: add component testing skeleton files

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #7:

test: start component testing for content reference widget

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #8:

fix: point package.json scripts to webpack.config.js

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #9:

fix(test): properly mount component

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #10:

fix(test): use default options and mix in given mount options

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #11:

fix(tests): add styles for components

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #12:

refactor(tests): move richObject to fixture

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #13:

test: verify table title after mounting component

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #14:

test: test searching in widget

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #15:

refactor(tests): organize mount test

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #16:

fix: resolve pagination issues

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #17:

fix: change viewport dimensions in cypress config

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

# This is the commit message #18:

fix: refine row selector

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

cypress.config.js

@@ -2,11 +2,21 @@ const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
 	projectId: 'ixbf9n',
+
 	e2e: {
 		baseUrl: 'http://nextcloud.local/index.php/',
 		setupNodeEvents(on, config) {
 			// implement node event listeners here
 		},
-	  pageLoadTimeout: 120000,
+		pageLoadTimeout: 120000,
+	},
+
+	component: {
+		devServer: {
+			framework: 'vue',
+			bundler: 'webpack',
+		},
+		viewportWidth: 800,
+		viewportHeight: 600,
 	},
 })

cypress/component/ContentReferenceWidget.cy.js

@@ -0,0 +1,56 @@
+import ContentReferenceWidget from '../../src/views/ContentReferenceWidget.vue'
+
+describe('ContentReferenceWidget', () => {
+	let richObject = {}
+
+	before(() => {
+		cy.fixture('widgets/richObject.json')
+			.then(richObjectFixture => {
+				richObject = richObjectFixture
+			})
+	})
+
+	it('mounts', () => {
+		mountContentWidget(richObject)
+
+		const title = `${richObject.emoji} ${richObject.title}`
+
+		// Verify the table loaded the richObject
+		// by checking the title
+		cy.get('.tables-content-widget h2').as('heading')
+		cy.get('@heading').contains(title)
+	})
+
+	it('can search rows', () => {
+		mountContentWidget(richObject)
+
+		const searchTerm = 'cat'
+
+		// Search for the row including the above search term
+		cy.get('@searchBar').type(searchTerm)
+
+		// Ensure there is only one resultant row and
+		// verify the row correctly includes the search term
+		cy.get('@rows').its('length').should('equal', 1)
+		cy.get('@rows').first().as('firstRow')
+		cy.get('@firstRow').children().first().contains(searchTerm, { matchCase: false })
+	})
+})
+
+function mountContentWidget(richObject) {
+	cy.intercept({
+		method: 'GET',
+		url: '**/index.php/apps/tables/row/table/*',
+	}, richObject.rows)
+
+	cy.mount(ContentReferenceWidget, {
+		propsData: {
+			richObject,
+		},
+	})
+
+	// Get some often used elements
+	cy.get('.tables-content-widget > .options input').as('searchBar')
+	cy.get('.tables-content-widget .NcTable table').as('table')
+	cy.get('@table').find('tbody tr[data-cy="customTableRow"]').as('rows')
+}

cypress/e2e/column-selection.cy.js

@@ -29,7 +29,7 @@ describe('Test column ' + columnTitle, () => {
 		cy.get('.modal__content h2').contains('Create row').should('be.visible')
 		cy.get('.modal__content .title').contains(columnTitle).should('be.visible')
 		cy.get('.modal__content .title').click()
-		cy.get('.modal__content .select span[title="second option"]').should('be.visible')
+		cy.get('.vs__dropdown-toggle .vs__selected span[title="second option"]').should('exist')
 		cy.get('button').contains('Save').click()
 		cy.get('.custom-table table tr td div').contains('second option').should('be.visible')