Add Crowdin picker retry logic and tests

Add retry logic and platform-specific styling for the Crowdin language picker to handle dynamic insertion (CROWDIN_PLATFORM_STYLING_* constants, _applyCrowdinPlatformStyling and _retryCrowdinPlatformStyling). Refactor initCrowdIn to use the new styling helper and adjust global exposure check. Update example rustdoc docs to clarify where to place the hook file. Tighten Jest config: exclude src/js/*-css.js from coverage and enforce 100% global coverage thresholds. Add/extend tests: new global-exposure.test.js, expanded crowdin tests for sphinx/rustdoc retries and fetch behaviors, and additional load-script tests for callbackless load/error handling.

Author: ReenigneArcher

examples/rustdoc/src/lib.rs

@@ -7,7 +7,10 @@
 //!
 //! ### CrowdIn
 //!
-//! Install `@lizardbyte/shared-web`, then add a rustdoc HTML hook file:
+//! Install `@lizardbyte/shared-web`, then create `rustdoc/shared-web.html`
+//! in your crate root. The crate root is the directory that contains
+//! `Cargo.toml`, so this example stores the hook at
+//! `examples/rustdoc/rustdoc/shared-web.html`.
 //!
 //! ```html
 //! <!--LIZARDBYTE/SHARED-WEB START-->

package.json

@@ -54,8 +54,17 @@
   },
   "jest": {
     "collectCoverageFrom": [
-      "src/**/*.{js,jsx}"
+      "src/**/*.{js,jsx}",
+      "!src/js/*-css.js"
     ],
+    "coverageThreshold": {
+      "global": {
+        "branches": 100,
+        "functions": 100,
+        "lines": 100,
+        "statements": 100
+      }
+    },
     "testEnvironment": "jsdom"
   },
   "scripts": {

src/js/crowdin.js

@@ -9,6 +9,8 @@ const loadScript = require('./load-script');
  * @type {string}
  */
 const CROWDIN_DIST_MIRROR = 'https://cdn.jsdelivr.net/gh/LizardByte/i18n@dist';
+const CROWDIN_PLATFORM_STYLING_MAX_ATTEMPTS = 100;
+const CROWDIN_PLATFORM_STYLING_RETRY_DELAY_MS = 50;
 
 /**
  * Monkey-patches globalThis.fetch to redirect Crowdin distribution requests to
@@ -46,6 +48,65 @@ function _installCrowdinFetchInterceptor() {
     };
 }
 
+/**
+ * Re-attempts platform styling while Crowdin inserts the language picker.
+ * @param {string} platform - UI platform ('sphinx' or 'rustdoc').
+ * @param {number} attempt - Current retry count.
+ */
+function _retryCrowdinPlatformStyling(platform, attempt) {
+    if (attempt >= CROWDIN_PLATFORM_STYLING_MAX_ATTEMPTS) {
+        return;
+    }
+
+    globalThis.setTimeout(function() {
+        _applyCrowdinPlatformStyling(platform, attempt + 1);
+    }, CROWDIN_PLATFORM_STYLING_RETRY_DELAY_MS);
+}
+
+/**
+ * Applies platform-specific placement after the Crowdin picker exists.
+ * @param {string} platform - UI platform ('sphinx' or 'rustdoc').
+ * @param {number} attempt - Current retry count.
+ */
+function _applyCrowdinPlatformStyling(platform, attempt = 0) {
+    const container = document.getElementById('crowdin-language-picker');
+
+    if (platform === 'sphinx') {
+        const button = document.getElementsByClassName('cr-picker-button')[0];
+        const sidebar = document.getElementsByClassName('sidebar-sticky')[0];
+
+        if (container === null || button === undefined || sidebar === undefined) {
+            _retryCrowdinPlatformStyling(platform, attempt);
+            return;
+        }
+
+        container.classList.remove('cr-position-bottom-left');
+        container.style.width = button.offsetWidth + 10 + 'px';
+        container.style.position = 'relative';
+        container.style.left = '10px';
+        container.style.bottom = '10px';
+
+        // move button to related pages
+        sidebar.appendChild(container);
+        return;
+    }
+
+    const sidebar = document.querySelector('.sidebar .sidebar-elems') || document.querySelector('.sidebar');
+
+    if (container === null || sidebar === null) {
+        _retryCrowdinPlatformStyling(platform, attempt);
+        return;
+    }
+
+    container.classList.remove('cr-position-bottom-left');
+    container.classList.add('rustdoc-crowdin-picker');
+    container.style.position = 'static';
+    container.style.left = 'auto';
+    container.style.bottom = 'auto';
+
+    sidebar.appendChild(container);
+}
+
 /**
  * Initializes Crowdin translation widget based on project and UI platform.
  * @param {string} project - Project name ('LizardByte' or 'LizardByte-docs').
@@ -127,42 +188,12 @@ function initCrowdIn(project = 'LizardByte', platform = null) {
             return;
         }
 
-        const container = document.getElementById('crowdin-language-picker');
-        const button = document.getElementsByClassName('cr-picker-button')[0];
-
-        if (platform === 'sphinx') {
-            container.classList.remove('cr-position-bottom-left')
-            container.style.width = button.offsetWidth + 10 + 'px';
-            container.style.position = 'relative';
-            container.style.left = '10px';
-            container.style.bottom = '10px';
-
-            // get rst versions
-            const sidebar = document.getElementsByClassName('sidebar-sticky')[0];
-
-            // move button to related pages
-            sidebar.appendChild(container);
-        }
-
-        if (platform === 'rustdoc') {
-            const sidebar = document.querySelector('.sidebar .sidebar-elems') || document.querySelector('.sidebar');
-            if (sidebar === null) {
-                return;
-            }
-
-            container.classList.remove('cr-position-bottom-left');
-            container.classList.add('rustdoc-crowdin-picker');
-            container.style.position = 'static';
-            container.style.left = 'auto';
-            container.style.bottom = 'auto';
-
-            sidebar.appendChild(container);
-        }
+        _applyCrowdinPlatformStyling(platform);
     });
 }
 
 // Expose to the global scope
-if (typeof globalThis !== 'undefined' && globalThis.window !== undefined) {
+if (globalThis.window !== undefined) {
     globalThis.initCrowdIn = initCrowdIn;
 }
 

tests/crowdin.test.js

@@ -137,6 +137,98 @@ describe('initCrowdIn', () => {
         expect(container.style.position).toBe('static');
         expect(sidebar.contains(container)).toBe(true);
     });
+
+    it('should wait for sphinx language picker before applying styling', () => {
+        globalThis.document.body.innerHTML = `
+            <div class="sidebar-sticky"></div>
+        `;
+
+        initCrowdIn('LizardByte', 'sphinx');
+
+        expect(() => {
+            jest.advanceTimersByTime(0);
+        }).not.toThrow();
+
+        globalThis.document.body.insertAdjacentHTML('beforeend', `
+            <div id="crowdin-language-picker" class="cr-position-bottom-left">
+                <div class="cr-picker-button"></div>
+                <div class="cr-picker-submenu"></div>
+            </div>
+        `);
+
+        jest.advanceTimersByTime(50);
+
+        const container = document.getElementById('crowdin-language-picker');
+        const sidebar = document.getElementsByClassName('sidebar-sticky')[0];
+
+        expect(container.classList.contains('cr-position-bottom-left')).toBe(false);
+        expect(container.style.position).toBe('relative');
+        expect(sidebar.contains(container)).toBe(true);
+    });
+
+    it('should wait for rustdoc language picker before applying styling', () => {
+        globalThis.document.body.innerHTML = `
+            <nav class="sidebar">
+                <div class="sidebar-elems"></div>
+            </nav>
+        `;
+
+        initCrowdIn('LizardByte', 'rustdoc');
+
+        expect(() => {
+            jest.advanceTimersByTime(0);
+        }).not.toThrow();
+
+        globalThis.document.body.insertAdjacentHTML('beforeend', `
+            <div id="crowdin-language-picker" class="cr-position-bottom-left">
+                <div class="cr-picker-button"></div>
+                <div class="cr-picker-submenu"></div>
+            </div>
+        `);
+
+        jest.advanceTimersByTime(50);
+
+        const container = document.getElementById('crowdin-language-picker');
+        const sidebar = document.getElementsByClassName('sidebar-elems')[0];
+
+        expect(container.classList.contains('cr-position-bottom-left')).toBe(false);
+        expect(container.classList.contains('rustdoc-crowdin-picker')).toBe(true);
+        expect(sidebar.contains(container)).toBe(true);
+    });
+
+    it('should move rustdoc language picker to sidebar when sidebar-elems is unavailable', () => {
+        globalThis.document.body.innerHTML = `
+            <nav class="sidebar"></nav>
+            <div id="crowdin-language-picker" class="cr-position-bottom-left">
+                <div class="cr-picker-button"></div>
+                <div class="cr-picker-submenu"></div>
+            </div>
+        `;
+
+        initCrowdIn('LizardByte', 'rustdoc');
+        jest.runAllTimers();
+
+        const container = document.getElementById('crowdin-language-picker');
+        const sidebar = document.getElementsByClassName('sidebar')[0];
+
+        expect(container.classList.contains('rustdoc-crowdin-picker')).toBe(true);
+        expect(sidebar.contains(container)).toBe(true);
+    });
+
+    it('should stop retrying platform styling after the retry limit', () => {
+        globalThis.document.body.innerHTML = `
+            <nav class="sidebar">
+                <div class="sidebar-elems"></div>
+            </nav>
+        `;
+
+        initCrowdIn('LizardByte', 'rustdoc');
+
+        jest.advanceTimersByTime(0);
+        jest.advanceTimersByTime(5000);
+
+        expect(jest.getTimerCount()).toBe(0);
+    });
 });
 
 describe('Crowdin fetch interceptor', () => {
@@ -234,4 +326,39 @@ describe('Crowdin fetch interceptor', () => {
 
         expect(globalThis.fetch).toBe(fetchAfterFirst);
     });
+
+    it('should continue when fetch is unavailable', () => {
+        delete globalThis.fetch;
+
+        initCrowdIn();
+        jest.runAllTimers();
+
+        expect(globalThis.proxyTranslator.init).toHaveBeenCalled();
+    });
+
+    it('should pass non-string fetch inputs through unchanged', async () => {
+        const mockFetch = globalThis.fetch;
+        const requestLike = new URL('https://example.com/data.json');
+
+        initCrowdIn();
+        jest.runAllTimers();
+
+        await globalThis.fetch(requestLike);
+
+        const calledUrl = mockFetch.mock.calls[0][0];
+        expect(calledUrl).toBe(requestLike);
+    });
+
+    it('should pass invalid URL strings through unchanged', async () => {
+        const mockFetch = globalThis.fetch;
+        const invalidUrl = 'not a valid absolute URL';
+
+        initCrowdIn();
+        jest.runAllTimers();
+
+        await globalThis.fetch(invalidUrl);
+
+        const calledUrl = mockFetch.mock.calls[0][0];
+        expect(calledUrl).toBe(invalidUrl);
+    });
 });

tests/global-exposure.test.js

@@ -0,0 +1,31 @@
+/**
+ * @jest-environment node
+ */
+
+import {
+    describe,
+    expect,
+    it,
+    jest,
+} from '@jest/globals';
+
+const exposedModules = [
+    ['formatNumber', '../src/js/format-number'],
+    ['initCrowdIn', '../src/js/crowdin'],
+    ['levenshteinDistance', '../src/js/levenshtein-distance'],
+    ['loadScript', '../src/js/load-script'],
+    ['rankingSorter', '../src/js/ranking-sorter'],
+    ['sleep', '../src/js/sleep'],
+];
+
+describe('global browser exposure', () => {
+    it.each(exposedModules)('should not expose %s when window is unavailable', (globalName, modulePath) => {
+        jest.resetModules();
+
+        const moduleExport = require(modulePath);
+
+        expect(globalThis.window).toBeUndefined();
+        expect(moduleExport).toBeDefined();
+        expect(globalThis[globalName]).toBeUndefined();
+    });
+});

tests/load-script.test.js

@@ -45,4 +45,26 @@ describe('loadScript', () => {
     expect(script).toBeInstanceOf(HTMLScriptElement);
     expect(script.src).toBe(url);
   });
+
+  it('should handle load without a callback', () => {
+    const url = 'https://example.com/test-script.js';
+    loadScript(url);
+
+    const script = document.head.querySelector('script');
+
+    expect(() => {
+      script.onload();
+    }).not.toThrow();
+  });
+
+  it('should handle failure without a callback', () => {
+    const url = 'https://example.com/test-script.js';
+    loadScript(url);
+
+    const script = document.head.querySelector('script');
+
+    expect(() => {
+      script.onerror();
+    }).not.toThrow();
+  });
 });