From b29acde4a70fe60ff0372d119832ed1acffbbb17 Mon Sep 17 00:00:00 2001 From: alesun Date: Mon, 12 Feb 2024 19:05:12 +0100 Subject: [PATCH 1/9] feat(esl-utils): extend `attr` decorator with inherit option to take over the value of declared attribute --- src/modules/esl-utils/decorators/attr.ts | 17 ++++++++++++----- src/modules/esl-utils/dom/attr.ts | 7 +++++++ 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/modules/esl-utils/decorators/attr.ts b/src/modules/esl-utils/decorators/attr.ts index 683fb5a1a..c3c4e9dcd 100644 --- a/src/modules/esl-utils/decorators/attr.ts +++ b/src/modules/esl-utils/decorators/attr.ts @@ -1,6 +1,6 @@ import {identity, resolveProperty} from '../misc/functions'; import {parseString, toKebabCase} from '../misc/format'; -import {getAttr, setAttr} from '../dom/attr'; +import {getAttr, getClosestAttr, setAttr} from '../dom/attr'; import type {PropertyProvider} from '../misc/functions'; import type {ESLAttributeDecorator} from '../dom/attr'; @@ -15,6 +15,13 @@ type AttrDescriptor = { name?: string; /** Create getter only */ readonly?: boolean; + /** Find value to inherit across closest elements in DOM tree based on declared attribute name (in case of string format) + * or same attribute name of current element (boolean value). + * Example, attribute 'ignore' with configuration: + * inherit: 'alt-ignore' - searches ignore or data-ignore attr (in case of dataAttr: true) on this element or alt-ignore attribute on closest parent + * inherit: true - searches ignore or data-ignore attr (in case of dataAttr: true) on this element or on closest parent + */ + inherit?: boolean | string; /** Use data-* attribute */ dataAttr?: boolean; /** Default property value. Used if no attribute is present on the element. Empty string by default. Supports provider function. */ @@ -36,14 +43,14 @@ const buildAttrName = export const attr = (config: AttrDescriptor = {}): ESLAttributeDecorator => { return (target: ESLDomElementTarget, propName: string): any => { const attrName = buildAttrName(config.name || propName, !!config.dataAttr); + const closestAttrName = typeof config.inherit === 'string' ? config.inherit : attrName; function get(): T | null { - const val = getAttr(this, attrName); - if (val === null && 'defaultValue' in config) { - return resolveProperty(config.defaultValue, this) as T; - } + const val = config.inherit ? getClosestAttr(this, closestAttrName) || getAttr(this, attrName) : getAttr(this, attrName); + if (val === null && 'defaultValue' in config) return resolveProperty(config.defaultValue, this) as T; return (config.parser || parseString as AttrParser)(val); } + function set(value: T): void { setAttr(this, attrName, (config.serializer as AttrSerializer || identity)(value)); } diff --git a/src/modules/esl-utils/dom/attr.ts b/src/modules/esl-utils/dom/attr.ts index ab9765fdd..93c85c1d8 100644 --- a/src/modules/esl-utils/dom/attr.ts +++ b/src/modules/esl-utils/dom/attr.ts @@ -35,3 +35,10 @@ export function setAttr($el: ESLAttributeTarget, name: string, value: undefined $el.setAttribute(name, value === true ? '' : value); } } + +/** Gets attribute value from the closest element with group behavior settings */ +export function getClosestAttr($el: ESLAttributeTarget, attrName: string): string | null { + if (!($el = resolveDomTarget($el))) return null; + const $closest = $el.closest(`[${attrName}]`); + return $closest ? $closest.getAttribute(attrName) : null; +} From 66f20cb10245ee45e9b4b0a32ed156f1d1f1099d Mon Sep 17 00:00:00 2001 From: alesun Date: Mon, 12 Feb 2024 19:08:41 +0100 Subject: [PATCH 2/9] style(esl-utils): rename variable --- src/modules/esl-utils/decorators/attr.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modules/esl-utils/decorators/attr.ts b/src/modules/esl-utils/decorators/attr.ts index c3c4e9dcd..3e317c8ca 100644 --- a/src/modules/esl-utils/decorators/attr.ts +++ b/src/modules/esl-utils/decorators/attr.ts @@ -43,10 +43,10 @@ const buildAttrName = export const attr = (config: AttrDescriptor = {}): ESLAttributeDecorator => { return (target: ESLDomElementTarget, propName: string): any => { const attrName = buildAttrName(config.name || propName, !!config.dataAttr); - const closestAttrName = typeof config.inherit === 'string' ? config.inherit : attrName; + const inheritAttrName = typeof config.inherit === 'string' ? config.inherit : attrName; function get(): T | null { - const val = config.inherit ? getClosestAttr(this, closestAttrName) || getAttr(this, attrName) : getAttr(this, attrName); + const val = config.inherit ? getClosestAttr(this, inheritAttrName) || getAttr(this, attrName) : getAttr(this, attrName); if (val === null && 'defaultValue' in config) return resolveProperty(config.defaultValue, this) as T; return (config.parser || parseString as AttrParser)(val); } From 6836c3e2ebcc6457b53320ea6de361345c534d2e Mon Sep 17 00:00:00 2001 From: alesun Date: Mon, 12 Feb 2024 19:10:39 +0100 Subject: [PATCH 3/9] test(esl-utils): update `attr` tests with cases of inherit option --- .../esl-utils/decorators/test/attr.test.ts | 97 +++++++++++++++++++ src/modules/esl-utils/dom/test/attr.test.ts | 26 ++++- 2 files changed, 122 insertions(+), 1 deletion(-) diff --git a/src/modules/esl-utils/decorators/test/attr.test.ts b/src/modules/esl-utils/decorators/test/attr.test.ts index da959c6bf..bde1742f7 100644 --- a/src/modules/esl-utils/decorators/test/attr.test.ts +++ b/src/modules/esl-utils/decorators/test/attr.test.ts @@ -106,6 +106,103 @@ describe('Decorator: attr', () => { expect(el.defProvider).toBe(''); }); + describe('inherit parameter', () => { + class FirstElement extends HTMLElement {} + customElements.define('first-el', FirstElement); + const el1 = new FirstElement(); + + class SecondElement extends HTMLElement { + @attr({inherit: 'box'}) + public container: string; + @attr({inherit: 'parent', dataAttr: true}) + public ignore: string; + @attr({inherit: true}) + public disallow: string; + @attr({inherit: true, dataAttr: true}) + public allow: string; + } + + customElements.define('second-el', SecondElement); + const el2 = new SecondElement(); + + beforeAll(() => { + el1.append(el2); + document.body.append(el1); + }); + + describe('value of inherit is presented in string format', () => { + test('declared inherit is on this element', () => { + el2.setAttribute('box', 'value'); + expect(el2.container).toBe('value'); + }); + test('change of inherit value leads to change of getter value', () => { + el2.setAttribute('box', 'container'); + expect(el2.container).toBe('container'); + }); + test('declared inherit is found on the closest element in DOM', () => { + el2.removeAttribute('box'); + el1.setAttribute('box', 'carousel'); + expect(el2.container).toBe('carousel'); + }); + test('elements with declared inherit are absent in DOM and returns empty string', () => { + el1.removeAttribute('box'); + expect(el2.container).toBe(''); + }); + }); + + describe('value of inherit is presented in string format with data-prefix', () => { + test('declared closest is on this element', () => { + el2.setAttribute('data-ignore', 'swipe'); + expect(el2.ignore).toBe('swipe'); + }); + test('change of inherit value leads to change of getter value', () => { + el2.setAttribute('data-ignore', 'touch'); + expect(el2.ignore).toBe('touch'); + }); + test('declared inherit is found on the closest element in DOM', () => { + el2.removeAttribute('data-ignore'); + el1.setAttribute('parent', 'close'); + expect(el2.ignore).toBe('close'); + }); + test('elements with declared inherit are absent in DOM and returns empty string', () => { + el1.removeAttribute('parent'); + expect(el2.ignore).toBe(''); + }); + }); + + describe('inherit is boolean', () => { + test('declared inherit is on this element', () => { + el2.setAttribute('disallow', 'scroll'); + expect(el2.disallow).toBe('scroll'); + }); + test('declared inherit is found on the closest element in DOM', () => { + el2.removeAttribute('disallow'); + el1.setAttribute('disallow', 'activator'); + expect(el2.disallow).toBe('activator'); + }); + test('elements with declared inherit are absent in DOM and returns empty string', () => { + el1.removeAttribute('disallow'); + expect(el2.disallow).toBe(''); + }); + }); + + describe('inherit is boolean with data prefix', () => { + test('declared inherit is on this element', () => { + el2.setAttribute('data-allow', 'option'); + expect(el2.allow).toBe('option'); + }); + test('declared inherit is found on the closest element in DOM', () => { + el2.removeAttribute('data-allow'); + el1.setAttribute('data-allow', 'scroll'); + expect(el2.allow).toBe('scroll'); + }); + test('elements with declared inherit are absent in DOM and returns empty string', () => { + el1.removeAttribute('data-allow'); + expect(el2.allow).toBe(''); + }); + }); + }); + afterAll(() => { document.body.removeChild(el); }); diff --git a/src/modules/esl-utils/dom/test/attr.test.ts b/src/modules/esl-utils/dom/test/attr.test.ts index 0212148f3..a757d94a0 100644 --- a/src/modules/esl-utils/dom/test/attr.test.ts +++ b/src/modules/esl-utils/dom/test/attr.test.ts @@ -1,4 +1,4 @@ -import {hasAttr, getAttr, setAttr} from '../attr'; +import {hasAttr, getAttr, setAttr, getClosestAttr} from '../attr'; describe('Attribute', () => { const attrName = 'test-attr'; @@ -118,4 +118,28 @@ describe('Attribute', () => { expect($el3.getAttribute(attrName)).toBe(attrValue); }); }); + + + describe('getClosestAttr', () => { + const $el = document.createElement('div'); + $el.setAttribute(attrName, attrValue); + + const $parent = document.createElement('div'); + const $parentName = 'parent-attr'; + const $parentValue = 'parent-value'; + $parent.setAttribute($parentName, $parentValue); + + $parent.append($el); + document.body.append($parent); + + test('finds indicated attribute on this element', () => { + expect(getClosestAttr($el, attrName)).toBe(attrValue); + }); + test('finds indicated attribute on closest parent in DOM', () => { + expect(getClosestAttr($el, $parentName)).toBe($parentValue); + }); + test('returns null in case indicated attribute is absent in DOM', () => { + expect(getClosestAttr($el, 'name')).toBe(null); + }); + }); }); From 0d692acd18e5ae46d8f7e31a02c159c79a5811ad Mon Sep 17 00:00:00 2001 From: alesun Date: Wed, 14 Feb 2024 09:50:41 +0100 Subject: [PATCH 4/9] style(esl-utils): update `attr` decorator JS doc --- src/modules/esl-utils/decorators/attr.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/modules/esl-utils/decorators/attr.ts b/src/modules/esl-utils/decorators/attr.ts index 3e317c8ca..c057c61c6 100644 --- a/src/modules/esl-utils/decorators/attr.ts +++ b/src/modules/esl-utils/decorators/attr.ts @@ -15,11 +15,15 @@ type AttrDescriptor = { name?: string; /** Create getter only */ readonly?: boolean; - /** Find value to inherit across closest elements in DOM tree based on declared attribute name (in case of string format) - * or same attribute name of current element (boolean value). - * Example, attribute 'ignore' with configuration: - * inherit: 'alt-ignore' - searches ignore or data-ignore attr (in case of dataAttr: true) on this element or alt-ignore attribute on closest parent - * inherit: true - searches ignore or data-ignore attr (in case of dataAttr: true) on this element or on closest parent + /** + * Specifies the attribute inheritance behavior. + * If `inherit` is set to `true`, the attribute will inherit the value from the same-named attribute of the closest parent element in the DOM tree. + * For instance, `@attr({inherit: true}) ignore;` will look for an `ignore` attribute in the parent elements if it's not defined in the current element. + * If `dataAttr` is also true, it will search for `data-ignore` instead. + * + * If `inherit` is set to a string, it will use this string as the attribute name to search for in the parent elements. + * For example, `@attr({inherit: 'alt-ignore'}) ignore;` will first look for its own `ignore` attribute (or 'data-ignore' if `dataAttr` is true), + * and if not found, it will look for an `alt-ignore` attribute in the parent elements. */ inherit?: boolean | string; /** Use data-* attribute */ From 01525ea063e77e8aee9c5dab883be133bc08cd7b Mon Sep 17 00:00:00 2001 From: alesun Date: Mon, 19 Feb 2024 16:19:47 +0100 Subject: [PATCH 5/9] style(esl-utils): apply suggestion from code review --- src/modules/esl-utils/decorators/attr.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/esl-utils/decorators/attr.ts b/src/modules/esl-utils/decorators/attr.ts index c057c61c6..96f11d360 100644 --- a/src/modules/esl-utils/decorators/attr.ts +++ b/src/modules/esl-utils/decorators/attr.ts @@ -50,7 +50,7 @@ export const attr = (config: AttrDescriptor = {}): ESLAttributeDe const inheritAttrName = typeof config.inherit === 'string' ? config.inherit : attrName; function get(): T | null { - const val = config.inherit ? getClosestAttr(this, inheritAttrName) || getAttr(this, attrName) : getAttr(this, attrName); + const val = config.inherit ? getAttr(this, attrName) || getClosestAttr(this, inheritAttrName) : getAttr(this, attrName); if (val === null && 'defaultValue' in config) return resolveProperty(config.defaultValue, this) as T; return (config.parser || parseString as AttrParser)(val); } From 53aeff322fc448b781af197ed8ed68b3fc7ff5ac Mon Sep 17 00:00:00 2001 From: alesun Date: Mon, 19 Feb 2024 16:21:42 +0100 Subject: [PATCH 6/9] test(esl-utils): enhance tests for inherit parameter --- .../esl-utils/decorators/test/attr.test.ts | 135 ++++++++++-------- 1 file changed, 75 insertions(+), 60 deletions(-) diff --git a/src/modules/esl-utils/decorators/test/attr.test.ts b/src/modules/esl-utils/decorators/test/attr.test.ts index bde1742f7..c8e124fa3 100644 --- a/src/modules/esl-utils/decorators/test/attr.test.ts +++ b/src/modules/esl-utils/decorators/test/attr.test.ts @@ -1,5 +1,6 @@ import '../../../../polyfills/es5-target-shim'; import {attr} from '../attr'; +import {ESLTestTemplate} from '../../test/template'; describe('Decorator: attr', () => { @@ -107,11 +108,8 @@ describe('Decorator: attr', () => { }); describe('inherit parameter', () => { - class FirstElement extends HTMLElement {} - customElements.define('first-el', FirstElement); - const el1 = new FirstElement(); - class SecondElement extends HTMLElement { + class ThirdElement extends HTMLElement { @attr({inherit: 'box'}) public container: string; @attr({inherit: 'parent', dataAttr: true}) @@ -121,84 +119,101 @@ describe('Decorator: attr', () => { @attr({inherit: true, dataAttr: true}) public allow: string; } + customElements.define('third-el', ThirdElement); + class SecondElement extends HTMLElement {} customElements.define('second-el', SecondElement); - const el2 = new SecondElement(); - beforeAll(() => { - el1.append(el2); - document.body.append(el1); - }); - - describe('value of inherit is presented in string format', () => { - test('declared inherit is on this element', () => { - el2.setAttribute('box', 'value'); - expect(el2.container).toBe('value'); + const SCOPE: any = { + firstEl: '#first-el', + secondEl: '#second-el', + thirdEl: '#third-el', + }; + const TEMPLATE = ESLTestTemplate.create(` +
+ + + +
+ `, SCOPE).bind('beforeeach'); + + describe('Inherit searches for the closest element with explicitly declared name', () => { + test('The attribute inherit the value from own same-named attribute', () => { + TEMPLATE.$thirdEl.setAttribute('container', 'value'); + expect(TEMPLATE.$thirdEl.container).toBe('value'); + }); + test('Own attribute setter changes the own value', () => { + TEMPLATE.$thirdEl.container = 'container'; + expect(TEMPLATE.$thirdEl.container).toBe('container'); }); - test('change of inherit value leads to change of getter value', () => { - el2.setAttribute('box', 'container'); - expect(el2.container).toBe('container'); + test('The value resolves from the closest element (custom-element) in DOM', () => { + TEMPLATE.$secondEl.setAttribute('box', 'carousel'); + expect(TEMPLATE.$thirdEl.container).toBe('carousel'); }); - test('declared inherit is found on the closest element in DOM', () => { - el2.removeAttribute('box'); - el1.setAttribute('box', 'carousel'); - expect(el2.container).toBe('carousel'); + test('The value resolves from the closest element (non-custom-element) in DOM', () => { + TEMPLATE.$firstEl.setAttribute('box', 'slide'); + expect(TEMPLATE.$thirdEl.container).toBe('slide'); }); - test('elements with declared inherit are absent in DOM and returns empty string', () => { - el1.removeAttribute('box'); - expect(el2.container).toBe(''); + test('Elements with declared inherit are absent in DOM and returns empty string', () => { + expect(TEMPLATE.$thirdEl.container).toBe(''); }); }); - describe('value of inherit is presented in string format with data-prefix', () => { - test('declared closest is on this element', () => { - el2.setAttribute('data-ignore', 'swipe'); - expect(el2.ignore).toBe('swipe'); + describe('Inherit searches for the closest element with explicitly declared name', () => { + test('The attribute inherit the value from the same-named data-attribute', () => { + TEMPLATE.$thirdEl.setAttribute('data-ignore', 'swipe'); + expect(TEMPLATE.$thirdEl.ignore).toBe('swipe'); }); - test('change of inherit value leads to change of getter value', () => { - el2.setAttribute('data-ignore', 'touch'); - expect(el2.ignore).toBe('touch'); + test('Own attribute setter changes the own value', () => { + TEMPLATE.$thirdEl.ignore = 'touch'; + expect(TEMPLATE.$thirdEl.ignore).toBe('touch'); }); - test('declared inherit is found on the closest element in DOM', () => { - el2.removeAttribute('data-ignore'); - el1.setAttribute('parent', 'close'); - expect(el2.ignore).toBe('close'); + test('The value resolves from the closest element (custom-element) in DOM', () => { + TEMPLATE.$secondEl.setAttribute('parent', 'close'); + expect(TEMPLATE.$thirdEl.ignore).toBe('close'); }); - test('elements with declared inherit are absent in DOM and returns empty string', () => { - el1.removeAttribute('parent'); - expect(el2.ignore).toBe(''); + test('The value resolves from the closest element (non-custom-element) in DOM', () => { + TEMPLATE.$firstEl.setAttribute('parent', 'open'); + expect(TEMPLATE.$thirdEl.ignore).toBe('open'); + }); + test('Elements with declared inherit are absent in DOM and returns empty string', () => { + expect(TEMPLATE.$thirdEl.ignore).toBe(''); }); }); - describe('inherit is boolean', () => { - test('declared inherit is on this element', () => { - el2.setAttribute('disallow', 'scroll'); - expect(el2.disallow).toBe('scroll'); + describe('Inherit searches for the closest element with the same attribute name in DOM', () => { + test('The attribute inherit the value from the same attribute name', () => { + TEMPLATE.$thirdEl.disallow = 'scroll'; + expect(TEMPLATE.$thirdEl.disallow).toBe('scroll'); + }); + test('The value resolves from the closest element (custom-element) in DOM with the same attribute name', () => { + TEMPLATE.$secondEl.setAttribute('disallow', 'activator'); + expect(TEMPLATE.$thirdEl.disallow).toBe('activator'); }); - test('declared inherit is found on the closest element in DOM', () => { - el2.removeAttribute('disallow'); - el1.setAttribute('disallow', 'activator'); - expect(el2.disallow).toBe('activator'); + test('The value resolves from the closest element (non-custom-element) in DOM with the same attribute name', () => { + TEMPLATE.$firstEl.setAttribute('disallow', 'deactivator'); + expect(TEMPLATE.$thirdEl.disallow).toBe('deactivator'); }); - test('elements with declared inherit are absent in DOM and returns empty string', () => { - el1.removeAttribute('disallow'); - expect(el2.disallow).toBe(''); + test('Elements with declared inherit are absent in DOM and returns empty string', () => { + expect(TEMPLATE.$thirdEl.disallow).toBe(''); }); }); - describe('inherit is boolean with data prefix', () => { - test('declared inherit is on this element', () => { - el2.setAttribute('data-allow', 'option'); - expect(el2.allow).toBe('option'); + describe('Inherit searches for the closest element with the same data-attribute name in DOM', () => { + test('The attribute inherit the value from the same attribute name', () => { + TEMPLATE.$thirdEl.allow = 'option'; + expect(TEMPLATE.$thirdEl.allow).toBe('option'); + }); + test('The value resolves from the closest element (custom-element) in DOM with the same data-attribute name', () => { + TEMPLATE.$secondEl.setAttribute('data-allow', 'scroll'); + expect(TEMPLATE.$thirdEl.allow).toBe('scroll'); }); - test('declared inherit is found on the closest element in DOM', () => { - el2.removeAttribute('data-allow'); - el1.setAttribute('data-allow', 'scroll'); - expect(el2.allow).toBe('scroll'); + test('The value resolves from the closest element (non-custom-element) in DOM with the same data-attribute name', () => { + TEMPLATE.$firstEl.setAttribute('data-allow', 'swipe'); + expect(TEMPLATE.$thirdEl.allow).toBe('swipe'); }); - test('elements with declared inherit are absent in DOM and returns empty string', () => { - el1.removeAttribute('data-allow'); - expect(el2.allow).toBe(''); + test('Elements with declared inherit are absent in DOM and returns empty string', () => { + expect(TEMPLATE.$thirdEl.allow).toBe(''); }); }); }); From 467e6797959e828ae77f239c4993480b19f90e4c Mon Sep 17 00:00:00 2001 From: alesun Date: Fri, 23 Feb 2024 17:18:06 +0100 Subject: [PATCH 7/9] style(esl-utils): apply suggestions from code review --- src/modules/esl-utils/decorators/test/attr.test.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/modules/esl-utils/decorators/test/attr.test.ts b/src/modules/esl-utils/decorators/test/attr.test.ts index c8e124fa3..b37b03334 100644 --- a/src/modules/esl-utils/decorators/test/attr.test.ts +++ b/src/modules/esl-utils/decorators/test/attr.test.ts @@ -138,6 +138,7 @@ describe('Decorator: attr', () => { `, SCOPE).bind('beforeeach'); describe('Inherit searches for the closest element with explicitly declared name', () => { + // @attr({inherit: 'box'}) public container: string; test('The attribute inherit the value from own same-named attribute', () => { TEMPLATE.$thirdEl.setAttribute('container', 'value'); expect(TEMPLATE.$thirdEl.container).toBe('value'); @@ -160,6 +161,7 @@ describe('Decorator: attr', () => { }); describe('Inherit searches for the closest element with explicitly declared name', () => { + // @attr({inherit: 'parent', dataAttr: true}) public ignore: string; test('The attribute inherit the value from the same-named data-attribute', () => { TEMPLATE.$thirdEl.setAttribute('data-ignore', 'swipe'); expect(TEMPLATE.$thirdEl.ignore).toBe('swipe'); @@ -182,6 +184,7 @@ describe('Decorator: attr', () => { }); describe('Inherit searches for the closest element with the same attribute name in DOM', () => { + // @attr({inherit: true}) public disallow: string; test('The attribute inherit the value from the same attribute name', () => { TEMPLATE.$thirdEl.disallow = 'scroll'; expect(TEMPLATE.$thirdEl.disallow).toBe('scroll'); @@ -200,6 +203,7 @@ describe('Decorator: attr', () => { }); describe('Inherit searches for the closest element with the same data-attribute name in DOM', () => { + // @attr({inherit: true, dataAttr: true}) public allow: string; test('The attribute inherit the value from the same attribute name', () => { TEMPLATE.$thirdEl.allow = 'option'; expect(TEMPLATE.$thirdEl.allow).toBe('option'); From 372d5c24890b1950405f821c1292f4503a1e6d02 Mon Sep 17 00:00:00 2001 From: alesun Date: Fri, 23 Feb 2024 17:19:52 +0100 Subject: [PATCH 8/9] style(esl-utils): apply suggestions from code review --- src/modules/esl-utils/decorators/test/attr.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/esl-utils/decorators/test/attr.test.ts b/src/modules/esl-utils/decorators/test/attr.test.ts index b37b03334..0cc7c8e3d 100644 --- a/src/modules/esl-utils/decorators/test/attr.test.ts +++ b/src/modules/esl-utils/decorators/test/attr.test.ts @@ -160,7 +160,7 @@ describe('Decorator: attr', () => { }); }); - describe('Inherit searches for the closest element with explicitly declared name', () => { + describe('Inherit searches for the closest element with explicitly declared data attribute name', () => { // @attr({inherit: 'parent', dataAttr: true}) public ignore: string; test('The attribute inherit the value from the same-named data-attribute', () => { TEMPLATE.$thirdEl.setAttribute('data-ignore', 'swipe'); From 6c3f9c2b112c39d3a6eecaf2f934b074412bf53b Mon Sep 17 00:00:00 2001 From: alesun Date: Mon, 26 Feb 2024 11:45:10 +0100 Subject: [PATCH 9/9] test(esl-utils): apply suggestions from code review --- src/modules/esl-utils/decorators/test/attr.test.ts | 4 ++-- src/modules/esl-utils/dom/test/attr.test.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/modules/esl-utils/decorators/test/attr.test.ts b/src/modules/esl-utils/decorators/test/attr.test.ts index 0cc7c8e3d..4651b2900 100644 --- a/src/modules/esl-utils/decorators/test/attr.test.ts +++ b/src/modules/esl-utils/decorators/test/attr.test.ts @@ -107,7 +107,7 @@ describe('Decorator: attr', () => { expect(el.defProvider).toBe(''); }); - describe('inherit parameter', () => { + describe('Inherit parameter', () => { class ThirdElement extends HTMLElement { @attr({inherit: 'box'}) @@ -147,7 +147,7 @@ describe('Decorator: attr', () => { TEMPLATE.$thirdEl.container = 'container'; expect(TEMPLATE.$thirdEl.container).toBe('container'); }); - test('The value resolves from the closest element (custom-element) in DOM', () => { + test('The value should be resolved from the closest DOM element (custom-element)', () => { TEMPLATE.$secondEl.setAttribute('box', 'carousel'); expect(TEMPLATE.$thirdEl.container).toBe('carousel'); }); diff --git a/src/modules/esl-utils/dom/test/attr.test.ts b/src/modules/esl-utils/dom/test/attr.test.ts index a757d94a0..47db0a9b6 100644 --- a/src/modules/esl-utils/dom/test/attr.test.ts +++ b/src/modules/esl-utils/dom/test/attr.test.ts @@ -132,13 +132,13 @@ describe('Attribute', () => { $parent.append($el); document.body.append($parent); - test('finds indicated attribute on this element', () => { + test('should return attribute from the current element', () => { expect(getClosestAttr($el, attrName)).toBe(attrValue); }); - test('finds indicated attribute on closest parent in DOM', () => { + test('should return an attribute from the parent DOM element', () => { expect(getClosestAttr($el, $parentName)).toBe($parentValue); }); - test('returns null in case indicated attribute is absent in DOM', () => { + test('should return null in case the specified attribute is absent at the current element and its parents', () => { expect(getClosestAttr($el, 'name')).toBe(null); }); });