Added data-tag attribute to passageCard

[rubynguyen1510]

Description

• Added passage tags to passage-card element using data-tags to enhance customizability.
• Tested the presence of data-tags.
• Included screenshots of successful execution.

Issues Fixed

#1438

Testing

In the development of our test to validate the data-tags attribute on the passage card, we evaluated two potential selection methods. They were 'getByTestId' and 'getByText'.

• getByTestID

  const passageElement = screen.getByTestId('passage-card');

• getByText

  const passageElement = screen.getByText(passage.name).closest('.passage-card');

We chose getByTestId over getByText because it is more reliable, and efficient and could be used to specifically target the passage card element.

Test Results

Credit

[X] We would like to be credited in the application as Siham Argaw and Ngoc Nguyen.

Presubmission Checklist

[X] We have read this project's CONTRIBUTING file, and this PR follows the criteria laid out there.
[X] This contribution was created by us and we have the right to submit it under the GPL v3 license. (This is not a rights assignment.)
[X] We have read and agree to abide by this project's Code of Conduct.

[klembot]

Thanks for your PR! I have some suggestions on revisions. If you have followup questions, feel free to ask.

[klembot]

@rubynguyen1510 looks good now, but one last question before I merge: any reason you used data-passage-tag instead of data-passage-tags? We've been generally using the plural in code.

[rubynguyen1510]

Thanks for your feedback! We overlooked the plural naming convention. Just fixed it!

[klembot]

@rubynguyen1510 almost there, I think!

[klembot]

Looks good--thanks for your work!