Skip to content

Commit 572a57d

Browse files
yuhsuanchuangyuhsuanchuang
authored
Merge pull request #168 from quid/chore/QUID-27499-add-id-for-auto-test
chore: add id for dropdown item value for automation testing
2 parents f496b7c + 80042ba commit 572a57d

File tree

2 files changed

+34
-2
lines changed

2 files changed

+34
-2
lines changed

‎packages/react-dropdown/src/HighlightValue.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const HighlightValue = styled(
2929
if (highlight && valueToHighlight.length && value.length) {
3030
const splittedText = splitStringByValue(value, valueToHighlight, 1);
3131
return (
32-
<Value className={className}>
32+
<Value id={`highlight-value-${value}`} className={className}>
3333
{splittedText.map((chunk, index) => {
3434
return chunk.highlight ? (
3535
<Text key={index} as="span" type="bold">
@@ -43,7 +43,11 @@ const HighlightValue = styled(
4343
);
4444
}
4545

46-
return <Value className={className}>{value}</Value>;
46+
return (
47+
<Value id={`highlight-value-${value}`} className={className}>
48+
{value}
49+
</Value>
50+
);
4751
}
4852
)`
4953
${props => textStyles(props.disabled ? 'disabled' : '')};

‎packages/react-dropdown/src/__snapshots__/index.test.js.snap‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,9 +230,11 @@ exports[`renders an open dropdown 1`] = `
230230
>
231231
<Value
232232
className="emotion-3 emotion-0"
233+
id="highlight-value-One"
233234
>
234235
<span
235236
className="emotion-0 emotion-1 emotion-2"
237+
id="highlight-value-One"
236238
>
237239
One
238240
</span>
@@ -270,9 +272,11 @@ exports[`renders an open dropdown 1`] = `
270272
>
271273
<Value
272274
className="emotion-3 emotion-0"
275+
id="highlight-value-Two"
273276
>
274277
<span
275278
className="emotion-0 emotion-1 emotion-2"
279+
id="highlight-value-Two"
276280
>
277281
Two
278282
</span>
@@ -641,9 +645,11 @@ exports[`renders an open dropdown with categories 1`] = `
641645
>
642646
<Value
643647
className="emotion-7 emotion-4"
648+
id="highlight-value-One"
644649
>
645650
<span
646651
className="emotion-4 emotion-5 emotion-6"
652+
id="highlight-value-One"
647653
>
648654
One
649655
</span>
@@ -683,9 +689,11 @@ exports[`renders an open dropdown with categories 1`] = `
683689
>
684690
<Value
685691
className="emotion-7 emotion-4"
692+
id="highlight-value-Two"
686693
>
687694
<span
688695
className="emotion-4 emotion-5 emotion-6"
696+
id="highlight-value-Two"
689697
>
690698
Two
691699
</span>
@@ -794,9 +802,11 @@ exports[`renders an open dropdown with categories 1`] = `
794802
>
795803
<Value
796804
className="emotion-7 emotion-4"
805+
id="highlight-value-Three"
797806
>
798807
<span
799808
className="emotion-4 emotion-5 emotion-6"
809+
id="highlight-value-Three"
800810
>
801811
Three
802812
</span>
@@ -836,9 +846,11 @@ exports[`renders an open dropdown with categories 1`] = `
836846
>
837847
<Value
838848
className="emotion-7 emotion-4"
849+
id="highlight-value-Four"
839850
>
840851
<span
841852
className="emotion-4 emotion-5 emotion-6"
853+
id="highlight-value-Four"
842854
>
843855
Four
844856
</span>
@@ -1222,9 +1234,11 @@ exports[`renders an open dropdown with categories and twoColumn 1`] = `
12221234
>
12231235
<Value
12241236
className="emotion-7 emotion-4"
1237+
id="highlight-value-One"
12251238
>
12261239
<span
12271240
className="emotion-4 emotion-5 emotion-6"
1241+
id="highlight-value-One"
12281242
>
12291243
One
12301244
</span>
@@ -1264,9 +1278,11 @@ exports[`renders an open dropdown with categories and twoColumn 1`] = `
12641278
>
12651279
<Value
12661280
className="emotion-7 emotion-4"
1281+
id="highlight-value-Two"
12671282
>
12681283
<span
12691284
className="emotion-4 emotion-5 emotion-6"
1285+
id="highlight-value-Two"
12701286
>
12711287
Two
12721288
</span>
@@ -1375,9 +1391,11 @@ exports[`renders an open dropdown with categories and twoColumn 1`] = `
13751391
>
13761392
<Value
13771393
className="emotion-7 emotion-4"
1394+
id="highlight-value-Three"
13781395
>
13791396
<span
13801397
className="emotion-4 emotion-5 emotion-6"
1398+
id="highlight-value-Three"
13811399
>
13821400
Three
13831401
</span>
@@ -1417,9 +1435,11 @@ exports[`renders an open dropdown with categories and twoColumn 1`] = `
14171435
>
14181436
<Value
14191437
className="emotion-7 emotion-4"
1438+
id="highlight-value-Four"
14201439
>
14211440
<span
14221441
className="emotion-4 emotion-5 emotion-6"
1442+
id="highlight-value-Four"
14231443
>
14241444
Four
14251445
</span>
@@ -1617,9 +1637,11 @@ exports[`using arrow down should hover on element 1`] = `
16171637
>
16181638
<Value
16191639
className="emotion-3 emotion-0"
1640+
id="highlight-value-One"
16201641
>
16211642
<span
16221643
className="emotion-0 emotion-1 emotion-2"
1644+
id="highlight-value-One"
16231645
>
16241646
One
16251647
</span>
@@ -1659,9 +1681,11 @@ exports[`using arrow down should hover on element 1`] = `
16591681
>
16601682
<Value
16611683
className="emotion-3 emotion-0"
1684+
id="highlight-value-Two"
16621685
>
16631686
<span
16641687
className="emotion-0 emotion-1 emotion-2"
1688+
id="highlight-value-Two"
16651689
>
16661690
Two
16671691
</span>
@@ -1982,9 +2006,11 @@ exports[`using useFilter should only return items that match the input value 1`]
19822006
>
19832007
<Value
19842008
className="emotion-5 emotion-2"
2009+
id="highlight-value-Four"
19852010
>
19862011
<span
19872012
className="emotion-2 emotion-3 emotion-4"
2013+
id="highlight-value-Four"
19882014
>
19892015
<Text
19902016
as="span"
@@ -2034,9 +2060,11 @@ exports[`using useFilter should only return items that match the input value 1`]
20342060
>
20352061
<Value
20362062
className="emotion-5 emotion-2"
2063+
id="highlight-value-Five"
20372064
>
20382065
<span
20392066
className="emotion-2 emotion-3 emotion-4"
2067+
id="highlight-value-Five"
20402068
>
20412069
<Text
20422070
as="span"

0 commit comments

Comments
 (0)