Update user stats and upgrade pnpm packages

Author: vtm9

services/app/apps/codebattle/.eslintrc.yml

@@ -1,66 +1,113 @@
 ---
 root: true
 
-plugins:
-  - react
-  - jsx-a11y
-  - jest
-  - react-hooks
 env:
   node: true
   browser: true
+  jest: true
 
 parser: "@babel/eslint-parser"
 
+parserOptions:
+  requireConfigFile: false
+  ecmaVersion: latest
+  sourceType: module
+  ecmaFeatures:
+    jsx: true
+
+plugins:
+  - react
+  - jsx-a11y
+  - jest
+  - react-hooks
+
 extends:
-  - "airbnb"
-  - "plugin:jest/recommended"
+  - airbnb
+  - plugin:jest/recommended
+
+settings:
+  react:
+    version: detect
+  import/resolver:
+    alias:
+      map:
+        - ["@", "./assets/js"]
+      extensions:
+        - ".js"
+        - ".jsx"
+        - ".json"
 
 rules:
-  no-console: 0
-  react/prop-types: 0
-  react/no-unused-prop-types: 0
-  import/no-unresolved: 0
+  # --- general ---
+  no-console: off
+  no-param-reassign: off
+  class-methods-use-this: off
+  default-param-last: off
+  indent: off
+  template-curly-spacing: off
+  max-len: ["error", 140, 2]
+
+  # --- imports ---
+  import/no-unresolved: off
+  import/extensions: off
   import/no-extraneous-dependencies:
-    - 2
+    - error
     - devDependencies: true
   import/order:
-  - 2
-  - newlines-between: always
-    alphabetize:
-      order: asc
-      caseInsensitive: true
-    groups:
-      - builtin
-      - external
-      - internal
-      - parent
-      - sibling
-      - index
-    pathGroups:
-      - pattern: react
-        group: builtin
-      - pattern: '@/**'
-        group: internal
-    pathGroupsExcludedImportTypes:
-      - internal
-  no-param-reassign: 0
-  arrow-parens:
-    - 2
-    - "as-needed"
-  react/jsx-props-no-spreading: 0
-  react/static-property-placement: 0
-  react/state-in-constructor: 0
-  jest/no-disabled-tests: "warn"
-  jest/no-focused-tests: "error"
-  jest/no-identical-title: "error"
-  jest/prefer-to-have-length: "warn"
-  jest/valid-expect: "error"
-  react-hooks/rules-of-hooks: "error"
-  react-hooks/exhaustive-deps: "warn"
-  template-curly-spacing: "off"
-  indent: "off"
-  max-len: ["error", 140, 2]
+    - error
+    - newlines-between: always
+      alphabetize:
+        order: asc
+        caseInsensitive: true
+      groups:
+        - builtin
+        - external
+        - internal
+        - parent
+        - sibling
+        - index
+      pathGroups:
+        - pattern: react
+          group: builtin
+        - pattern: "@/**"
+          group: internal
+      pathGroupsExcludedImportTypes:
+        - internal
+
+  # --- react ---
+  react/prop-types: off
+  react/no-unused-prop-types: off
+  react/jsx-props-no-spreading: off
+  react/static-property-placement: off
+  react/state-in-constructor: off
+  react/jsx-no-useless-fragment: off
+  react/no-unstable-nested-components: off
+  react/jsx-no-constructed-context-values: warn
+
+  # --- hooks ---
+  react-hooks/rules-of-hooks: error
+  react-hooks/exhaustive-deps: warn
+
+  # --- jest ---
+  jest/no-disabled-tests: warn
+  jest/no-focused-tests: error
+  jest/no-identical-title: error
+  jest/prefer-to-have-length: warn
+  jest/valid-expect: error
+
+  # --- a11y ---
   jsx-a11y/label-has-associated-control:
-    - 2
-    - assert: "either"
+    - error
+    - assert: either
+
+  # --- safety (keep these ON) ---
+  no-unsafe-optional-chaining: error
+
+overrides:
+  - files:
+      - "**/__tests__/**/*.{js,jsx}"
+      - "**/*.{test,spec}.{js,jsx}"
+    rules:
+      func-names: off
+      no-constructor-return: off
+      react/jsx-no-useless-fragment: off

services/app/apps/codebattle/assets/js/__mocks__/react-select.jsx

@@ -2,14 +2,14 @@ import React, { useState } from 'react';
 
 const { createFilter } = jest.requireActual('react-select');
 
-const Select = ({ options, onChange, filterOption }) => {
+function Select({ options, onChange, filterOption }) {
   const [selectInput, setSelectInput] = useState('task');
 
   return (
     <div>
       {options
         .filter(({ name }) => (filterOption({ data: { name } }, selectInput)))
-        .map(option => (
+        .map((option) => (
           <button
             type="button"
             onClick={() => onChange(option)}
@@ -27,7 +27,7 @@ const Select = ({ options, onChange, filterOption }) => {
       </button>
     </div>
   );
-};
+}
 
 export { createFilter };
 export default Select;

services/app/apps/codebattle/assets/js/__mocks__/react-select/async.jsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 
-const AsyncSelect = ({ loadOptions, onChange }) => {
+function AsyncSelect({ loadOptions, onChange }) {
   const [entities, setEntities] = useState([]);
 
   useEffect(() => {
-    const callback = options => {
-      setEntities(options.map(option => option.value));
+    const callback = (options) => {
+      setEntities(options.map((option) => option.value));
     };
 
     loadOptions('test', callback);
@@ -14,7 +14,7 @@ const AsyncSelect = ({ loadOptions, onChange }) => {
 
   return (
     <div>
-      {entities.map(entity => (
+      {entities.map((entity) => (
         <button
           type="button"
           onClick={() => onChange({ value: entity })}
@@ -25,6 +25,6 @@ const AsyncSelect = ({ loadOptions, onChange }) => {
       ))}
     </div>
   );
-};
+}
 
 export default AsyncSelect;

services/app/apps/codebattle/assets/js/__tests__/ContributorsList.test.jsx

@@ -11,14 +11,14 @@ import axios from 'axios';
 
 jest.mock('gon', () => {
   const gonParams = { local: 'en' };
-  return { getAsset: type => gonParams[type] };
+  return { getAsset: (type) => gonParams[type] };
 }, { virtual: true });
 
 jest.mock('axios');
 const users = [];
 axios.get.mockResolvedValue({ data: users });
 //
-test('test rendering ContributorsList', async () => {
+test('rendering ContributorsList', async () => {
 //   const reducer = combineReducers(reducers);
 //
 //   const preloadedState = {

services/app/apps/codebattle/assets/js/__tests__/CreateGameDialog.test.jsx

@@ -24,7 +24,7 @@ jest.mock(
       current_user: { id: 1, sound_settings: {} },
       task_tags: ['math', 'string', 'asd', 'rest'],
     };
-    return { getAsset: type => gonParams[type] };
+    return { getAsset: (type) => gonParams[type] };
   },
   { virtual: true },
 );
@@ -105,7 +105,7 @@ const store = configureStore({
   preloadedState,
 });
 
-const setup = jsx => ({
+const setup = (jsx) => ({
   user: userEvent.setup(),
   ...render(jsx),
 });
@@ -227,13 +227,13 @@ test('filter tasks by level', async () => {
 
   const easyLevelButton = await findByTitle('easy');
 
-  elementaryTasksFromBackend.forEach(task => expect(queryByRole('button', { name: task.name })).toBeInTheDocument());
-  easyTasksFromBackend.forEach(task => expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument());
+  elementaryTasksFromBackend.forEach((task) => expect(queryByRole('button', { name: task.name })).toBeInTheDocument());
+  easyTasksFromBackend.forEach((task) => expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument());
 
   await user.click(easyLevelButton);
 
-  easyTasksFromBackend.forEach(task => expect(queryByRole('button', { name: task.name })).toBeInTheDocument());
-  elementaryTasksFromBackend.forEach(task => expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument());
+  easyTasksFromBackend.forEach((task) => expect(queryByRole('button', { name: task.name })).toBeInTheDocument());
+  elementaryTasksFromBackend.forEach((task) => expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument());
 });
 
 test('filter tasks by tags', async () => {
@@ -262,33 +262,33 @@ test('filter tasks by tags', async () => {
   await user.click(await findByRole('button', { name: /random task/ }));
 
   await waitFor(() => {
-    tasksMatchingRestTags.forEach(task => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
+    tasksMatchingRestTags.forEach((task) => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
 
-    tasksUnsuitableForRestTags.forEach(task => (
+    tasksUnsuitableForRestTags.forEach((task) => (
       expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument()
     ));
   });
 
   await user.click(restTag);
 
   await waitFor(() => {
-    elementaryTasksFromBackend.forEach(task => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
+    elementaryTasksFromBackend.forEach((task) => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
   });
 
   await user.click(mathTag);
 
   await waitFor(() => {
-    tasksMatchingMathTag.forEach(task => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
-    tasksUnsuitableForMathTag.forEach(task => (
+    tasksMatchingMathTag.forEach((task) => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
+    tasksUnsuitableForMathTag.forEach((task) => (
       expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument()
     ));
   });
 
   await user.click(stringTag);
 
   await waitFor(() => {
-    tasksMatchingMathAndStringTags.forEach(task => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
-    tasksUnsuitableForMathAndStringTags.forEach(task => (
+    tasksMatchingMathAndStringTags.forEach((task) => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
+    tasksUnsuitableForMathAndStringTags.forEach((task) => (
       expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument()
     ));
   });
@@ -297,7 +297,7 @@ test('filter tasks by tags', async () => {
   await user.click(stringTag);
 
   await waitFor(() => {
-    elementaryTasksFromBackend.forEach(task => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
+    elementaryTasksFromBackend.forEach((task) => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
   });
 }, 6000);
 
@@ -309,8 +309,8 @@ test('filter tasks by name', async () => {
   await user.click(await findByRole('button', { name: 'filter tasks by name' }));
 
   await waitFor(() => {
-    tasksFilteredByName.forEach(task => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
-    tasksEliminatedByName.forEach(task => expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument());
+    tasksFilteredByName.forEach((task) => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
+    tasksEliminatedByName.forEach((task) => expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument());
   });
 });
 
@@ -322,8 +322,8 @@ test('filter tasks by name and tags', async () => {
   await user.click(await findByRole('button', { name: 'filter tasks by name' }));
   await user.click(getByRole('button', { name: 'math' }));
 
-  tasksFilteredByNameAndTag.forEach(task => expect(queryByRole('button', { name: task.name })).toBeInTheDocument());
-  tasksEliminatedByNameAndTag.forEach(task => (
+  tasksFilteredByNameAndTag.forEach((task) => expect(queryByRole('button', { name: task.name })).toBeInTheDocument());
+  tasksEliminatedByNameAndTag.forEach((task) => (
     expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument()
   ));
 });

services/app/apps/codebattle/assets/js/__tests__/Registration.test.jsx

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment jsdom
+ * @jest-environment-options {"url": "http://localhost/users/new"}
+ */
 import React from 'react';
 
 import { render, waitFor } from '@testing-library/react';
@@ -16,7 +20,7 @@ const { data, route, headers } = validData;
 
 jest.mock('gon', () => {
   const gonParams = { local: 'en', current_user: { sound_settings: {} } };
-  return { getAsset: type => gonParams[type] };
+  return { getAsset: (type) => gonParams[type] };
 }, { virtual: true });
 
 describe('sign up', () => {
@@ -28,12 +32,6 @@ describe('sign up', () => {
   }
 
   beforeAll(() => {
-    Object.defineProperty(window, 'location', {
-      writable: true,
-      value: {
-        pathname: '/users/new',
-      },
-    });
     document.head.innerHTML = '<meta name="csrf-token" content="test-csrf-token">';
   });