Add TaskModal component, story, and tests with fixes for test reliabi… by vraja-pro · Pull Request #22712 · Yoast/wordpress-seo

vraja-pro · 2025-11-11T15:25:58Z

Context

Summary

This PR can be summarized in the following changelog entry:

[@yoast/dashboard-frontend 0.0.1] Adds the task modal component.

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

For devs:
Spin the storybook for the dashboard-frontend package.
Check you see in the sidebar a place for task list components and a the task modal story.

Check the documentation intro text makes sense in the story it self.
Check the props table is clear.
Open the modal and check the modal design is the same as in the design.

Relevant test scenarios

Changes should be tested with the browser console open
Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
Changes should be tested on different browsers
Changes should be tested on multisite

Test instructions for QA when the code is in the RC

QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

Other environments

This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

I have tested this code to the best of my abilities.
During testing, I had activated all plugins that Yoast SEO provides integrations for.
I have added unit tests to verify the code works as intended.
If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
I have written this PR in accordance with my team's definition of done.
I have checked that the base branch is correctly set.

Innovation

No innovation project is applicable for this PR.
This PR falls under an innovation project. I have attached the innovation label.
I have added my hours to the WBSO document.

Fixes Task list: create task modal component

…lity

coveralls · 2025-11-11T15:43:21Z

Pull Request Test Coverage Report for Build 7bc9d00707c9b16dee562fde9eb845c914e5ffbd

Details

32 of 34 (94.12%) changed or added relevant lines in 6 files are covered.
No unchanged relevant lines lost coverage.
Overall first build on 837-task-list-create-task-modal-component at 31.071%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/dashboard-frontend/src/task-list/components/priority.js	7	9	77.78%

Totals
Change from base Build 5ec88c1e1bc60ee75dbcfde8a4034e11622b12e0:	31.1%
Covered Lines:	5148
Relevant Lines:	15224

💛 - Coveralls

- Ensure isOpen prop is typed as boolean for Storybook controls - Update callToAction and detailsList argTypes for clarity - Improve documentation and default args in story - Minor code and doc cleanups

…-component

Copilot

Pull Request Overview

This PR adds a new TaskModal component to the dashboard-frontend package, including its story and comprehensive test coverage. The component displays task details in a modal dialog with priority indicators, duration estimates, and call-to-action buttons.

Implements a TaskModal component with supporting Duration, Priority, and CallToActionButton subcomponents
Adds Storybook documentation and interactive examples
Includes comprehensive test coverage with snapshot testing
Adds IntersectionObserver mock to test setup for improved test reliability

Reviewed Changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/dashboard-frontend/src/task-list/components/task-modal.js	Main TaskModal component implementation with modal structure and task details display
packages/dashboard-frontend/src/task-list/components/call-to-action-button.js	Reusable button component supporting multiple action types (add, delete, link)
packages/dashboard-frontend/src/task-list/components/priority.js	Priority indicator component with visual icons for low/medium/high levels
packages/dashboard-frontend/src/task-list/components/duration.js	Duration display component showing task time estimates
packages/dashboard-frontend/src/icons/HowIcon.js	Custom SVG icon for "how to complete" section
packages/dashboard-frontend/src/icons/YoastIcon.js	Yoast brand icon SVG component
packages/dashboard-frontend/src/icons/index.js	Icon exports barrel file
packages/dashboard-frontend/tests/task-list/task-modal.test.js	Comprehensive test suite for TaskModal component
packages/dashboard-frontend/tests/task-list/call-to-action-button.test.js	Test suite with snapshot tests for CallToActionButton
packages/dashboard-frontend/tests/setupTests.js	Adds IntersectionObserver mock for test environment
packages/dashboard-frontend/stories/task-list/task-modal/task-modal.stories.js	Storybook story with interactive controls
packages/dashboard-frontend/stories/task-list/task-modal/documentation.md	Component documentation for Storybook
packages/dashboard-frontend/src/index.js	Exports TaskModal for external use

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-14T09:32:56Z

+	it( "calls onClose when Close button is clicked", () => {
+		const onClose = jest.fn();
+		render( <TaskModal { ...defaultProps } onClose={ onClose } isOpen={ true } /> );
+		const closeButton = screen.getAllByRole( "button" )[ 1 ];


Using array index [1] to select the close button is fragile and could break if button order changes. Consider using a more specific selector like screen.getByText(/Close/i) or adding a test ID to the close button.

Suggested change

const closeButton = screen.getAllByRole( "button" )[ 1 ];

const closeButton = screen.getByText( /Close/i );

JorPV

Really neat 👍🏼 Just some small findings 🙂

JorPV · 2025-11-14T15:12:18Z

CR ✅ AT ✅

Add TaskModal component, story, and tests with fixes for test reliabi…

1feec69

…lity

vraja-pro added this to the feature/task-list milestone Nov 11, 2025

vraja-pro added the changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog label Nov 11, 2025

vraja-pro added 12 commits November 12, 2025 11:03

Update TaskModal: fix isOpen prop type and improve Storybook docs

0190c77

Fix TaskModal prop types and Storybook docs

784ade9

- Ensure isOpen prop is typed as boolean for Storybook controls - Update callToAction and detailsList argTypes for clarity - Improve documentation and default args in story - Minor code and doc cleanups

improve task modal props

c16bb18

adds test for the cta button

ddf1bae

update cta type

7262b94

add isComplete prop

cf0716b

add test for is Completed

2a16f21

Merge branch 'feature/task-list' into 837-task-list-create-task-modal…

0d9528c

…-component

update files locations

17c8c20

decouple priorities

aa58660

decouple priority

2023025

decouple duration

c2d3dc4

JorPV requested a review from Copilot November 14, 2025 09:32

Copilot AI reviewed Nov 14, 2025

View reviewed changes

adds missing svg aria props

f25ff67

JorPV reviewed Nov 14, 2025

View reviewed changes

Comment thread packages/dashboard-frontend/src/task-list/components/task-modal.js Outdated

JorPV reviewed Nov 14, 2025

View reviewed changes

Comment thread packages/dashboard-frontend/src/task-list/components/duration.js Outdated

JorPV requested changes Nov 14, 2025

View reviewed changes

vraja-pro added 3 commits November 14, 2025 14:40

fix copy and styling

32bdc19

fix prop type in storybook

22ddc80

fix tests for close callback

5382a3e

JorPV merged commit 874c0a7 into feature/task-list Nov 14, 2025
18 of 19 checks passed

JorPV deleted the 837-task-list-create-task-modal-component branch November 14, 2025 15:12

leonidasmi mentioned this pull request Nov 27, 2025

Feature/task list #22759

Merged

18 tasks

leonidasmi removed this from the feature/task-list milestone Dec 1, 2025

leonidasmi added this to the 26.6 milestone Dec 1, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add TaskModal component, story, and tests with fixes for test reliabi…#22712

Add TaskModal component, story, and tests with fixes for test reliabi…#22712
JorPV merged 17 commits intofeature/task-listfrom
837-task-list-create-task-modal-component

vraja-pro commented Nov 11, 2025 •

edited

Loading

Uh oh!

coveralls commented Nov 11, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Nov 14, 2025

Uh oh!

Uh oh!

Uh oh!

JorPV left a comment

Uh oh!

JorPV commented Nov 14, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

	const closeButton = screen.getAllByRole( "button" )[ 1 ];
	const closeButton = screen.getByText( /Close/i );

Conversation

vraja-pro commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Context

Summary

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

Relevant test scenarios

Test instructions for QA when the code is in the RC

Impact check

Other environments

Documentation

Quality assurance

Innovation

Uh oh!

coveralls commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Test Coverage Report for Build 7bc9d00707c9b16dee562fde9eb845c914e5ffbd

Details

💛 - Coveralls

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

JorPV left a comment

Choose a reason for hiding this comment

Uh oh!

JorPV commented Nov 14, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

vraja-pro commented Nov 11, 2025 •

edited

Loading

coveralls commented Nov 11, 2025 •

edited

Loading