CI testing for editor distro, webpack bundling and smoke test (#1675)

Bundle/Test with latest VS Code.

.github/workflows/ci.yml

@@ -0,0 +1,38 @@
+name: Build
+
+on:
+  push:
+  schedule:
+    - cron:  '0 8 * * *'
+
+jobs:
+  build:
+    name: Smoke Test
+    # This job runs on Linux
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 10.x
+      - name: Checkout VS Code
+        run: git clone --depth 1 https://github.com/microsoft/vscode vscode
+      - name: VS Code yarn & Editor Distro
+        working-directory: ./vscode
+        run: |
+          yarn
+          yarn gulp editor-distro
+      - name: NPM Install
+        run: npm install
+      - name: Webpack Bundle
+        run: |
+          npm run bundle
+      - name: Build Tests
+        run: |
+          npm run build-test
+      - name: Run Smoke Test
+        run: |
+          npm run ciserver &
+          sleep 10
+          npm run test

.gitignore

@@ -2,3 +2,8 @@
 /*.iml
 /node_modules/
 /release/
+dist/*.js
+dist/fonts/*
+out-ci/
+.DS_Store
+vscode

CHANGELOG.md

@@ -58,6 +58,7 @@ Contributions to `monaco-typescript`:
   * `autoClosingOvertype`: it controls whether the editor allows [typing over closing quotes or brackets](https://github.com/microsoft/vscode/issues/37315#issuecomment-515200477).
   * `cursorSurroundingLines`: it controls how many visible lines to display around the cursor while moving the cursor towards beginning or end of a file.
   * `renderWhitespace: "selection"`: the editor can render whitespaces only in selection.
+* Deprecate `mouseWheel` event in favor of `wheel`. Scrolling works again in Firefox.
 
 ### API changes
 

ci/core.js

@@ -0,0 +1,25 @@
+import * as monaco from 'monaco-editor-core';
+
+self.MonacoEnvironment = {
+    getWorkerUrl: function (moduleId, label) {
+        return './editor.worker.bundle.js';
+    }
+}
+
+window.instance = monaco.editor.create(document.getElementById('container'), {
+    value: [
+        'from banana import *',
+        '',
+        'class Monkey:',
+        '	# Bananas the monkey can eat.',
+        '	capacity = 10',
+        '	def eat(self, N):',
+        '		\'\'\'Make the monkey eat N bananas!\'\'\'',
+        '		capacity = capacity - N*banana.size',
+        '',
+        '	def feeding_frenzy(self):',
+        '		eat(9.25)',
+        '		return "Yum yum"',
+    ].join('\n'),
+    language: 'python'
+});

ci/core.test.ts

@@ -0,0 +1,135 @@
+import * as puppeteer from 'puppeteer';
+import { assert } from 'chai';
+
+const APP = 'http://127.0.0.1:8080/dist/core.html';
+
+let browser: puppeteer.Browser;
+let page: puppeteer.Page;
+const width = 800;
+const height = 600;
+
+describe('Basic loading', function (): void {
+    this.timeout(20000);
+
+    after(() => {
+        browser.close();
+    });
+
+    it('should fail because page has an error', async () => {
+        browser = await puppeteer.launch({
+            headless: process.argv.indexOf('--headless') !== -1,
+            args: [`--window-size=${width},${height}`, `--no-sandbox`]
+        });
+
+        page = (await browser.pages())[0];
+
+        const pageErrors: any[] = [];
+        page.on('pageerror', (e) => {
+            console.log(e);
+            pageErrors.push(e);
+        });
+
+        page.on('error', (e) => {
+            console.log(e);
+            pageErrors.push(e);
+        });
+
+        await page.goto(APP);
+        this.timeout(20000);
+
+        for (const e of pageErrors) {
+            throw e;
+        }
+    });
+});
+
+describe('API Integration Tests', function (): void {
+    this.timeout(20000);
+
+    before(async function (): Promise<any> {
+        browser = await puppeteer.launch({
+            headless: process.argv.indexOf('--headless') !== -1,
+            args: [`--window-size=${width},${height}`, `--no-sandbox`]
+        });
+        page = (await browser.pages())[0];
+        await page.setViewport({ width, height });
+    });
+
+    after(() => {
+        browser.close();
+    });
+
+    beforeEach(async () => {
+        await page.goto(APP);
+    });
+
+    it('Default initialization should be error-less', async function (): Promise<any> {
+        assert.equal(await page.evaluate(`monaco.editor.DefaultEndOfLine[1]`), 'LF');
+    });
+
+    it('Focus and Type', async function (): Promise<any> {
+        await page.evaluate(`
+        (function () {
+            instance.focus();
+            instance.trigger('keyboard', 'cursorHome');
+            instance.trigger('keyboard', 'type', {
+                text: 'a'
+            });
+        })()
+        `);
+        assert.equal(await page.evaluate(`instance.getModel().getLineContent(1)`), 'afrom banana import *');
+    });
+
+    it('Type and Undo', async function (): Promise<any> {
+        await page.evaluate(`
+        (function () {
+            instance.focus();
+            instance.trigger('keyboard', 'cursorHome');
+            instance.trigger('keyboard', 'type', {
+                text: 'a'
+            });
+            instance.trigger('keyboard', 'undo');
+        })()
+        `);
+        assert.equal(await page.evaluate(`instance.getModel().getLineContent(1)`), 'from banana import *');
+    });
+
+    it('Multi Cursor', async function (): Promise<any> {
+        await page.evaluate(`
+        (function () {
+            instance.focus();
+            instance.trigger('keyboard', 'editor.action.insertCursorBelow');
+            instance.trigger('keyboard', 'editor.action.insertCursorBelow');
+            instance.trigger('keyboard', 'editor.action.insertCursorBelow');
+            instance.trigger('keyboard', 'editor.action.insertCursorBelow');
+            instance.trigger('keyboard', 'editor.action.insertCursorBelow');
+            instance.trigger('keyboard', 'type', {
+                text: '# '
+            });
+            instance.focus();
+        })()
+        `);
+
+        await page.waitFor(1000);
+
+        assert.deepEqual(await page.evaluate(`
+            [
+                instance.getModel().getLineContent(1),
+                instance.getModel().getLineContent(2),
+                instance.getModel().getLineContent(3),
+                instance.getModel().getLineContent(4),
+                instance.getModel().getLineContent(5),
+                instance.getModel().getLineContent(6),
+                instance.getModel().getLineContent(7),
+            ]
+        `), [
+                '# from banana import *',
+                '# ',
+                '# class Monkey:',
+                '# 	# Bananas the monkey can eat.',
+                '# 	capacity = 10',
+                '# 	def eat(self, N):',
+                '\t\t\'\'\'Make the monkey eat N bananas!\'\'\''
+        ]);
+    });
+});

ci/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "dom",
+            "es6",
+        ],
+        "rootDir": ".",
+        "outDir": "../out-ci/",
+        "types": [
+            "../node_modules/@types/mocha"
+        ],
+        "sourceMap": true,
+        "removeComments": true,
+        "pretty": true,
+        "strict": true
+    }
+}

ci/webpack.config.js

@@ -0,0 +1,55 @@
+const path = require('path');
+
+module.exports = {
+    mode: 'production',
+    entry: {
+        "core": './ci/core.js',
+        "editor.worker": './vscode/out-monaco-editor-core/esm/vs/editor/editor.worker.js',
+        "json.worker": 'monaco-json/release/esm/json.worker',
+        "css.worker": 'monaco-css/release/esm/css.worker',
+        "html.worker": 'monaco-html/release/esm/html.worker',
+        "ts.worker": 'monaco-typescript/release/esm/ts.worker',
+    },
+    output: {
+        globalObject: 'self',
+        filename: '[name].bundle.js',
+        path: path.resolve(__dirname, '../dist')
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader'],
+            },
+            {
+                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[ext]',
+                            outputPath: 'fonts/'
+                        }
+                    }
+                ]
+            }
+        ]
+    },
+    resolve: {
+        alias: {
+            'monaco-editor-core/esm/vs/editor/editor.worker': path.resolve(__dirname, '../vscode/out-monaco-editor-core/esm/vs/editor/editor.worker.js'),
+            'monaco-editor-core': path.resolve(__dirname, '../vscode/out-monaco-editor-core/esm/vs/editor/editor.main.js'),
+        }
+    },
+    stats: {
+        all: false,
+        modules: true,
+        maxModules: 0,
+        errors: true,
+        warnings: true,
+        // our additional options
+        moduleTrace: true,
+        errorDetails: true,
+        chunks: true
+    }
+};

dist/core.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+</head>
+
+<body>
+
+    <div id="container" style="width:800px;height:600px;border:1px solid #ccc"></div>
+
+    <script src="./core.bundle.js"></script>
+</body>
+
+</html>

gulpfile.js

@@ -852,3 +852,8 @@ gulp.task('simpleserver', taskSeries(generateTestSamplesTask, function() {
 	createSimpleServer(SERVER_ROOT, 8080);
 	createSimpleServer(SERVER_ROOT, 8088);
 }));
+
+gulp.task('ciserver', taskSeries(generateTestSamplesTask, function () {
+	const SERVER_ROOT = path.normalize(path.join(__dirname, './'));
+	createSimpleServer(SERVER_ROOT, 8080);
+}));

package.json

@@ -9,7 +9,11 @@
     "simpleserver": "gulp simpleserver",
     "release": "gulp release",
     "website": "gulp website",
-    "build-website": "gulp build-website"
+    "build-website": "gulp build-website",
+    "build-test": "tsc -b ./ci/tsconfig.json --preserveWatchOutput",
+    "bundle": "webpack --config ci/webpack.config.js --display-error-details --bail",
+    "test": "mocha \"out-ci/*.test.js\" --headless",
+    "ciserver": "gulp ciserver"
   },
   "typings": "./esm/vs/editor/editor.api.d.ts",
   "module": "./esm/vs/editor/editor.main.js",
@@ -18,21 +22,32 @@
     "url": "https://github.com/Microsoft/monaco-editor"
   },
   "devDependencies": {
+    "@types/chai": "^3.4.34",
+    "@types/mocha": "^2.2.33",
+    "@types/puppeteer": "^1.12.4",
+    "chai": "^4.2.0",
     "clean-css": "^4.2.1",
+    "css-loader": "^3.2.0",
     "event-stream": "3.3.4",
+    "file-loader": "^4.2.0",
     "gulp": "^4.0.0",
     "gulp-typedoc": "^2.2.2",
+    "mocha": "^6.1.4",
     "monaco-css": "2.5.1",
     "monaco-editor-core": "0.18.1",
     "monaco-html": "2.5.3",
     "monaco-json": "2.7.0",
     "monaco-languages": "1.8.0",
     "monaco-typescript": "3.5.1",
+    "puppeteer": "^1.15.0",
     "rimraf": "^2.6.3",
+    "style-loader": "^1.0.0",
     "typedoc": "^0.15.0",
     "typescript": "^3.3.3",
     "uncss": "^0.16.2",
     "vinyl": "^2.2.0",
+    "webpack": "^4.39.3",
+    "webpack-cli": "^3.3.10",
     "yaserver": "^0.1.0"
   }
 }