Skip to content

Commit

Permalink
Library refactor (#16)
Browse files Browse the repository at this point in the history
  • Loading branch information
@elchininet
elchininet authored Dec 16, 2023
1 parent 16a166c commit 0b07c6b
Show file tree
Hide file tree
Showing 6 changed files with 195 additions and 407 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
# Changelog

## [4.1.0] - 2023-12-16

- Refactor the whole library to reduce repetitive and unnecessary code
- All the methods admit at the moment a `shadowRoot` as a root element

## [4.0.0] - 2023-12-15

- Implement a `deepQuerySelector` method to query for elements even if they are deep in the shadowDOM tree
Expand Down
74 changes: 65 additions & 9 deletions cypress/e2e/methods.spec.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,9 +116,17 @@ describe('ShadowDomSelector spec', () => {
expect(
() => querySelector('$ section$ article')
).to.throw(
'You can not select a shadowRoot'
'You can not select a shadowRoot ($) of the document'
);

expect(
() => querySelector(
doc.querySelector('section').shadowRoot,
'$ article'
)
).to.throw(
'You can not select a shadowRoot ($) of a shadowRoot'
);


});
});
Expand Down Expand Up @@ -206,7 +214,16 @@ describe('ShadowDomSelector spec', () => {
expect(
() => querySelectorAll('$ section$ article$ ul')
).to.throw(
'You can not select a shadowRoot'
'You can not select a shadowRoot ($) of the document'
);

expect(
() => querySelectorAll(
doc.querySelector('section').shadowRoot,
'$ article'
)
).to.throw(
'You can not select a shadowRoot ($) of a shadowRoot'
);

});
Expand Down Expand Up @@ -297,13 +314,22 @@ describe('ShadowDomSelector spec', () => {
expect(
() => shadowRootQuerySelector('$ section$ article$')
).to.throw(
'You can not select a shadowRoot'
'You can not select a shadowRoot ($) of the document'
);

expect(
() => shadowRootQuerySelector('$')
).to.throw(
'You can not select a shadowRoot'
'You can not select a shadowRoot ($) of the document'
);

expect(
() => shadowRootQuerySelector(
doc.querySelector('section').shadowRoot,
'$'
)
).to.throw(
'You can not select a shadowRoot ($) of a shadowRoot'
);

});
Expand Down Expand Up @@ -412,7 +438,17 @@ describe('ShadowDomSelector spec', () => {
cy.wrap(null).then(() => {
return asyncQuerySelector('$ section$ article')
.catch((error: Error) => {
expect(error.message).to.contain('You can not select a shadowRoot');
expect(error.message).to.contain('You can not select a shadowRoot ($) of the document');
});
});

cy.wrap(null).then(() => {
return asyncQuerySelector(
doc.querySelector('section').shadowRoot,
'$ article'
)
.catch((error: Error) => {
expect(error.message).to.contain('You can not select a shadowRoot ($) of a shadowRoot');
});
});

Expand Down Expand Up @@ -583,7 +619,17 @@ describe('ShadowDomSelector spec', () => {
cy.wrap(null).then(() => {
return asyncQuerySelectorAll('$ section$ article li')
.catch((error: Error) => {
expect(error.message).to.contain('You can not select a shadowRoot');
expect(error.message).to.contain('You can not select a shadowRoot ($) of the document');
});
});

cy.wrap(null).then(() => {
return asyncQuerySelectorAll(
doc.querySelector('section').shadowRoot,
'$ article'
)
.catch((error: Error) => {
expect(error.message).to.contain('You can not select a shadowRoot ($) of a shadowRoot');
});
});

Expand Down Expand Up @@ -789,14 +835,24 @@ describe('ShadowDomSelector spec', () => {
cy.wrap(null).then(() => {
return asyncShadowRootQuerySelector('$ section$ article$')
.catch((error: Error) => {
expect(error.message).to.contain('You can not select a shadowRoot');
expect(error.message).to.contain('You can not select a shadowRoot ($) of the document');
});
});

cy.wrap(null).then(() => {
return asyncShadowRootQuerySelector('$')
.catch((error: Error) => {
expect(error.message).to.contain('You can not select a shadowRoot');
expect(error.message).to.contain('You can not select a shadowRoot ($) of the document');
});
});

cy.wrap(null).then(() => {
return asyncShadowRootQuerySelector(
doc.querySelector('section').shadowRoot,
'$'
)
.catch((error: Error) => {
expect(error.message).to.contain('You can not select a shadowRoot ($) of a shadowRoot');
});
});

Expand Down
71 changes: 31 additions & 40 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,17 @@ import {
SHADOW_ROOT_SELECTOR,
} from '@constants';
import * as lib from '@lib';
import {
isParamsWithRoot,
getPromisableShadowRoot,
getPromisableElement,
getElementPromise
} from '@utilities';
import { isParamsWithRoot, getElementPromise } from '@utilities';

export function querySelector<E extends Element = Element>(
root: Document | Element,
root: Document | Element | ShadowRoot,
selectors: string
): E | null;
export function querySelector<E extends Element = Element>(
selectors: string
): E | null;
export function querySelector<E extends Element = Element>(
...params: [Document | Element, string] | [string]
...params: [Document | Element | ShadowRoot, string] | [string]
): E | null {
const [rootOrSelector, selectors] = params;
if (typeof rootOrSelector === 'string') {
Expand All @@ -37,14 +32,14 @@ export function querySelector<E extends Element = Element>(
}

export function deepQuerySelector<E extends Element = Element>(
root: Document | Element,
root: Document | Element | ShadowRoot,
selectors: string
): E | null;
export function deepQuerySelector<E extends Element = Element>(
selectors: string
): E | null;
export function deepQuerySelector<E extends Element = Element>(
...params: [Document | Element, string] | [string]
...params: [Document | Element | ShadowRoot, string] | [string]
): E | null {
const [rootOrSelector, selectors] = params;
if (typeof rootOrSelector === 'string') {
Expand All @@ -66,14 +61,14 @@ export function deepQuerySelector<E extends Element = Element>(
}

export function querySelectorAll<E extends Element = Element>(
root: Document | Element,
root: Document | Element | ShadowRoot,
selectors: string
): NodeListOf<E>;
export function querySelectorAll<E extends Element = Element>(
selectors: string
): NodeListOf<E>;
export function querySelectorAll<E extends Element = Element>(
...params: [Document | Element, string] | [string]
...params: [Document | Element | ShadowRoot, string] | [string]
): NodeListOf<E> {
const [rootOrSelector, selectors] = params;
if (typeof rootOrSelector === 'string') {
Expand All @@ -89,14 +84,14 @@ export function querySelectorAll<E extends Element = Element>(
}

export function deepQuerySelectorAll<E extends Element = Element>(
root: Document | Element,
root: Document | Element | ShadowRoot,
selectors: string
): NodeListOf<E>;
export function deepQuerySelectorAll<E extends Element = Element>(
selectors: string
): NodeListOf<E>;
export function deepQuerySelectorAll<E extends Element = Element>(
...params: [Document | Element, string] | [string]
...params: [Document | Element | ShadowRoot, string] | [string]
): NodeListOf<E> {
const [rootOrSelector, selectors] = params;
if (typeof rootOrSelector === 'string') {
Expand All @@ -112,14 +107,14 @@ export function deepQuerySelectorAll<E extends Element = Element>(
}

export function shadowRootQuerySelector(
root: Document | Element,
root: Document | Element | ShadowRoot,
selectors: string
): ShadowRoot | null;
export function shadowRootQuerySelector(
selectors: string
): ShadowRoot | null;
export function shadowRootQuerySelector(
...params: [Document | Element, string] | [string]
...params: [Document | Element | ShadowRoot, string] | [string]
): ShadowRoot | null {
const [rootOrSelector, selectors] = params;
if (typeof rootOrSelector === 'string') {
Expand All @@ -135,7 +130,7 @@ export function shadowRootQuerySelector(
}

export async function asyncQuerySelector<E extends Element = Element>(
root: Document | Element,
root: Document | Element | ShadowRoot,
selectors: string,
asyncParams?: AsyncParams,
): Promise<E | null >;
Expand All @@ -144,7 +139,7 @@ export async function asyncQuerySelector<E extends Element = Element>(
asyncParams?: AsyncParams,
): Promise<E | null >;
export async function asyncQuerySelector<E extends Element = Element>(
...params: [Document | Element, string, AsyncParams?] | [string, AsyncParams?]
...params: [Document | Element | ShadowRoot, string, AsyncParams?] | [string, AsyncParams?]
): Promise<E | null > {

if (isParamsWithRoot(params)) {
Expand All @@ -168,7 +163,7 @@ export async function asyncQuerySelector<E extends Element = Element>(
}

export async function asyncDeepQuerySelector<E extends Element = Element>(
root: Document | Element,
root: Document | Element | ShadowRoot,
selectors: string,
asyncParams?: AsyncParams,
): Promise<E | null >;
Expand All @@ -177,7 +172,7 @@ export async function asyncDeepQuerySelector<E extends Element = Element>(
asyncParams?: AsyncParams,
): Promise<E | null >;
export async function asyncDeepQuerySelector<E extends Element = Element>(
...params: [Document | Element, string, AsyncParams?] | [string, AsyncParams?]
...params: [Document | Element | ShadowRoot, string, AsyncParams?] | [string, AsyncParams?]
): Promise<E | null > {

if (isParamsWithRoot(params)) {
Expand Down Expand Up @@ -212,7 +207,7 @@ export async function asyncDeepQuerySelector<E extends Element = Element>(
}

export async function asyncQuerySelectorAll<E extends Element = Element>(
root: Document | Element,
root: Document | Element | ShadowRoot,
selectors: string,
asyncParams?: AsyncParams
): Promise<NodeListOf<E>>;
Expand All @@ -221,7 +216,7 @@ export async function asyncQuerySelectorAll<E extends Element = Element>(
asyncParams?: AsyncParams
): Promise<NodeListOf<E>>;
export async function asyncQuerySelectorAll<E extends Element = Element>(
...params: [Document | Element, string, AsyncParams?] | [string, AsyncParams?]
...params: [Document | Element | ShadowRoot, string, AsyncParams?] | [string, AsyncParams?]
): Promise<NodeListOf<E>> {

if (isParamsWithRoot(params)) {
Expand All @@ -245,7 +240,7 @@ export async function asyncQuerySelectorAll<E extends Element = Element>(
}

export function asyncDeepQuerySelectorAll<E extends Element = Element>(
root: Document | Element,
root: Document | Element | ShadowRoot,
selectors: string,
asyncParams?: AsyncParams
): Promise<NodeListOf<E>>;
Expand All @@ -254,7 +249,7 @@ export function asyncDeepQuerySelectorAll<E extends Element = Element>(
asyncParams?: AsyncParams
): Promise<NodeListOf<E>>;
export function asyncDeepQuerySelectorAll<E extends Element = Element>(
...params: [Document | Element, string, AsyncParams?] | [string, AsyncParams?]
...params: [Document | Element | ShadowRoot, string, AsyncParams?] | [string, AsyncParams?]
): Promise<NodeListOf<E>> {

if (isParamsWithRoot(params)) {
Expand All @@ -279,7 +274,7 @@ export function asyncDeepQuerySelectorAll<E extends Element = Element>(
}

export async function asyncShadowRootQuerySelector(
root: Document | Element,
root: Document | Element | ShadowRoot,
selectors: string,
asyncParams?: AsyncParams
): Promise<ShadowRoot | null>;
Expand All @@ -288,7 +283,7 @@ export async function asyncShadowRootQuerySelector(
asyncParams?: AsyncParams
): Promise<ShadowRoot | null>;
export async function asyncShadowRootQuerySelector(
...params: [Document | Element, string, AsyncParams?] | [string, AsyncParams?]
...params: [Document | Element | ShadowRoot, string, AsyncParams?] | [string, AsyncParams?]
): Promise<ShadowRoot | null> {

if (isParamsWithRoot(params)) {
Expand Down Expand Up @@ -372,16 +367,16 @@ export class AsyncSelector<T extends Document | Element | ShadowRoot> {
return null;
}
if (element instanceof NodeList) {
return getPromisableShadowRoot(
return asyncShadowRootQuerySelector(
element[0],
this._asyncParams.retries,
this._asyncParams.delay
SHADOW_ROOT_SELECTOR,
this._asyncParams
);
}
return getPromisableShadowRoot(
return asyncShadowRootQuerySelector(
element,
this._asyncParams.retries,
this._asyncParams.delay
SHADOW_ROOT_SELECTOR,
this._asyncParams
);
});
return new AsyncSelector(
Expand Down Expand Up @@ -430,20 +425,16 @@ export class AsyncSelector<T extends Document | Element | ShadowRoot> {
return null;
}
if (element instanceof NodeList) {
return getPromisableElement(
return asyncQuerySelectorAll(
element[0],
selector,
this._asyncParams.retries,
this._asyncParams.delay,
true
this._asyncParams
);
}
return getPromisableElement(
return asyncQuerySelectorAll(
element,
selector,
this._asyncParams.retries,
this._asyncParams.delay,
true
this._asyncParams
);
});
return new AsyncSelector<Element>(
Expand Down
Loading

0 comments on commit 0b07c6b

Please sign in to comment.