aragraph in Markdown view', () => { + it('renders timecode with expected clickable link', async () => { + const noteContent = `https://youtu.be/k_ItB5btREU +22:53 - effectiveness characteristics of e2e tests` + await ObsidianApp.createNewNoteWithContent(noteContent) + + await ObsidianApp.toggleReadingView() + + const link = $('//div[contains(@class, "markdown-preview-section")]//a[text()="22:53"]') + await expect(link).toBePresent() + const href = await link.getAttribute('href') + await expect(href).toBe('https://youtu.be/k_ItB5btREU?t=1373') + }) + }) + + context('Link to video and timecode are in different
aragraphs in Markdown view', () => {
+ it('renders timecode with expected clickable link', async () => {
+ const noteContent = `https://youtu.be/k_ItB5btREU
+
+22:53 - effectiveness characteristics of e2e tests`
+ await ObsidianApp.createNewNoteWithContent(noteContent)
+
+ await ObsidianApp.toggleReadingView()
+
+ const link = $('//div[contains(@class, "markdown-preview-section")]//a[text()="22:53"]')
+ await expect(link).toBePresent()
+ const href = await link.getAttribute('href')
+ await expect(href).toBe('https://youtu.be/k_ItB5btREU?t=1373')
+ })
+ })
+
+ context('Timecode is on the same line as video link', () => {
+ it('renders timecode with expected clickable link', async () => {
+ const noteContent = `https://youtu.be/k_ItB5btREU 22:53 - effectiveness characteristics of e2e tests`
+ await ObsidianApp.createNewNoteWithContent(noteContent)
+
+ await ObsidianApp.toggleReadingView()
+
+ const link = $('//div[contains(@class, "markdown-preview-section")]//a[text()="22:53"]')
+ await expect(link).toBePresent()
+ const href = await link.getAttribute('href')
+ await expect(href).toBe('https://youtu.be/k_ItB5btREU?t=1373')
+ })
+ })
+
+ context('There is a markdown link to YouTube video instead of a plain text link', () => {
+ it('renders timecode with expected clickable link', async () => {
+ const noteContent = `[Here](https://youtu.be/k_ItB5btREU) is a great talk about software testing
+
+22:53 - effectiveness characteristics of e2e tests`
+ await ObsidianApp.createNewNoteWithContent(noteContent)
+
+ await ObsidianApp.toggleReadingView()
+
+ const link = $('//div[contains(@class, "markdown-preview-section")]//a[text()="22:53"]')
+ await expect(link).toBePresent()
+ const href = await link.getAttribute('href')
+ await expect(href).toBe('https://youtu.be/k_ItB5btREU?t=1373')
+ })
+ })
+
+ context('The video is embedded with
+
+22:53 - effectiveness characteristics of e2e tests`
+ await ObsidianApp.createNewNoteWithContent(noteContent)
+
+ await ObsidianApp.toggleReadingView()
+
+ const link = $('//div[contains(@class, "markdown-preview-section")]//a[text()="22:53"]')
+ await expect(link).toBePresent()
+ const href = await link.getAttribute('href')
+ await expect(href).toBe('https://youtu.be/k_ItB5btREU?t=1373')
+ })
+ })
+
+ context('There are multiple videos', () => {
+ it('renders timecodes with expected clickable link', async () => {
+ const noteContent = `https://www.youtube.com/watch?v=Z5n9VK3sOnI Understanding Gradle classpaths
+
+14:27 a use case for 'api' dependency configuration
+
+https://youtu.be/Lipf5piizZc Another video about Gradle
+
+4:07 - using dependency analysis plugin
+
+https://www.youtube.com/watch?v=k_ItB5btREU
+
+22:53 - effectiveness characteristics of e2e tests`
+ await ObsidianApp.createNewNoteWithContent(noteContent)
+
+ await ObsidianApp.toggleReadingView()
+
+ let link = $('//div[contains(@class, "markdown-preview-section")]//a[text()="14:27"]')
+ await expect(link).toBePresent()
+ let href = await link.getAttribute('href')
+ await expect(href).toBe('https://youtu.be/Z5n9VK3sOnI?t=867')
+
+ link = $('//div[contains(@class, "markdown-preview-section")]//a[text()="4:07"]')
+ await expect(link).toBePresent()
+ href = await link.getAttribute('href')
+ await expect(href).toBe('https://youtu.be/Lipf5piizZc?t=247')
+
+ link = $('//div[contains(@class, "markdown-preview-section")]//a[text()="22:53"]')
+ await expect(link).toBePresent()
+ href = await link.getAttribute('href')
+ await expect(href).toBe('https://youtu.be/k_ItB5btREU?t=1373')
+ })
+ })
+
+ context('There are multiple videos with mixed links types', () => {
+ it('renders timecodes with expected clickable link', async () => {
+ const noteContent = `https://www.youtube.com/watch?v=Z5n9VK3sOnI Understanding Gradle classpaths
+
+14:27 a use case for 'api' dependency configuration
+
+[Another video](https://youtu.be/Lipf5piizZc) about Gradle
+
+4:07 - using dependency analysis plugin
+
+
+
+22:53 - effectiveness characteristics of e2e tests`
+ await ObsidianApp.createNewNoteWithContent(noteContent)
+
+ await ObsidianApp.toggleReadingView()
+
+ let link = $('//div[contains(@class, "markdown-preview-section")]//a[text()="14:27"]')
+ await expect(link).toBePresent()
+ let href = await link.getAttribute('href')
+ await expect(href).toBe('https://youtu.be/Z5n9VK3sOnI?t=867')
+
+ link = $('//div[contains(@class, "markdown-preview-section")]//a[text()="4:07"]')
+ await expect(link).toBePresent()
+ href = await link.getAttribute('href')
+ await expect(href).toBe('https://youtu.be/Lipf5piizZc?t=247')
+
+ link = $('//div[contains(@class, "markdown-preview-section")]//a[text()="22:53"]')
+ await expect(link).toBePresent()
+ href = await link.getAttribute('href')
+ await expect(href).toBe('https://youtu.be/k_ItB5btREU?t=1373')
+ })
+ })
+
+ context('There are multiple videos', () => {
+ it('preserves the content of a note AS-IS', async () => {
+ const noteContent = `https://www.youtube.com/watch?v=Z5n9VK3sOnI Understanding Gradle classpaths
+
+14:27 a use case for 'api' dependency configuration; https://youtu.be/Lipf5piizZc 4:07 - using dependency analysis plugin
+
+https://www.youtube.com/watch?v=k_ItB5btREU
+
+22:53 - effectiveness characteristics of e2e tests`
+ await ObsidianApp.createNewNoteWithContent(noteContent)
+
+ await ObsidianApp.toggleReadingView()
+
+ /**
+ * It's important to wait a bit here for note's content to get rendered in reading mode
+ */
+ // eslint-disable-next-line wdio/no-pause
+ await browser.pause(100)
+
+ // eslint-disable-next-line @typescript-eslint/await-thenable, @typescript-eslint/no-base-to-string
+ const textFromAllNoteParagraphs = await $$('.markdown-preview-section p:not(.mod-ui)')
+ .map(p => p.getText())
+ .join('\n\n')
+ await expect(textFromAllNoteParagraphs).toBe(noteContent)
+ })
+ })
+})
diff --git a/e2e/specs/pageobjects/obsidian-app.page.ts b/e2e/specs/pageobjects/obsidian-app.page.ts
new file mode 100644
index 0000000..148e16a
--- /dev/null
+++ b/e2e/specs/pageobjects/obsidian-app.page.ts
@@ -0,0 +1,84 @@
+import * as fs from 'node:fs/promises'
+
+import { App } from 'obsidian'
+
+import { TEST_VAULT_DIR, TIMECODES_PLUGIN_ID } from '../../constants'
+
+class ObsidianApp {
+ async removeE2eTestVaultIfExists() {
+ await fs.rm(TEST_VAULT_DIR, { force: true, recursive: true })
+ }
+
+ async createAndOpenFreshVault() {
+ await browser.execute((testVaultDir: string) => {
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
+ const { ipcRenderer } = require('electron')
+ const shouldCreateNewVault = true
+ ipcRenderer.sendSync('vault-open', testVaultDir, shouldCreateNewVault)
+ }, TEST_VAULT_DIR)
+
+ const targetPluginsDir = `${TEST_VAULT_DIR}/.obsidian/plugins/${TIMECODES_PLUGIN_ID}/`
+ await fs.mkdir(targetPluginsDir, { recursive: true })
+ await fs.copyFile('../manifest.json', `${targetPluginsDir}/manifest.json`)
+ await fs.copyFile('../out/main.js', `${targetPluginsDir}/main.js`)
+
+ await this.switchToMainWindow()
+ await $('button=Trust author and enable plugins').click()
+ await this.closeModal('Trust vault modal')
+ }
+
+ private async switchToMainWindow() {
+ await browser.switchWindow('app://obsidian.md/index.html')
+ }
+
+ async activateTimecodesPlugin() {
+ await this.activatePlugin(TIMECODES_PLUGIN_ID)
+ }
+
+ private async activatePlugin(pluginId: string) {
+ await browser.execute((imgurPluginId: string) => {
+ // @ts-expect-error 'app' exists in Obsidian
+ declare const app: App
+ app.plugins.setEnable(true)
+ app.plugins.enablePlugin(imgurPluginId)
+ }, pluginId)
+ }
+
+ async closeModal(modalName: string) {
+ console.log(`Closing '${modalName}'`)
+ await $('.modal-close-button').click()
+ }
+
+ async createNewNoteWithContent(content: string) {
+ await this.doCreateNewNote(content)
+ }
+
+ async createNewNote() {
+ await this.doCreateNewNote()
+ }
+
+ private async doCreateNewNote(content?: string) {
+ const newNoteButton = $('aria/New note')
+ await newNoteButton.click()
+
+ const noteContent = $('.workspace-leaf.mod-active .cm-contentContainer')
+ await noteContent.click()
+ if (content) {
+ await browser.execute((content: string) => {
+ // @ts-expect-error 'app' exists in Obsidian
+ declare const app: App
+ app.workspace.activeEditor!.editor!.setValue(content)
+ }, content)
+ }
+ }
+
+ async toggleReadingView() {
+ await browser.execute(() => {
+ // @ts-expect-error 'app' exists in Obsidian
+ declare const app: App
+ app.commands.executeCommandById('markdown:toggle-preview')
+ })
+ }
+}
+
+export default new ObsidianApp()
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
new file mode 100644
index 0000000..5c45722
--- /dev/null
+++ b/e2e/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "moduleResolution": "node",
+ "module": "ESNext",
+ "target": "es2022",
+ "lib": [
+ "es2022",
+ "dom"
+ ],
+ "types": [
+ "node",
+ "@wdio/globals/types",
+ "expect-webdriverio",
+ "@wdio/mocha-framework"
+ ],
+ "skipLibCheck": true,
+ "noEmit": true,
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": [
+ "**/*.ts",
+ ],
+}
diff --git a/e2e/types/obsidian.d.ts b/e2e/types/obsidian.d.ts
new file mode 100644
index 0000000..98d36e9
--- /dev/null
+++ b/e2e/types/obsidian.d.ts
@@ -0,0 +1,14 @@
+import Plugin from 'obsidian'
+
+declare module 'obsidian' {
+ interface App {
+ plugins: {
+ plugins: Record