Skip to content
This repository has been archived by the owner on Jan 3, 2019. It is now read-only.

Commit

Permalink
feat(base): improve component positioning (#216)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Renamed `at` method of `Component` class to `nth`.
  • Loading branch information
@clebert
clebert committed Apr 22, 2018
1 parent fa7148a commit 491f500
Show file tree
Hide file tree
Showing 6 changed files with 205 additions and 86 deletions.
66 changes: 45 additions & 21 deletions @pageobject/base/src/Component.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,48 +47,60 @@ const unselectable = new Unselectable(adapter);
const divs = new DIV(adapter);

const a1List = [
divs.at(1),
divs.nth(1),
divs.nth(-6),
divs.first(),
divs.where(div => div.getID(), is('a1')),
divs.where(div => div.getID(), matches(/a/)).at(1),
divs.where(div => div.getID(), matches(/a/)).nth(1),
divs
.where(div => div.divs.getNodeCount(), isGreaterThan(1))
.where(div => div.divs.at(1).getID(), is('b1'))
.where(div => div.divs.nth(1).getID(), is('b1'))
];

const a2List = [
divs.at(6),
divs.nth(6),
divs.nth(-1),
divs.last(),
divs.where(div => div.getID(), is('a2')),
divs.where(div => div.getID(), matches(/a/)).at(2),
divs.where(div => div.divs.getNodeCount(), is(0)).at(4)
divs.where(div => div.getID(), matches(/a/)).nth(2),
divs.where(div => div.divs.getNodeCount(), is(0)).nth(4)
];

const b1List = [
divs.at(2),
divs.nth(2),
divs.nth(-5),
divs.where(div => div.getID(), is('b1')),
divs.where(div => div.getID(), matches(/b/)).at(1),
divs.where(div => div.getID(), matches(/b/)).nth(1),
divs
.where(div => div.divs.getNodeCount(), isGreaterThan(1))
.where(div => div.divs.at(1).getID(), is('c1')),
a1List[0].divs.at(1)
.where(div => div.divs.nth(1).getID(), is('c1')),
a1List[0].divs.nth(1),
a1List[0].divs.nth(-4),
a1List[0].divs.first()
];

const b2List = [
divs.at(5),
divs.nth(5),
divs.nth(-2),
divs.where(div => div.getID(), is('b2')),
divs.where(div => div.getID(), matches(/b/)).at(2),
divs.where(div => div.divs.getNodeCount(), is(0)).at(3),
a1List[0].divs.at(4)
divs.where(div => div.getID(), matches(/b/)).nth(2),
divs.where(div => div.divs.getNodeCount(), is(0)).nth(3),
a1List[0].divs.nth(4),
a1List[0].divs.nth(-1),
a1List[0].divs.last()
];

const notFoundList = [
divs.at(7),
divs.nth(7),
divs.nth(-7),
divs.where(div => div.getID(), is('a3')),
a1List[0].divs.at(5),
a1List[0].divs.nth(5),
a1List[0].divs.nth(-5),
a1List[0].divs.where(div => div.getID(), matches(/a/))
];

const ancestorNotFound = notFoundList[0].divs;
const filterNotFound = divs.where(div => div.divs.at(1).getID(), matches(/./));
const filterNotFound = divs.where(div => div.divs.nth(1).getID(), matches(/./));

const notUniqueList = [
divs,
Expand All @@ -99,21 +111,33 @@ const notUniqueList = [
a1List[0].divs.where(div => div.getID(), matches(/b/))
];

const ancestorNotUnique = divs.divs.at(1);
const ancestorNotUnique = divs.divs.nth(1);
const filterNotUnique = divs.where(div => div.divs.getID(), matches(/./));

describe('Component', () => {
describe('at()', () => {
describe('nth()', () => {
it('should throw a position-base error', () => {
expect(() => divs.at(0)).toThrow(
expect(() => divs.nth(0)).toThrow(
'Position (0) of <DIV> component must be one-based'
);
});

it('should throw a position-already-set error', () => {
expect(() => divs.at(1).at(2)).toThrow(
expect(() => divs.nth(1).nth(2)).toThrow(
'Position (1) of <DIV> component cannot be overwritten with 2'
);

expect(() => divs.nth(-1).nth(2)).toThrow(
'Position (-1) of <DIV> component cannot be overwritten with 2'
);

expect(() => divs.first().nth(2)).toThrow(
'Position (1) of <DIV> component cannot be overwritten with 2'
);

expect(() => divs.last().nth(2)).toThrow(
'Position (-1) of <DIV> component cannot be overwritten with 2'
);
});
});

Expand Down
17 changes: 13 additions & 4 deletions @pageobject/base/src/Component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,18 @@ export abstract class Component<TNode, TAdapter extends Adapter<TNode>> {
this.ancestor = ancestor;
}

public at(position: number): this {
public first(): this {
return this.nth(1);
}

public last(): this {
return this.nth(-1);
}

public nth(position: number): this {
const name = this.toString();

if (position < 1) {
if (position === 0) {
throw new Error(
`Position (${position}) of ${name} component must be one-based`
);
Expand Down Expand Up @@ -92,9 +100,10 @@ export abstract class Component<TNode, TAdapter extends Adapter<TNode>> {
}

if (this._position) {
const index = this._position - 1;
const index =
this._position < 0 ? nodes.length + this._position : this._position - 1;

nodes = index < nodes.length ? [nodes[index]] : [];
nodes = index >= 0 && index < nodes.length ? [nodes[index]] : [];
}

return nodes;
Expand Down
2 changes: 1 addition & 1 deletion docs/api/base/assets/js/search.js
View file

Large diffs are not rendered by default.

94 changes: 68 additions & 26 deletions docs/api/base/classes/component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -925,15 +925,21 @@
<li class=" tsd-kind-property tsd-parent-kind-class">
<a href="component.html#selector" class="tsd-kind-icon">selector</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="component.html#at" class="tsd-kind-icon">at</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="component.html#findnodes" class="tsd-kind-icon">find<wbr>Nodes</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="component.html#finduniquenode" class="tsd-kind-icon">find<wbr>Unique<wbr>Node</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="component.html#first" class="tsd-kind-icon">first</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="component.html#last" class="tsd-kind-icon">last</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="component.html#nth" class="tsd-kind-icon">nth</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a href="component.html#reconstruct" class="tsd-kind-icon">reconstruct</a>
</li>
Expand Down Expand Up @@ -1052,9 +1058,11 @@ <h3>Properties</h3>
<section class="tsd-index-section ">
<h3>Methods</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-method tsd-parent-kind-class"><a href="component.html#at" class="tsd-kind-icon">at</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="component.html#findnodes" class="tsd-kind-icon">find<wbr>Nodes</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="component.html#finduniquenode" class="tsd-kind-icon">find<wbr>Unique<wbr>Node</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="component.html#first" class="tsd-kind-icon">first</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="component.html#last" class="tsd-kind-icon">last</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="component.html#nth" class="tsd-kind-icon">nth</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="component.html#reconstruct" class="tsd-kind-icon">reconstruct</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="component.html#tostring" class="tsd-kind-icon">to<wbr>String</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="component.html#where" class="tsd-kind-icon">where</a></li>
Expand Down Expand Up @@ -1128,10 +1136,44 @@ <h3><span class="tsd-flag ts-flagAbstract">Abstract</span> selector</h3>
<section class="tsd-panel-group tsd-member-group ">
<h2>Methods</h2>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="at" class="tsd-anchor"></a>
<h3>at</h3>
<a name="findnodes" class="tsd-anchor"></a>
<h3>find<wbr>Nodes</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Nodes<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">TNode</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L72">Component.ts:72</a></li>
</ul>
</aside>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">TNode</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="finduniquenode" class="tsd-anchor"></a>
<h3>find<wbr>Unique<wbr>Node</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Unique<wbr>Node<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">TNode</span><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L112">Component.ts:112</a></li>
</ul>
</aside>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">TNode</span><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="first" class="tsd-anchor"></a>
<h3>first</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">at<span class="tsd-signature-symbol">(</span>position<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span></li>
<li class="tsd-signature tsd-kind-icon">first<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
Expand All @@ -1140,47 +1182,47 @@ <h3>at</h3>
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L24">Component.ts:24</a></li>
</ul>
</aside>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>position: <span class="tsd-signature-type">number</span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="findnodes" class="tsd-anchor"></a>
<h3>find<wbr>Nodes</h3>
<a name="last" class="tsd-anchor"></a>
<h3>last</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Nodes<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">TNode</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">&gt;</span></li>
<li class="tsd-signature tsd-kind-icon">last<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L64">Component.ts:64</a></li>
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L28">Component.ts:28</a></li>
</ul>
</aside>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">TNode</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">&gt;</span></h4>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="finduniquenode" class="tsd-anchor"></a>
<h3>find<wbr>Unique<wbr>Node</h3>
<a name="nth" class="tsd-anchor"></a>
<h3>nth</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">find<wbr>Unique<wbr>Node<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">TNode</span><span class="tsd-signature-symbol">&gt;</span></li>
<li class="tsd-signature tsd-kind-icon">nth<span class="tsd-signature-symbol">(</span>position<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L103">Component.ts:103</a></li>
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L32">Component.ts:32</a></li>
</ul>
</aside>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">TNode</span><span class="tsd-signature-symbol">&gt;</span></h4>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>position: <span class="tsd-signature-type">number</span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4>
</li>
</ul>
</section>
Expand All @@ -1194,7 +1236,7 @@ <h3><span class="tsd-flag ts-flagProtected">Protected</span> reconstruct</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L122">Component.ts:122</a></li>
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L131">Component.ts:131</a></li>
</ul>
</aside>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4>
Expand All @@ -1211,7 +1253,7 @@ <h3>to<wbr>String</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L118">Component.ts:118</a></li>
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L127">Component.ts:127</a></li>
</ul>
</aside>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4>
Expand All @@ -1228,7 +1270,7 @@ <h3>where</h3>
<li class="tsd-description">
<aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L49">Component.ts:49</a></li>
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L57">Component.ts:57</a></li>
</ul>
</aside>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
Expand Down
Loading

0 comments on commit 491f500

Please sign in to comment.