enh: add e2e tests for document list

cypress/e2e/documents.cy.ts

@@ -0,0 +1,46 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../support/index.d.ts" />
+
+describe('Documents', () => {
+	const timestamp = Date.now();
+
+	before(() => {
+		cy.uploadTestDocument(timestamp);
+	});
+
+	after(() => {
+		cy.deleteTestDocument(timestamp);
+	});
+
+	context('Admin', () => {
+		beforeEach(() => {
+			// Login as the admin user
+			cy.loginAdmin();
+			// Visit the home page
+			cy.visit('/workspace/documents');
+			cy.get('button').contains('#cypress-test').click();
+		});
+
+		it('can see documents', () => {
+			cy.get('div').contains(`document-test-initial-${timestamp}.txt`).should('have.length', 1);
+		});
+
+		it('can see edit button', () => {
+			cy.get('div')
+				.contains(`document-test-initial-${timestamp}.txt`)
+				.get("button[aria-label='Edit Doc']")
+				.should('exist');
+		});
+
+		it('can see delete button', () => {
+			cy.get('div')
+				.contains(`document-test-initial-${timestamp}.txt`)
+				.get("button[aria-label='Delete Doc']")
+				.should('exist');
+		});
+
+		it('can see upload button', () => {
+			cy.get("button[aria-label='Add Docs']").should('exist');
+		});
+	});
+});

cypress/support/e2e.ts

@@ -1,4 +1,6 @@
 /// <reference types="cypress" />
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../support/index.d.ts" />
 
 export const adminUser = {
 	name: 'Admin User',
@@ -10,6 +12,9 @@ const login = (email: string, password: string) => {
 	return cy.session(
 		email,
 		() => {
+			// Make sure to test against us english to have stable tests,
+			// regardless on local language preferences
+			localStorage.setItem('locale', 'en-US');
 			// Visit auth page
 			cy.visit('/auth');
 			// Fill out the form
@@ -68,6 +73,50 @@ Cypress.Commands.add('register', (name, email, password) => register(name, email
 Cypress.Commands.add('registerAdmin', () => registerAdmin());
 Cypress.Commands.add('loginAdmin', () => loginAdmin());
 
+Cypress.Commands.add('uploadTestDocument', (suffix: any) => {
+	// Login as admin
+	cy.loginAdmin();
+	// upload example document
+	cy.visit('/workspace/documents');
+	// Create a document
+	cy.get("button[aria-label='Add Docs']").click();
+	cy.readFile('cypress/data/example-doc.txt').then((text) => {
+		// select file
+		cy.get('#upload-doc-input').selectFile(
+			{
+				contents: Cypress.Buffer.from(text + Date.now()),
+				fileName: `document-test-initial-${suffix}.txt`,
+				mimeType: 'text/plain',
+				lastModified: Date.now()
+			},
+			{
+				force: true
+			}
+		);
+		// open tag input
+		cy.get("button[aria-label='Add Tag']").click();
+		cy.get("input[placeholder='Add a tag']").type('cypress-test');
+		cy.get("button[aria-label='Save Tag']").click();
+
+		// submit to upload
+		cy.get("button[type='submit']").click();
+
+		// wait for upload to finish
+		cy.get('button').contains('#cypress-test').should('exist');
+		cy.get('div').contains(`document-test-initial-${suffix}.txt`).should('exist');
+	});
+});
+
+Cypress.Commands.add('deleteTestDocument', (suffix: any) => {
+	cy.loginAdmin();
+	cy.visit('/workspace/documents');
+	// clean up uploaded documents
+	cy.get('div')
+		.contains(`document-test-initial-${suffix}.txt`)
+		.find("button[aria-label='Delete Doc']")
+		.click();
+});
+
 before(() => {
 	cy.registerAdmin();
 });

cypress/support/index.d.ts

@@ -7,5 +7,7 @@ declare namespace Cypress {
 		register(name: string, email: string, password: string): Chainable<Element>;
 		registerAdmin(): Chainable<Element>;
 		loginAdmin(): Chainable<Element>;
+		uploadTestDocument(suffix: any): Chainable<Element>;
+		deleteTestDocument(suffix: any): Chainable<Element>;
 	}
 }

src/lib/components/common/Tags/TagInput.svelte

@@ -42,7 +42,7 @@
 				{/each}
 			</datalist>
 
-			<button type="button" on:click={addTagHandler}>
+			<button type="button" aria-label={$i18n.t('Save Tag')} on:click={addTagHandler}>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					viewBox="0 0 16 16"
@@ -63,6 +63,7 @@
 	<button
 		class=" cursor-pointer self-center p-0.5 flex h-fit items-center dark:hover:bg-gray-700 rounded-full transition border dark:border-gray-600 border-dashed"
 		type="button"
+		aria-label={$i18n.t('Add Tag')}
 		on:click={() => {
 			showTagInput = !showTagInput;
 		}}

src/lib/components/workspace/Documents.svelte

@@ -244,6 +244,7 @@
 	<div>
 		<button
 			class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
+			aria-label={$i18n.t('Add Docs')}
 			on:click={() => {
 				showAddDocModal = true;
 			}}
@@ -446,6 +447,7 @@
 				<button
 					class="self-center w-fit text-sm z-20 px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 					type="button"
+					aria-label={$i18n.t('Edit Doc')}
 					on:click={async (e) => {
 						e.stopPropagation();
 						showEditDocModal = !showEditDocModal;
@@ -493,6 +495,7 @@
 				<button
 					class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 					type="button"
+					aria-label={$i18n.t('Delete Doc')}
 					on:click={(e) => {
 						e.stopPropagation();