mardi 26 mai 2020

Lost in 'within()' in Cypress

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