@oracle/oraclejet-preact 14.0.10 → 14.1.1

package/cjs/UNSAFE_MeterBar/__tests__/MeterBar.spec.js

@@ -0,0 +1,920 @@
+/* @oracle/oraclejet-preact: 14.1.1 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('@testing-library/preact');
+var chai = require('chai');
+var UNSAFE_MeterBar = require('../../UNSAFE_MeterBar.js');
+var utils_UNSAFE_matchTranslationBundle = require('../../utils/UNSAFE_matchTranslationBundle.js');
+var UNSAFE_Environment = require('../../UNSAFE_Environment.js');
+var userEvent = require('@testing-library/user-event');
+require('../../utils/PRIVATE_clientHints.js');
+var clientHints = require('../../clientHints-5c8adda8.js');
+require('../../tslib.es6-337905dc.js');
+require('../../utils/UNSAFE_size.js');
+require("identity-obj-proxy");
+require('../../utils/UNSAFE_classNames.js');
+require('../../classNames-28108b7d.js');
+require('../../utils/UNSAFE_mergeProps.js');
+require('preact/hooks');
+require('../../hooks/UNSAFE_useUser.js');
+require('preact');
+require('../../UNSAFE_Layer.js');
+require('preact/compat');
+require('../../hooks/PRIVATE_useDvtMeterEvents.js');
+require('../../hooks/UNSAFE_useTooltip.js');
+require('../../hooks/UNSAFE_useId.js');
+require('../../UNSAFE_Floating.js');
+require('../../Floating-939d2a3b.js');
+require('../../index-81333995.js');
+require('../../utils/PRIVATE_floatingUtils.js');
+require('../../utils/PRIVATE_refUtils.js');
+require('../../hooks/UNSAFE_useOutsideClick.js');
+require('../../utils/UNSAFE_arrayUtils.js');
+require('../../hooks/UNSAFE_useHover.js');
+require('../../hooks/UNSAFE_useToggle.js');
+require('../../hooks/UNSAFE_useFocus.js');
+require('../../hooks/UNSAFE_useTouch.js');
+require('../../hooks/UNSAFE_useAnimation.js');
+require('../../useAnimation-4166b248.js');
+require('../../utils/PRIVATE_meterUtils.js');
+require('../../utils/UNSAFE_dvtCommonUtils.js');
+require('../../PRIVATE_Meter.js');
+require('../../hooks/UNSAFE_useTabbableMode.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var userEvent__default = /*#__PURE__*/_interopDefaultLegacy(userEvent);
+
+function __variableDynamicImportRuntime1__(path) {
+  switch (path) {
+    case '../../resources/nls/ar/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ar/bundle.js'); });
+    case '../../resources/nls/ar-XB/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ar-XB/bundle.js'); });
+    case '../../resources/nls/bg/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bg/bundle.js'); });
+    case '../../resources/nls/bs/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bs/bundle.js'); });
+    case '../../resources/nls/bs-Cyrl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bs-Cyrl/bundle.js'); });
+    case '../../resources/nls/cs/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/cs/bundle.js'); });
+    case '../../resources/nls/da/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/da/bundle.js'); });
+    case '../../resources/nls/de/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/de/bundle.js'); });
+    case '../../resources/nls/el/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/el/bundle.js'); });
+    case '../../resources/nls/en/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en/bundle.js'); });
+    case '../../resources/nls/en-XA/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en-XA/bundle.js'); });
+    case '../../resources/nls/en-XC/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en-XC/bundle.js'); });
+    case '../../resources/nls/es/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/es/bundle.js'); });
+    case '../../resources/nls/et/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/et/bundle.js'); });
+    case '../../resources/nls/fi/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fi/bundle.js'); });
+    case '../../resources/nls/fr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fr/bundle.js'); });
+    case '../../resources/nls/fr-CA/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fr-CA/bundle.js'); });
+    case '../../resources/nls/he/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/he/bundle.js'); });
+    case '../../resources/nls/hr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/hr/bundle.js'); });
+    case '../../resources/nls/hu/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/hu/bundle.js'); });
+    case '../../resources/nls/is/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/is/bundle.js'); });
+    case '../../resources/nls/it/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/it/bundle.js'); });
+    case '../../resources/nls/ja/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ja/bundle.js'); });
+    case '../../resources/nls/ko/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ko/bundle.js'); });
+    case '../../resources/nls/lt/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/lt/bundle.js'); });
+    case '../../resources/nls/lv/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/lv/bundle.js'); });
+    case '../../resources/nls/ms/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ms/bundle.js'); });
+    case '../../resources/nls/nl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/nl/bundle.js'); });
+    case '../../resources/nls/no/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/no/bundle.js'); });
+    case '../../resources/nls/pl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pl/bundle.js'); });
+    case '../../resources/nls/pt/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pt/bundle.js'); });
+    case '../../resources/nls/pt-PT/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pt-PT/bundle.js'); });
+    case '../../resources/nls/ro/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ro/bundle.js'); });
+    case '../../resources/nls/ru/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ru/bundle.js'); });
+    case '../../resources/nls/sk/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sk/bundle.js'); });
+    case '../../resources/nls/sl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sl/bundle.js'); });
+    case '../../resources/nls/sr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sr/bundle.js'); });
+    case '../../resources/nls/sr-Latn/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sr-Latn/bundle.js'); });
+    case '../../resources/nls/sv/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sv/bundle.js'); });
+    case '../../resources/nls/th/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/th/bundle.js'); });
+    case '../../resources/nls/tr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/tr/bundle.js'); });
+    case '../../resources/nls/uk/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/uk/bundle.js'); });
+    case '../../resources/nls/vi/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/vi/bundle.js'); });
+    case '../../resources/nls/zh-Hans/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/zh-Hans/bundle.js'); });
+    case '../../resources/nls/zh-Hant/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/zh-Hant/bundle.js'); });
+    default: return new Promise(function(resolve, reject) {
+      (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+        reject.bind(null, new Error("Unknown variable dynamic import: " + path))
+      );
+    })
+   }
+ }
+
+function __variableDynamicImportRuntime0__(path) {
+  switch (path) {
+    case '../../resources/nls/ar/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ar/bundle.js'); });
+    case '../../resources/nls/ar-XB/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ar-XB/bundle.js'); });
+    case '../../resources/nls/bg/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bg/bundle.js'); });
+    case '../../resources/nls/bs/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bs/bundle.js'); });
+    case '../../resources/nls/bs-Cyrl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bs-Cyrl/bundle.js'); });
+    case '../../resources/nls/cs/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/cs/bundle.js'); });
+    case '../../resources/nls/da/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/da/bundle.js'); });
+    case '../../resources/nls/de/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/de/bundle.js'); });
+    case '../../resources/nls/el/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/el/bundle.js'); });
+    case '../../resources/nls/en/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en/bundle.js'); });
+    case '../../resources/nls/en-XA/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en-XA/bundle.js'); });
+    case '../../resources/nls/en-XC/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en-XC/bundle.js'); });
+    case '../../resources/nls/es/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/es/bundle.js'); });
+    case '../../resources/nls/et/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/et/bundle.js'); });
+    case '../../resources/nls/fi/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fi/bundle.js'); });
+    case '../../resources/nls/fr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fr/bundle.js'); });
+    case '../../resources/nls/fr-CA/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fr-CA/bundle.js'); });
+    case '../../resources/nls/he/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/he/bundle.js'); });
+    case '../../resources/nls/hr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/hr/bundle.js'); });
+    case '../../resources/nls/hu/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/hu/bundle.js'); });
+    case '../../resources/nls/is/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/is/bundle.js'); });
+    case '../../resources/nls/it/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/it/bundle.js'); });
+    case '../../resources/nls/ja/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ja/bundle.js'); });
+    case '../../resources/nls/ko/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ko/bundle.js'); });
+    case '../../resources/nls/lt/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/lt/bundle.js'); });
+    case '../../resources/nls/lv/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/lv/bundle.js'); });
+    case '../../resources/nls/ms/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ms/bundle.js'); });
+    case '../../resources/nls/nl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/nl/bundle.js'); });
+    case '../../resources/nls/no/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/no/bundle.js'); });
+    case '../../resources/nls/pl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pl/bundle.js'); });
+    case '../../resources/nls/pt/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pt/bundle.js'); });
+    case '../../resources/nls/pt-PT/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pt-PT/bundle.js'); });
+    case '../../resources/nls/ro/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ro/bundle.js'); });
+    case '../../resources/nls/ru/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ru/bundle.js'); });
+    case '../../resources/nls/sk/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sk/bundle.js'); });
+    case '../../resources/nls/sl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sl/bundle.js'); });
+    case '../../resources/nls/sr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sr/bundle.js'); });
+    case '../../resources/nls/sr-Latn/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sr-Latn/bundle.js'); });
+    case '../../resources/nls/sv/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sv/bundle.js'); });
+    case '../../resources/nls/th/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/th/bundle.js'); });
+    case '../../resources/nls/tr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/tr/bundle.js'); });
+    case '../../resources/nls/uk/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/uk/bundle.js'); });
+    case '../../resources/nls/vi/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/vi/bundle.js'); });
+    case '../../resources/nls/zh-Hans/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/zh-Hans/bundle.js'); });
+    case '../../resources/nls/zh-Hant/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/zh-Hant/bundle.js'); });
+    default: return new Promise(function(resolve, reject) {
+      (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+        reject.bind(null, new Error("Unknown variable dynamic import: " + path))
+      );
+    })
+   }
+ }
+const DATATIP_TEST_TIMEOUT = 3000;
+const DATATIP_TEXT = 'datatip_text';
+describe('Test MeterBar component', () => {
+    it('render', async function () {
+        const locale = utils_UNSAFE_matchTranslationBundle.matchTranslationBundle(['en'], new Set(['en-US', 'en']));
+        const { default: translations } = await __variableDynamicImportRuntime0__(`../../resources/nls/${locale}/bundle.ts`);
+        const env = {
+            translations: { '@oracle/oraclejet-preact': translations }
+        };
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, accessibleLabel: "ariaText" }) })));
+        const initials = await content.getAllByLabelText('ariaText');
+        chai.expect(initials).not.null;
+    });
+    it('applies Linaria CSS classes', async () => {
+        const locale = utils_UNSAFE_matchTranslationBundle.matchTranslationBundle(['en'], new Set(['en-US', 'en']));
+        const { default: translations } = await __variableDynamicImportRuntime1__(`../../resources/nls/${locale}/bundle.ts`);
+        const env = {
+            translations: { '@oracle/oraclejet-preact': translations }
+        };
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, min: 0, max: 100 }) })));
+        const firstElement = content.container.firstElementChild;
+        // @ts-ignore
+        const classList = firstElement.classList;
+        chai.expect(classList.length).equals(2);
+    });
+});
+describe('Test Meter Bar ARIA props', () => {
+    it('Test default aria properties of Meter Bar', async function () {
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20 }));
+        const firstElement = content.container.firstElementChild;
+        chai.expect(firstElement.getAttribute('aria-valuemax')).equals('100');
+        chai.expect(firstElement.getAttribute('aria-valuenow')).equals('20');
+        chai.expect(firstElement.getAttribute('aria-valuemin')).equals('0');
+        chai.expect(firstElement.getAttribute('aria-valuetext')).equals('20 ');
+        chai.expect(firstElement.getAttribute('aria-describedby')).not.null;
+        chai.expect(firstElement.getAttribute('aria-labelledby')).null;
+    });
+    it('Test value, role, min and max property of Meter Bar', async function () {
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 100, max: 150, min: 50 }));
+        const firstElement = content.container.firstElementChild;
+        chai.expect(firstElement.getAttribute('role')).equals('slider');
+        chai.expect(firstElement.getAttribute('aria-valuemax')).equals('150');
+        chai.expect(firstElement.getAttribute('aria-valuenow')).equals('100');
+        chai.expect(firstElement.getAttribute('aria-valuemin')).equals('50');
+        chai.expect(firstElement.getAttribute('aria-valuetext')).equals('100 ');
+    });
+    it('Test accessiblelabel,describedBy,labelledby property of Meter Bar', async function () {
+        const testAccessibleLabel = 'TEST-ACCESSIBLE-LABEL';
+        const testAriaDescribedBy = 'TEST ARIA-DESCRIBED-BY';
+        const testAriaLabeledBy = 'TEST ARIA-LABELLED-BY';
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, accessibleLabel: testAccessibleLabel, ariaDescribedBy: testAriaDescribedBy, ariaLabelledBy: testAriaLabeledBy }));
+        const firstElement = content.container.firstElementChild;
+        chai.expect(firstElement.getAttribute('aria-label')).equals(testAccessibleLabel);
+        const meterDescribedBy = firstElement.getAttribute('aria-describedby');
+        const describedByIds = meterDescribedBy === null || meterDescribedBy === void 0 ? void 0 : meterDescribedBy.split(' ');
+        chai.expect(describedByIds === null || describedByIds === void 0 ? void 0 : describedByIds.length).equals(3); // including aria describedby for default datatip
+        chai.expect(describedByIds ? describedByIds[0] : '').equals('TEST');
+        chai.expect(describedByIds ? describedByIds[1] : '').equals('ARIA-DESCRIBED-BY');
+        chai.expect(firstElement.getAttribute('aria-labelledby')).equals(testAriaLabeledBy);
+    });
+});
+describe('Test "Size" property of Meter Bar ', () => {
+    if (typeof jest === 'undefined') {
+        it('Test default size', async function () {
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 5 }));
+            const firstElement = content.container.firstElementChild;
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'Default size is correct').to.be.equal('12px');
+        });
+        it('Test "size = large"', async function () {
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 5, size: "lg" }));
+            const firstElement = content.container.firstElementChild;
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'Large size is correct').to.be.equal('12px');
+        });
+        it('Test "size = medium"', async function () {
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, size: "md" }));
+            const firstElement = content.container.firstElementChild;
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'Medium size is correct').to.be.equal('8px');
+        });
+        it('Test "size = small"', async function () {
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, size: "sm" }));
+            const firstElement = content.container.firstElementChild;
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'Small size is correct').to.be.equal('4px');
+        });
+    }
+});
+describe('Test "Length" attribute of Meter Bar ', () => {
+    if (typeof jest === 'undefined') {
+        it('Test default length of Meter Bar', async function () {
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20 }));
+            const firstElement = content.container.firstElementChild;
+            chai.expect(firstElement.style.width).equals('100%');
+        });
+        it('Test length of Meter Bar when set in percentage (%)', async function () {
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, length: "25%" }));
+            const firstElement = content.container.firstElementChild;
+            chai.expect(firstElement.style.width).equals('25%');
+        });
+        it('Test length of Meter Bar when set in x ', async function () {
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, length: "100x" }));
+            const firstElement = content.container.firstElementChild;
+            chai.expect(firstElement.style.width).equals('calc(100 * var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-1x))');
+        });
+    }
+});
+describe('Test indicator APIs of Meter Bar ', () => {
+    it('Test default indicatorSize of Meter Bar', async function () {
+        var _a, _b;
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20 }));
+        const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[0];
+        chai.expect(firstElement.style.height).equals('100%');
+    });
+    it('Test indicatorSize of Meter Bar', async function () {
+        var _a, _b;
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, indicatorSize: 0.5 }));
+        const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[0];
+        chai.expect(firstElement.style.height).equals('50%');
+    });
+    it('Test default indicatorColor of Meter Bar', async function () {
+        var _a, _b;
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20 }));
+        const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[0];
+        chai.expect(firstElement.style.backgroundColor).equals('');
+    });
+    it('Test indicatorColor of Meter Bar', async function () {
+        var _a, _b;
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, indicatorColor: 'red' }));
+        const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[0];
+        chai.expect(firstElement.style.backgroundColor).equals('red');
+    });
+});
+describe('Test "Track"  attribute of Meter Bar ', () => {
+    it('Test default Track of Meter Bar', async function () {
+        var _a;
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20 }));
+        const firstElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+        chai.expect(firstElement.style.backgroundColor).equals('');
+    });
+    it('Test Track not present in Meter Bar when isTrackRendered is set to false', async function () {
+        var _a;
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, isTrackRendered: false, trackColor: 'red' }));
+        const firstElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+        chai.expect(firstElement.style.backgroundColor).equals('transparent');
+    });
+    it('Test isTrackRendered and track color attribute with value as true in Meter Bar', async function () {
+        var _a;
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, isTrackRendered: true, trackColor: 'red' }));
+        const firstElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+        chai.expect(firstElement.style.backgroundColor).equals('red');
+    });
+});
+if (typeof jest === 'undefined') {
+    describe('Test Thresholds attribute of Meter Bar ', () => {
+        const thresholds = [
+            {
+                max: 33,
+                color: 'red',
+                accessibleLabel: 'accesibleLabel'
+            },
+            {
+                max: 65,
+                color: 'yellow'
+            },
+            {
+                max: 100,
+                color: 'green'
+            }
+        ];
+        const thresholdsEnum = [
+            {
+                max: 33,
+                color: 'danger'
+            },
+            {
+                max: 65,
+                color: 'warning'
+            },
+            {
+                max: 100,
+                color: 'success'
+            }
+        ];
+        it('Test threshold color in Meter Bar', async function () {
+            var _a, _b, _c, _d, _e, _f;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, thresholds: thresholds }));
+            const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[0];
+            chai.expect(firstElement.style.backgroundColor).equals('red');
+            const firstElementThirdChild = (_d = (_c = content.container.firstElementChild) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.childNodes[2];
+            chai.expect(firstElementThirdChild.style.backgroundColor).equals('yellow');
+            const firstElementFourthChild = (_f = (_e = content.container.firstElementChild) === null || _e === void 0 ? void 0 : _e.firstElementChild) === null || _f === void 0 ? void 0 : _f.childNodes[4];
+            chai.expect(firstElementFourthChild.style.backgroundColor).equals('green');
+        });
+        it('Test threshold color enums in Meter Bar when thresholdDisplay is set to all', async function () {
+            var _a, _b, _c, _d, _e, _f;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, thresholdDisplay: "all", thresholds: thresholdsEnum }));
+            const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[0];
+            chai.expect(firstElement.style.backgroundColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger)');
+            const firstElementThirdChild = (_d = (_c = content.container.firstElementChild) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.childNodes[2];
+            chai.expect(firstElementThirdChild.style.backgroundColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-warning)');
+            const firstElementFourthChild = (_f = (_e = content.container.firstElementChild) === null || _e === void 0 ? void 0 : _e.firstElementChild) === null || _f === void 0 ? void 0 : _f.childNodes[4];
+            chai.expect(firstElementFourthChild.style.backgroundColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-success)');
+        });
+        it('Test threshold color enums in Meter Bar when thresholdDisplay is set to track', async function () {
+            var _a;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, thresholdDisplay: "track", thresholds: thresholdsEnum }));
+            const firstElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            chai.expect(firstElement.style.backgroundColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger)');
+        });
+        it('Test threshold color enums in Meter Bar when thresholdDisplay is set to indicator', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, thresholdDisplay: "indicator", thresholds: thresholdsEnum }));
+            const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[0];
+            chai.expect(firstElement.style.backgroundColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger)');
+        });
+        it('Test aria-valuetext for threshold color in Meter Bar', async function () {
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, thresholds: thresholds }));
+            const firstElement = content.container.firstElementChild;
+            chai.expect(firstElement.getAttribute('aria-valuetext')).equals('20 accesibleLabel');
+        });
+        it('Test threshold for horizontal border properties class in Meter Bar', async function () {
+            var _a, _b, _c, _d, _e, _f;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, thresholds: thresholds }));
+            const firstThresholdElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[0];
+            chai.expect(window.getComputedStyle(firstThresholdElement).getPropertyValue('border-radius'), 'horizontal border radius is correct').to.be.equals('2px 0px 0px 2px');
+            chai.expect(window.getComputedStyle(firstThresholdElement).getPropertyValue('border-color'), 'horizontal border color is correct').to.be.equals('rgba(245, 244, 242, 0.7)');
+            chai.expect(window.getComputedStyle(firstThresholdElement).getPropertyValue('border-width'), 'horizontal order width is correct').to.be.equals('0px 1px 0px 0px');
+            const secondThresholdElement = (_d = (_c = content.container.firstElementChild) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.childNodes[2];
+            chai.expect(window.getComputedStyle(secondThresholdElement).getPropertyValue('border-radius'), 'horizontal border radius is correct').to.be.equals('0px');
+            chai.expect(window.getComputedStyle(secondThresholdElement).getPropertyValue('border-color'), 'horizontal border color is correct').to.be.equal('rgba(245, 244, 242, 0.7)');
+            chai.expect(window.getComputedStyle(secondThresholdElement).getPropertyValue('border-width'), 'horizontal border width is correct').to.be.equals('0px 1px 0px 0px');
+            const thirdThresholdElement = (_f = (_e = content.container.firstElementChild) === null || _e === void 0 ? void 0 : _e.firstElementChild) === null || _f === void 0 ? void 0 : _f.childNodes[4];
+            chai.expect(window.getComputedStyle(thirdThresholdElement).getPropertyValue('border-radius'), 'horizontal border radius is correct').to.be.equals('0px 2px 2px 0px');
+            chai.expect(window.getComputedStyle(thirdThresholdElement).getPropertyValue('border-color'), 'horizontal border color is correct').to.be.equals('rgba(245, 244, 242, 0.7)');
+            chai.expect(window.getComputedStyle(thirdThresholdElement).getPropertyValue('border-width'), 'horizontal border width is correct').to.be.equals('0px 1px 0px 0px');
+        });
+        it('Test threshold for vertical border properties class in Meter Bar', async function () {
+            var _a, _b, _c, _d, _e, _f;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, thresholds: thresholds, orientation: "vertical" }));
+            const firstThresholdElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[0];
+            chai.expect(window.getComputedStyle(firstThresholdElement).getPropertyValue('border-radius'), 'vertical border radius is correct').to.be.equals('0px 0px 2px 2px');
+            chai.expect(window.getComputedStyle(firstThresholdElement).getPropertyValue('border-color'), 'vertical border color is correct').to.be.equals('rgba(245, 244, 242, 0.7)');
+            chai.expect(window.getComputedStyle(firstThresholdElement).getPropertyValue('border-width'), 'vertical border width is correct').to.be.equals('1px 0px 0px');
+            const secondThresholdElement = (_d = (_c = content.container.firstElementChild) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.childNodes[2];
+            chai.expect(window.getComputedStyle(secondThresholdElement).getPropertyValue('border-radius'), 'vertical border radius is correct').to.be.equals('0px');
+            chai.expect(window.getComputedStyle(secondThresholdElement).getPropertyValue('border-color'), 'vertical border color is correct').to.be.equal('rgba(245, 244, 242, 0.7)');
+            chai.expect(window.getComputedStyle(secondThresholdElement).getPropertyValue('border-width'), 'vertical border width is correct').to.be.equals('1px 0px 0px');
+            const thirdThresholdElement = (_f = (_e = content.container.firstElementChild) === null || _e === void 0 ? void 0 : _e.firstElementChild) === null || _f === void 0 ? void 0 : _f.childNodes[4];
+            chai.expect(window.getComputedStyle(thirdThresholdElement).getPropertyValue('border-radius'), 'vertical border radius is correct').to.be.equals('2px 2px 0px 0px');
+            chai.expect(window.getComputedStyle(thirdThresholdElement).getPropertyValue('border-color'), 'vertical border color is correct').to.be.equals('rgba(245, 244, 242, 0.7)');
+            chai.expect(window.getComputedStyle(thirdThresholdElement).getPropertyValue('border-width'), 'vertical border width is correct').to.be.equals('1px 0px 0px');
+        });
+        it('Test threshold for horizontal border properties class when single threshold from min to max in Meter Bar', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, thresholds: [{ max: 100 }] }));
+            const firstThresholdElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[0];
+            chai.expect(window.getComputedStyle(firstThresholdElement).getPropertyValue('border-radius'), 'horizontal border width is correct').to.be.equals('2px');
+            chai.expect(window.getComputedStyle(firstThresholdElement).getPropertyValue('border-color'), 'horizontal border color is correct').to.be.equals('rgba(245, 244, 242, 0.7)');
+            chai.expect(window.getComputedStyle(firstThresholdElement).getPropertyValue('border-width'), 'horizontal border width is correct').to.be.equals('0px 1px 0px 0px');
+        });
+        it('Test threshold for vertical border properties class when single threshold from min to max in Meter Bar', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, thresholds: [{ max: 100 }], orientation: "vertical" }));
+            const firstThresholdElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[0];
+            chai.expect(window.getComputedStyle(firstThresholdElement).getPropertyValue('border-radius'), 'vertical border width is correct').to.be.equals('2px');
+            chai.expect(window.getComputedStyle(firstThresholdElement).getPropertyValue('border-color'), 'vertical border color is correct').to.be.equals('rgba(245, 244, 242, 0.7)');
+            chai.expect(window.getComputedStyle(firstThresholdElement).getPropertyValue('border-width'), 'vertical border width is correct').to.be.equals('1px 0px 0px');
+        });
+    });
+}
+describe('Test "Orientation" attribute of Meter Bar ', () => {
+    it('Test default orientation of Meter Bar', async function () {
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20 }));
+        const firstElement = content.container.firstElementChild;
+        chai.expect(firstElement.classList.length).equals(2);
+    });
+    it('Test horizontal orientation of Meter Bar', async function () {
+        var _a;
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, orientation: "horizontal" }));
+        const firstElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+        chai.expect(firstElement.classList.length).equals(2);
+    });
+    it('Test vertical orientation of Meter Bar', async function () {
+        var _a;
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, orientation: "vertical" }));
+        const firstElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+        chai.expect(firstElement.classList.length).equals(3);
+    });
+});
+if (typeof jest === 'undefined') {
+    describe('Test to check the rendering of reference lines', () => {
+        it('Multiple Reference Lines to check color and value', async () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 10, length: "100x", referenceLines: [
+                    {
+                        value: 40,
+                        color: '#3A6E96',
+                        position: 'start'
+                    },
+                    {
+                        value: 50,
+                        color: '#3A6E96',
+                        position: 'start'
+                    },
+                    {
+                        value: 70,
+                        color: 'red',
+                        position: 'start'
+                    },
+                    {
+                        value: 60,
+                        position: 'end'
+                    }
+                ] }));
+            const innerElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[3];
+            chai.expect(innerElement.style.backgroundColor).equals('red');
+            chai.expect(innerElement.style.left).equals('70%');
+            const innerElement2 = (_d = (_c = content.container.firstElementChild) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.childNodes[2];
+            chai.expect(innerElement2.style.backgroundColor).equals('rgb(58, 110, 150)');
+            chai.expect(innerElement2.style.left).equals('50%');
+            const innerElement1 = (_f = (_e = content.container.firstElementChild) === null || _e === void 0 ? void 0 : _e.firstElementChild) === null || _f === void 0 ? void 0 : _f.childNodes[1];
+            chai.expect(innerElement1.style.backgroundColor).equals('rgb(58, 110, 150)');
+            chai.expect(innerElement1.style.left).equals('40%');
+            const innerElement4 = (_h = (_g = content.container.firstElementChild) === null || _g === void 0 ? void 0 : _g.firstElementChild) === null || _h === void 0 ? void 0 : _h.childNodes[4];
+            chai.expect(innerElement4.style.backgroundColor).equals('');
+            chai.expect(innerElement4.style.left).equals('60%');
+        });
+        it('Multiple Reference Lines to check color and value in Vertical Meter Bar', async () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 10, length: "100x", orientation: "vertical", referenceLines: [
+                    {
+                        value: 40,
+                        color: '#3A6E96',
+                        position: 'start'
+                    },
+                    {
+                        value: 50,
+                        color: '#3A6E96',
+                        position: 'start'
+                    },
+                    {
+                        value: 70,
+                        color: 'red',
+                        position: 'start'
+                    },
+                    {
+                        value: 60,
+                        position: 'end'
+                    }
+                ] }));
+            const innerElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[3];
+            chai.expect(innerElement.style.bottom).equals('70%');
+            const innerElement2 = (_d = (_c = content.container.firstElementChild) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.childNodes[2];
+            chai.expect(innerElement2.style.bottom).equals('50%');
+            const innerElement1 = (_f = (_e = content.container.firstElementChild) === null || _e === void 0 ? void 0 : _e.firstElementChild) === null || _f === void 0 ? void 0 : _f.childNodes[1];
+            chai.expect(innerElement1.style.bottom).equals('40%');
+            const innerElement4 = (_h = (_g = content.container.firstElementChild) === null || _g === void 0 ? void 0 : _g.firstElementChild) === null || _h === void 0 ? void 0 : _h.childNodes[4];
+            chai.expect(innerElement4.style.bottom).equals('60%');
+        });
+        it('Multiple Reference Lines to check color enums', async () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 10, length: "100x", referenceLines: [
+                    {
+                        value: 40,
+                        color: 'danger',
+                        position: 'start'
+                    },
+                    {
+                        value: 50,
+                        color: 'warning',
+                        position: 'start'
+                    },
+                    {
+                        value: 70,
+                        color: 'success',
+                        position: 'start'
+                    },
+                    {
+                        value: 60,
+                        position: 'end'
+                    }
+                ] }));
+            const innerElement1 = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[1];
+            chai.expect(innerElement1.style.backgroundColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger)');
+            const innerElement2 = (_d = (_c = content.container.firstElementChild) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.childNodes[2];
+            chai.expect(innerElement2.style.backgroundColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-warning)');
+            const innerElement3 = (_f = (_e = content.container.firstElementChild) === null || _e === void 0 ? void 0 : _e.firstElementChild) === null || _f === void 0 ? void 0 : _f.childNodes[3];
+            chai.expect(innerElement3.style.backgroundColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-success)');
+            const innerElement4 = (_h = (_g = content.container.firstElementChild) === null || _g === void 0 ? void 0 : _g.firstElementChild) === null || _h === void 0 ? void 0 : _h.childNodes[4];
+            chai.expect(window.getComputedStyle(innerElement4).backgroundColor).equals('rgba(22, 21, 19, 0.8)');
+            chai.expect(window.getComputedStyle(innerElement4).borderRight).equals('1px solid rgba(245, 244, 242, 0.7)');
+        });
+        it('Reference Lines position and colour in horizontal MeterBar', async () => {
+            var _a, _b, _c, _d;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 10, length: "100x", referenceLines: [
+                    {
+                        value: 40,
+                        color: '#3A6E96',
+                        position: 'start'
+                    },
+                    {
+                        value: 80,
+                        position: 'end'
+                    }
+                ] }));
+            const innerElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[1];
+            chai.expect(innerElement.classList.length).equals(4);
+            chai.expect(window.getComputedStyle(innerElement).getPropertyValue('bottom'), 'Position is correct').to.be.equal('0px');
+            const innerElement1 = (_d = (_c = content.container.firstElementChild) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.childNodes[2];
+            chai.expect(window.getComputedStyle(innerElement1).getPropertyValue('bottom'), 'Position is correct').to.be.equal('-8px');
+            chai.expect(innerElement1.style.backgroundColor).equals('');
+        });
+        it('Reference Lines position in vertical MeterBar', async () => {
+            var _a, _b, _c, _d;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 10, length: "100x", orientation: "vertical", referenceLines: [
+                    {
+                        value: 40,
+                        color: '#3A6E96',
+                        position: 'start'
+                    },
+                    {
+                        value: 80,
+                        position: 'end'
+                    }
+                ] }));
+            const innerElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[1];
+            chai.expect(innerElement.classList.length).equals(4);
+            chai.expect(window.getComputedStyle(innerElement).getPropertyValue('right'), 'Position is correct').to.be.equal('0px');
+            const innerElement1 = (_d = (_c = content.container.firstElementChild) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.childNodes[2];
+            chai.expect(window.getComputedStyle(innerElement1).getPropertyValue('right'), 'Position is correct').to.be.equal('-8px');
+            chai.expect(innerElement1.style.backgroundColor).equals('');
+        });
+    });
+}
+describe('Mouse Interaction', () => {
+    const clientHints$1 = clientHints.getClientHints();
+    if (typeof jest === 'undefined' && clientHints$1.browser === 'chrome') {
+        mocha.timeout(DATATIP_TEST_TIMEOUT);
+        it('check default datatip correctly triggered with mouse interaction', async () => {
+            var _a;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 30 }) }));
+            const MeterBarElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            userEvent__default["default"].hover(MeterBarElement);
+            await preact.waitFor(() => checkDatatipText('30'), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check datatip correctly triggered with mouse interaction', async () => {
+            var _a;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 30, datatip: DATATIP_TEXT }) }));
+            const MeterBarElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            userEvent__default["default"].hover(MeterBarElement);
+            await preact.waitFor(() => checkDatatipText(DATATIP_TEXT), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check datatip when set to null, correctly triggered with mouse interaction', async () => {
+            var _a;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 30, datatip: null }) }));
+            const MeterBarElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            userEvent__default["default"].hover(MeterBarElement);
+            const targetElements = document.querySelectorAll('[role="tooltip"]');
+            chai.expect(targetElements.length).equals(0);
+        });
+        it('check onCommit event is correctly triggered with mouse interaction', async () => {
+            var _a;
+            const clickListenerObj = { clicked: false };
+            const handleOnCommit = (detail) => {
+                if (detail.value != null)
+                    clickListenerObj.clicked = true;
+            };
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, onCommit: handleOnCommit }) }));
+            const MeterBarElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            preact.fireEvent.pointerUp(MeterBarElement);
+            await preact.waitFor(() => chai.expect(clickListenerObj.clicked).equals(true));
+        });
+        /*it('check onInput event is correctly triggered with mouse interaction', async () => {
+          const hoverListenerObj = { hovered: false };
+          const handleOnInput = (detail: any) => {
+            if (detail.value != null) hoverListenerObj.hovered = true;
+          };
+          const content = render(
+            <RootEnvironmentProvider>
+              <MeterBar value={20} onInput={handleOnInput} />
+            </RootEnvironmentProvider>
+          );
+          const MeterBarElement = content.container.firstElementChild as HTMLElement;
+          console.log("MeterBarElement for onCommit",MeterBarElement);
+          fireEvent.pointerDown(MeterBarElement);
+          userEvent.click(MeterBarElement);
+          await waitFor(() => expect(hoverListenerObj.hovered).equals(true));
+        });*/
+    }
+});
+describe('Mouse Interaction in RTL mode', () => {
+    const clientHints$1 = clientHints.getClientHints();
+    if (typeof jest === 'undefined' && clientHints$1.browser === 'chrome') {
+        mocha.timeout(DATATIP_TEST_TIMEOUT);
+        it('check default datatip correctly triggered with mouse interaction', async () => {
+            var _a;
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 30 }) })));
+            const MeterBarElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            userEvent__default["default"].hover(MeterBarElement);
+            await preact.waitFor(() => checkDatatipText('30'), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check datatip correctly triggered with mouse interaction', async () => {
+            var _a;
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 30, datatip: DATATIP_TEXT }) })));
+            const MeterBarElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            userEvent__default["default"].hover(MeterBarElement);
+            await preact.waitFor(() => checkDatatipText(DATATIP_TEXT), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check datatip when set to null, correctly triggered with mouse interaction', async () => {
+            var _a;
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 30, datatip: null }) })));
+            const MeterBarElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            userEvent__default["default"].hover(MeterBarElement);
+            const targetElements = document.querySelectorAll('[role="tooltip"]');
+            chai.expect(targetElements.length).equals(0);
+        });
+        it('check onCommit event is correctly triggered with mouse interaction', async () => {
+            var _a;
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            const clickListenerObj = { clicked: false };
+            const handleOnCommit = (detail) => {
+                if (detail.value != null)
+                    clickListenerObj.clicked = true;
+            };
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, onCommit: handleOnCommit }) })));
+            const MeterBarElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            preact.fireEvent.pointerUp(MeterBarElement);
+            await preact.waitFor(() => chai.expect(clickListenerObj.clicked).equals(true));
+        });
+        /*it('check onInput event is correctly triggered with mouse interaction', async () => {
+          const env: Partial<RootEnvironment> = {
+            user: { direction: 'rtl' }
+          };
+          const hoverListenerObj = { hovered: false };
+          const handleOnInput = (detail: any) => {
+            if (detail.value != null) hoverListenerObj.hovered = true;
+          };
+          const content = render(
+            <RootEnvironmentProvider environment={env}>
+              <MeterBar value={20} onInput={handleOnInput} />
+            </RootEnvironmentProvider>
+          );
+          const MeterBarElement = content.container.firstElementChild as HTMLElement;
+          userEvent.hover(MeterBarElement);
+          await waitFor(() => expect(hoverListenerObj.hovered).equals(true));
+        });*/
+    }
+});
+describe('Keyboard Interaction', () => {
+    const clientHints$1 = clientHints.getClientHints();
+    if (typeof jest === 'undefined' && clientHints$1.browser === 'chrome') {
+        mocha.timeout(DATATIP_TEST_TIMEOUT);
+        it('check default datatip correctly triggered with keyboard interaction when value is not set', async () => {
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, {}) }));
+            userEvent__default["default"].tab();
+            await preact.waitFor(() => checkDatatipText('0'), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        });
+        it('check datatip correctly triggered with keyboard interaction', async () => {
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 30, datatip: DATATIP_TEXT }) }));
+            userEvent__default["default"].tab();
+            await preact.waitFor(() => checkDatatipText(DATATIP_TEXT), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check onInput event is correctly triggered with keyboard interaction', async () => {
+            const calledListenerObj = { called: false };
+            const handleOnInput = (detail) => {
+                if (detail.value != null)
+                    calledListenerObj.called = true;
+            };
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, onInput: handleOnInput }) }));
+            userEvent__default["default"].tab();
+            await preact.waitFor(() => chai.expect(calledListenerObj.called).equals(true));
+        });
+        it('check onInput is correctly triggered with HOME key by keyboard interaction ', async () => {
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[HOME]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(0));
+        });
+        it('check onInput is correctly triggered with END key by keyboard interaction ', async () => {
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[END]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(100));
+        });
+        it('check onCommit event is correctly triggered with keyboard interaction', async () => {
+            const calledListenerObj = { called: false };
+            const handleOnCommit = (detail) => {
+                if (detail.value != null)
+                    calledListenerObj.called = true;
+            };
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, onCommit: handleOnCommit }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[ENTER]');
+            await preact.waitFor(() => chai.expect(calledListenerObj.called).equals(true));
+        });
+        it('check step is correctly triggered using down arrow key with keyboard interaction', async () => {
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { step: 0.5, value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[ARROWDOWN]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(1.5));
+        });
+        it('check step is correctly triggered using right arrow key with keyboard interaction', async () => {
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { step: 0.5, value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[ARROWRIGHT]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(2.5));
+        });
+        it('check step is correctly triggered using up arrow key with keyboard interaction', async () => {
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { step: 0.5, value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[ARROWUP]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(2.5));
+        });
+        it('check step is correctly triggered using left arrow key with keyboard interaction', async () => {
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { step: 0.5, value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[ARROWLEFT]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(1.5));
+        });
+    }
+});
+describe('Keyboard Interaction in RTL mode', () => {
+    const clientHints$1 = clientHints.getClientHints();
+    if (typeof jest === 'undefined' && clientHints$1.browser === 'chrome') {
+        mocha.timeout(DATATIP_TEST_TIMEOUT);
+        it('check default datatip correctly triggered with keyboard interaction', async () => {
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 30 }) })));
+            userEvent__default["default"].tab();
+            await preact.waitFor(() => checkDatatipText('30'), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check step is correctly triggered with default value using right arrow by keyboard interaction ', async () => {
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) })));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[ARROWRIGHT]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(1));
+        });
+        it('Test to set the attribute datatip , datatip is correctly triggered with keyboard interaction', async () => {
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 30, datatip: DATATIP_TEXT }) })));
+            userEvent__default["default"].tab();
+            await preact.waitFor(() => checkDatatipText(DATATIP_TEXT), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check onInput event is correctly triggered with keyboard interaction', async () => {
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            const calledListenerObj = { called: false };
+            const handleOnInput = (detail) => {
+                if (detail.value != null)
+                    calledListenerObj.called = true;
+            };
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, onInput: handleOnInput }) })));
+            userEvent__default["default"].tab();
+            await preact.waitFor(() => chai.expect(calledListenerObj.called).equals(true));
+        });
+        it('check onInput is correctly triggered with HOME key by keyboard interaction ', async () => {
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) })));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[HOME]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(0));
+        });
+        it('check onInput is correctly triggered with END key by keyboard interaction ', async () => {
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) })));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[END]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(100));
+        });
+        it('check onCommit event is correctly triggered with keyboard interaction', async () => {
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            const calledListenerObj = { called: false };
+            const handleOnCommit = (detail) => {
+                if (detail.value != null)
+                    calledListenerObj.called = true;
+            };
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(UNSAFE_MeterBar.MeterBar, { value: 20, onCommit: handleOnCommit }) })));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[ENTER]');
+            await preact.waitFor(() => chai.expect(calledListenerObj.called).equals(true));
+        });
+    }
+});
+const checkDatatipText = (content) => {
+    var _a;
+    const targetElements = document.querySelectorAll('[role="tooltip"]');
+    const targetElementItem = targetElements.item(0);
+    const datatipContainer = targetElementItem === null || targetElementItem === void 0 ? void 0 : targetElementItem.firstElementChild;
+    chai.expect(datatipContainer === null || datatipContainer === void 0 ? void 0 : datatipContainer.style.opacity).not.equals('');
+    chai.expect(datatipContainer === null || datatipContainer === void 0 ? void 0 : datatipContainer.style.opacity).not.equals('0');
+    chai.expect(datatipContainer === null || datatipContainer === void 0 ? void 0 : datatipContainer.style.maxHeight).not.equals('');
+    chai.expect(datatipContainer === null || datatipContainer === void 0 ? void 0 : datatipContainer.style.maxHeight).not.equals('0');
+    const innerHTML = (_a = datatipContainer === null || datatipContainer === void 0 ? void 0 : datatipContainer.firstElementChild) === null || _a === void 0 ? void 0 : _a.innerHTML;
+    chai.expect(innerHTML).equals(content);
+};
+/*  */
+//# sourceMappingURL=MeterBar.spec.js.map