[BUG] Missing test IDs on Proposal Discussion Details Page

[kneerose]

Description:

Several components lack proper test IDs, impeding effective testing and automation

Missing test IDs

• submit-as-GA-button for submit as Governance Action button
• review-version for review versions button
• comment-count for total comments count
• like-count for total likes count
• dislike-count for total dislikes count
• menu-button for the menu button
• like-button for like button
• dislike-button for a dislike button
• sort-comments for a sort button

• poll-vote-card for poll vote card
• poll-yes-button for poll yes vote button
• poll-no-button for poll no vote button
• poll-result-card for poll result card
• poll-yes-count for poll voted yes count
• poll-no-count for poll voted no count

• comment-input for comment input field
• comment-button for submitting filled comment
• reply-button for reply button
• comment-${comment-id}-card for each comment card
• comment-${comment-id}-content for each comment content

• reply-input for reply input field

• add-poll-button for add poll button
• add-poll-card for add poll card

• close-poll-button for close poll

• change-vote-button for change vote button
• change-poll-vote-modal for change vote modal popup
• change-poll-vote-yes-button for Yes, change my poll vote button
• change-poll-vote-no-button for I don't want to change button

• edit-proposal for edit created proposal
• delete-proposal for delete created proposal

Important: Missing test IDs are blocking critical tests. Please add them to all interactive elements to ensure proper functionality.

[vpaunovic]

I am also adding delete-proposal-modal to delete proposal modal, delete-proposal-yes-button for Yes, delete my proposal completely button inside modal and delete-proposal-no-button for I don't want to delete button inside delete modal. Also adding proposal-menu for menu when you click on menu-button (vertical-dots on details page). Also adding subcomment-{subcomment.id}-content for subcomment box content and also adding reply-comment-button for Comment button but inside reply content.

CC: @NabinKawan @bosko-m @kneerose

[bosko-m]

@vpaunovic Is this in progress then?

[vpaunovic]

@bosko-m this is already done. Just, it is not yet in NPM package. Its in our repo on main branch. When we update our NPM package, and @MSzalowski update our PDF NPM package with that new version, it will be available there in current govtool.

[NabinKawan]

Hi @vpaunovic, Which version of the PDF npm package has this issue fixed?

[vpaunovic]

v0.1.8

[kneerose]

Hello @vpaunovic

• I've reviewed your recent updates regarding the missing test IDs, but some issues persist. Below is a detailed list of the required corrections:

1. Comment Count

<button class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root" tabindex="-1" type="button" disabled="" data-testid="comment-count">
  <span aria-label="proposal comments" class="MuiBadge-root css-vhfpz1-MuiBadge-root">
    <span class="MuiBadge-badge MuiBadge-standard MuiBadge-anchorOriginTopRight MuiBadge-anchorOriginTopRightRectangular MuiBadge-overlapRectangular css-1fgxqzy-MuiBadge-badge">0</span>
  </span>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="#212A3D" viewBox="0 0 24 24">
    <path fill-rule="evenodd" d="M2 6a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-4.586l-4.707 4.707A1 1 0 0 1 8 21v-4H5a3 3 0 0 1-3-3zm3-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4a1 1 0 0 1 1 1v2.586l3.293-3.293A1 1 0 0 1 14 15h5a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zm2 5a1 1 0 0 1 1-1h.01a1 1 0 0 1 0 2H8a1 1 0 0 1-1-1m4 0a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2H12a1 1 0 0 1-1-1m4 0a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2H16a1 1 0 0 1-1-1" clip-rule="evenodd"></path>
  </svg>
</button>

• The data-testid should be inside <span> tag where the actual count is added instead of the <button> tag

2. Comment Input

<div class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth MuiTextField-root css-17vbkzs-MuiFormControl-root-MuiTextField-root" data-testid="comment-input">
  <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline css-2otjco-MuiInputBase-root-MuiOutlinedInput-root">
    <textarea aria-invalid="false" aria-describedby=":rdp:-helper-text" autocomplete="off" id=":rdp:" maxlength="256" spellcheck="false" autocorrect="off" autocapitalize="none" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input" style="height: 23px; overflow: hidden;" data-dashlane-rid="22509b8b97b001cd" data-form-type=""></textarea>
    <textarea aria-hidden="true" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input" readonly="" tabindex="-1" style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0px); padding-top: 0px; padding-bottom: 0px; width: 835px;"></textarea>
    <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline">
      <legend class="css-ihdtdm">
        <span class="notranslate">​</span>
      </legend>
    </fieldset>
  </div>
  <p class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained css-yujx0d-MuiFormHelperText-root" id=":rdp:-helper-text">
    <span class="MuiTypography-root MuiTypography-caption css-1d7pkrt-MuiTypography-root">0/256</span>
  </p>
</div>

• The data-testid should be inside <textarea> tag where the actual comment is input instead of the <div> tag

3. Reply Comment Input

<div class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-vrxo58-MuiFormControl-root-MuiTextField-root" data-testid="reply-input">
  <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeLarge MuiInputBase-multiline css-2otjco-MuiInputBase-root-MuiOutlinedInput-root">
    <textarea aria-invalid="false" aria-describedby=":rdv:-helper-text" id=":rdv:" name="subcomment" placeholder="Add comment" maxlength="256" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input" style="height: 23px; overflow: hidden;" data-dashlane-rid="e6d23b741e311473" data-form-type=""></textarea>
    <textarea aria-hidden="true" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input" readonly="" tabindex="-1" style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0px); padding-top: 0px; padding-bottom: 0px; width: 761.781px;"></textarea>
    <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline">
      <legend class="css-ihdtdm">
        <span class="notranslate">​</span>
      </legend>
    </fieldset>
  </div>
  <p class="MuiFormHelperText-root MuiFormHelperText-sizeLarge MuiFormHelperText-contained css-yujx0d-MuiFormHelperText-root" id=":rdv:-helper-text">
    <span class="MuiTypography-root MuiTypography-caption css-1d7pkrt-MuiTypography-root">0/256</span>
  </p>
</div>

• The data-testid should be inside <textarea> tag where the actual comment is input instead of the <div> tag

4. Close Poll Dialog

• Some test IDs are missing in the close poll dialog.
  • data-testid="close-the-poll-button"
  • data-testid="cancel-the-poll-button"

5. Share Button

• data-testid = share-button

Note: Please make sure to add proper test IDs if you introduce any new components in the future. Additionally, please make these adjustments to ensure appropriate test IDs are in place.

[teske00]

@kneerose We have added a test id to the PDF package version 0.2.2 which is deployed on the govtool dev environment

[kneerose]

@teske00 I have created a separate ticket for all missing test IDs of the PDF here. Therefore, I am closing this issue.

CC: @bosko-m