Create a controller that handle a counter for an input text

app/webpacker/controllers/input_char_count_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["count", "input"];
+
+  connect() {
+    this.inputTarget.addEventListener("keyup", this.countCharacters.bind(this));
+    this.countCharacters();
+  }
+
+  countCharacters() {
+    this.displayCount(
+      this.inputTarget.value.length,
+      this.inputTarget.maxLength
+    );
+  }
+
+  displayCount(count, max) {
+    this.countTarget.textContent = `${count}/${max}`;
+  }
+}

spec/javascripts/stimulus/input_char_count_controller_test.js

@@ -0,0 +1,34 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "stimulus";
+import input_char_count_controller from "../../../app/webpacker/controllers/input_char_count_controller";
+
+describe("InputCharCountController", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("input-char-count", input_char_count_controller);
+  });
+
+  describe("default behavior", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `<div data-controller="input-char-count">
+        <input type='text' maxLength='280' id='input' data-input-char-count-target='input' value='Hello' />
+        <span id='count' data-input-char-count-target='count'></span>
+      </div>`;
+    });
+
+    it("handle the content", () => {
+      const input = document.getElementById("input");
+      const count = document.getElementById("count");
+      // Default value
+      expect(count.textContent).toBe("5/280");
+
+      input.value = "Hello world";
+      input.dispatchEvent(new Event("keyup"));
+
+      expect(count.textContent).toBe("11/280");
+    });
+  });
+});