Merge pull request #42 from jupyterlab/testing

Add tests

.editorconfig

@@ -19,7 +19,8 @@ insert_final_newline = true
 
 # Set properties for JavaScript files:
 [*.js]
-indent_style = tab
+indent_style = space
+indent_size = 2
 
 # Set properties for TypeScript files:
 [*.ts]

.github/workflows/test.yml

@@ -0,0 +1,26 @@
+on: [push, pull_request]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-python@v1
+        with:
+          python-version: "3.6"
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "10.x"
+      - run: python -m pip install --upgrade pip
+      - run: pip install jupyterlab
+      - run: jlpm run build
+      - run: jupyter labextension install . @jupyterlab/dataregistry-extension --debug-log-path log.txt
+      - if: failure()
+        run: cat log.txt
+      - run: jlpm run test
+      - name: upload screenshots
+        if: failure()
+        uses: actions/upload-artifact@v1
+        with:
+          name: screenshots
+          path: screenshots

.gitignore

@@ -118,3 +118,4 @@ node_modules/
 # npm
 yarn.lock
 package-lock.json
+screenshots

CONTRIBUTING.md

@@ -159,6 +159,23 @@ Tests should accompany **all** bug fixes and features. For guidance on how to wr
 
 Any [pull requests][github-pull-request] which include failing tests and/or lint errors will **not** be accepted.
 
+To run the tests:
+
+```bash
+$ jlpm run test
+```
+
+You can also run the tests with a browser GUI for debugging with:
+
+```bash
+$ jlpm run test:debug
+```
+
+If a test fails, a screenshot will be taken of the current state of the browser and
+saved in the `./screenshots` folder for debugging.
+
+If they fail in CI, this folder will be provided as an archive you can download from the Github Actions UI.
+
 #### Step 7: Push
 
 Push your changes to your remote GitHub repository.

jest-environment.js

@@ -0,0 +1,40 @@
+/**
+ * @license BSD-3-Clause
+ *
+ * Copyright (c) 2019 Project Jupyter Contributors.
+ * Distributed under the terms of the 3-Clause BSD License.
+ */
+
+// Based on from https://yarnpkg.com/en/package/@rws-air/jestscreenshot
+
+const PuppeteerEnvironment = require('jest-environment-puppeteer');
+const JestScreenshot = require('@rws-air/jestscreenshot');
+
+class CustomEnvironment extends PuppeteerEnvironment {
+  async setup() {
+    await super.setup();
+  }
+  async teardown() {
+    await this.global.page.waitFor(2000);
+    await super.teardown();
+  }
+
+  async handleTestEvent(event, state) {
+    if (event.name === 'test_fn_failure') {
+      const testName = state.currentlyRunningTest.name;
+
+      const jestScreenshot = new JestScreenshot({
+        page: this.global.page,
+        dirName: __dirname,
+        testName
+      });
+
+      await jestScreenshot.setup();
+    }
+  }
+}
+
+/**
+ * Exports.
+ */
+module.exports = CustomEnvironment;

jest-puppeteer.config.js

@@ -0,0 +1,23 @@
+/**
+ * @license BSD-3-Clause
+ *
+ * Copyright (c) 2019 Project Jupyter Contributors.
+ * Distributed under the terms of the 3-Clause BSD License.
+ */
+
+const config = {
+  launch: {
+    headless: process.env.HEADLESS !== 'false',
+    slowMo: process.env.SLOWMO === 'true'
+  },
+  // https://github.com/smooth-code/jest-puppeteer/tree/master/packages/jest-dev-server#options
+  server: {
+    command: "jupyter lab --port 8080 --no-browser --LabApp.token=''",
+    port: 8080
+  }
+};
+
+/**
+ * Exports.
+ */
+module.exports = config;

jest.config.js

@@ -0,0 +1,36 @@
+/**
+ * @license BSD-3-Clause
+ *
+ * Copyright (c) 2019 Project Jupyter Contributors.
+ * Distributed under the terms of the 3-Clause BSD License.
+ */
+
+const { defaults: tsjPreset } = require('ts-jest/presets');
+
+const config = {
+  rootDir: '.',
+
+  // Needed for jest-screenshots
+  testRunner: 'jest-circus/runner',
+
+  testEnvironment: './jest-environment.js',
+  globalSetup: 'jest-environment-puppeteer/setup',
+  globalTeardown: 'jest-environment-puppeteer/teardown',
+  setupFilesAfterEnv: ['expect-puppeteer'],
+  transform: {
+    ...tsjPreset.transform
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  testMatch: ['**/test/**/test*.ts?(x)'],
+  testPathIgnorePatterns: ['/build/', '/lib/', '/node_modules/'],
+  globals: {
+    'ts-jest': {
+      tsConfig: './tsconfig.test.json'
+    }
+  }
+};
+
+/**
+ * Exports.
+ */
+module.exports = config;

package.json

@@ -49,6 +49,8 @@
     "prettier": "prettier --write '**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}'",
     "prettier:check": "prettier --list-different '**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}'",
     "rebuild:packages": "jlpm run clean:packages && jlpm run build:packages",
+    "test": "jest --runInBand",
+    "test:debug": "env HEADLESS=false SLOWMO=true jlpm test",
     "uninstall:extensions": "jupyter labextension uninstall --all --no-build",
     "unlink": "jlpm run unlink:packages",
     "unlink:packages": "jupyter labextension unlink ./ --no-build || echo 'Unlink command failed, but continuing...'"
@@ -61,6 +63,7 @@
   "dependencies": {
     "@jupyterlab/application": "^1.0.0",
     "@phosphor/coreutils": "^1.3.0",
+    "jest-environment-puppeteer": "4.3.0",
     "jsonld": "1.6.2",
     "react": "^16.4.2"
   },
@@ -71,14 +74,25 @@
   },
   "devDependencies": {
     "@jupyterlab/dataregistry-extension": "^3.0.0",
-    "@types/jsonld": "1.5.0",
+    "@rws-air/jestscreenshot": "^3.0.3",
+    "@types/expect-puppeteer": "^3.3.2",
+    "@types/jest": "^24.0.19",
+    "@types/jest-environment-puppeteer": "^4.3.1",
+    "@types/jsonld": "^1.5.0",
+    "@types/puppeteer": "^1.20.2",
+    "husky": "^3.0.9",
+    "jest": "^24.9.0",
+    "jest-circus": "^24.9.0",
+    "jest-puppeteer": "^4.3.0",
     "husky": "^3.0.9",
     "lint-staged": "^9.4.2",
     "prettier": "^1.18.2",
+    "puppeteer": "^2.0.0",
     "rimraf": "~2.6.2",
-    "stylelint": "11.0.0",
-    "stylelint-config-prettier": "6.0.0",
-    "stylelint-config-standard": "19.0.0",
+    "stylelint": "^11.0.0",
+    "stylelint-config-prettier": "^6.0.0",
+    "stylelint-config-standard": "^19.0.0",
+    "ts-jest": "^24.1.0",
     "tslint": "^5.20.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.0.1",

test/ui/test.ts

@@ -0,0 +1,104 @@
+/**
+ * @license BSD-3-Clause
+ *
+ * Copyright (c) 2019 Project Jupyter Contributors.
+ * Distributed under the terms of the 3-Clause BSD License.
+ */
+
+import { ElementHandle } from 'puppeteer';
+
+const { setDefaultOptions } = require('expect-puppeteer');
+
+const timeout = 15 * 1000;
+
+jest.setTimeout(timeout);
+setDefaultOptions({ timeout });
+
+async function getXPath(xpath: string): Promise<ElementHandle<Element>> {
+  await page.waitForXPath(xpath);
+  const elements = await page.$x(xpath);
+  expect(elements.length).toBe(1);
+  return elements[0];
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+describe('JupyterLab', () => {
+  beforeAll(async () => {
+    // Load JupyterLab:
+    await page.goto('http://localhost:8080/lab?reset');
+
+    // NOTE: depending on system resource constraints, this may NOT be enough time for JupyterLab to load and get "settled", so to speak. If CI tests begin inexplicably failing due to timeout failures, may want to consider increasing the sleep duration...
+    await sleep(3000);
+
+    // Attempt to find the data explorer tab on the page (all tests essentially presume that we can load the data explorer via the tab bar button):
+    const el = await page.$('[title="Data Explorer"]');
+    if (el !== null) {
+      // Clicking on the data explorer tab should open the data explorer, thus allowing us to test data explorer UI interactions:
+      el.click();
+    } else {
+      console.log('Unable to find expected tab.');
+    }
+  });
+
+  it('should show JupyterLab logo', async () => {
+    expect.assertions(1);
+    await expect(page).toMatchElement('#jp-MainLogo', { visible: true } as any);
+  });
+
+  it("show be able to show 'Data Explorer' tab", async () => {
+    expect.assertions(1);
+    await expect(page).toMatchElement('.jl-explorer-heading', {
+      text: 'Datasets',
+      visible: true
+    } as any);
+  });
+
+  it('should see files marker', async () => {
+    expect.assertions(1);
+    await expect(page).toMatchElement('h3', {
+      text: 'file:///',
+      visible: true
+    } as any);
+  });
+
+  it('should be able to expand files', async () => {
+    expect.assertions(1);
+    const filebutton = await getXPath('//button[../h3/text()="file:///"]');
+    await filebutton.click();
+  });
+
+  it('should see datasets.yml marker', async () => {
+    expect.assertions(1);
+    await expect(page).toMatchElement('h3', {
+      text: 'datasets.yml',
+      visible: true
+    } as any);
+  });
+
+  it('should be able to expand datasets.yml', async () => {
+    expect.assertions(1);
+    const datasetsButton = await getXPath(
+      '//button[../h3/text()="datasets.yml"]'
+    );
+    await datasetsButton.click();
+  });
+
+  it('should show datasets label', async () => {
+    expect.assertions(1);
+    await expect(page).toMatchElement('h3', {
+      text: 'A Publication',
+      visible: true
+    } as any);
+  });
+
+  it("show be able to show 'Data Browser' tab", async () => {
+    expect.assertions(2);
+    await expect(page).toClick('[title="Data Browser"]');
+    await expect(page).toMatchElement('.jl-dr-browser', {
+      text: 'Follow active?',
+      visible: true
+    } as any);
+  });
+});

tsconfig.json

@@ -18,8 +18,7 @@
     "lib": ["dom", "esnext"],
     "strict": true,
     "strictNullChecks": true,
-    "target": "es2017",
-    "types": []
+    "target": "es2017"
   },
   "include": ["src/*"]
 }

tsconfig.test.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "build/test",
+    "rootDir": "test"
+  },
+  "include": ["test/*", "test/**/*"]
+}