Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Restructure APG Support Tables #1053

Merged
merged 24 commits into from
May 21, 2024
+359 −504
Merged

feat: Restructure APG Support Tables #1053

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
4360be4
Save changes
Paul-Clue Mar 26, 2024
b437907
Update graphql request
Paul-Clue Mar 29, 2024
2150fbe
Rearrange support table structure
Paul-Clue Apr 10, 2024
e4dea58
Add AT version
Paul-Clue Apr 10, 2024
36bc827
Fix failing test and conditional
Paul-Clue Apr 10, 2024
f0b4361
Remove log
Paul-Clue Apr 22, 2024
d6c39bf
Remove extra span
Paul-Clue Apr 24, 2024
663a738
Correct commit error
Paul-Clue Apr 29, 2024
f92bcac
Fix table column headings
Paul-Clue Apr 29, 2024
c6b12c1
Cancel out unneccessary code
Paul-Clue Apr 29, 2024
9b83341
Order by AT then browser
Paul-Clue Apr 30, 2024
5cb2368
Temporary changes
Paul-Clue May 1, 2024
fd6dcb1
Remove unused functions/code
Paul-Clue May 6, 2024
dc10f03
Fix table cell data
Paul-Clue May 7, 2024
a4b077e
Fix iframe height bug
alflennik May 7, 2024
540c712
Fix table heading and row order
Paul-Clue May 7, 2024
e69468a
Remove comment
Paul-Clue May 7, 2024
dff75f3
Show error message with no table
Paul-Clue May 7, 2024
c2787fa
Fix failing tests
Paul-Clue May 7, 2024
20c72f6
Remove console logs
Paul-Clue May 7, 2024
2f1831f
Fix merge conflicts
Paul-Clue May 8, 2024
f12437f
Add links to table rows
Paul-Clue May 8, 2024
fe617b5
Merge branch 'development' into support-tables-restructure
Paul-Clue May 15, 2024
9161715
fix: Update design for recommended Test Plans in the support tables (…
Paul-Clue May 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 42 additions & 15 deletions server/apps/embed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ app.set('views', path.resolve(handlebarsPath, 'views'));
// stale data for however long it takes for the query to complete.
const millisecondsUntilStale = 5000;

const queryReports = async () => {
const queryReports = async testPlanDirectory => {
const { data, errors } = await apolloServer.executeOperation({
query: gql`
query {
query TestPlanQuery($testPlanDirectory: ID!) {
ats {
id
name
Expand All @@ -42,6 +42,30 @@ const queryReports = async () => {
name
}
}
testPlan(id: $testPlanDirectory) {
testPlanVersions {
id
title
phase
testPlanReports(isFinal: true) {
id
metrics
at {
id
name
}
browser {
id
name
}
latestAtVersionReleasedAt {
id
name
releasedAt
}
}
}
}
testPlanReports(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to remove this part of the query?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think so. testPlanReports is being used in the code.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I said in another comment, you're right that it's being used. My point is more that it's only being used by dead code and the whole network of dead code present in this file can be removed.

testPlanVersionPhases: [CANDIDATE, RECOMMENDED]
isFinal: true
Expand Down Expand Up @@ -69,16 +93,11 @@ const queryReports = async () => {
testPlan {
id
}
tests {
ats {
id
name
}
}
}
}
}
`
`,
variables: { testPlanDirectory }
});

if (errors) {
Expand All @@ -97,6 +116,7 @@ const queryReports = async () => {
// As of now, a full query for the complete list of reports is needed to build
// the embed for a single pattern. This caching allows that query to be reused
// between pattern embeds.

const queryReportsCached = staleWhileRevalidate(queryReports, {
millisecondsUntilStale
});
Expand Down Expand Up @@ -196,14 +216,16 @@ const getLatestReportsForPattern = ({ allTestPlanReports, pattern }) => {
allAtVersionsByAt,
testPlanVersionIds,
phase,
reportsByAt
reportsByAt,
latestReports
};
};

const priorities = ['MUST', 'SHOULD'];
const renderEmbed = ({
ats,
allTestPlanReports,
queryTitle,
priorities,
pattern,
protocol,
host
Expand All @@ -214,8 +236,9 @@ const renderEmbed = ({
allAtVersionsByAt,
testPlanVersionIds,
phase,
reportsByAt
} = getLatestReportsForPattern({ pattern, allTestPlanReports });
reportsByAt,
latestReports
} = getLatestReportsForPattern({ allTestPlanReports, pattern });
const allAtBrowserCombinations = Object.fromEntries(
ats.map(at => {
return [
Expand All @@ -233,10 +256,12 @@ const renderEmbed = ({
allAtBrowserCombinations,
title: queryTitle || title || 'Pattern Not Found',
pattern,
priorities,
phase,
allBrowsers,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a lot of dead code still in this file, like this variable is not used anywhere for example. Would it be possible to simplify this file a bit? It's currently getting pretty intimidating. Acknowledging of course that I contributed more than anyone to the current situation.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here. allBrowsers is being used in the code.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So yes the variable appears 7 times in this file, but all of those uses are only related to setting the variable, not using it. Then if you look at the helpers file and main.hbs you'll see that this variable is passed around a bit but never used. That's what I mean when I say it's dead code.

The larger issue, beyond this one variable, is that a lot of the code in this file is passed around and set but never actually utilized, and I think it's definitely worth the effort to overhaul the whole file and remove all the dead code.

allAtVersionsByAt,
reportsByAt,
latestReports,
completeReportLink: `${protocol}${host}/report/${testPlanVersionIds.join(
','
)}`,
Expand All @@ -262,12 +287,14 @@ app.get('/reports/:pattern', async (req, res) => {
const protocol = /dev|vagrant/.test(process.env.ENVIRONMENT)
? 'http://'
: 'https://';
const { allTestPlanReports, reportsHashed, ats } =
await queryReportsCached();
const { allTestPlanReports, reportsHashed, ats } = await queryReportsCached(
pattern
);
const embedRendered = await renderEmbedCached({
ats,
allTestPlanReports,
reportsHashed,
priorities,
queryTitle,
pattern,
protocol,
Expand Down
20 changes: 20 additions & 0 deletions server/handlebars/embed/helpers/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,26 @@ module.exports = {
getAtVersion: function (object, key) {
return object.allAtVersionsByAt[key].name;
},
getMustSupportData: function (object) {
return Math.trunc(
(object.metrics.mustAssertionsPassedCount /
object.metrics.mustAssertionsCount) *
100
);
},
isMustAssertionPriority: function (object) {
return object.metrics.mustAssertionsCount > 0;
},
isShouldAssertionPriority: function (object) {
return object.metrics.shouldAssertionsCount > 0;
},
getShouldSupportData: function (object) {
return Math.trunc(
(object.metrics.shouldAssertionsPassedCount /
object.metrics.shouldAssertionsCount) *
100
);
},
combinationExists: function (object, atName, browserName) {
if (object.allAtBrowserCombinations[atName].includes(browserName)) {
return true;
Expand Down
86 changes: 22 additions & 64 deletions server/handlebars/embed/views/main.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,78 +37,36 @@
<thead>
<tr>
<td></td>
{{#each allBrowsers}}
{{#each priorities}}
<th>{{this}}</th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each reportsByAt}}
{{log latestReports}}
alflennik marked this conversation as resolved.
Show resolved Hide resolved
{{#each latestReports}}
<tr>
<th><b>{{@key}}</b> <span id="at-version">{{getAtVersion @../this @key}}</span></th>
{{#each this}}
{{#if (isBrowser "Chrome" this.browser.name)}}
{{#if (isInAllBrowsers "Chrome" @../../this) }}
<td>
<div class="meter" aria-hidden="true">
<span style="width: {{this.metrics.supportPercent}}%;"></span>
<th><b>{{this.at.name}}</b> <span style="font-weight: normal;">{{this.latestAtVersionReleasedAt.name}}</span> - <b>{{this.browser.name}}</b></th>
{{#if (isMustAssertionPriority this)}}
<td>
<div class="meter" aria-hidden="true">
<span style="width: {{getMustSupportData this}}%;"></span>
</div>
<b>{{this.metrics.supportPercent}}%</b> supported
</td>
{{/if}}
{{else}}
{{#if (isInAllBrowsers "Chrome" @../../this) }}
{{#unless (elementExists @../../this @../this this.at.name "Chrome" @last)}}
{{#if (combinationExists @../../this this.at.name "Chrome")}}
<td><span class="no-data-cell">Data Not Yet Available</span></td>
{{else}}
<td><span class="no-data-cell">Not Applicable</span></td>
{{/if}}
{{/unless}}
{{/if}}
{{/if}}
{{#if (isBrowser "Firefox" this.browser.name)}}
{{#if (isInAllBrowsers "Firefox" @../../this) }}
<td>
<div class="meter" aria-hidden="true">
<span style="width: {{this.metrics.supportPercent}}%;"></span>
<b>{{getMustSupportData this}}%</b> supported
</td>
{{else}}
<td><span class="no-data-cell">Not Applicable</span></td>
{{/if}}
{{#if (isShouldAssertionPriority this)}}
<td>
<div class="meter" aria-hidden="true">
<span style="width: {{getShouldSupportData this}}%;"></span>
</div>
<b>{{this.metrics.supportPercent}}%</b> supported
</td>
{{/if}}
{{else}}
{{#if (isInAllBrowsers "Firefox" @../../this) }}
{{#unless (elementExists @../../this @../this this.at.name "Firefox" @last)}}
{{#if (combinationExists @../../this this.at.name "Firefox")}}
<td><span class="no-data-cell">Data Not Yet Available</span></td>
{{else}}
<td><span class="no-data-cell">Not Applicable</span></td>
{{/if}}
{{/unless}}
{{/if}}
{{/if}}
{{#if (isBrowser "Safari" this.browser.name)}}
{{#if (isInAllBrowsers "Safari" @../../this) }}
<td>
<div class="meter" aria-hidden="true">
<span style="width: {{this.metrics.supportPercent}}%;"></span>
</div>
<b>{{this.metrics.supportPercent}}%</b> supported
</td>
{{/if}}
{{else}}
{{#if (isInAllBrowsers "Safari" @../../this) }}
{{#unless (elementExists @../../this @../this this.at.name "Safari" @last)}}
{{#if (combinationExists @../../this this.at.name "Safari")}}
<td><span class="no-data-cell">Data Not Yet Available</span></td>
{{else}}
<td><span class="no-data-cell">Not Applicable</span></td>
{{/if}}
{{/unless}}
{{/if}}
{{/if}}
{{/each}}
{{resetMap}}
<b>{{getShouldSupportData this}}%</b> supported
</td>
{{else}}
<td><span class="no-data-cell">Not Applicable</span></td>
{{/if}}
</tr>
{{/each}}
</tbody>
Expand Down
7 changes: 0 additions & 7 deletions server/tests/integration/embed.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,6 @@ describe('embed', () => {

const nonWarning = screen.queryByText('Recommended Report');
const warning = screen.queryByText('Warning! Unapproved Report');
const unsupportedAtBrowserCombination =
screen.queryAllByText('Not Applicable');
const futureSupportedAtBrowserCombination = screen.queryAllByText(
'Data Not Yet Available'
);

const nonWarningContents = screen.queryByText(
'The information in this report is generated from candidate tests',
Expand All @@ -73,8 +68,6 @@ describe('embed', () => {
expect(initialLoadTime / 10).toBeGreaterThan(cachedTime);
expect(nonWarning || warning).toBeTruthy();
expect(nonWarningContents || warningContents).toBeTruthy();
expect(unsupportedAtBrowserCombination.length).not.toBe(0);
expect(futureSupportedAtBrowserCombination.length).not.toBe(0);
expect(viewReportButton).toBeTruthy();
expect(viewReportButtonOnClick).toMatch(
// Onclick should be like the following:
Expand Down
Loading