🚧 (#107): Add outline view

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>

2 files changed, 82 insertions, 0 deletions

diff --git a/cypress/e2e/outline.spec.js b/cypress/e2e/outline.spec.js
new file mode 100644
index 000000000..0d97da7b6
--- /dev/null
+++ b/cypress/e2e/outline.spec.js
@@ -0,0 +1,74 @@
+import { randHash } from '../utils/index.js'
+
+const currentUser = randHash()
+
+const refresh = () => cy.get('.files-controls .crumb:not(.hidden) a')
+	.last()
+	.click({ force: true })
+
+const clickOutline = () => {
+	cy.getActionEntry('headings')
+		.click()
+
+	cy.get('.popover.open').getActionEntry('outline')
+		.click()
+}
+
+const createMarkdown = (fileName, content) => {
+	return cy.createFile(fileName, content, 'text/markdown')
+		.then(refresh)
+}
+
+describe('Table of Contents', () => {
+	before(() => {
+		// Init user
+		cy.nextcloudCreateUser(currentUser, 'password')
+		cy.login(currentUser, 'password')
+	})
+
+	beforeEach(() => {
+		cy.login(currentUser, 'password')
+	})
+
+	it('sidebar toc', () => {
+		const fileName = 'toc.md'
+
+		createMarkdown(fileName, '# T1 \n ## T2 \n ### T3 \n #### T4 \n ##### T5 \n ###### T6')
+			.then(refresh)
+			.then(() => cy.openFile(fileName, { force: true }))
+			.then(clickOutline)
+
+		cy.getOutline()
+			.find('header')
+			.should('exist')
+
+		cy.getTOC()
+			.find('ul li')
+			.should('have.length', 6)
+		cy.getTOC()
+			.find('ul li')
+			.each((el, index) => {
+				cy.wrap(el)
+					.should('have.attr', 'data-toc-level')
+					.and('equal', String(index + 1))
+
+				cy.wrap(el)
+					.find('a')
+					.should('have.attr', 'href')
+					.and('equal', `#t${index + 1}`)
+			})
+	})
+
+	it('empty toc', () => {
+		const fileName = 'empty.md'
+
+		createMarkdown(fileName, '')
+			.then(refresh)
+			.then(() => cy.openFile(fileName, { force: true }))
+			.then(clickOutline)
+
+		cy.getOutline()
+			.find('header')
+			.should('not.exist')
+	})
+})
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index f8c5e6bd7..e3387a885 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -248,6 +248,14 @@ Cypress.Commands.add('getContent', () => {
 	return cy.getEditor().find('.ProseMirror')
 })
 
+Cypress.Commands.add('getOutline', () => {
+	return cy.getEditor().find('[data-text-el="editor-outline"]')
+})
+
+Cypress.Commands.add('getTOC', () => {
+	return cy.getEditor().find('[data-text-el="editor-table-of-contents"]')
+})
+
 Cypress.Commands.add('clearContent', () => {
 	return cy.getContent()
 		.type('{selectall}')