Again I have a question regarding Cypress. I have many blocks of publication previews on the page, each block contains a header and several statuses of publication itself and its users, and I need to check the statuses of the certain blocks with the test. I can't use 'eq()' because data is dynamic and for some reasons the tests also don't run in the same order, therefore I often get the wrong publication by counting eq(). So I was trying to use 'within', but it fails.
My test:
cy.get('[data-test="list-item"]').within(() => {
cy.get('[data-test="title-link"]')
.contains('Empty text')
.find('[data-test="status"]')
.contains('Draft');
});
I understand that my mistake is in 'contains()' because it tries to search in there, but as I mentioned above there's no other way for me to filter the elements other than by the titles. I need to check that block with title A has status 'Draft', block with title B has status 'Published' etc.
The code I'm trying to test:
<ListItem
className="pointer"
data-test="list-item"
onClick={(e) => {
push(tLink);
}}
content={
<Link
onClick={(e) => e.stopPropagation()}
to={tLink}
data-test="title-link"
className="leading-lg font-medium text-lg text-black">
{props.name ?? t('untitled', { reference: props.referenceNumber ?? 'N/A' })}
</Link>
}
contentRight={
<Status
status={props.publication.tStatus}
published={published}
draft={draft}
/>
}
contentBottom={
publicationDate && userStatus ? (
<>
<LinkWithIcon
to={'/overview/text/' + props.id}
data-test="received-comments"
className="mr-6"
onClick={(e) => e.stopPropagation()}>
{t('receivedComments')}
</LinkWithIcon>
</>
}
/>
And the status itself comes from this component (React):
<Fragment>
<div className="leading-caption font-medium" data-test="status">
{props.hasPublicationDate && props.published ? (
<CheckmarkFilled24 className="inline-block xxx" />
) : props.done ? (
<Bookmark24 className="inline-block yyy" />
) : undefined}
{status()}
</div>
<div className="zzz">
{props.publicationDate && && props.published && (
<span
className={cx('leading-caption font-medium , {
'text-danger-accent': !props.hasComments
})}>
{t(props.hasComments ? 'statusInfo.commentsReady' : 'statusInfo.noComments')}
</span>
)}
{props.dueDate && !props.hasPublicationDate && (
<Fragment>
<span className="leading-caption font-medium inline-block">{t('publicationDate')}</span>
<span className="pl-2 inline-block" data-test="publication-date">
{formatDatetime(props.publicationDate)}
</span>
</Fragment>
)}
</div>
</Fragment>
Aucun commentaire:
Enregistrer un commentaire