Check js coding standards

tienvx · Oct 10, 2021 · 14ea492 · 14ea492
1 parent 9a87d8b
commit 14ea492
Show file tree

Hide file tree

Showing 5 changed files with 688 additions and 38 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -5,6 +5,7 @@ on: [push, pull_request]
 jobs:
     php-cs:
         runs-on: ubuntu-latest
+        name: PHP Coding Standards
         steps:
             - name: Setup PHP
               uses: shivammathur/setup-php@v2
@@ -26,6 +27,25 @@ jobs:
             - name: Run PHPStan
               run: phpstan analyse src tests
 
+    coding-style-js:
+        runs-on: ubuntu-latest
+        name: JS Coding Standards
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v2
+
+            - name: Install JavaScript dependencies
+              working-directory: src/Resources/assets
+              run: yarn install
+
+            - name: Check lint
+              working-directory: src/Resources/assets
+              run: yarn check-lint
+
+            - name: Check format
+              working-directory: src/Resources/assets
+              run: yarn check-format
+
     test-php:
         runs-on: ubuntu-latest
         strategy:

diff --git a/src/Resources/assets/package.json b/src/Resources/assets/package.json
@@ -19,7 +19,10 @@
     "scripts": {
         "build": "babel src -d dist",
         "test": "babel src -d dist && jest",
-        "lint": "eslint src test"
+        "lint": "eslint src test --fix",
+        "format": "prettier {src,test}/*.js --write",
+        "check-lint": "yarn lint --no-fix",
+        "check-format": "yarn format --no-write --check"
     },
     "dependencies": {
         "symfony-collection-js": "4.2.0-js-only"
@@ -33,12 +36,45 @@
         "@babel/plugin-proposal-class-properties": "^7.12.1",
         "@babel/preset-env": "^7.12.7",
         "@symfony/stimulus-testing": "^1.1.0",
-        "stimulus": "^2.0.0"
+        "stimulus": "^2.0.0",
+        "@babel/eslint-parser": "^7.12.1",
+        "eslint": "^7.15.0",
+        "eslint-config-prettier": "^6.15.0",
+        "eslint-plugin-jest": "^24.1.3",
+        "prettier": "^2.2.1"
     },
     "jest": {
         "testRegex": "test/.*\\.test.js",
         "setupFilesAfterEnv": [
             "./test/setup.js"
         ]
+    },
+    "eslintConfig": {
+        "root": true,
+        "parser": "@babel/eslint-parser",
+        "extends": [
+            "eslint:recommended",
+            "prettier"
+        ],
+        "env": {
+            "browser": true
+        },
+        "overrides": [
+            {
+                "files": [
+                    "test/*.js"
+                ],
+                "extends": [
+                    "plugin:jest/recommended"
+                ]
+            }
+        ]
+    },
+    "prettier": {
+        "printWidth": 120,
+        "trailingComma": "es5",
+        "tabWidth": 4,
+        "jsxBracketSameLine": true,
+        "singleQuote": true
     }
 }
diff --git a/src/Resources/assets/src/controller.js b/src/Resources/assets/src/controller.js
@@ -17,17 +17,17 @@ export default class extends Controller {
         const _self = this;
         let options = {
             call_post_add_on_init: this.callPostAddOnInitValue,
-            post_add: function(new_elem, context, index) {
-                _self.#dispatchCollectionJsEvent('post-add', {new_elem, context, index});
+            post_add: function (new_elem, context, index) {
+                _self.#dispatchCollectionJsEvent('post-add', { new_elem, context, index });
             },
-            post_delete: function(delete_elem, context, index) {
-                _self.#dispatchCollectionJsEvent('post-delete', {delete_elem, context, index});
+            post_delete: function (delete_elem, context, index) {
+                _self.#dispatchCollectionJsEvent('post-delete', { delete_elem, context, index });
             },
-            post_up: function(elem, switched_elem, index) {
-                _self.#dispatchCollectionJsEvent('post-up', {elem, switched_elem, index});
+            post_up: function (elem, switched_elem, index) {
+                _self.#dispatchCollectionJsEvent('post-up', { elem, switched_elem, index });
             },
-            post_down: function(elem, switched_elem, index) {
-                _self.#dispatchCollectionJsEvent('post-down', {elem, switched_elem, index});
+            post_down: function (elem, switched_elem, index) {
+                _self.#dispatchCollectionJsEvent('post-down', { elem, switched_elem, index });
             },
             prototype_name: this.prototypeNameValue || '__name__',
         };
@@ -39,10 +39,10 @@ export default class extends Controller {
             };
         }
         if (this.allowDeleteValue) {
-            options.btn_delete_selector ='.collection-js-elem-remove';
+            options.btn_delete_selector = '.collection-js-elem-remove';
         }
         if (this.allowMoveUpValue) {
-            options.btn_up_selector ='.collection-js-elem-up';
+            options.btn_up_selector = '.collection-js-elem-up';
         }
         if (this.allowMoveDownValue) {
             options.btn_down_selector = '.collection-js-elem-down';
@@ -53,10 +53,12 @@ export default class extends Controller {
 
     #dispatchCollectionJsEvent(event, detail) {
         const namespace = 'ux-collection-js';
-        this.element.dispatchEvent(new CustomEvent(`${namespace}:${event}`, {
-            bubbles: true,
-            cancelable: true,
-            detail
-        }));
+        this.element.dispatchEvent(
+            new CustomEvent(`${namespace}:${event}`, {
+                bubbles: true,
+                cancelable: true,
+                detail,
+            })
+        );
     }
 }
diff --git a/src/Resources/assets/test/controller.test.js b/src/Resources/assets/test/controller.test.js
@@ -82,7 +82,10 @@ describe('CollectionJsController', () => {
 
     it('init', async () => {
         let dispatched = null;
-        getByTestId(container, 'container').addEventListener('ux-collection-js:post-add', (event) => (dispatched = event));
+        getByTestId(container, 'container').addEventListener(
+            'ux-collection-js:post-add',
+            (event) => (dispatched = event)
+        );
 
         await startStimulus();
 
@@ -95,7 +98,10 @@ describe('CollectionJsController', () => {
 
     it('add', async () => {
         let dispatched = null;
-        getByTestId(container, 'container').addEventListener('ux-collection-js:post-add', (event) => (dispatched = event));
+        getByTestId(container, 'container').addEventListener(
+            'ux-collection-js:post-add',
+            (event) => (dispatched = event)
+        );
 
         await startStimulus();
 
@@ -113,7 +119,10 @@ describe('CollectionJsController', () => {
 
     it('element add', async () => {
         let dispatched = null;
-        getByTestId(container, 'container').addEventListener('ux-collection-js:post-add', (event) => (dispatched = event));
+        getByTestId(container, 'container').addEventListener(
+            'ux-collection-js:post-add',
+            (event) => (dispatched = event)
+        );
 
         await startStimulus();
 
@@ -131,7 +140,10 @@ describe('CollectionJsController', () => {
 
     it('element delete', async () => {
         let dispatched = null;
-        getByTestId(container, 'container').addEventListener('ux-collection-js:post-delete', (event) => (dispatched = event));
+        getByTestId(container, 'container').addEventListener(
+            'ux-collection-js:post-delete',
+            (event) => (dispatched = event)
+        );
 
         await startStimulus();
 
@@ -150,7 +162,10 @@ describe('CollectionJsController', () => {
 
     it('element up', async () => {
         let dispatched = null;
-        getByTestId(container, 'container').addEventListener('ux-collection-js:post-up', (event) => (dispatched = event));
+        getByTestId(container, 'container').addEventListener(
+            'ux-collection-js:post-up',
+            (event) => (dispatched = event)
+        );
 
         await startStimulus();
 
@@ -169,7 +184,10 @@ describe('CollectionJsController', () => {
 
     it('element down', async () => {
         let dispatched = null;
-        getByTestId(container, 'container').addEventListener('ux-collection-js:post-down', (event) => (dispatched = event));
+        getByTestId(container, 'container').addEventListener(
+            'ux-collection-js:post-down',
+            (event) => (dispatched = event)
+        );
 
         await startStimulus();