-
Notifications
You must be signed in to change notification settings - Fork 25
DEVPROD-1968 Convert AnnotationTicketsTable into a list #2180
Conversation
Passing run #14607 ↗︎
Details:
Review all test suite changes for PR #2180 ↗︎ |
const validateAnnotationRowCount = (listName: string, count: number) => { | ||
cy.dataCy(listName).within(() => | ||
cy.dataCy("annotation-ticket-row").should("have.length", count) | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The readability and debugging overhead of this function can be reduced by aliasing in beforeEach. Check it out:
const validateAnnotationRowCount = (listName: string, count: number) => { | |
cy.dataCy(listName).within(() => | |
cy.dataCy("annotation-ticket-row").should("have.length", count) | |
); | |
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Woah cool suggestion!
cy.dataCy(listName).within(() => | ||
cy.dataCy("annotation-ticket-row").should("have.length", count) | ||
); | ||
}; | ||
describe("Task Annotation Tab", () => { | ||
beforeEach(() => { | ||
cy.visit(taskRoute); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cy.visit(taskRoute); | |
cy.visit(taskRoute); | |
cy.dataCy("loading-annotation-ticket").should("not.exist"); | |
const rowSelector = "[data-cy='annotation-ticket-row']" | |
cy.dataCy("issues-list").find(rowSelector).as("issueRows") | |
cy.dataCy("suspected-issues-list").find(rowSelector).as("susIssueRows") | |
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Super neat use of aliases Thanks!
validateAnnotationRowCount(issuesList, 1); | ||
validateAnnotationRowCount(suspectedIssuesList, 3); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
validateAnnotationRowCount(issuesList, 1); | |
validateAnnotationRowCount(suspectedIssuesList, 3); | |
cy.get("@issueRows").should("have.length", 1); | |
cy.get("@susIssueRows").should("have.length", 3); |
@@ -118,3 +129,6 @@ const BottomMetaDataWrapper = styled.div` | |||
margin-top: ${size.xs}; | |||
width: 80%; | |||
`; | |||
|
|||
export default AnnotationTicketRow; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not leave this as a named export since named exports for React components is already an established pattern?
<JiraSummaryLink | ||
href={url} | ||
target="_blank" | ||
data-cy={issueKey} | ||
onClick={() => | ||
annotationAnalytics.sendEvent({ | ||
name: "Click Annotation Ticket Link", | ||
}) | ||
} | ||
> | ||
{issueKey} | ||
{summary && `: ${summary}`} | ||
</JiraSummaryLink> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Save this as a variable in the function body so there isn't repeated JSX
dispatchToast.success( | ||
`Successfully moved ${issueString} to ${ | ||
isIssue ? "suspected issues" : "issues" | ||
}` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
}` | |
}.` |
DEVPROD-1968
Description
This "Table" is also not technically a table and is more of a list of elements. This refactors it to reflect that and also removes some of the ANTD dependencies
Screenshots
Testing
Evergreen PR