Skip to content

Commit 9131ee4

Browse files
KoolThebaKoolTheba
authored
Merge pull request #163 from KoolTheba/feature/comparator-diff
Feature: comparator diff
2 parents d2cb6e3 + c6dd0cf commit 9131ee4

16 files changed

+183
-105
lines changed

‎.github/other/comparator-diff1.png

35.9 KB
Loading

‎.github/other/comparator-diff2.png

222 KB
Loading

‎README.md

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,24 @@ The Visualizer is part of the [OpenSSF Scorecard Monitor](https://github.com/Uli
2222
</div>
2323
</br>
2424

25+
**Scorecard Data Comparator Diff:** Makes easier the visualization of the differences in the Scorecard comparator reasoning and details.
26+
27+
<br>
28+
<div>
29+
<img src='.github/other/comparator-diff1.png' alt="comparator-diff-reasoning"/>
30+
</div>
31+
<div>
32+
<img src='.github/other/comparator-diff2.png' alt="comparator-diff-details"/>
33+
</div>
34+
</br>
35+
2536
## How to use it
2637

2738
The Visualizer and the Comparator can be used outside the Monitor.
2839

2940
You have 3 options of visualization. Depending on which one you want to check, you should craft your own url as:
3041

31-
- Checks the latest Scorecard data available for a project: `https://kooltheba.github.io/openssf-scorecard-api-visualizer//projects/${platform}/${org}/${repo}`
42+
- Checks the latest Scorecard data available for a project: `https://kooltheba.github.io/openssf-scorecard-api-visualizer/#/projects/${platform}/${org}/${repo}`
3243
- Checks the Scorecard data for an specific commit (previously reported): `https://kooltheba.github.io/openssf-scorecard-api-visualizer/#/projects/${platform}/${org}/${repo}/commit/{commitHash}`
3344
- Compares two specific commits, previously reported: `https://kooltheba.github.io/openssf-scorecard-api-visualizer/#/projects/github.com/nodejs/node/compare/{prevCommitHash}/{currentCommitHash}`
3445

‎cypress/downloads/downloads.html

30 MB
Binary file not shown.

‎cypress/e2e/comparator.cy.ts

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@ describe("Comparator", () => {
55
"https://api.securityscorecards.dev/projects/github.com/nodejs/node/?commit=2ac5e9889aba461f5a54d320973d2574980d206b",
66
{
77
statusCode: 404,
8-
}
8+
},
99
).as("getDataPreviousCommit");
1010

1111
cy.intercept(
1212
"GET",
1313
"https://api.securityscorecards.dev/projects/github.com/nodejs/node/?commit=077fd7d83d7d41695137c1af5b9be1d72250e69e",
1414
{
1515
statusCode: 404,
16-
}
16+
},
1717
).as("getDataCurrentCommit");
1818

1919
cy.visit(
20-
"localhost:3000/openssf-scorecard-api-visualizer/#/projects/github.com/nodejs/node/compare/2ac5e9889aba461f5a54d320973d2574980d206b/077fd7d83d7d41695137c1af5b9be1d72250e69e"
20+
"localhost:3000/openssf-scorecard-api-visualizer/#/projects/github.com/nodejs/node/compare/2ac5e9889aba461f5a54d320973d2574980d206b/077fd7d83d7d41695137c1af5b9be1d72250e69e",
2121
);
2222
cy.wait("@getDataPreviousCommit"); // first try as react query behaves
2323
cy.wait("@getDataPreviousCommit"); // second try
@@ -27,11 +27,11 @@ describe("Comparator", () => {
2727
cy.wait("@getDataCurrentCommit"); // third try
2828
cy.get("h1", { timeout: 10000 }).should(
2929
"contain",
30-
"An error ocurred. Please refresh/try again."
30+
"An error ocurred. Please refresh/try again.",
3131
);
3232
cy.get("p", { timeout: 10000 }).should(
3333
"contain",
34-
"Please check if the org/repository/commit has been analysed by the Scorecard."
34+
"Please check if the org/repository/commit has been analysed by the Scorecard.",
3535
);
3636
});
3737
it("should render error when the previous commit hash does not exist", () => {
@@ -40,7 +40,7 @@ describe("Comparator", () => {
4040
"https://api.securityscorecards.dev/projects/github.com/nodejs/node/?commit=2ac5e9889aba461f5a54d320973d2574980d206b",
4141
{
4242
statusCode: 404,
43-
}
43+
},
4444
).as("getDataPreviousCommit");
4545

4646
cy.intercept(
@@ -49,11 +49,11 @@ describe("Comparator", () => {
4949
{
5050
statusCode: 200,
5151
fixture: "077fd7d83d7d41695137c1af5b9be1d72250e69e.json",
52-
}
52+
},
5353
).as("getDataCurrentCommit");
5454

5555
cy.visit(
56-
"localhost:3000/openssf-scorecard-api-visualizer/#/projects/github.com/nodejs/node/compare/2ac5e9889aba461f5a54d320973d2574980d206b/077fd7d83d7d41695137c1af5b9be1d72250e69e"
56+
"localhost:3000/openssf-scorecard-api-visualizer/#/projects/github.com/nodejs/node/compare/2ac5e9889aba461f5a54d320973d2574980d206b/077fd7d83d7d41695137c1af5b9be1d72250e69e",
5757
);
5858
cy.wait("@getDataPreviousCommit"); // first try as react query behaves
5959
cy.wait("@getDataPreviousCommit"); // second try
@@ -62,11 +62,11 @@ describe("Comparator", () => {
6262

6363
cy.get("h1", { timeout: 10000 }).should(
6464
"contain",
65-
"An error ocurred. Please refresh/try again."
65+
"An error ocurred. Please refresh/try again.",
6666
);
6767
cy.get("p", { timeout: 10000 }).should(
6868
"contain",
69-
"Please check if the org/repository/commit has been analysed by the Scorecard."
69+
"Please check if the org/repository/commit has been analysed by the Scorecard.",
7070
);
7171
});
7272
it("should render error when the current commit hash does not exist", () => {
@@ -76,19 +76,19 @@ describe("Comparator", () => {
7676
{
7777
statusCode: 200,
7878
fixture: "2ac5e9889aba461f5a54d320973d2574980d206b.json",
79-
}
79+
},
8080
).as("getDataPreviousCommit");
8181

8282
cy.intercept(
8383
"GET",
8484
"https://api.securityscorecards.dev/projects/github.com/nodejs/node/?commit=077fd7d83d7d41695137c1af5b9be1d72250e69e",
8585
{
8686
statusCode: 404,
87-
}
87+
},
8888
).as("getDataCurrentCommit");
8989

9090
cy.visit(
91-
"localhost:3000/openssf-scorecard-api-visualizer/#/projects/github.com/nodejs/node/compare/2ac5e9889aba461f5a54d320973d2574980d206b/077fd7d83d7d41695137c1af5b9be1d72250e69e"
91+
"localhost:3000/openssf-scorecard-api-visualizer/#/projects/github.com/nodejs/node/compare/2ac5e9889aba461f5a54d320973d2574980d206b/077fd7d83d7d41695137c1af5b9be1d72250e69e",
9292
);
9393
cy.wait("@getDataPreviousCommit"); // first try as react query behaves
9494
cy.wait("@getDataCurrentCommit"); // first try as react query behaves
@@ -97,11 +97,11 @@ describe("Comparator", () => {
9797

9898
cy.get("h1", { timeout: 10000 }).should(
9999
"contain",
100-
"An error ocurred. Please refresh/try again."
100+
"An error ocurred. Please refresh/try again.",
101101
);
102102
cy.get("p", { timeout: 10000 }).should(
103103
"contain",
104-
"Please check if the org/repository/commit has been analysed by the Scorecard."
104+
"Please check if the org/repository/commit has been analysed by the Scorecard.",
105105
);
106106
});
107107
it("should compare data from each commit as expected", () => {
@@ -111,7 +111,7 @@ describe("Comparator", () => {
111111
{
112112
statusCode: 200,
113113
fixture: "2ac5e9889aba461f5a54d320973d2574980d206b.json",
114-
}
114+
},
115115
).as("getDataPreviousCommit");
116116

117117
cy.intercept(
@@ -120,23 +120,23 @@ describe("Comparator", () => {
120120
{
121121
statusCode: 200,
122122
fixture: "077fd7d83d7d41695137c1af5b9be1d72250e69e.json",
123-
}
123+
},
124124
).as("getDataCurrentCommit");
125125

126126
cy.visit(
127-
"localhost:3000/openssf-scorecard-api-visualizer/#/projects/github.com/nodejs/node/compare/2ac5e9889aba461f5a54d320973d2574980d206b/077fd7d83d7d41695137c1af5b9be1d72250e69e"
127+
"localhost:3000/openssf-scorecard-api-visualizer/#/projects/github.com/nodejs/node/compare/2ac5e9889aba461f5a54d320973d2574980d206b/077fd7d83d7d41695137c1af5b9be1d72250e69e",
128128
);
129129
cy.wait("@getDataPreviousCommit"); // first try as react query behaves
130130
cy.wait("@getDataCurrentCommit"); // first try as react query behaves
131131

132132
cy.get("h1").should(
133133
"contain",
134-
"OpenSSF Scorecard comparator for nodejs/node"
134+
"OpenSSF Scorecard comparator for nodejs/node",
135135
);
136136

137137
cy.get('[data-testid="current-score-and-badge"] > h2').should(
138138
"contain",
139-
"Score: 7.3/10"
139+
"Score: 7.3/10",
140140
);
141141

142142
cy.get('[data-testid="current-score-and-badge"] > span')
@@ -146,36 +146,36 @@ describe("Comparator", () => {
146146

147147
cy.get('[data-testid="commits-analysis"]').should(
148148
"contain",
149-
"Analysis of commits (077fd7d8) and (2ac5e988)"
149+
"Analysis of commits (077fd7d8) and (2ac5e988)",
150150
);
151151

152152
cy.get('[data-testid="commits-analysis"] > a:first-child')
153153
.should("contain", "(077fd7d8)")
154154
.and("have.attr", "href")
155155
.and(
156156
"include",
157-
"https://github.com/nodejs/node/commit/077fd7d83d7d41695137c1af5b9be1d72250e69e"
157+
"https://github.com/nodejs/node/commit/077fd7d83d7d41695137c1af5b9be1d72250e69e",
158158
);
159159

160160
cy.get('[data-testid="commits-analysis"] > a:last-child')
161161
.should("contain", "(2ac5e988)")
162162
.and("have.attr", "href")
163163
.and(
164164
"include",
165-
"https://github.com/nodejs/node/commit/2ac5e9889aba461f5a54d320973d2574980d206b"
165+
"https://github.com/nodejs/node/commit/2ac5e9889aba461f5a54d320973d2574980d206b",
166166
);
167-
167+
168168
// @TODO: restore when https://github.com/KoolTheba/openssf-scorecard-api-visualizer/actions/runs/5457182231/jobs/9930918315?pr=106 is solved
169169
// cy.get('[data-testid="date"]').should("contain", "Date: June 8, 2023");
170170

171171
cy.get('[data-testid="scorecard-version"]').should(
172172
"contain",
173-
"Scorecard version v4.10.5 (27cfe92e)"
173+
"Scorecard version v4.10.5 (27cfe92e)",
174174
);
175175

176176
cy.get('[data-testid="Binary-Artifacts"]').should(
177177
"contain",
178-
"Binary-Artifacts"
178+
"Binary-Artifacts",
179179
);
180180
cy.get('[data-testid="Binary-Artifacts"] > div > span')
181181
.should("contain", "Unchanged")
@@ -185,15 +185,15 @@ describe("Comparator", () => {
185185

186186
cy.get('[data-testid="Branch-Protection"]').should(
187187
"contain",
188-
"Branch-Protection"
188+
"Branch-Protection",
189189
);
190190
cy.get('[data-testid="Branch-Protection"] > div > span')
191191
.should("contain", "Unchanged")
192192
.and("have.css", "background-color")
193193
.and("eq", "rgb(108, 117, 125)");
194194
cy.get('[data-testid="Branch-Protection"] > span').should(
195195
"contain",
196-
"-1/10"
196+
"-1/10",
197197
);
198198

199199
cy.get('[data-testid="CI-Tests"]').should("contain", "CI-Tests");
@@ -204,20 +204,20 @@ describe("Comparator", () => {
204204
cy.get('[data-testid="CI-Tests"] > span').and("contain", "9/10");
205205
cy.get('[data-testid="CI-Tests"] ~ h4').should(
206206
"contain",
207-
"Additional details / variations"
207+
"Additional details / variations",
208208
);
209209

210210
cy.get('[data-testid="CII-Best-Practices"]').should(
211211
"contain",
212-
"CII-Best-Practices"
212+
"CII-Best-Practices",
213213
);
214214
cy.get('[data-testid="CII-Best-Practices"] > div > span')
215215
.should("contain", "Unchanged")
216216
.and("have.css", "background-color")
217217
.and("eq", "rgb(108, 117, 125)");
218218
cy.get('[data-testid="CII-Best-Practices"] > span').should(
219219
"contain",
220-
"5/10"
220+
"5/10",
221221
);
222222

223223
cy.get('[data-testid="Code-Review"]').should("contain", "Code-Review");
@@ -228,7 +228,7 @@ describe("Comparator", () => {
228228
cy.get('[data-testid="Code-Review"] > span').should("contain", "0/10");
229229
cy.get('[data-testid="Code-Review"] ~ h4').should(
230230
"contain",
231-
"Additional details / variations"
231+
"Additional details / variations",
232232
);
233233

234234
cy.get('[data-testid="Contributors"]').should("contain", "Contributors");
@@ -240,28 +240,28 @@ describe("Comparator", () => {
240240

241241
cy.get('[data-testid="Dangerous-Workflow"]').should(
242242
"contain",
243-
"Dangerous-Workflow"
243+
"Dangerous-Workflow",
244244
);
245245
cy.get('[data-testid="Dangerous-Workflow"] > div > span')
246246
.should("contain", "Unchanged")
247247
.and("have.css", "background-color")
248248
.and("eq", "rgb(108, 117, 125)");
249249
cy.get('[data-testid="Dangerous-Workflow"] > span').should(
250250
"contain",
251-
"10/10"
251+
"10/10",
252252
);
253253

254254
cy.get('[data-testid="Dependency-Update-Tool"]').should(
255255
"contain",
256-
"Dependency-Update-Tool"
256+
"Dependency-Update-Tool",
257257
);
258258
cy.get('[data-testid="Dependency-Update-Tool"] > div > span')
259259
.should("contain", "Unchanged")
260260
.and("have.css", "background-color")
261261
.and("eq", "rgb(108, 117, 125)");
262262
cy.get('[data-testid="Dependency-Update-Tool"] > span').should(
263263
"contain",
264-
"10/10"
264+
"10/10",
265265
);
266266

267267
cy.get('[data-testid="Fuzzing"]').should("contain", "Fuzzing");
@@ -286,7 +286,7 @@ describe("Comparator", () => {
286286
cy.get('[data-testid="Maintained"] > span').should("contain", "10/10");
287287
cy.get('[data-testid="Maintained"] ~ h4').should(
288288
"contain",
289-
"Additional details / variations"
289+
"Additional details / variations",
290290
);
291291

292292
cy.get('[data-testid="Packaging"]').should("contain", "Packaging");
@@ -298,19 +298,19 @@ describe("Comparator", () => {
298298

299299
cy.get('[data-testid="Pinned-Dependencies"]').should(
300300
"contain",
301-
"Pinned-Dependencies"
301+
"Pinned-Dependencies",
302302
);
303303
cy.get('[data-testid="Pinned-Dependencies"] > div > span')
304304
.should("contain", "Unchanged")
305305
.and("have.css", "background-color")
306306
.and("eq", "rgb(108, 117, 125)");
307307
cy.get('[data-testid="Pinned-Dependencies"] > span').should(
308308
"contain",
309-
"7/10"
309+
"7/10",
310310
);
311311
cy.get('[data-testid="Pinned-Dependencies"] ~ h4').should(
312312
"contain",
313-
"Additional details / variations"
313+
"Additional details / variations",
314314
);
315315

316316
cy.get('[data-testid="SAST"]').should("contain", "SAST");
@@ -322,7 +322,7 @@ describe("Comparator", () => {
322322

323323
cy.get('[data-testid="Security-Policy"]').should(
324324
"contain",
325-
"Security-Policy"
325+
"Security-Policy",
326326
);
327327
cy.get('[data-testid="Security-Policy"] > div > span')
328328
.should("contain", "Unchanged")
@@ -332,7 +332,7 @@ describe("Comparator", () => {
332332

333333
cy.get('[data-testid="Signed-Releases"]').should(
334334
"contain",
335-
"Signed-Releases"
335+
"Signed-Releases",
336336
);
337337
cy.get('[data-testid="Signed-Releases"] > div > span')
338338
.should("contain", "Unchanged")
@@ -342,24 +342,24 @@ describe("Comparator", () => {
342342

343343
cy.get('[data-testid="Token-Permissions"]').should(
344344
"contain",
345-
"Token-Permissions"
345+
"Token-Permissions",
346346
);
347347
cy.get('[data-testid="Token-Permissions"] > div > span')
348348
.should("contain", "Unchanged")
349349
.and("have.css", "background-color")
350350
.and("eq", "rgb(108, 117, 125)");
351351
cy.get('[data-testid="Token-Permissions"] > span').should(
352352
"contain",
353-
"10/10"
353+
"10/10",
354354
);
355355
cy.get('[data-testid="Token-Permissions"] ~ h4').should(
356356
"contain",
357-
"Additional details / variations"
357+
"Additional details / variations",
358358
);
359359

360360
cy.get('[data-testid="Vulnerabilities"]').should(
361361
"contain",
362-
"Vulnerabilities"
362+
"Vulnerabilities",
363363
);
364364
cy.get('[data-testid="Vulnerabilities"] > div > span')
365365
.should("contain", "Increased 2.7")
@@ -368,7 +368,7 @@ describe("Comparator", () => {
368368
cy.get('[data-testid="Vulnerabilities"] > span').should("contain", "10/10");
369369
cy.get('[data-testid="Vulnerabilities"] ~ h4').should(
370370
"contain",
371-
"Additional details / variations"
371+
"Additional details / variations",
372372
);
373373
});
374374
});

0 commit comments

Comments
 (0)