@patternslib/patternslib - npm Package Compare versions

Comparing version 4.5.1 to 4.5.2

package.json

 {
     "name": "@patternslib/patternslib",
-    "version": "4.5.1",
+    "version": "4.5.2",
     "title": "Markup patterns to drive behaviour.",
@@ -5,0 +5,0 @@ "description": "Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming language. Accessibility, SEO and well structured HTML are core values of Patterns.",

src/pat/tabs/tabs.js

@@ -8,2 +8,3 @@ import $ from "jquery";
 const logger = logging.getLogger("tabs");
+export const DEBOUNCE_TIMEOUT = 10;
 
@@ -26,3 +27,6 @@ export default Base.extend({
         // debounce_resize to cancel previous runs of adjust_tabs
-        const debounced_resize = utils.debounce(() => this.adjust_tabs(), 10);
+        const debounced_resize = utils.debounce(
+            () => this.adjust_tabs(),
+            DEBOUNCE_TIMEOUT
+        );
         const resize_observer = new ResizeObserver(() => {
@@ -50,2 +54,3 @@ logger.debug("Entering resize observer");
         this._flatten_tabs();
+        this.max_x = this._get_max_x();
         this._adjust_tabs();
@@ -87,4 +92,2 @@ this.el.classList.add("tabs-ready");
 
-        const max_x = this._get_max_x();
-
         // Check if tabs fit into one line by checking their start position not
@@ -104,3 +107,3 @@ // exceeding the available inner width or if they are not broken to a
             logger.debug(`New tab right position: ${it_x + it_w}px.`);
-            if ((last_x && last_x > it_x) || it_x + it_w > max_x) {
+            if ((last_x && last_x > it_x) || it_x + it_w > this.max_x) {
                 // this tab exceeds initial available width or
@@ -141,2 +144,3 @@ // breaks into a new line when width
             this.el.append(extra_tabs);
+            this.max_x = this._get_max_x();
         }
@@ -143,0 +147,0 @@

src/pat/tabs/tabs.test.js

 import pattern from "./tabs";
 import utils from "../../core/utils";
+import { DEBOUNCE_TIMEOUT } from "./tabs";
 
@@ -33,3 +34,3 @@ describe("pat-tabs", function () {
         pattern.init(nav);
-        await utils.timeout(11);
+        await utils.timeout(DEBOUNCE_TIMEOUT);
 
@@ -65,3 +66,3 @@ expect(nav.querySelector(".extra-tabs")).toBeTruthy();
         pattern.init(nav);
-        await utils.timeout(11);
+        await utils.timeout(DEBOUNCE_TIMEOUT);
 
@@ -97,3 +98,3 @@ expect(nav.querySelector(".extra-tabs")).toBeTruthy();
         pattern.init(nav);
-        await utils.timeout(11);
+        await utils.timeout(DEBOUNCE_TIMEOUT);
 
@@ -128,3 +129,3 @@ expect(nav.querySelector(".extra-tabs")).toBeFalsy();
         pattern.init(nav);
-        await utils.timeout(11);
+        await utils.timeout(DEBOUNCE_TIMEOUT);
 
@@ -159,3 +160,3 @@ expect(nav.querySelector(".extra-tabs")).toBeTruthy();
         pattern.init(nav);
-        await utils.timeout(11);
+        await utils.timeout(DEBOUNCE_TIMEOUT);
 
@@ -194,3 +195,3 @@ const extra_tabs = nav.querySelector(".extra-tabs");
         pattern.init(nav);
-        await utils.timeout(11);
+        await utils.timeout(DEBOUNCE_TIMEOUT);
 
@@ -202,2 +203,58 @@ const extra_tabs = nav.querySelector(".extra-tabs");
     });
+
+    it("7 - The adjust_tabs method is called after 10ms.", async () => {
+        document.body.innerHTML = `<nav class="pat-tabs"></nav>`;
+        const nav = document.querySelector(".pat-tabs");
+
+        const pat = pattern.init(nav);
+        const spy_adjust_tabs = jest
+            .spyOn(pat, "adjust_tabs")
+            .mockImplementation(() => {});
+        expect(spy_adjust_tabs).not.toHaveBeenCalled();
+        await utils.timeout(1);
+        expect(spy_adjust_tabs).not.toHaveBeenCalled();
+        await utils.timeout(5);
+        expect(spy_adjust_tabs).not.toHaveBeenCalled();
+        await utils.timeout(4);
+        expect(spy_adjust_tabs).toHaveBeenCalled();
+    });
+
+    it("8 - The available width is calculated once before adjusting tabs and once more after adding the extra tabs span.", async () => {
+        // To avoid re-adjusting the available width for each iteration but to
+        // take a layout change into account once the extra-tabs element was
+        // added, the _get_max_x method is called only twice.
+        document.body.innerHTML = `
+            <nav class="pat-tabs">
+                <a>1</a>
+                <a>2</a>
+                <a>3</a>
+                <a>4</a>
+            </nav>
+        `;
+
+        const nav = document.querySelector(".pat-tabs");
+        const tabs = document.querySelectorAll(".pat-tabs a");
+
+        // Mock layout.
+        jest.spyOn(nav, "getBoundingClientRect").mockImplementation(() => { return { x: 100 }; }); // prettier-ignore
+        jest.spyOn(nav, "clientWidth", "get").mockImplementation(() => 40);
+        jest.spyOn(tabs[0], "getBoundingClientRect").mockImplementation(() => { return { x: 100, width: 40 }; }); // prettier-ignore
+        jest.spyOn(tabs[1], "getBoundingClientRect").mockImplementation(() => { return { x: 100, width: 40 }; }); // prettier-ignore
+        jest.spyOn(tabs[2], "getBoundingClientRect").mockImplementation(() => { return { x: 100, width: 40 }; }); // prettier-ignore
+        jest.spyOn(tabs[3], "getBoundingClientRect").mockImplementation(() => { return { x: 100, width: 40 }; }); // prettier-ignore
+
+        expect(nav.classList.contains("tabs-ready")).toBeFalsy();
+        const pat = pattern.init(nav);
+        const spy_get_max_x = jest.spyOn(pat, "_get_max_x");
+
+        await utils.timeout(DEBOUNCE_TIMEOUT);
+
+        expect(nav.querySelector(".extra-tabs")).toBeTruthy();
+        expect(nav.querySelector(".extra-tabs").children.length).toBe(3);
+
+        expect(nav.classList.contains("tabs-wrapped")).toBeTruthy();
+        expect(nav.classList.contains("tabs-ready")).toBeTruthy();
+
+        expect(spy_get_max_x).toHaveBeenCalledTimes(2);
+    });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

7276024

increased by0.05%

Lines of code

39402

increased by0.13%

Number of medium supply chain risk alerts

22

decreased by-8.33%

No dependency changes