Skip to content

Commit 0cc176d

Browse files
skipiskipi
authored
fix(front): dont truncate long flaky test names, break words if necessary (#652)
## 📝 Description Flaky test data is truncated; in addition, we're not doing a word break for long test names. This PR fixes these issues. ## ✅ Checklist - [x] I have tested this change - [ ] This change requires documentation update
1 parent 3f5f8f5 commit 0cc176d

File tree

2 files changed

+82
-49
lines changed

2 files changed

+82
-49
lines changed

‎front/assets/js/flaky_tests/components/flaky_test_row.tsx‎

Lines changed: 78 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { Link } from "react-router-dom";
77
import * as stores from "../stores";
88
import * as components from "../components";
99

10-
1110
export const FlakyTestRow = ({ item }: { item: FlakyTestItem, }) => {
1211
const [labels, setLabels] = useState([``]);
1312
useEffect(() => {
@@ -17,70 +16,88 @@ export const FlakyTestRow = ({ item }: { item: FlakyTestItem, }) => {
1716
setLabels(labels);
1817
}, [item]);
1918

19+
return (
20+
<div className="flex-m bt b--black-10 pv2 items-center">
21+
{/*Name*/}
22+
<div className="w-25-m" style={{ wordBreak: `break-word` }}>
23+
<Name item={item}/>
24+
</div>
2025

21-
return <div className="flex-m bt b--black-10 pv2 items-center">
22-
{/*Name*/}
23-
<div className="w-25-m truncate">
24-
<Name item={item}/>
25-
</div>
26-
27-
{/* Labels */}
28-
<div className="w-10-m flex flex-column items-center justify-center">
29-
<components.LabelList testId={item.testId} labels={labels} setLabels={setLabels}/>
30-
</div>
31-
32-
{/* Age */}
33-
<div className="w-10-m flex flex-column items-center justify-center">
34-
<span className="gray">{item.daysAge()}</span>
35-
</div>
36-
26+
{/* Labels */}
27+
<div className="w-10-m flex flex-column items-center justify-center">
28+
<components.LabelList
29+
testId={item.testId}
30+
labels={labels}
31+
setLabels={setLabels}
32+
/>
33+
</div>
3734

38-
{/* Latest flaky occurrence */}
39-
<div className="w-10-m flex flex-column items-center justify-center">
40-
<LatestFlakyOccurrence item={item}/>
41-
</div>
35+
{/* Age */}
36+
<div className="w-10-m flex flex-column items-center justify-center">
37+
<span className="gray">{item.daysAge()}</span>
38+
</div>
4239

40+
{/* Latest flaky occurrence */}
41+
<div className="w-10-m flex flex-column items-center justify-center">
42+
<LatestFlakyOccurrence item={item}/>
43+
</div>
4344

44-
{/* Disruption History*/}
45-
<div className="w-25-m flex flex-column items-center justify-center flex-wrap">
46-
<DisruptionHistoryChart items={item.disruptionHistory}/>
47-
</div>
45+
{/* Disruption History*/}
46+
<div className="w-25-m flex flex-column items-center justify-center flex-wrap">
47+
<DisruptionHistoryChart items={item.disruptionHistory}/>
48+
</div>
4849

49-
{/* Disruptions */}
50-
<div className="w-10-m flex flex-column items-center justify-center">
51-
<span className="f3 b">{item.disruptions}</span>
52-
</div>
50+
{/* Disruptions */}
51+
<div className="w-10-m flex flex-column items-center justify-center">
52+
<span className="f3 b">{item.disruptions}</span>
53+
</div>
5354

54-
{/* Actions */}
55-
<div className="w-10-m flex flex-column items-center justify-center">
56-
<components.Actions item={item}/>
55+
{/* Actions */}
56+
<div className="w-10-m flex flex-column items-center justify-center">
57+
<components.Actions item={item}/>
58+
</div>
5759
</div>
58-
</div>;
60+
);
5961
};
6062

6163
const Name = ({ item }: { item: FlakyTestItem, }) => {
62-
const { state: filterState, dispatch: dispatchFilter } = useContext(stores.Filter.Context);
63-
64+
const { state: filterState, dispatch: dispatchFilter } = useContext(
65+
stores.Filter.Context
66+
);
6467

6568
const onClick = (toAppend: string) => {
6669
const query = filterState.query;
67-
const setQuery = (q: string) => dispatchFilter({ type: `SET_QUERY`, value: q });
68-
if(query.includes(toAppend))
69-
return;
70+
const setQuery = (q: string) =>
71+
dispatchFilter({ type: `SET_QUERY`, value: q });
72+
if (query.includes(toAppend)) return;
7073
const q = `${query} ${toAppend}`;
7174
setQuery(q);
7275
};
7376

74-
7577
return (
7678
<div className="flex-m items-start justify-between">
7779
<div className="pr3-m">
7880
<div>
7981
<Link to={item.testId}>{item.testName}</Link>
8082
</div>
81-
<a className="f5 mt1 black link underline-hover db pointer" onClick={() => onClick(`@test.group:"${item.testGroup}"`)}>{item.testGroup}</a>
82-
<a className="f6 gray link underline-hover db pointer" onClick={() => onClick(`@test.runner:"${item.testRunner}"`)}>{item.testRunner}</a>
83-
<a className="f6 gray link underline-hover db pointer" onClick={() => onClick(`@test.suite:"${item.testSuite}"`)}>{item.testSuite}</a>
83+
<a
84+
className="f5 mt1 black link underline-hover db pointer"
85+
onClick={() => onClick(`@test.group:"${item.testGroup}"`)}
86+
>
87+
{item.testGroup}
88+
</a>
89+
<a
90+
className="f6 gray link underline-hover db pointer"
91+
onClick={() => onClick(`@test.runner:"${item.testRunner}"`)}
92+
>
93+
{item.testRunner}
94+
</a>
95+
<a
96+
className="f6 gray link underline-hover db pointer"
97+
onClick={() => onClick(`@test.suite:"${item.testSuite}"`)}
98+
>
99+
{item.testSuite}
100+
</a>
84101
</div>
85102
</div>
86103
);
@@ -90,11 +107,27 @@ const LatestFlakyOccurrence = ({ item }: { item: FlakyTestItem, }) => {
90107
return (
91108
<Fragment>
92109
<div title={util.Formatter.dateTime(item.latestDisruptionTimestamp)}>
93-
<a href={item.latestDisruptionJobUrl} className="link gray underline-hover" target="_blank" rel="noreferrer">{util.Formatter.dateDiff(item.latestDisruptionTimestamp, new Date())}</a>
110+
<a
111+
href={item.latestDisruptionJobUrl}
112+
className="link gray underline-hover"
113+
target="_blank"
114+
rel="noreferrer"
115+
>
116+
{util.Formatter.dateDiff(item.latestDisruptionTimestamp, new Date())}
117+
</a>
94118
</div>
95119
<div className="flex items-center ph2">
96-
<span className="material-symbols-outlined b f4 db mr2 gray">commit</span>
97-
<a href={item.latestDisruptionJobUrl} className="link gray underline-hover" target="_blank" rel="noreferrer">{item.latestDisruptionHash.slice(0, 7)}</a>
120+
<span className="material-symbols-outlined b f4 db mr2 gray">
121+
commit
122+
</span>
123+
<a
124+
href={item.latestDisruptionJobUrl}
125+
className="link gray underline-hover"
126+
target="_blank"
127+
rel="noreferrer"
128+
>
129+
{item.latestDisruptionHash.slice(0, 7)}
130+
</a>
98131
</div>
99132
</Fragment>
100133
);

‎front/test/support/fake_clients/superjerry.ex‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -144,10 +144,10 @@ defmodule Support.FakeClients.Superjerry do
144144

145145
%FlakyTestItem{
146146
test_id: Ecto.UUID.generate(),
147-
test_name: Faker.Commerce.product_name(),
148-
test_group: Faker.Commerce.product_name(),
149-
test_runner: Faker.Commerce.product_name(),
150-
test_suite: Faker.Commerce.product_name(),
147+
test_name: Faker.Lorem.sentence(6..12),
148+
test_group: Faker.Lorem.sentence(6..12),
149+
test_runner: Faker.Lorem.sentence(6..12),
150+
test_suite: Faker.Lorem.sentence(6..12),
151151
test_file: Faker.File.file_name(),
152152
disruptions_count: disruption_count,
153153
pass_rate: Faker.random_between(0, 100),

0 commit comments

Comments
 (0)