Merge pull request #153 from wakatime/sebas-update-dependencies

chore: update dependencies

.eslintrc.js

@@ -14,12 +14,12 @@ module.exports = {
     'kentcdodds/jest',
     'kentcdodds/possible-errors',
     'plugin:jest-dom/recommended',
-    'plugin:testing-library/recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:import/errors',
     'plugin:import/typescript',
     'plugin:prettier/recommended',
     'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
     'plugin:typescript-sort-keys/recommended',
   ],
   globals: {
@@ -39,6 +39,7 @@ module.exports = {
   rules: {
     'prettier/prettier': 'error',
     'sort-keys-fix/sort-keys-fix': 'error',
+    'testing-library/no-debug': 'off',
   },
   settings: {
     'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],

.github/workflows/nodejs.yml

@@ -18,9 +18,9 @@ jobs:
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your ob can access it
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
-          node-version: 11.15.0
+          node-version: '18'
       - run: npm ci
       - run: npm test

.nvmrc

@@ -1 +1 @@
-11.15.0
+18.13.0

gulpfile.js

@@ -1,25 +0,0 @@
-var del = require('del');
-var gulp = require('gulp');
-var elixir = require('laravel-elixir');
-var exec = require('child_process').exec;
-var fs = require('fs');
-
-/*
- |--------------------------------------------------------------------------
- | Elixir Asset Management
- |--------------------------------------------------------------------------
- |
- | Elixir provides a clean, fluent API for defining some basic Gulp tasks
- | for your Laravel application. By default, we are compiling the Less
- | file for our application, as well as publishing vendor resources.
- |
- */
-
-elixir.config.assetsPath = 'assets/';
-
-elixir(function (mix) {
-  mix.browserify('app.jsx', 'public/js/app.js', 'assets/js');
-  mix.browserify('events.js', 'public/js/events.js', 'assets/js');
-  mix.browserify('options.jsx', 'public/js/options.js', 'assets/js');
-  mix.browserify('devtools.js', 'public/js/devtools.js', 'assets/js');
-});

jest.config.ts

@@ -133,7 +133,7 @@ export default {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  // testEnvironment: "jest-environment-jsdom",
+  testEnvironment: 'jest-environment-jsdom',
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},

package.json

@@ -28,97 +28,92 @@
   },
   "dependencies": {
     "@manaflair/redux-batch": "^1.0.0",
-    "@reduxjs/toolkit": "^1.5.0",
+    "@reduxjs/toolkit": "^1.9.0",
     "bootstrap": "3.4.1",
-    "classnames": "^2.2.5",
+    "classnames": "^2.3.2",
-    "create-react-class": "^15.6.3",
+    "create-react-class": "^15.7.0",
-    "font-awesome": "4.6.3",
+    "font-awesome": "4.7.0",
-    "jquery": "^3.0.0",
+    "jquery": "^3.6.3",
-    "moment": "^2.13.0",
+    "moment": "^2.29.4",
-    "react": "^16.14.0",
+    "react": "^18.2.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "^18.2.0",
-    "react-redux": "^7.2.2",
+    "react-redux": "^8.0.5",
-    "react-transition-group": "^1.0.0",
+    "react-transition-group": "^4.4.5",
-    "redux-logger": "^3.0.6",
+    "redux-logger": "^4.0.0",
-    "webextension-polyfill-ts": "^0.22.0"
+    "webextension-polyfill-ts": "^0.26.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.7",
     "@babel/preset-env": "^7.8.7",
-    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.8.3",
     "@testing-library/dom": "^7.29.4",
-    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.3",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^12.6.0",
     "@types/chrome": "0.0.128",
     "@types/classnames": "^2.2.11",
-    "@types/copy-webpack-plugin": "^6.4.0",
+    "@types/copy-webpack-plugin": "^10.1.0",
     "@types/firefox-webext-browser": "^82.0.0",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^29.2.5",
     "@types/jquery": "^3.5.5",
-    "@types/node": "^14.14.20",
+    "@types/node": "^18.11.18",
-    "@types/react": "^17.0.0",
+    "@types/react": "^18.0.26",
-    "@types/react-dom": "^17.0.0",
+    "@types/react-dom": "^18.0.10",
-    "@types/react-redux": "^7.1.15",
+    "@types/react-redux": "^7.1.25",
-    "@types/redux-logger": "^3.0.8",
+    "@types/redux-logger": "^3.0.9",
     "@types/remote-redux-devtools": "^0.5.4",
     "@types/shelljs": "^0.8.8",
     "@types/wait-on": "^5.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.13.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.13.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "@xarc/run": "^1.0.4",
-    "axios": "^0.21.1",
+    "axios": "^1.2.2",
-    "babel-jest": "^22.1.0",
+    "babel-jest": "^29.3.1",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^9.1.2",
     "browserify": "^17.0.0",
-    "chai": "^4.1.2",
+    "chai": "^4.3.7",
-    "clean-webpack-plugin": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^7.0.0",
+    "copy-webpack-plugin": "^11.0.0",
-    "del": "^3.0.0",
+    "del": "^7.0.0",
-    "eslint": "^7.17.0",
+    "eslint": "^7.32.0",
-    "eslint-config-kentcdodds": "^17.3.0",
+    "eslint-config-kentcdodds": "^19.2.0",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest-dom": "^3.6.5",
+    "eslint-plugin-jest-dom": "^4.0.3",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.32.0",
-    "eslint-plugin-sort-keys-fix": "^1.1.1",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
-    "eslint-plugin-testing-library": "^3.10.1",
+    "eslint-plugin-testing-library": "^5.9.1",
-    "eslint-plugin-typescript-sort-keys": "^1.5.0",
+    "eslint-plugin-typescript-sort-keys": "^2.1.0",
-    "gulp": "^3.9.1",
     "husky": "^4.3.7",
-    "jest": "^26.6.3",
+    "jest": "^29.3.1",
-    "jest-cli": "^22.1.4",
+    "jest-cli": "^29.3.1",
-    "jsdom": "^16.4.0",
+    "jest-environment-jsdom": "^29.3.1",
-    "jshint": "^2.9.2",
+    "jsdom": "^21.0.0",
+    "jshint": "^2.13.6",
     "jsxhint": "^0.15.1",
-    "laravel-elixir": "^6.0.0-17",
+    "less": "^4.1.3",
-    "laravel-elixir-browserify-official": "^0.1.3",
+    "lint-staged": "^13.1.0",
-    "lint-staged": "^10.5.3",
     "mocha": "^5.0.0",
     "mocha-sinon": "^2.0.0",
-    "mocha-traceur": "^2.1.0",
+    "node-gyp": "^8.3.0",
-    "phantomjs": "^2.1.7",
+    "prettier": "^2.8.2",
-    "popper.js": "^1.14.6",
+    "prettier-plugin-packagejson": "^2.3.0",
-    "prettier": "^2.2.1",
+    "prettier-plugin-sort-json": "1.0.0",
-    "prettier-plugin-packagejson": "^2.2.9",
-    "prettier-plugin-sort-json": "0.0.1",
     "remote-redux-devtools": "^0.5.16",
-    "remotedev-server": "^0.3.1",
     "rimraf": "^3.0.2",
-    "shelljs": "^0.8.4",
+    "shelljs": "^0.8.5",
     "sinon": "^4.2.2",
     "sinon-chai": "^2.8.0",
     "sinon-chrome": "^2.2.4",
-    "traceur": "^0.0.111",
+    "ts-jest": "^29.0.3",
-    "ts-jest": "^26.4.4",
+    "ts-loader": "^9.4.2",
-    "ts-loader": "^8.0.14",
+    "ts-node": "^10.9.1",
-    "ts-node": "^9.1.1",
+    "typescript": "^4.9.4",
-    "typescript": "^4.1.3",
+    "wait-on": "^7.0.1",
-    "wait-on": "^5.2.1",
+    "web-ext": "^7.4.0",
-    "web-ext": "^5.5.0",
+    "webpack": "^5.75.0",
-    "webpack": "^5.14.0",
+    "webpack-cli": "^5.0.1"
-    "webpack-cli": "^4.3.1"
   }
 }

setupTests.ts

@@ -1,3 +1,5 @@
+import '@testing-library/jest-dom/extend-expect';
+
 class BrowserMock {
   runtime = {
     getBackgroundPage() {

src/components/Alert.test.tsx

@@ -6,7 +6,7 @@ describe('Alert Component', () => {
   it('should render with proper text on success type', () => {
     const text = 'Test Text';
     const { container } = render(<Alert text={text} type="success" />);
-    expect(screen.getByText(text)).toBeTruthy();
+    expect(screen.getByText(text)).toBeInTheDocument();
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
@@ -20,7 +20,7 @@ describe('Alert Component', () => {
   it('should render wtih proper text on danger type', () => {
     const text = 'Test Text';
     const { container } = render(<Alert text={text} type="danger" />);
-    expect(screen.getByText(text)).toBeTruthy();
+    expect(screen.getByText(text)).toBeInTheDocument();
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div

src/config/config.test.ts

@@ -3,18 +3,18 @@ import config from './config';
 describe('wakatime config', () => {
   it('snapshot of config', () => {
     expect(config).toMatchInlineSnapshot(`
-      Object {
+      {
-        "alert": Object {
+        "alert": {
-          "failure": Object {
+          "failure": {
             "text": "There was an error while saving the options!",
             "type": "danger",
           },
-          "success": Object {
+          "success": {
             "text": "Options have been saved!",
             "type": "success",
           },
         },
-        "colors": Object {
+        "colors": {
           "allGood": "",
           "lightTheme": "white",
           "notLogging": "gray",
@@ -28,7 +28,7 @@ describe('wakatime config', () => {
         "loggingType": "domain",
         "logoutUserUrl": "https://wakatime.com/logout",
         "name": "WakaTime",
-        "states": Array [
+        "states": [
           "allGood",
           "notLogging",
           "notSignedIn",
@@ -37,7 +37,7 @@ describe('wakatime config', () => {
         ],
         "summariesApiUrl": "https://wakatime.com/api/v1/users/current/summaries",
         "theme": "light",
-        "tooltips": Object {
+        "tooltips": {
           "allGood": "",
           "blacklisted": "This URL is blacklisted",
           "notLogging": "Not logging",

src/stores/createStore.ts

@@ -1,6 +1,5 @@
-import { EHOSTUNREACH } from 'constants';
 import { configureStore, Store } from '@reduxjs/toolkit';
-import logger from 'redux-logger';
+import { logger } from 'redux-logger';
 import { reduxBatch } from '@manaflair/redux-batch';
 import devToolsEnhancer from 'remote-redux-devtools';
 import currentUserReducer, {

src/utils/checkCurrentUser.ts

@@ -2,7 +2,8 @@ import { RootStore } from '../stores/createStore';
 import { fetchCurrentUser } from '../reducers/currentUser';
 
 type unsub = () => void;
-export default (store: RootStore) => (time: number): unsub => {
+export default (store: RootStore) =>
+  (time: number): unsub => {
     const fetchUser = () => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error

tests/run.js

@@ -1,24 +0,0 @@
-/**
- * Test Runner for Mocha tests
- * Using phantomjs to render page and execute scripts
- */
-
-var node_modules = '../node_modules/';
-phantom.injectJs(node_modules + 'mocha/mocha.js');
-phantom.injectJs(node_modules + 'sinon-chrome/src/phantom-tweaks.js');
-mocha.setup({ ui: 'bdd', reporter: 'spec' });
-
-// Setup
-phantom.injectJs('beforeeach.js');
-
-// Tests
-phantom.injectJs('..' + '/helpers/changeExtensionTooltip.spec.js');
-
-// Execute
-mocha.run(function (failures) {
-  // setTimeout is needed to supress "Unsafe JavaScript attempt to access..."
-  // see https://github.com/ariya/phantomjs/issues/12697
-  setTimeout(function () {
-    phantom.exit(failures);
-  }, 0);
-});

webpack.config.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import { join } from 'path';
 import * as webpack from 'webpack';
+// eslint-disable-next-line
 import CopyPlugin from 'copy-webpack-plugin';
 
 type BrowserTypes = 'chrome' | 'firefox';

xclap.ts

@@ -7,7 +7,9 @@ import * as shelljs from 'shelljs';
 import waitOn from 'wait-on';
 const { load, exec, serial, concurrent } = require('@xarc/run');
 
-const waitForFilesTask = (...files: string[]) => (): Promise<unknown> => {
+const waitForFilesTask =
+  (...files: string[]) =>
+  (): Promise<unknown> => {
     return waitOn({
       delay: 2000,
       interval: 3000,
@@ -64,7 +66,7 @@ const copyFromNodeModules = () => {
 };
 load({
   build: [
-    serial('postinstall', exec('gulp')),
+    serial('postinstall'),
     'webpack',
     concurrent(
       exec('web-ext build'),
@@ -89,17 +91,16 @@ load({
   postinstall: ['clean', makePublicFolder, copyFromNodeModules, 'less'],
   prettier: [exec('prettier --write .')],
   'remotedev-server': exec('remotedev --hostname=localhost --port=8000'),
-  test: ['build', 'lint', 'test-jest', 'test-js'],
+  test: ['build', 'lint', 'test-jest'],
   'test-jest': [exec('jest --clearCache'), exec('jest --verbose --coverage')],
   'test-jest-update': exec('jest -u'),
-  'test-js': 'phantomjs tests/run.js',
   'wait:legacy-files': waitForFilesTask(
     'manifest.json',
     'public/js/browser-polyfill.min.js',
     'public/js/events.js',
     'options.html',
   ),
-  watch: concurrent('watch-jest', 'webpack:watch', 'remotedev-server'),
+  watch: concurrent('watch-jest', 'webpack:watch'),
   'watch-jest': exec('jest --watch'),
   'web-ext:run:chrome': concurrent('web-ext:run:chrome-next', 'web-ext:run:chrome-legacy'),
   'web-ext:run:chrome-legacy': [