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

Commit 491f500

Browse files
clebertclebert
authored
feat(base): improve component positioning (#216)
BREAKING CHANGE: Renamed `at` method of `Component` class to `nth`.
1 parent fa7148a commit 491f500

File tree

6 files changed

+205
-86
lines changed

6 files changed

+205
-86
lines changed

‎@pageobject/base/src/Component.test.ts

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -47,48 +47,60 @@ const unselectable = new Unselectable(adapter);
4747
const divs = new DIV(adapter);
4848

4949
const a1List = [
50-
divs.at(1),
50+
divs.nth(1),
51+
divs.nth(-6),
52+
divs.first(),
5153
divs.where(div => div.getID(), is('a1')),
52-
divs.where(div => div.getID(), matches(/a/)).at(1),
54+
divs.where(div => div.getID(), matches(/a/)).nth(1),
5355
divs
5456
.where(div => div.divs.getNodeCount(), isGreaterThan(1))
55-
.where(div => div.divs.at(1).getID(), is('b1'))
57+
.where(div => div.divs.nth(1).getID(), is('b1'))
5658
];
5759

5860
const a2List = [
59-
divs.at(6),
61+
divs.nth(6),
62+
divs.nth(-1),
63+
divs.last(),
6064
divs.where(div => div.getID(), is('a2')),
61-
divs.where(div => div.getID(), matches(/a/)).at(2),
62-
divs.where(div => div.divs.getNodeCount(), is(0)).at(4)
65+
divs.where(div => div.getID(), matches(/a/)).nth(2),
66+
divs.where(div => div.divs.getNodeCount(), is(0)).nth(4)
6367
];
6468

6569
const b1List = [
66-
divs.at(2),
70+
divs.nth(2),
71+
divs.nth(-5),
6772
divs.where(div => div.getID(), is('b1')),
68-
divs.where(div => div.getID(), matches(/b/)).at(1),
73+
divs.where(div => div.getID(), matches(/b/)).nth(1),
6974
divs
7075
.where(div => div.divs.getNodeCount(), isGreaterThan(1))
71-
.where(div => div.divs.at(1).getID(), is('c1')),
72-
a1List[0].divs.at(1)
76+
.where(div => div.divs.nth(1).getID(), is('c1')),
77+
a1List[0].divs.nth(1),
78+
a1List[0].divs.nth(-4),
79+
a1List[0].divs.first()
7380
];
7481

7582
const b2List = [
76-
divs.at(5),
83+
divs.nth(5),
84+
divs.nth(-2),
7785
divs.where(div => div.getID(), is('b2')),
78-
divs.where(div => div.getID(), matches(/b/)).at(2),
79-
divs.where(div => div.divs.getNodeCount(), is(0)).at(3),
80-
a1List[0].divs.at(4)
86+
divs.where(div => div.getID(), matches(/b/)).nth(2),
87+
divs.where(div => div.divs.getNodeCount(), is(0)).nth(3),
88+
a1List[0].divs.nth(4),
89+
a1List[0].divs.nth(-1),
90+
a1List[0].divs.last()
8191
];
8292

8393
const notFoundList = [
84-
divs.at(7),
94+
divs.nth(7),
95+
divs.nth(-7),
8596
divs.where(div => div.getID(), is('a3')),
86-
a1List[0].divs.at(5),
97+
a1List[0].divs.nth(5),
98+
a1List[0].divs.nth(-5),
8799
a1List[0].divs.where(div => div.getID(), matches(/a/))
88100
];
89101

90102
const ancestorNotFound = notFoundList[0].divs;
91-
const filterNotFound = divs.where(div => div.divs.at(1).getID(), matches(/./));
103+
const filterNotFound = divs.where(div => div.divs.nth(1).getID(), matches(/./));
92104

93105
const notUniqueList = [
94106
divs,
@@ -99,21 +111,33 @@ const notUniqueList = [
99111
a1List[0].divs.where(div => div.getID(), matches(/b/))
100112
];
101113

102-
const ancestorNotUnique = divs.divs.at(1);
114+
const ancestorNotUnique = divs.divs.nth(1);
103115
const filterNotUnique = divs.where(div => div.divs.getID(), matches(/./));
104116

105117
describe('Component', () => {
106-
describe('at()', () => {
118+
describe('nth()', () => {
107119
it('should throw a position-base error', () => {
108-
expect(() => divs.at(0)).toThrow(
120+
expect(() => divs.nth(0)).toThrow(
109121
'Position (0) of <DIV> component must be one-based'
110122
);
111123
});
112124

113125
it('should throw a position-already-set error', () => {
114-
expect(() => divs.at(1).at(2)).toThrow(
126+
expect(() => divs.nth(1).nth(2)).toThrow(
115127
'Position (1) of <DIV> component cannot be overwritten with 2'
116128
);
129+
130+
expect(() => divs.nth(-1).nth(2)).toThrow(
131+
'Position (-1) of <DIV> component cannot be overwritten with 2'
132+
);
133+
134+
expect(() => divs.first().nth(2)).toThrow(
135+
'Position (1) of <DIV> component cannot be overwritten with 2'
136+
);
137+
138+
expect(() => divs.last().nth(2)).toThrow(
139+
'Position (-1) of <DIV> component cannot be overwritten with 2'
140+
);
117141
});
118142
});
119143

‎@pageobject/base/src/Component.ts

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,18 @@ export abstract class Component<TNode, TAdapter extends Adapter<TNode>> {
2121
this.ancestor = ancestor;
2222
}
2323

24-
public at(position: number): this {
24+
public first(): this {
25+
return this.nth(1);
26+
}
27+
28+
public last(): this {
29+
return this.nth(-1);
30+
}
31+
32+
public nth(position: number): this {
2533
const name = this.toString();
2634

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

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

97-
nodes = index < nodes.length ? [nodes[index]] : [];
106+
nodes = index >= 0 && index < nodes.length ? [nodes[index]] : [];
98107
}
99108

100109
return nodes;

‎docs/api/base/assets/js/search.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/api/base/classes/component.html

Lines changed: 68 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -925,15 +925,21 @@
925925
<li class=" tsd-kind-property tsd-parent-kind-class">
926926
<a href="component.html#selector" class="tsd-kind-icon">selector</a>
927927
</li>
928-
<li class=" tsd-kind-method tsd-parent-kind-class">
929-
<a href="component.html#at" class="tsd-kind-icon">at</a>
930-
</li>
931928
<li class=" tsd-kind-method tsd-parent-kind-class">
932929
<a href="component.html#findnodes" class="tsd-kind-icon">find<wbr>Nodes</a>
933930
</li>
934931
<li class=" tsd-kind-method tsd-parent-kind-class">
935932
<a href="component.html#finduniquenode" class="tsd-kind-icon">find<wbr>Unique<wbr>Node</a>
936933
</li>
934+
<li class=" tsd-kind-method tsd-parent-kind-class">
935+
<a href="component.html#first" class="tsd-kind-icon">first</a>
936+
</li>
937+
<li class=" tsd-kind-method tsd-parent-kind-class">
938+
<a href="component.html#last" class="tsd-kind-icon">last</a>
939+
</li>
940+
<li class=" tsd-kind-method tsd-parent-kind-class">
941+
<a href="component.html#nth" class="tsd-kind-icon">nth</a>
942+
</li>
937943
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-protected">
938944
<a href="component.html#reconstruct" class="tsd-kind-icon">reconstruct</a>
939945
</li>
@@ -1052,9 +1058,11 @@ <h3>Properties</h3>
10521058
<section class="tsd-index-section ">
10531059
<h3>Methods</h3>
10541060
<ul class="tsd-index-list">
1055-
<li class="tsd-kind-method tsd-parent-kind-class"><a href="component.html#at" class="tsd-kind-icon">at</a></li>
10561061
<li class="tsd-kind-method tsd-parent-kind-class"><a href="component.html#findnodes" class="tsd-kind-icon">find<wbr>Nodes</a></li>
10571062
<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>
1063+
<li class="tsd-kind-method tsd-parent-kind-class"><a href="component.html#first" class="tsd-kind-icon">first</a></li>
1064+
<li class="tsd-kind-method tsd-parent-kind-class"><a href="component.html#last" class="tsd-kind-icon">last</a></li>
1065+
<li class="tsd-kind-method tsd-parent-kind-class"><a href="component.html#nth" class="tsd-kind-icon">nth</a></li>
10581066
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="component.html#reconstruct" class="tsd-kind-icon">reconstruct</a></li>
10591067
<li class="tsd-kind-method tsd-parent-kind-class"><a href="component.html#tostring" class="tsd-kind-icon">to<wbr>String</a></li>
10601068
<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>
@@ -1128,10 +1136,44 @@ <h3><span class="tsd-flag ts-flagAbstract">Abstract</span> selector</h3>
11281136
<section class="tsd-panel-group tsd-member-group ">
11291137
<h2>Methods</h2>
11301138
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
1131-
<a name="at" class="tsd-anchor"></a>
1132-
<h3>at</h3>
1139+
<a name="findnodes" class="tsd-anchor"></a>
1140+
<h3>find<wbr>Nodes</h3>
1141+
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
1142+
<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>
1143+
</ul>
1144+
<ul class="tsd-descriptions">
1145+
<li class="tsd-description">
1146+
<aside class="tsd-sources">
1147+
<ul>
1148+
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L72">Component.ts:72</a></li>
1149+
</ul>
1150+
</aside>
1151+
<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>
1152+
</li>
1153+
</ul>
1154+
</section>
1155+
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
1156+
<a name="finduniquenode" class="tsd-anchor"></a>
1157+
<h3>find<wbr>Unique<wbr>Node</h3>
1158+
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
1159+
<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>
1160+
</ul>
1161+
<ul class="tsd-descriptions">
1162+
<li class="tsd-description">
1163+
<aside class="tsd-sources">
1164+
<ul>
1165+
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L112">Component.ts:112</a></li>
1166+
</ul>
1167+
</aside>
1168+
<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>
1169+
</li>
1170+
</ul>
1171+
</section>
1172+
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
1173+
<a name="first" class="tsd-anchor"></a>
1174+
<h3>first</h3>
11331175
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
1134-
<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>
1176+
<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>
11351177
</ul>
11361178
<ul class="tsd-descriptions">
11371179
<li class="tsd-description">
@@ -1140,47 +1182,47 @@ <h3>at</h3>
11401182
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L24">Component.ts:24</a></li>
11411183
</ul>
11421184
</aside>
1143-
<h4 class="tsd-parameters-title">Parameters</h4>
1144-
<ul class="tsd-parameters">
1145-
<li>
1146-
<h5>position: <span class="tsd-signature-type">number</span></h5>
1147-
</li>
1148-
</ul>
11491185
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4>
11501186
</li>
11511187
</ul>
11521188
</section>
11531189
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
1154-
<a name="findnodes" class="tsd-anchor"></a>
1155-
<h3>find<wbr>Nodes</h3>
1190+
<a name="last" class="tsd-anchor"></a>
1191+
<h3>last</h3>
11561192
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
1157-
<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>
1193+
<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>
11581194
</ul>
11591195
<ul class="tsd-descriptions">
11601196
<li class="tsd-description">
11611197
<aside class="tsd-sources">
11621198
<ul>
1163-
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L64">Component.ts:64</a></li>
1199+
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L28">Component.ts:28</a></li>
11641200
</ul>
11651201
</aside>
1166-
<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>
1202+
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4>
11671203
</li>
11681204
</ul>
11691205
</section>
11701206
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
1171-
<a name="finduniquenode" class="tsd-anchor"></a>
1172-
<h3>find<wbr>Unique<wbr>Node</h3>
1207+
<a name="nth" class="tsd-anchor"></a>
1208+
<h3>nth</h3>
11731209
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
1174-
<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>
1210+
<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>
11751211
</ul>
11761212
<ul class="tsd-descriptions">
11771213
<li class="tsd-description">
11781214
<aside class="tsd-sources">
11791215
<ul>
1180-
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L103">Component.ts:103</a></li>
1216+
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L32">Component.ts:32</a></li>
11811217
</ul>
11821218
</aside>
1183-
<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>
1219+
<h4 class="tsd-parameters-title">Parameters</h4>
1220+
<ul class="tsd-parameters">
1221+
<li>
1222+
<h5>position: <span class="tsd-signature-type">number</span></h5>
1223+
</li>
1224+
</ul>
1225+
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4>
11841226
</li>
11851227
</ul>
11861228
</section>
@@ -1194,7 +1236,7 @@ <h3><span class="tsd-flag ts-flagProtected">Protected</span> reconstruct</h3>
11941236
<li class="tsd-description">
11951237
<aside class="tsd-sources">
11961238
<ul>
1197-
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L122">Component.ts:122</a></li>
1239+
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L131">Component.ts:131</a></li>
11981240
</ul>
11991241
</aside>
12001242
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4>
@@ -1211,7 +1253,7 @@ <h3>to<wbr>String</h3>
12111253
<li class="tsd-description">
12121254
<aside class="tsd-sources">
12131255
<ul>
1214-
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L118">Component.ts:118</a></li>
1256+
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L127">Component.ts:127</a></li>
12151257
</ul>
12161258
</aside>
12171259
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4>
@@ -1228,7 +1270,7 @@ <h3>where</h3>
12281270
<li class="tsd-description">
12291271
<aside class="tsd-sources">
12301272
<ul>
1231-
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L49">Component.ts:49</a></li>
1273+
<li>Defined in <a href="https://github.com/clebert/pageobject/blob/master/@pageobject/base/src/Component.ts#L57">Component.ts:57</a></li>
12321274
</ul>
12331275
</aside>
12341276
<h4 class="tsd-type-parameters-title">Type parameters</h4>

0 commit comments

Comments
 (0)