From c6dc8e3c553135a611bef7e376fff38360ec0e67 Mon Sep 17 00:00:00 2001 From: Amir Alami Date: Wed, 23 Oct 2024 14:24:35 +0200 Subject: [PATCH] feat: Adds findAllComponents selector --- src/core/dom.ts | 9 +- src/core/selectors.ts | 12 +- .../__snapshots__/documenter.test.ts.snap | 225 ++++++++++++++++++ src/core/test/dom.test.ts | 38 ++- src/core/test/selectors.test.ts | 6 +- 5 files changed, 262 insertions(+), 28 deletions(-) diff --git a/src/core/dom.ts b/src/core/dom.ts index c4aa1c7..5fbbc10 100644 --- a/src/core/dom.ts +++ b/src/core/dom.ts @@ -27,10 +27,6 @@ interface WrapperClass { new (element: ElementType): Wrapper; } -interface RootWrapperClass extends WrapperClass { - rootSelector: string; -} - export class AbstractWrapper implements IElementWrapper>> { @@ -137,9 +133,10 @@ export class AbstractWrapper } findAllComponents, ElementType extends HTMLElement>( - ComponentClass: RootWrapperClass + selector: string, + ComponentClass: WrapperClass ): Array { - const elementWrappers = this.findAll(`.${ComponentClass.rootSelector}`); + const elementWrappers = this.findAll(selector); return elementWrappers.map(wrapper => new ComponentClass(wrapper.getElement())); } } diff --git a/src/core/selectors.ts b/src/core/selectors.ts index 9763ee6..3cc83d2 100644 --- a/src/core/selectors.ts +++ b/src/core/selectors.ts @@ -12,10 +12,6 @@ interface WrapperClass { new (selector: string): Wrapper; } -interface RootWrapperClass extends WrapperClass { - rootSelector: string; -} - export class AbstractWrapper implements IElementWrapper> { constructor(protected root: string) {} @@ -48,12 +44,10 @@ export class AbstractWrapper implements IElementWrapper( - ComponentClass: RootWrapperClass + selector: string, + ComponentClass: WrapperClass ): MultiElementWrapper { - return new MultiElementWrapper( - getRootSelector(`.${ComponentClass.rootSelector}`, this.root), - selector => new ComponentClass(selector) - ); + return new MultiElementWrapper(getRootSelector(selector, this.root), selector => new ComponentClass(selector)); } toSelector(): string { diff --git a/src/core/test/__snapshots__/documenter.test.ts.snap b/src/core/test/__snapshots__/documenter.test.ts.snap index 6f92415..d075f0a 100644 --- a/src/core/test/__snapshots__/documenter.test.ts.snap +++ b/src/core/test/__snapshots__/documenter.test.ts.snap @@ -78,6 +78,35 @@ Note that programmatic events ignore disabled attribute and will trigger listene "type": "reference", }, }, + { + "name": "findAllComponents", + "parameters": [ + { + "flags": { + "isOptional": false, + }, + "name": "selector", + "typeName": "string", + }, + { + "flags": { + "isOptional": false, + }, + "name": "ComponentClass", + "typeName": "WrapperClass", + }, + ], + "returnType": { + "name": "Array", + "type": "reference", + "typeArguments": [ + { + "name": "Wrapper", + "type": "typeParameter", + }, + ], + }, + }, { "name": "findByClassName", "parameters": [ @@ -109,6 +138,7 @@ Note that programmatic events ignore disabled attribute and will trigger listene "isOptional": false, }, "name": "ComponentClass", + "typeName": "WrapperClass", }, ], "returnType": { @@ -306,6 +336,38 @@ Note that programmatic events ignore disabled attribute and will trigger listene "type": "reference", }, }, + { + "inheritedFrom": { + "name": "AbstractWrapper.findAllComponents", + }, + "name": "findAllComponents", + "parameters": [ + { + "flags": { + "isOptional": false, + }, + "name": "selector", + "typeName": "string", + }, + { + "flags": { + "isOptional": false, + }, + "name": "ComponentClass", + "typeName": "WrapperClass", + }, + ], + "returnType": { + "name": "Array", + "type": "reference", + "typeArguments": [ + { + "name": "Wrapper", + "type": "typeParameter", + }, + ], + }, + }, { "inheritedFrom": { "name": "AbstractWrapper.findByClassName", @@ -343,6 +405,7 @@ Note that programmatic events ignore disabled attribute and will trigger listene "isOptional": false, }, "name": "ComponentClass", + "typeName": "WrapperClass", }, ], "returnType": { @@ -561,6 +624,38 @@ Note that programmatic events ignore disabled attribute and will trigger listene "type": "reference", }, }, + { + "inheritedFrom": { + "name": "AbstractWrapper.findAllComponents", + }, + "name": "findAllComponents", + "parameters": [ + { + "flags": { + "isOptional": false, + }, + "name": "selector", + "typeName": "string", + }, + { + "flags": { + "isOptional": false, + }, + "name": "ComponentClass", + "typeName": "WrapperClass", + }, + ], + "returnType": { + "name": "Array", + "type": "reference", + "typeArguments": [ + { + "name": "Wrapper", + "type": "typeParameter", + }, + ], + }, + }, { "inheritedFrom": { "name": "AbstractWrapper.findByClassName", @@ -598,6 +693,7 @@ Note that programmatic events ignore disabled attribute and will trigger listene "isOptional": false, }, "name": "ComponentClass", + "typeName": "WrapperClass", }, ], "returnType": { @@ -792,6 +888,35 @@ exports[`documenter output > selectors 1`] = ` ], }, }, + { + "name": "findAllComponents", + "parameters": [ + { + "flags": { + "isOptional": false, + }, + "name": "selector", + "typeName": "string", + }, + { + "flags": { + "isOptional": false, + }, + "name": "ComponentClass", + "typeName": "WrapperClass", + }, + ], + "returnType": { + "name": "MultiElementWrapper", + "type": "reference", + "typeArguments": [ + { + "name": "Wrapper", + "type": "typeParameter", + }, + ], + }, + }, { "name": "findByClassName", "parameters": [ @@ -823,6 +948,7 @@ exports[`documenter output > selectors 1`] = ` "isOptional": false, }, "name": "ComponentClass", + "typeName": "WrapperClass", }, ], "returnType": { @@ -936,6 +1062,38 @@ exports[`documenter output > selectors 1`] = ` ], }, }, + { + "inheritedFrom": { + "name": "AbstractWrapper.findAllComponents", + }, + "name": "findAllComponents", + "parameters": [ + { + "flags": { + "isOptional": false, + }, + "name": "selector", + "typeName": "string", + }, + { + "flags": { + "isOptional": false, + }, + "name": "ComponentClass", + "typeName": "WrapperClass", + }, + ], + "returnType": { + "name": "MultiElementWrapper", + "type": "reference", + "typeArguments": [ + { + "name": "Wrapper", + "type": "typeParameter", + }, + ], + }, + }, { "inheritedFrom": { "name": "AbstractWrapper.findByClassName", @@ -973,6 +1131,7 @@ exports[`documenter output > selectors 1`] = ` "isOptional": false, }, "name": "ComponentClass", + "typeName": "WrapperClass", }, ], "returnType": { @@ -1095,6 +1254,38 @@ exports[`documenter output > selectors 1`] = ` ], }, }, + { + "inheritedFrom": { + "name": "AbstractWrapper.findAllComponents", + }, + "name": "findAllComponents", + "parameters": [ + { + "flags": { + "isOptional": false, + }, + "name": "selector", + "typeName": "string", + }, + { + "flags": { + "isOptional": false, + }, + "name": "ComponentClass", + "typeName": "WrapperClass", + }, + ], + "returnType": { + "name": "MultiElementWrapper", + "type": "reference", + "typeArguments": [ + { + "name": "Wrapper", + "type": "typeParameter", + }, + ], + }, + }, { "inheritedFrom": { "name": "AbstractWrapper.findByClassName", @@ -1132,6 +1323,7 @@ exports[`documenter output > selectors 1`] = ` "isOptional": false, }, "name": "ComponentClass", + "typeName": "WrapperClass", }, ], "returnType": { @@ -1254,6 +1446,38 @@ exports[`documenter output > selectors 1`] = ` ], }, }, + { + "inheritedFrom": { + "name": "AbstractWrapper.findAllComponents", + }, + "name": "findAllComponents", + "parameters": [ + { + "flags": { + "isOptional": false, + }, + "name": "selector", + "typeName": "string", + }, + { + "flags": { + "isOptional": false, + }, + "name": "ComponentClass", + "typeName": "WrapperClass", + }, + ], + "returnType": { + "name": "MultiElementWrapper", + "type": "reference", + "typeArguments": [ + { + "name": "Wrapper", + "type": "typeParameter", + }, + ], + }, + }, { "inheritedFrom": { "name": "AbstractWrapper.findByClassName", @@ -1291,6 +1515,7 @@ exports[`documenter output > selectors 1`] = ` "isOptional": false, }, "name": "ComponentClass", + "typeName": "WrapperClass", }, ], "returnType": { diff --git a/src/core/test/dom.test.ts b/src/core/test/dom.test.ts index 9d77b38..8aa3179 100644 --- a/src/core/test/dom.test.ts +++ b/src/core/test/dom.test.ts @@ -7,7 +7,11 @@ import { KeyCode } from '../utils'; describe('DOM test utils', () => { let node: HTMLElement, wrapper: ElementWrapper; + const CLASS_NAME = 'some-class'; + + const LIST_WITH_ITEMS_CLASS_NAME = 'list-with-items'; + const LIST_WITHOUT_ITEMS_CLASS_NAME = 'list-without-items'; const LIST_ITEM_CLASS_NAME = 'list-item'; beforeEach(() => { @@ -28,13 +32,17 @@ describe('DOM test utils', () => { -
    +
    • 1
    • 2
      • 2.1
    +
      +
    • 1
      • +
    • 2
      • +
    `; document.body.appendChild(node); @@ -220,22 +228,34 @@ describe('DOM test utils', () => { }); describe('findAllComponents()', () => { - class ListWrapper extends ComponentWrapper { - static rootSelector = LIST_ITEM_CLASS_NAME; + class ListWrapper extends ComponentWrapper { + findAllListItems() { + return this.findAllComponents(`li.${LIST_ITEM_CLASS_NAME}`, ListWrapper); + } } - class NonExistingElementWrapper extends ComponentWrapper { - static rootSelector = 'i-dont-exist'; - } + it('returns an array of all components matching the selector', () => { + const nodeWithListItems = node.querySelector(`.${LIST_WITH_ITEMS_CLASS_NAME}`); + if (!nodeWithListItems) { + throw new Error('Could not find test target'); + } + + const wrapper = new ListWrapper(nodeWithListItems); + const result = wrapper.findAllListItems(); - it('returns an array of all matching components', () => { - const result = wrapper.findAllComponents(ListWrapper); const listItemsContent = result.map(wrapper => wrapper.getElement().textContent); expect(listItemsContent).toEqual(['1', '2', '2.1']); }); it('returns an empty array if no component was found', () => { - const result = wrapper.findAllComponents(NonExistingElementWrapper); + const nodeWithoutListItems = node.querySelector(`.${LIST_WITHOUT_ITEMS_CLASS_NAME}`); + if (!nodeWithoutListItems) { + throw new Error('Could not find test target'); + } + + const wrapper = new ListWrapper(nodeWithoutListItems); + const result = wrapper.findAllListItems(); + expect(result).toHaveLength(0); }); }); diff --git a/src/core/test/selectors.test.ts b/src/core/test/selectors.test.ts index 4b512f5..f858104 100644 --- a/src/core/test/selectors.test.ts +++ b/src/core/test/selectors.test.ts @@ -13,13 +13,11 @@ class TestComponentWrapper extends ElementWrapper { } findMultiChild() { - return this.findAllComponents(ChildComponentWrapper); + return this.findAllComponents('.awsui-child', ChildComponentWrapper); } } class ChildComponentWrapper extends ElementWrapper { - static rootSelector = 'awsui-child-root'; - findTitle() { return this.find('.title'); } @@ -70,7 +68,7 @@ describe('CSS-selectors test utils', () => { it('allows to find nth-child of the same type components', () => { expect(wrapper.findMultiChild().get(2).findTitle().toSelector()).toEqual( - '.awsui-component .awsui-child-root:nth-child(2) .title' + '.awsui-component .awsui-child:nth-child(2) .title' ); });