Add outline integration testing! (#40)

Author: zardoy

.eslintignore

@@ -4,3 +4,4 @@ src/configurationType.ts
 src/configurationTypeCache.jsonc
 playground.ts
 test.ts
+integration/fixtures

.gitignore

@@ -6,6 +6,7 @@ generators
 build
 dist
 out
+testsOut
 .next
 .nuxt
 .cache

README.ext.md

@@ -0,0 +1,5 @@
+{
+    "include": [
+        "src"
+    ]
+}

integration/fixtures/test-project-js/jsconfig.json

@@ -0,0 +1,19 @@
+const Component = () => {
+    return (
+        <div className="main__wrap">
+            <main className="container">
+                <div className="card__box">
+                    <NavBar totalCounters={this.state.counters.filter(c => c.value > 0).length} />
+                    <Counters
+                        counters={this.state.counters}
+                        onReset={this.handleReset}
+                        onIncrement={this.handleIncrement}
+                        onDecrement={this.handleDecrement}
+                        onDelete={this.handleDelete}
+                        onRestart={this.handleRestart}
+                    />
+                </div>
+            </main>
+        </div>
+    )
+}

integration/fixtures/test-project-js/src/index.jsx

@@ -0,0 +1,30 @@
+import { join } from 'path'
+import glob from 'glob'
+import Mocha from 'mocha'
+
+export const run = async () => {
+    const mocha = new Mocha({
+        color: true,
+        parallel: false,
+        timeout: process.env.CI ? 4500 : 2000,
+    })
+    const testsRoot = join(__dirname, './suite')
+    await new Promise<void>(resolve => {
+        glob('**/**.test.js', { cwd: testsRoot }, (err, files) => {
+            if (err) throw err
+
+            for (const file of files) mocha.addFile(join(testsRoot, file))
+
+            mocha.run(failures => {
+                if (failures > 0) {
+                    console.error(`${failures} tests failed.`)
+                    setImmediate(() => {
+                        process.exit(1)
+                    })
+                } else {
+                    resolve()
+                }
+            })
+        })
+    })
+}

integration/index.ts

@@ -0,0 +1,10 @@
+//@ts-check
+import fs from 'fs'
+
+try {
+    fs.unlinkSync('.vscode-test/user-data/User/settings.json')
+} catch {}
+
+try {
+    fs.unlinkSync('out/plugin-config.json')
+} catch {}

integration/prerun.mjs

@@ -0,0 +1,19 @@
+import { join } from 'path'
+import { runTests } from '@vscode/test-electron'
+
+async function main() {
+    try {
+        await runTests({
+            version: 'stable',
+            extensionDevelopmentPath: join(__dirname, '../out'),
+            extensionTestsPath: join(__dirname, './index'),
+            launchArgs: ['--disable-extensions'],
+        })
+    } catch (error) {
+        console.error(error)
+        console.error('Failed to run tests')
+        process.exit(1)
+    }
+}
+
+void main()

integration/runTests.ts

@@ -0,0 +1,177 @@
+import * as vscode from 'vscode'
+import delay from 'delay'
+import dedent from 'string-dedent'
+
+import { expect } from 'chai'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
+//@ts-ignore
+import type { Configuration } from '../../src/configurationType'
+import { fromFixtures, replaceEditorText } from './utils'
+
+describe('Outline', () => {
+    const content = dedent/* tsx */ `
+      const classes = {
+          header: '...',
+          title: '...'
+      }
+      function A() {
+          return <Notification className="test another" id="yes">
+              before
+              <div id="ok">
+                  <div />
+                  <span class="good" />
+              </div>
+              after
+          </Notification>
+      }
+    `
+
+    let document: vscode.TextDocument
+    const editor = () => vscode.window.activeTextEditor!
+
+    const getOutline = async () => vscode.commands.executeCommand('vscode.executeDocumentSymbolProvider', document.uri) as any
+
+    // let editor: vscode.TextEditor
+    const startPos = new vscode.Position(0, 0)
+    before(async () => {
+        const configKey: keyof Configuration = 'patchOutline'
+        const configValue: Configuration['patchOutline'] = true
+        await vscode.workspace.getConfiguration('tsEssentialPlugins').update(configKey, configValue, vscode.ConfigurationTarget.Global)
+        await delay(600)
+        await vscode.workspace
+            .openTextDocument({
+                content,
+                language: 'typescriptreact',
+            })
+            .then(async newDocument => {
+                document = newDocument
+                /* editor =  */ await vscode.window.showTextDocument(document)
+            })
+    })
+
+    it('Outline untitled works', async () => {
+        console.time('get outline')
+        const data = await getOutline()
+        console.timeEnd('get outline')
+        expect(simplifyOutline(data)).to.deep.equal([
+            {
+                name: 'A',
+                children: [
+                    {
+                        name: 'Notification.test.another#yes',
+                        children: [
+                            {
+                                name: 'div#ok',
+                                children: [
+                                    {
+                                        name: 'div',
+                                    },
+                                    {
+                                        name: 'span.good',
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ])
+        await vscode.commands.executeCommand('workbench.action.closeActiveEditor')
+    })
+
+    describe('Outline in js project', () => {
+        it('Initial', async () => {
+            await vscode.commands.executeCommand('vscode.openFolder', vscode.Uri.file(fromFixtures('test-project-js')))
+            await delay(500)
+            await vscode.commands.executeCommand('vscode.open', vscode.Uri.file(fromFixtures('test-project-js/src/index.jsx')))
+            await delay(600)
+            document = editor().document
+            const data = await getOutline()
+            expect(simplifyOutline(data)).to.deep.equal(jsProjectExpectedOutline())
+            await vscode.commands.executeCommand('workbench.action.closeActiveEditor')
+        })
+
+        it('Reopen', async () => {
+            await delay(500)
+            await vscode.commands.executeCommand('vscode.open', vscode.Uri.file(fromFixtures('test-project-js/src/index.jsx')))
+            await delay(600)
+            document = editor().document
+            const data = await getOutline()
+            expect(simplifyOutline(data)).to.deep.equal(jsProjectExpectedOutline())
+        })
+
+        it('Text change', async () => {
+            const searchText = 'NavBar'
+            const componentEndPos = document.positionAt(document.getText().indexOf(searchText) + searchText.length)
+            await replaceEditorText(editor(), new vscode.Range(componentEndPos.translate(0, -1), componentEndPos), '2')
+            await delay(500)
+            const data = await getOutline()
+            expect(simplifyOutline(data)).to.deep.equal(jsProjectExpectedOutline('NavBa2'))
+        })
+
+        it('Text change right after TSServer restart', async () => {
+            void vscode.commands.executeCommand('typescript.restartTsServer')
+            const searchText = 'NavBa2'
+            const componentEndPos = document.positionAt(document.getText().indexOf(searchText) + searchText.length)
+            await editor().edit(builder => {
+                builder.replace(new vscode.Range(componentEndPos.translate(0, -1), componentEndPos), '3')
+            })
+            await delay(800)
+            const data = await getOutline()
+            expect(simplifyOutline(data)).to.deep.equal(jsProjectExpectedOutline('NavBa3'))
+        })
+
+        it('Text change with no syntax server', async () => {
+            await vscode.workspace.getConfiguration('typescript').update('tsserver.useSyntaxServer', 'never', vscode.ConfigurationTarget.Global)
+            // void vscode.commands.executeCommand('typescript.restartTsServer')
+            await delay(300)
+            const searchText = 'NavBa3'
+            const componentEndPos = document.positionAt(document.getText().indexOf(searchText) + searchText.length)
+            await editor().edit(builder => {
+                builder.replace(new vscode.Range(componentEndPos.translate(0, -1), componentEndPos), '4')
+            })
+            await delay(800)
+            const data = await getOutline()
+            expect(simplifyOutline(data)).to.deep.equal(jsProjectExpectedOutline('NavBa4'))
+        }).timeout(8000)
+    })
+})
+
+const jsProjectExpectedOutline = (navbarPosName = 'NavBar') => [
+    {
+        name: 'Component',
+        children: [
+            {
+                name: 'div.main__wrap',
+                children: [
+                    {
+                        name: 'main.container',
+                        children: [
+                            {
+                                name: 'div.card__box',
+                                children: [
+                                    {
+                                        name: navbarPosName,
+                                    },
+                                    {
+                                        name: 'Counters',
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+]
+
+const simplifyOutline = (items: Array<vscode.SymbolInformation & vscode.DocumentSymbol>) => {
+    const newItems: Array<{ name: any; children? }> = []
+    for (const { children, name } of items) {
+        if (name === 'classes') continue
+        newItems.push({ name, ...(children?.length ? { children: simplifyOutline(children as any) } : {}) })
+    }
+
+    return newItems
+}

integration/suite/outline.test.ts

@@ -0,0 +1,41 @@
+import { join } from 'path'
+import * as vscode from 'vscode'
+
+export const fromFixtures = (path: string) => join(__dirname, '../../integration/fixtures', path)
+
+export const clearEditorText = async (editor: vscode.TextEditor, resetContent = '') => {
+    await new Promise<void>(resolve => {
+        const { document } = editor
+        if (document.getText() === resetContent) {
+            resolve()
+            return
+        }
+
+        const { dispose } = vscode.workspace.onDidChangeTextDocument(({ document }) => {
+            if (document.uri !== editor.document.uri) return
+            dispose()
+            resolve()
+        })
+        void editor.edit(builder =>
+            builder.replace(new vscode.Range(new vscode.Position(0, 0), document.lineAt(document.lineCount - 1).range.end), resetContent),
+        )
+    })
+}
+
+export const replaceEditorText = async (editor: vscode.TextEditor, range: vscode.Range, text: string) => {
+    await new Promise<void>(resolve => {
+        const { document } = editor
+        if (document.getText(range) === text) {
+            resolve()
+            return
+        }
+
+        // eslint-disable-next-line sonarjs/no-identical-functions
+        const { dispose } = vscode.workspace.onDidChangeTextDocument(({ document }) => {
+            if (document.uri !== editor.document.uri) return
+            dispose()
+            resolve()
+        })
+        void editor.edit(builder => builder.replace(range, text))
+    })
+}