Repository: ploomber/jupysql-plugin (language: python)

Issue:
feedback
sharing some feedback

- move contents to the root directory (ie setup.py must be in the top folder as in our other projects)
- add CI (is there a simple way to test this?)
- document that this needs node.js, I installed it with `conda install nodejs -c conda-forge`

looks like this is still using the static list, right? I guess the next step is top incorporate the logic to communicate with the kernel so we can extract table names?


Discussion / hints:
@neelasha23 
Yes this is using the static list. I'm blocked on the kernel messaging and have posted a query [here](https://discourse.jupyter.org/t/storing-kernel-response-in-a-variable/18642)

Need to check on the tests

@edublancas 

Fix patch:
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
new file mode 100644
index 00000000..dab1f1fe
--- /dev/null
+++ b/.github/workflows/ci.yaml
@@ -0,0 +1,37 @@
+name: CI
+
+on: [push, pull_request]
+
+jobs:
+  Jest:
+    strategy:
+      matrix:
+        python-version: [3.7, 3.8, 3.9, '3.10', '3.11']
+        os: [ubuntu-latest, macos-latest, windows-latest]
+
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v2
+        with:
+          python-version: ${{ matrix.python-version }}
+
+      - name: Lint
+        run: |
+            python -m pip install --upgrade pip pkgmt
+            pkgmt lint
+
+      - name: Install dependencies
+        run: |
+
+          pip install .
+          # check package is importable
+          python -c "import jupysql_autocompletion"
+
+      - name: Test with Jest
+        run: | 
+          npm install
+          npm test
\ No newline at end of file
diff --git a/autocompletion/CHANGELOG.md b/CHANGELOG.md
similarity index 100%
rename from autocompletion/CHANGELOG.md
rename to CHANGELOG.md
diff --git a/autocompletion/LICENSE b/LICENSE
similarity index 100%
rename from autocompletion/LICENSE
rename to LICENSE
diff --git a/README.md b/README.md
index d9b45ae5..2d9ddab2 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,102 @@
-# jupyterlab-extension
+# jupysql_autocompletion
 
-This is a Jupyterlab extension for providing autocomplete functionality for JupySQL.
+This is a Jupyterlab extension that provides autocompletion functionality for JupySQL.
 
 It currently supports the most common SQL keywords. Autocomplete suggestions are displayed when user presses tab while writing the keyword.
 
+
+## Requirements
+
+- JupyterLab >= 3.0
+
 ## Install
 
+To install the extension, execute:
+
+```bash
+pip install jupysql_autocompletion
+```
+
+## Uninstall
+
+To remove the extension, execute:
+
+```bash
+pip uninstall jupysql_autocompletion
+```
+
+## Contributing
+
+### Development install
+
+Note: You will need NodeJS to build the extension package. You may install NodeJS using conda as below:
+
+```bash
+conda install nodejs -c conda-forge
+```
+
+The `jlpm` command is JupyterLab's pinned version of
+[yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use
+`yarn` or `npm` in lieu of `jlpm` below.
+
+```bash
+# Clone the repo to your local environment
+# Change directory to the jupysql_autocompletion directory
+# Install package in development mode
+pip install -e "."
+# Link your development version of the extension with JupyterLab
+jupyter labextension develop . --overwrite
+# Rebuild extension Typescript source after making changes
+jlpm build
+```
+
+You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.
+
 ```bash
-pip install autocompletion
-```
\ No newline at end of file
+# Watch the source directory in one terminal, automatically rebuilding when needed
+jlpm watch
+# Run JupyterLab in another terminal
+jupyter lab
+```
+
+With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).
+
+By default, the `jlpm build` command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:
+
+```bash
+jupyter lab build --minimize=False
+```
+
+### Development uninstall
+
+```bash
+pip uninstall jupysql_autocompletion
+```
+
+In development mode, you will also need to remove the symlink created by `jupyter labextension develop`
+command. To find its location, you can run `jupyter labextension list` to figure out where the `labextensions`
+folder is located. Then you can remove the symlink named `jupysql-autocompletion` within that folder.
+
+### Testing the extension
+
+#### Frontend tests
+
+This extension is using [Jest](https://jestjs.io/) for JavaScript code testing.
+
+To execute them, execute:
+
+```sh
+jlpm
+jlpm test
+```
+
+#### Integration tests
+
+This extension uses [Playwright](https://playwright.dev/docs/intro/) for the integration tests (aka user level tests).
+More precisely, the JupyterLab helper [Galata](https://github.com/jupyterlab/jupyterlab/tree/master/galata) is used to handle testing the extension in JupyterLab.
+
+More information are provided within the [ui-tests](./ui-tests/README.md) README.
+
+### Packaging the extension
+
+See [RELEASE](RELEASE.md)
diff --git a/autocompletion/RELEASE.md b/RELEASE.md
similarity index 97%
rename from autocompletion/RELEASE.md
rename to RELEASE.md
index babf200f..9fa76b45 100644
--- a/autocompletion/RELEASE.md
+++ b/RELEASE.md
@@ -1,4 +1,4 @@
-# Making a new release of autocompletion
+# Making a new release of jupysql_autocompletion
 
 The extension can be published to `PyPI` and `npm` manually or using the [Jupyter Releaser](https://github.com/jupyter-server/jupyter_releaser).
 
diff --git a/autocompletion/.eslintignore b/autocompletion/.eslintignore
deleted file mode 100644
index fffa32fd..00000000
--- a/autocompletion/.eslintignore
+++ /dev/null
@@ -1,8 +0,0 @@
-node_modules
-dist
-coverage
-**/*.d.ts
-tests
-
-**/__tests__
-ui-tests
diff --git a/autocompletion/.eslintrc.js b/autocompletion/.eslintrc.js
deleted file mode 100644
index 665374bf..00000000
--- a/autocompletion/.eslintrc.js
+++ /dev/null
@@ -1,39 +0,0 @@
-module.exports = {
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended'
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    project: 'tsconfig.json',
-    sourceType: 'module'
-  },
-  plugins: ['@typescript-eslint'],
-  rules: {
-    '@typescript-eslint/naming-convention': [
-      'error',
-      {
-        selector: 'interface',
-        format: ['PascalCase'],
-        custom: {
-          regex: '^I[A-Z]',
-          match: true
-        }
-      }
-    ],
-    '@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }],
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-namespace': 'off',
-    '@typescript-eslint/no-use-before-define': 'off',
-    '@typescript-eslint/quotes': [
-      'error',
-      'single',
-      { avoidEscape: true, allowTemplateLiterals: false }
-    ],
-    curly: ['error', 'all'],
-    eqeqeq: 'error',
-    'prefer-arrow-callback': 'error'
-  }
-};
diff --git a/autocompletion/.github/workflows/build.yml b/autocompletion/.github/workflows/build.yml
deleted file mode 100644
index 9ee7ea7d..00000000
--- a/autocompletion/.github/workflows/build.yml
+++ /dev/null
@@ -1,90 +0,0 @@
-name: Build
-
-on:
-  push:
-    branches: main
-  pull_request:
-    branches: '*'
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v3
-
-    - name: Base Setup
-      uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
-
-    - name: Install dependencies
-      run: python -m pip install -U jupyterlab~=3.1
-
-    - name: Lint the extension
-      run: |
-        set -eux
-        jlpm
-        jlpm run lint:check
-
-    - name: Build the extension
-      run: |
-        set -eux
-        python -m pip install .[test]
-
-        jupyter labextension list
-        jupyter labextension list 2>&1 | grep -ie "autocompletion.*OK"
-        python -m jupyterlab.browser_check
-
-    - name: Package the extension
-      run: |
-        set -eux
-
-        pip install build
-        python -m build
-        pip uninstall -y "autocompletion" jupyterlab
-
-    - name: Upload extension packages
-      uses: actions/upload-artifact@v3
-      with:
-        name: extension-artifacts
-        path: dist/autocompletion*
-        if-no-files-found: error
-
-  test_isolated:
-    needs: build
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v3
-    - name: Install Python
-      uses: actions/setup-python@v4
-      with:
-        python-version: '3.9'
-        architecture: 'x64'
-    - uses: actions/download-artifact@v3
-      with:
-        name: extension-artifacts
-    - name: Install and Test
-      run: |
-        set -eux
-        # Remove NodeJS, twice to take care of system and locally installed node versions.
-        sudo rm -rf $(which node)
-        sudo rm -rf $(which node)
-
-        pip install "jupyterlab~=3.1" autocompletion*.whl
-
-
-        jupyter labextension list
-        jupyter labextension list 2>&1 | grep -ie "autocompletion.*OK"
-        python -m jupyterlab.browser_check --no-chrome-test
-
-
-  check_links:
-    name: Check Links
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-    steps:
-      - uses: actions/checkout@v3
-      - uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
-      - uses: jupyterlab/maintainer-tools/.github/actions/check-links@v1
diff --git a/autocompletion/.github/workflows/check-release.yml b/autocompletion/.github/workflows/check-release.yml
deleted file mode 100644
index a9814967..00000000
--- a/autocompletion/.github/workflows/check-release.yml
+++ /dev/null
@@ -1,29 +0,0 @@
-name: Check Release
-on:
-  push:
-    branches: ["main"]
-  pull_request:
-    branches: ["*"]
-
-jobs:
-  check_release:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Base Setup
-        uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
-      - name: Install Dependencies
-        run: |
-          pip install -e .
-      - name: Check Release
-        uses: jupyter-server/jupyter_releaser/.github/actions/check-release@v2
-        with:
-
-          token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Upload Distributions
-        uses: actions/upload-artifact@v3
-        with:
-          name: autocompletion-releaser-dist-${{ github.run_number }}
-          path: .jupyter_releaser_checkout/dist
diff --git a/autocompletion/.gitignore b/autocompletion/.gitignore
deleted file mode 100644
index 5c116ff5..00000000
--- a/autocompletion/.gitignore
+++ /dev/null
@@ -1,122 +0,0 @@
-*.bundle.*
-lib/
-node_modules/
-*.log
-.eslintcache
-.stylelintcache
-*.egg-info/
-.ipynb_checkpoints
-*.tsbuildinfo
-autocompletion/labextension
-# Version file is handled by hatchling
-autocompletion/_version.py
-
-# Integration tests
-ui-tests/test-results/
-ui-tests/playwright-report/
-
-# Created by https://www.gitignore.io/api/python
-# Edit at https://www.gitignore.io/?templates=python
-
-### Python ###
-# Byte-compiled / optimized / DLL files
-__pycache__/
-*.py[cod]
-*$py.class
-
-# C extensions
-*.so
-
-# Distribution / packaging
-.Python
-build/
-develop-eggs/
-dist/
-downloads/
-eggs/
-.eggs/
-lib/
-lib64/
-parts/
-sdist/
-var/
-wheels/
-pip-wheel-metadata/
-share/python-wheels/
-.installed.cfg
-*.egg
-MANIFEST
-
-# PyInstaller
-#  Usually these files are written by a python script from a template
-#  before PyInstaller builds the exe, so as to inject date/other infos into it.
-*.manifest
-*.spec
-
-# Installer logs
-pip-log.txt
-pip-delete-this-directory.txt
-
-# Unit test / coverage reports
-htmlcov/
-.tox/
-.nox/
-.coverage
-.coverage.*
-.cache
-nosetests.xml
-coverage/
-coverage.xml
-*.cover
-.hypothesis/
-.pytest_cache/
-
-# Translations
-*.mo
-*.pot
-
-# Scrapy stuff:
-.scrapy
-
-# Sphinx documentation
-docs/_build/
-
-# PyBuilder
-target/
-
-# pyenv
-.python-version
-
-# celery beat schedule file
-celerybeat-schedule
-
-# SageMath parsed files
-*.sage.py
-
-# Spyder project settings
-.spyderproject
-.spyproject
-
-# Rope project settings
-.ropeproject
-
-# Mr Developer
-.mr.developer.cfg
-.project
-.pydevproject
-
-# mkdocs documentation
-/site
-
-# mypy
-.mypy_cache/
-.dmypy.json
-dmypy.json
-
-# Pyre type checker
-.pyre/
-
-# End of https://www.gitignore.io/api/python
-
-# OSX files
-.DS_Store
diff --git a/autocompletion/.prettierignore b/autocompletion/.prettierignore
deleted file mode 100644
index 49901ee2..00000000
--- a/autocompletion/.prettierignore
+++ /dev/null
@@ -1,6 +0,0 @@
-node_modules
-**/node_modules
-**/lib
-**/package.json
-!/package.json
-autocompletion
diff --git a/autocompletion/.prettierrc b/autocompletion/.prettierrc
deleted file mode 100644
index d0824a69..00000000
--- a/autocompletion/.prettierrc
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "none",
-  "arrowParens": "avoid",
-  "endOfLine": "auto"
-}
diff --git a/autocompletion/.stylelintrc b/autocompletion/.stylelintrc
deleted file mode 100644
index 0e1ff303..00000000
--- a/autocompletion/.stylelintrc
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-recommended",
-    "stylelint-config-standard",
-    "stylelint-prettier/recommended"
-  ],
-  "rules": {
-    "property-no-vendor-prefix": null,
-    "selector-no-vendor-prefix": null,
-    "value-no-vendor-prefix": null
-  }
-}
diff --git a/autocompletion/README.md b/autocompletion/README.md
deleted file mode 100644
index 2b39b0e4..00000000
--- a/autocompletion/README.md
+++ /dev/null
@@ -1,76 +0,0 @@
-# autocompletion
-
-[![Github Actions Status](https://github.com/ploomber/jupysql-autocompletion.git/workflows/Build/badge.svg)](https://github.com/ploomber/jupysql-autocompletion.git/actions/workflows/build.yml)
-Jupyterlab extension for JupySql
-
-## Requirements
-
-- JupyterLab >= 3.0
-
-## Install
-
-To install the extension, execute:
-
-```bash
-pip install autocompletion
-```
-
-## Uninstall
-
-To remove the extension, execute:
-
-```bash
-pip uninstall autocompletion
-```
-
-## Contributing
-
-### Development install
-
-Note: You will need NodeJS to build the extension package.
-
-The `jlpm` command is JupyterLab's pinned version of
-[yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use
-`yarn` or `npm` in lieu of `jlpm` below.
-
-```bash
-# Clone the repo to your local environment
-# Change directory to the autocompletion directory
-# Install package in development mode
-pip install -e "."
-# Link your development version of the extension with JupyterLab
-jupyter labextension develop . --overwrite
-# Rebuild extension Typescript source after making changes
-jlpm build
-```
-
-You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.
-
-```bash
-# Watch the source directory in one terminal, automatically rebuilding when needed
-jlpm watch
-# Run JupyterLab in another terminal
-jupyter lab
-```
-
-With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).
-
-By default, the `jlpm build` command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:
-
-```bash
-jupyter lab build --minimize=False
-```
-
-### Development uninstall
-
-```bash
-pip uninstall autocompletion
-```
-
-In development mode, you will also need to remove the symlink created by `jupyter labextension develop`
-command. To find its location, you can run `jupyter labextension list` to figure out where the `labextensions`
-folder is located. Then you can remove the symlink named `autocompletion` within that folder.
-
-### Packaging the extension
-
-See [RELEASE](RELEASE.md)
diff --git a/autocompletion/install.json b/autocompletion/install.json
deleted file mode 100644
index 079dbc87..00000000
--- a/autocompletion/install.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "packageManager": "python",
-  "packageName": "autocompletion",
-  "uninstallInstructions": "Use your Python package manager (pip, conda, etc.) to uninstall the package autocompletion"
-}
diff --git a/autocompletion/package.json b/autocompletion/package.json
deleted file mode 100644
index 5e1eaa5c..00000000
--- a/autocompletion/package.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-    "name": "autocompletion",
-    "version": "0.1.1",
-    "description": "Jupyterlab extension for JupySql",
-    "keywords": [
-        "jupyter",
-        "jupyterlab",
-        "jupyterlab-extension"
-    ],
-    "homepage": "https://github.com/ploomber/jupysql-autocompletion.git",
-    "bugs": {
-        "url": "https://github.com/ploomber/jupysql-autocompletion.git/issues"
-    },
-    "license": "BSD-3-Clause",
-    "author": {
-        "name": "Ploomber",
-        "email": "contact@ploomber.io"
-    },
-    "files": [
-        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
-        "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
-    ],
-    "main": "lib/index.js",
-    "types": "lib/index.d.ts",
-    "style": "style/index.css",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/ploomber/jupysql-autocompletion.git.git"
-    },
-    "scripts": {
-        "build": "jlpm build:lib && jlpm build:labextension:dev",
-        "build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
-        "build:labextension": "jupyter labextension build .",
-        "build:labextension:dev": "jupyter labextension build --development True .",
-        "build:lib": "tsc --sourceMap",
-        "build:lib:prod": "tsc",
-        "clean": "jlpm clean:lib",
-        "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
-        "clean:lintcache": "rimraf .eslintcache .stylelintcache",
-        "clean:labextension": "rimraf autocompletion/labextension autocompletion/_version.py",
-        "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
-        "eslint": "jlpm eslint:check --fix",
-        "eslint:check": "eslint . --cache --ext .ts,.tsx",
-        "install:extension": "jlpm build",
-        "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
-        "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
-        "prettier": "jlpm prettier:base --write --list-different",
-        "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
-        "prettier:check": "jlpm prettier:base --check",
-        "stylelint": "jlpm stylelint:check --fix",
-        "stylelint:check": "stylelint --cache \"style/**/*.css\"",
-        "watch": "run-p watch:src watch:labextension",
-        "watch:src": "tsc -w",
-        "watch:labextension": "jupyter labextension watch ."
-    },
-    "dependencies": {
-        "@jupyterlab/application": "^3.6.2",
-        "@jupyterlab/codeeditor": "^3.6.2",
-        "@jupyterlab/completer": "^3.6.2",
-        "@jupyterlab/notebook": "^3.6.2",
-        "@jupyterlab/statedb": "^3.6.2"
-    },
-    "devDependencies": {
-        "@jupyterlab/builder": "^3.1.0",
-        "@typescript-eslint/eslint-plugin": "^4.8.1",
-        "@typescript-eslint/parser": "^4.8.1",
-        "eslint": "^7.14.0",
-        "eslint-config-prettier": "^6.15.0",
-        "eslint-plugin-prettier": "^3.1.4",
-        "npm-run-all": "^4.1.5",
-        "prettier": "^2.1.1",
-        "rimraf": "^3.0.2",
-        "stylelint": "^14.3.0",
-        "stylelint-config-prettier": "^9.0.4",
-        "stylelint-config-recommended": "^6.0.0",
-        "stylelint-config-standard": "~24.0.0",
-        "stylelint-prettier": "^2.0.0",
-        "typescript": "~4.1.3"
-    },
-    "sideEffects": [
-        "style/*.css",
-        "style/index.js"
-    ],
-    "styleModule": "style/index.js",
-    "publishConfig": {
-        "access": "public"
-    },
-    "jupyterlab": {
-        "extension": true,
-        "outputDir": "autocompletion/labextension"
-    }
-}
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 00000000..8b5c7642
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,1 @@
+module.exports = require('@jupyterlab/testutils/lib/babel.config');
diff --git a/install.json b/install.json
new file mode 100644
index 00000000..08deec26
--- /dev/null
+++ b/install.json
@@ -0,0 +1,5 @@
+{
+  "packageManager": "python",
+  "packageName": "jupysql_autocompletion",
+  "uninstallInstructions": "Use your Python package manager (pip, conda, etc.) to uninstall the package jupysql_autocompletion"
+}
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 00000000..4f1bf3da
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,46 @@
+const jestJupyterLab = require('@jupyterlab/testutils/lib/jest-config');
+
+const esModules = [
+  '@jupyterlab/',
+  'lib0',
+  'y\\-protocols',
+  'y\\-websocket',
+  'yjs'
+].join('|');
+
+const jlabConfig = jestJupyterLab(__dirname);
+
+const {
+  moduleFileExtensions,
+  moduleNameMapper,
+  preset,
+  setupFilesAfterEnv,
+  setupFiles,
+  testPathIgnorePatterns,
+  transform
+} = jlabConfig;
+
+module.exports = {
+  moduleFileExtensions,
+  moduleNameMapper,
+  preset,
+  setupFilesAfterEnv,
+  setupFiles,
+  testPathIgnorePatterns,
+  transform,
+  automock: false,
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/.ipynb_checkpoints/*'
+  ],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['lcov', 'text'],
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.json'
+    }
+  },
+  testRegex: 'src/.*/.*.spec.ts[x]?$',
+  transformIgnorePatterns: [`/node_modules/(?!${esModules}).+`]
+};
diff --git a/autocompletion/autocompletion/__init__.py b/jupysql_autocompletion/__init__.py
similarity index 50%
rename from autocompletion/autocompletion/__init__.py
rename to jupysql_autocompletion/__init__.py
index cc549f87..7183bbcd 100644
--- a/autocompletion/autocompletion/__init__.py
+++ b/jupysql_autocompletion/__init__.py
@@ -1,9 +1,8 @@
-from ._version import __version__
+from ._version import __version__  # noqa: F401
 
 
 def _jupyter_labextension_paths():
     return [{
         "src": "labextension",
-        "dest": "autocompletion"
+        "dest": "jupysql-autocompletion"
     }]
-
diff --git a/jupysql_autocompletion/_version.py b/jupysql_autocompletion/_version.py
new file mode 100644
index 00000000..133868ac
--- /dev/null
+++ b/jupysql_autocompletion/_version.py
@@ -0,0 +1,4 @@
+# This file is auto-generated by Hatchling. As such, do not:
+#   - modify
+#   - track in version control e.g. be sure to add to .gitignore
+__version__ = VERSION = '0.1.0'
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..78270b9e
--- /dev/null
+++ b/package.json
@@ -0,0 +1,99 @@
+{
+  "name": "jupysql-autocompletion",
+  "version": "0.1.0",
+  "description": "Jupyterlab extension for autocompletion in JupySQL",
+  "keywords": [
+    "jupyter",
+    "jupyterlab",
+    "jupyterlab-extension"
+  ],
+  "homepage": "https://github.com/ploomber/jupysql-autocompletion.git",
+  "bugs": {
+    "url": "https://github.com/ploomber/jupysql-autocompletion.git/issues"
+  },
+  "license": "BSD-3-Clause",
+  "author": {
+    "name": "Ploomber",
+    "email": "contact@ploomber.io"
+  },
+  "files": [
+    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "style": "style/index.css",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ploomber/jupysql-autocompletion.git.git"
+  },
+  "scripts": {
+    "build": "jlpm build:lib && jlpm build:labextension:dev",
+    "build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
+    "build:labextension": "jupyter labextension build .",
+    "build:labextension:dev": "jupyter labextension build --development True .",
+    "build:lib": "tsc --sourceMap",
+    "build:lib:prod": "tsc",
+    "clean": "jlpm clean:lib",
+    "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+    "clean:lintcache": "rimraf .eslintcache .stylelintcache",
+    "clean:labextension": "rimraf jupysql_autocompletion/labextension jupysql_autocompletion/_version.py",
+    "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
+    "eslint": "jlpm eslint:check --fix",
+    "eslint:check": "eslint . --cache --ext .ts,.tsx",
+    "install:extension": "jlpm build",
+    "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
+    "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
+    "prettier": "jlpm prettier:base --write --list-different",
+    "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+    "prettier:check": "jlpm prettier:base --check",
+    "stylelint": "jlpm stylelint:check --fix",
+    "stylelint:check": "stylelint --cache \"style/**/*.css\"",
+    "test": "jest --coverage",
+    "watch": "run-p watch:src watch:labextension",
+    "watch:src": "tsc -w",
+    "watch:labextension": "jupyter labextension watch ."
+  },
+  "dependencies": {
+    "@jupyterlab/application": "^3.6.2",
+    "@jupyterlab/codeeditor": "^3.6.2",
+    "@jupyterlab/completer": "^3.6.2",
+    "@jupyterlab/notebook": "^3.6.2",
+    "@jupyterlab/statedb": "^3.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@jupyterlab/builder": "^3.1.0",
+    "@jupyterlab/testutils": "^3.0.0",
+    "@types/jest": "^26.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.8.1",
+    "@typescript-eslint/parser": "^4.8.1",
+    "eslint": "^7.14.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "jest": "^26.0.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.1.1",
+    "rimraf": "^3.0.2",
+    "stylelint": "^14.3.0",
+    "stylelint-config-prettier": "^9.0.4",
+    "stylelint-config-recommended": "^6.0.0",
+    "stylelint-config-standard": "~24.0.0",
+    "stylelint-prettier": "^2.0.0",
+    "ts-jest": "^26.0.0",
+    "typescript": "~4.1.3"
+  },
+  "sideEffects": [
+    "style/*.css",
+    "style/index.js"
+  ],
+  "styleModule": "style/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "jupyterlab": {
+    "extension": true,
+    "outputDir": "jupysql_autocompletion/labextension"
+  }
+}
diff --git a/autocompletion/pyproject.toml b/pyproject.toml
similarity index 77%
rename from autocompletion/pyproject.toml
rename to pyproject.toml
index b15dd6f7..a984384f 100644
--- a/autocompletion/pyproject.toml
+++ b/pyproject.toml
@@ -3,7 +3,7 @@ requires = ["hatchling>=1.4.0", "jupyterlab>=3.4.7,<4.0.0", "hatch-nodejs-versio
 build-backend = "hatchling.build"
 
 [project]
-name = "autocompletion"
+name = "jupysql_autocompletion"
 readme = "README.md"
 license = { file = "LICENSE" }
 requires-python = ">=3.7"
@@ -33,24 +33,24 @@ source = "nodejs"
 fields = ["description", "authors", "urls"]
 
 [tool.hatch.build.targets.sdist]
-artifacts = ["autocompletion/labextension"]
+artifacts = ["jupysql_autocompletion/labextension"]
 exclude = [".github", "binder"]
 
 [tool.hatch.build.targets.wheel.shared-data]
-"autocompletion/labextension" = "share/jupyter/labextensions/autocompletion"
-"install.json" = "share/jupyter/labextensions/autocompletion/install.json"
+"jupysql_autocompletion/labextension" = "share/jupyter/labextensions/jupysql-autocompletion"
+"install.json" = "share/jupyter/labextensions/jupysql-autocompletion/install.json"
 
 [tool.hatch.build.hooks.version]
-path = "autocompletion/_version.py"
+path = "jupysql_autocompletion/_version.py"
 
 [tool.hatch.build.hooks.jupyter-builder]
 dependencies = ["hatch-jupyter-builder>=0.5"]
 build-function = "hatch_jupyter_builder.npm_builder"
 ensured-targets = [
-    "autocompletion/labextension/static/style.js",
-    "autocompletion/labextension/package.json",
+    "jupysql_autocompletion/labextension/static/style.js",
+    "jupysql_autocompletion/labextension/package.json",
 ]
-skip-if-exists = ["autocompletion/labextension/static/style.js"]
+skip-if-exists = ["jupysql_autocompletion/labextension/static/style.js"]
 
 [tool.hatch.build.hooks.jupyter-builder.build-kwargs]
 build_cmd = "build:prod"
@@ -60,7 +60,7 @@ npm = ["jlpm"]
 build_cmd = "install:extension"
 npm = ["jlpm"]
 source_dir = "src"
-build_dir = "autocompletion/labextension"
+build_dir = "jupysql_autocompletion/labextension"
 
 [tool.jupyter-releaser.options]
 version_cmd = "hatch version"
diff --git a/autocompletion/setup.py b/setup.py
similarity index 100%
rename from autocompletion/setup.py
rename to setup.py
diff --git a/autocompletion/src/connector.ts b/src/connector.ts
similarity index 100%
rename from autocompletion/src/connector.ts
rename to src/connector.ts
diff --git a/autocompletion/src/customconnector.ts b/src/customconnector.ts
similarity index 100%
rename from autocompletion/src/customconnector.ts
rename to src/customconnector.ts
diff --git a/autocompletion/src/index.ts b/src/index.ts
similarity index 100%
rename from autocompletion/src/index.ts
rename to src/index.ts
diff --git a/autocompletion/src/keywords.json b/src/keywords.json
similarity index 100%
rename from autocompletion/src/keywords.json
rename to src/keywords.json
diff --git a/autocompletion/style/base.css b/style/base.css
similarity index 100%
rename from autocompletion/style/base.css
rename to style/base.css
diff --git a/autocompletion/style/index.css b/style/index.css
similarity index 100%
rename from autocompletion/style/index.css
rename to style/index.css
diff --git a/autocompletion/style/index.js b/style/index.js
similarity index 100%
rename from autocompletion/style/index.js
rename to style/index.js
diff --git a/autocompletion/tsconfig.json b/tsconfig.json
similarity index 96%
rename from autocompletion/tsconfig.json
rename to tsconfig.json
index b60d5698..4ea970f0 100644
--- a/autocompletion/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,7 @@
     "strict": true,
     "strictNullChecks": false,
     "target": "ES2018",
-    "types": []
+    "types": ["jest"]
   },
   "include": ["src/*", "src/keywords.json"]
 }


Test patch:
diff --git a/src/__tests__/jupysql_autocompletion.spec.ts b/src/__tests__/jupysql_autocompletion.spec.ts
new file mode 100644
index 00000000..1825a5ef
--- /dev/null
+++ b/src/__tests__/jupysql_autocompletion.spec.ts
@@ -0,0 +1,9 @@
+/**
+ * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
+ */
+
+describe('jupysql-autocompletion', () => {
+  it('should be tested', () => {
+    expect(1 + 1).toEqual(2);
+  });
+});
diff --git a/ui-tests/README.md b/ui-tests/README.md
new file mode 100644
index 00000000..3544aec4
--- /dev/null
+++ b/ui-tests/README.md
@@ -0,0 +1,148 @@
+# Integration Testing
+
+This folder contains the integration tests of the extension.
+
+They are defined using [Playwright](https://playwright.dev/docs/intro) test runner
+and [Galata](https://github.com/jupyterlab/jupyterlab/tree/master/galata) helper.
+
+The Playwright configuration is defined in [playwright.config.js](./playwright.config.js).
+
+The JupyterLab server configuration to use for the integration test is defined
+in [jupyter_server_test_config.py](./jupyter_server_test_config.py).
+
+The default configuration will produce video for failing tests and an HTML report.
+
+## Run the tests
+
+> All commands are assumed to be executed from the root directory
+
+To run the tests, you need to:
+
+1. Compile the extension:
+
+```sh
+jlpm install
+jlpm build:prod
+```
+
+> Check the extension is installed in JupyterLab.
+
+2. Install test dependencies (needed only once):
+
+```sh
+cd ./ui-tests
+jlpm install
+jlpm playwright install
+cd ..
+```
+
+3. Execute the [Playwright](https://playwright.dev/docs/intro) tests:
+
+```sh
+cd ./ui-tests
+jlpm playwright test
+```
+
+Test results will be shown in the terminal. In case of any test failures, the test report
+will be opened in your browser at the end of the tests execution; see
+[Playwright documentation](https://playwright.dev/docs/test-reporters#html-reporter)
+for configuring that behavior.
+
+## Update the tests snapshots
+
+> All commands are assumed to be executed from the root directory
+
+If you are comparing snapshots to validate your tests, you may need to update
+the reference snapshots stored in the repository. To do that, you need to:
+
+1. Compile the extension:
+
+```sh
+jlpm install
+jlpm build:prod
+```
+
+> Check the extension is installed in JupyterLab.
+
+2. Install test dependencies (needed only once):
+
+```sh
+cd ./ui-tests
+jlpm install
+jlpm playwright install
+cd ..
+```
+
+3. Execute the [Playwright](https://playwright.dev/docs/intro) command:
+
+```sh
+cd ./ui-tests
+jlpm playwright test -u
+```
+
+> Some discrepancy may occurs between the snapshots generated on your computer and
+> the one generated on the CI. To ease updating the snapshots on a PR, you can
+> type `please update playwright snapshots` to trigger the update by a bot on the CI.
+> Once the bot has computed new snapshots, it will commit them to the PR branch.
+
+## Create tests
+
+> All commands are assumed to be executed from the root directory
+
+To create tests, the easiest way is to use the code generator tool of playwright:
+
+1. Compile the extension:
+
+```sh
+jlpm install
+jlpm build:prod
+```
+
+> Check the extension is installed in JupyterLab.
+
+2. Install test dependencies (needed only once):
+
+```sh
+cd ./ui-tests
+jlpm install
+jlpm playwright install
+cd ..
+```
+
+3. Execute the [Playwright code generator](https://playwright.dev/docs/codegen):
+
+```sh
+cd ./ui-tests
+jlpm playwright codegen localhost:8888
+```
+
+## Debug tests
+
+> All commands are assumed to be executed from the root directory
+
+To debug tests, a good way is to use the inspector tool of playwright:
+
+1. Compile the extension:
+
+```sh
+jlpm install
+jlpm build:prod
+```
+
+> Check the extension is installed in JupyterLab.
+
+2. Install test dependencies (needed only once):
+
+```sh
+cd ./ui-tests
+jlpm install
+jlpm playwright install
+cd ..
+```
+
+3. Execute the Playwright tests in [debug mode](https://playwright.dev/docs/debug):
+
+```sh
+cd ./ui-tests
+PWDEBUG=1 jlpm playwright test
+```
diff --git a/ui-tests/jupyter_server_test_config.py b/ui-tests/jupyter_server_test_config.py
new file mode 100644
index 00000000..a626733d
--- /dev/null
+++ b/ui-tests/jupyter_server_test_config.py
@@ -0,0 +1,20 @@
+"""Server configuration for integration tests.
+
+!! Never use this configuration in production because it
+opens the server to the world and provide access to JupyterLab
+JavaScript objects through the global window variable.
+"""
+from tempfile import mkdtemp
+
+c.ServerApp.port = 8888  # noqa: F821
+c.ServerApp.port_retries = 0  # noqa: F821
+c.ServerApp.open_browser = False  # noqa: F821
+
+c.ServerApp.root_dir = mkdtemp(prefix='galata-test-')  # noqa: F821
+c.ServerApp.token = ""  # noqa: F821
+c.ServerApp.password = ""  # noqa: F821
+c.ServerApp.disable_check_xsrf = True  # noqa: F821
+c.LabApp.expose_app_in_browser = True  # noqa: F821
+
+# Uncomment to set server log level to debug level
+# c.ServerApp.log_level = "DEBUG"
diff --git a/ui-tests/package.json b/ui-tests/package.json
new file mode 100644
index 00000000..ea9cf18f
--- /dev/null
+++ b/ui-tests/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "jupysql-autocompletion-ui-tests",
+  "version": "1.0.0",
+  "description": "JupyterLab jupysql-autocompletion Integration Tests",
+  "private": true,
+  "scripts": {
+    "start": "jupyter lab --config jupyter_server_test_config.py",
+    "test": "jlpm playwright test",
+    "test:update": "jlpm playwright test --update-snapshots"
+  },
+  "devDependencies": {
+    "@jupyterlab/galata": "^4.3.0"
+  }
+}
diff --git a/ui-tests/playwright.config.js b/ui-tests/playwright.config.js
new file mode 100644
index 00000000..9ece6fa1
--- /dev/null
+++ b/ui-tests/playwright.config.js
@@ -0,0 +1,14 @@
+/**
+ * Configuration for Playwright using default from @jupyterlab/galata
+ */
+const baseConfig = require('@jupyterlab/galata/lib/playwright-config');
+
+module.exports = {
+  ...baseConfig,
+  webServer: {
+    command: 'jlpm start',
+    url: 'http://localhost:8888/lab',
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI
+  }
+};
diff --git a/ui-tests/tests/jupysql_autocompletion.spec.ts b/ui-tests/tests/jupysql_autocompletion.spec.ts
new file mode 100644
index 00000000..ee330afd
--- /dev/null
+++ b/ui-tests/tests/jupysql_autocompletion.spec.ts
@@ -0,0 +1,21 @@
+import { expect, test } from '@jupyterlab/galata';
+
+/**
+ * Don't load JupyterLab webpage before running the tests.
+ * This is required to ensure we capture all log messages.
+ */
+test.use({ autoGoto: false });
+
+test('should emit an activation console message', async ({ page }) => {
+  const logs: string[] = [];
+
+  page.on('console', message => {
+    logs.push(message.text());
+  });
+
+  await page.goto();
+
+  expect(
+    logs.filter(s => s === 'JupyterLab extension jupysql-autocompletion is activated!')
+  ).toHaveLength(1);
+});