Add Jupyter lab terminal launcher tests (#765)

* Add simple test for the jupyterlab terminal launcher extension

* Bump playwright version

* Update docs and docstrings

jupyterlab/README.md

@@ -8,10 +8,12 @@
 To install the Terminal Launcher and the Settings Extensions run the following commands from the [root folder of the project](/):
 
 ```bash
-pip install -e jupyterlab/gst
-pip install -e jupyterlab/gst-settings
+pip install jupyterlab/gst
+pip install jupyterlab/gst-settings
+pip install jupyterlab/documentation
 jupyter labextension install jupyterlab/gst
 jupyter labextension install jupyterlab/gst-settings
+jupyter labextension install jupyterlab/documentation
 ```
 
 ## Development setup

jupyterlab/gst-settings/ui-tests/README.md

@@ -7,23 +7,6 @@ To execute integration tests, you have two options:
 - use docker-compose (cons: needs to know and use docker) - this is a more reliable solution.
 - run tests locally (cons: will interact with your JupyterLab user settings)
 
-## Test on docker
-
-1. Compile the extension:
-
-```
-jlpm install
-jlpm run build:prod
-```
-
-2. Execute the docker stack in the example folder:
-
-```
-docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env build
-docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env run --rm e2e
-docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env down
-```
-
 ## Test locally
 
 1. Compile the extension:
@@ -61,11 +44,6 @@ jlpm run build:prod
 
 2. Start JupyterLab _with the extension installed_ without any token or password:
 
-**Using docker**
-
-```
-docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env run --rm -p 8888:8888 lab
-```
 
 **Using local installation**
 
@@ -93,14 +71,10 @@ jlpm install
 jlpm run build:prod
 ```
 
+Note: When compiling the extension execute the commands in the extension root (`gst-settings`) folder and not the `gst-settings/ui-tests` folder.
+
 2. Start JupyterLab _with the extension installed_ without any token or password:
 
-**Using docker**
-
-```
-docker-compose -f ../end-to-end-tests/docker-compose.yml --env-file ./ui-tests/.env run --rm -p 8888:8888 lab
-```
-
 **Using local installation**
 
 ```

jupyterlab/gst-settings/ui-tests/package.json

@@ -1,13 +1,13 @@
 {
-  "name": "@jupyterlab-examples/react-widget-tests",
+  "name": "@gamestonk/settings-tests",
   "version": "0.1.0",
-  "description": "Integration test for react-widget example",
-  "repository": "https://github.com/jupyterlab/extension-examples",
-  "author": "Project Jupyter Contributors",
-  "license": "BSD-3-Clause",
+  "description": "Integration test for the gamestong Settings extension",
+  "repository": "https://github.com/GamestonkTerminal/GamestonkTerminal",
+  "author": "Gamestonk Terminal Contributors",
+  "license": "MIT",
   "private": true,
   "devDependencies": {
-    "@playwright/test": "1.13.1",
+    "@playwright/test": "1.15",
     "typescript": "~4.1.3"
   }
 }

jupyterlab/gst/ui-tests/README.md

@@ -0,0 +1,92 @@
+# Test
+
+The test will produce a video to help debugging and check what happened.
+
+To execute integration tests, you have two options:
+
+- use docker-compose (cons: needs to know and use docker) - this is a more reliable solution.
+- run tests locally (cons: will interact with your JupyterLab user settings)
+
+## Test locally
+
+1. Compile the extension:
+
+```
+jlpm install
+jlpm run build:prod
+```
+
+2. Start JupyterLab _with the extension installed_ without any token or password
+
+```
+jupyter lab --ServerApp.token= --ServerApp.password=
+```
+
+3. Execute in another console the [Playwright](https://playwright.dev/docs/intro) tests:
+
+```
+cd ui-tests
+jlpm install
+npx playwright install
+npx playwright test
+```
+
+# Create tests
+
+To create tests, the easiest way is to use the code generator tool of playwright:
+
+1. Compile the extension:
+
+```
+jlpm install
+jlpm run build:prod
+```
+
+2. Start JupyterLab _with the extension installed_ without any token or password:
+
+
+**Using local installation**
+
+```
+jupyter lab --ServerApp.token= --ServerApp.password=
+```
+
+3. Launch the code generator tool:
+
+```
+cd ui-tests
+jlpm install
+npx playwright install
+npx playwright codegen localhost:8888
+```
+
+# Debug tests
+
+To debug tests, a good way is to use the inspector tool of playwright:
+
+1. Compile the extension:
+
+```
+jlpm install
+jlpm run build:prod
+```
+
+Note: When compiling the extension execute the commands in the extension root (`gst`) folder and not the `gst/ui-tests` folder.
+
+2. Start JupyterLab _with the extension installed_ without any token or password:
+
+
+**Using local installation**
+
+```
+jupyter lab --ServerApp.token= --ServerApp.password=
+```
+
+3. Launch the code generator tool:
+
+```
+cd ui-tests
+jlpm install
+npx playwright install
+PWDEBUG=1 npx playwright test --headed
+```

jupyterlab/gst/ui-tests/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@gamestonk/launcher-tests",
+  "version": "0.1.0",
+  "description": "Integration test for terminal launcher",
+  "repository": "https://github.com/GamestonkTerminal/GamestonkTerminal",
+  "author": "Gamestonk Terminal Contributors",
+  "license": "MIT",
+  "private": true,
+  "devDependencies": {
+    "@playwright/test": "1.15",
+    "typescript": "~4.1.3"
+  }
+}

jupyterlab/gst/ui-tests/playwright.config.ts

@@ -0,0 +1,18 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  timeout: 60000,
+  use: {
+    // Browser options
+    // headless: false,
+    // slowMo: 500,
+
+    // Context options
+    viewport: { width: 1280, height: 720 },
+
+    // Artifacts
+    video: 'on',
+  },
+};
+
+export default config;

jupyterlab/gst/ui-tests/tests/gst-launcher.spec.ts

@@ -0,0 +1,37 @@
+/*
+ * Simple scenario placeholder for testing the Gamestonk Launcher
+ *
+ * Steps:
+ * - Wait for the launcher panel to load
+ * - Launch the terminal
+ * - Wait for the terminal to initialize
+ * - Press "return" three times
+ *
+ * This is a placeholder for the test.
+ * Depending on the future testing/QA decisions this test can be expanded.
+*/
+import { test, expect } from '@playwright/test';
+
+const TARGET_URL = process.env.TARGET_URL ?? 'http://localhost:8888';
+
+test('Should open a panel with the GamestonkTerminal and send "Enter" three times', async ({ page }) => {
+  await page.goto(`${TARGET_URL}/lab`);
+  await page.waitForSelector('#jupyterlab-splash', { state: 'detached' });
+  await page.waitForSelector('div[role="main"] >> text=Launcher');
+
+  await Promise.all([
+    page.waitForNavigation(/*{ url: 'http://localhost:8888/lab' }*/),
+    page.click('p:has-text("Gamestonk Terminal")')
+  ]);
+
+  expect(
+      await page.waitForSelector('[aria-label="Terminal input"]', { timeout: 1000 })
+      ).toBeTruthy();
+
+  // Press Enter a couple of times
+  await page.waitForTimeout(3000)
+  await page.press('[aria-label="Terminal input"]', 'Enter');
+  await page.press('[aria-label="Terminal input"]', 'Enter');
+  await page.press('[aria-label="Terminal input"]', 'Enter');
+  await page.waitForTimeout(1000)
+});