Skip to content

Commit

Permalink
Address single page view format issues (#944)
Browse files Browse the repository at this point in the history 
* Add recent changes

* Adjust for test version

* Fix failing test

* Account for assertionExceptions

* Revert changes to assertion file

* Change main to master

* Remove comment

* Revert changes to convert assertion test file

* Fix empty parantheses in UI

* Finish making changes from deleted branch

* Combine falsy values
  • Loading branch information
@Paul-Clue
Paul-Clue authored Mar 6, 2024
1 parent 6263acf commit c81fb85
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 20 deletions.
141 changes: 134 additions & 7 deletions client/components/CandidateReview/CandidateTestPlanRun/InstructionsRenderer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { Button } from 'react-bootstrap';
import { Button, Table } from 'react-bootstrap';
import { unescape } from 'lodash';
import {
parseListContent,
Expand All @@ -19,6 +19,7 @@ import { TestWindow } from '../../../resources/aria-at-test-window.mjs';
import { evaluateAtNameKey } from '../../../utils/aria.js';
import commandsJson from '../../../resources/commands.json';
import supportJson from '../../../resources/support.json';
import { convertAssertionPriority } from 'shared';

const NumberedList = styled.ol`
counter-reset: numbered-list;
Expand Down Expand Up @@ -169,19 +170,145 @@ const InstructionsRenderer = ({
commandsContent
);

const assertions = [...pageContent.instructions.assertions.assertions];
const assertionsContent = parseListContent(assertions);

const Heading = `h${headingLevel}`;

return (
<>
<NumberedList>{allInstructionsContent}</NumberedList>
<Heading>{pageContent.instructions.assertions.header}</Heading>
{pageContent.instructions.assertions.description}
<NumberedList>{assertionsContent}</NumberedList>
{settingsContent.length ? settingsContent : null}

{renderableContent.commands.map(
({ id, settings, assertionExceptions = [] }, i) => {
const settingsScreenText = isV2
? renderableContent.target.at.raw.settings[settings]
?.screenText ?? ''
: null;

let mustCount = 0;
let shouldCount = 0;
let mayCount = 0;

let assertions = [...renderableContent.assertions];

assertionExceptions.forEach(exception => {
const assertionIndex = assertions.findIndex(
assertion => {
return (
assertion.assertionId ===
exception.assertionId
);
}
);
if (exception.priority === 0) {
assertions.splice(assertionIndex, 1);
} else {
assertions[assertionIndex].priority =
exception.priority;
}
});

assertions.forEach(({ priority }) => {
const priorityString =
convertAssertionPriority(priority);
if (priorityString === 'MUST') mustCount += 1;
if (priorityString === 'SHOULD') shouldCount += 1;
if (priorityString === 'MAY') mayCount += 1;
});

const settingsScreenTextFormatted = settingsScreenText
? ` (${settingsScreenText})`
: '';

const scenarioTitle =
`${renderableContent.commands[i].keystroke}` +
`${settingsScreenTextFormatted}: ${mustCount} MUST, ` +
`${shouldCount} SHOULD, ${mayCount} MAY Assertions`;

if (isV2) {
return (
<React.Fragment key={`command-${id}-${i}`}>
<Heading
id={renderableContent.commands[i].keystroke}
>
{scenarioTitle}
</Heading>
<Table
key={`${id}-${i}`}
bordered
responsive
aria-labelledby={
renderableContent.commands[i].keystroke
}
>
<thead>
<tr>
<th>Priority</th>
<th>Assertion Phrase</th>
<th>Assertion Statement</th>
</tr>
</thead>
<tbody>
{assertions.map(
({
assertionPhrase,
assertionStatement,
priority,
assertionId
}) => (
<tr key={`${i}-${assertionId}`}>
<td>
{convertAssertionPriority(
priority
)}
</td>
<td>{assertionPhrase}</td>
<td>
{assertionStatement}
</td>
</tr>
)
)}
</tbody>
</Table>
</React.Fragment>
);
} else {
return (
<React.Fragment key={`command-${id}-${i}`}>
<Heading>{scenarioTitle}</Heading>
<Table
key={`${id}-${i}`}
bordered
responsive
aria-label={`Results for test ${test.title}`}
>
<thead>
<tr>
<th>Priority</th>
<th>Assertion Statement</th>
</tr>
</thead>
<tbody>
{assertions.map(
({ expectation, priority }) => (
<tr key={`${i}-${expectation}`}>
<td>
{convertAssertionPriority(
priority
)}
</td>
<td>{expectation}</td>
</tr>
)
)}
</tbody>
</Table>
</React.Fragment>
);
}
}
)}

<Button
disabled={!pageContent.instructions.openTestPage.enabled}
onClick={pageContent.instructions.openTestPage.click}
Expand Down
33 changes: 20 additions & 13 deletions client/components/TestReview/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,21 +187,17 @@ const TestReview = () => {
</Ul>
</li>
<li>
<strong>Commit:&nbsp;</strong>
{testPlanVersion.gitMessage}
<strong>Latest Commit:&nbsp;</strong>
<a
target="_blank"
rel="noreferrer"
href={`https://github.com/w3c/aria-at/commit/${testPlanVersion.gitSha}`}
>
{testPlanVersion.gitMessage}
</a>
</li>
</ul>
<h2>Tests</h2>
<FilterButtonContainer>
<FilterButtons
filterLabel="Filter tests by covered AT"
filterOptions={filterOptions}
activeFilter={activeFilter}
onFilterChange={selectedFilter => {
setActiveFilter(selectedFilter);
}}
/>
</FilterButtonContainer>

<h2>Supporting Documentation</h2>
<ul>
{testPlanVersionTests[0].renderableContents[0].renderableContent.info.references.map(
Expand Down Expand Up @@ -244,6 +240,17 @@ const TestReview = () => {
}
)}
</ul>
<h2>Tests</h2>
<FilterButtonContainer>
<FilterButtons
filterLabel="Filter tests by covered AT"
filterOptions={filterOptions}
activeFilter={activeFilter}
onFilterChange={selectedFilter => {
setActiveFilter(selectedFilter);
}}
/>
</FilterButtonContainer>
{filteredTests.map((test, index) => {
const isFirst = index === 0;
const hasAriaReference =
Expand Down

0 comments on commit c81fb85

Please sign in to comment.