Button block: Add tests #19002

stacimc · 2021-03-03T17:48:55Z

Adds tests for the Button block.

Changes proposed in this Pull Request:

Pulls settings out of the block into a Controls component for simplification/separate testing
Adds tests

Jetpack product discussion

p1HpG7-b3G-p2

Does this pull request change what data or activity we track or use?

Testing instructions:

Run tests from the projects/plugins/jetpack folder with:

yarn jest extensions/blocks/button/test/edit.js
yarn jest extensions/blocks/button/test/controls.js

Manually test the Button block, including setting all of the color/border radius selections

Proposed changelog entry for your changes:

matticbot · 2021-03-03T17:49:01Z

Caution: This PR has changes that must be merged to WordPress.com
Hello stacimc! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D58003-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

github-actions · 2021-03-03T17:49:48Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
❌ All commits were linted before commit.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.undefined

Jetpack plugin:

Next scheduled release: April 6, 2021.
Scheduled code freeze: March 29, 2021

ramonjd · 2021-03-04T02:49:31Z

projects/plugins/jetpack/extensions/blocks/button/test/edit.js

+} );
+
+test( 'applies gradient color class and style to the button', () => {
+    __experimentalUseGradient.mockReturnValueOnce = gradientProps;


As per the Slack thread, try
__experimentalUseGradient.mockImplementation( () => gradientProps );

apeatling

Works for me, nice!

jeherve

This seems to generate block validation errors when editing posts with Subscriptions blocks:

Click to expand!

Block validation: Block validation failed for `jetpack/subscriptions` (
{
    "name": "jetpack/subscriptions",
    "icon": {
        "src": {
            "key": null,
            "ref": null,
            "props": {
                "width": "24",
                "height": "24",
                "viewBox": "0 0 24 24",
                "fill": "none",
                "xmlns": "http://www.w3.org/2000/svg",
                "children": [
                    {
                        "key": null,
                        "ref": null,
                        "props": {
                            "x": "4.75",
                            "y": "6.75",
                            "width": "14.5",
                            "height": "10.5",
                            "rx": "1.25",
                            "stroke": "#069e08",
                            "strokeWidth": "1.5",
                            "fill": "none"
                        },
                        "_owner": null
                    },
                    {
                        "key": null,
                        "ref": null,
                        "props": {
                            "d": "M19 7L13.3609 12.2363C12.5935 12.9489 11.4065 12.9489 10.6391 12.2363L5 7",
                            "stroke": "#069e08",
                            "strokeWidth": "1.5",
                            "strokeLinejoin": "bevel",
                            "fill": "none"
                        },
                        "_owner": null
                    }
                ]
            },
            "_owner": null
        },
        "foreground": "#069e08"
    },
    "keywords": [
        "subscribe",
        "join",
        "follow"
    ],
    "providesContext": {},
    "usesContext": [],
    "styles": [],
    "title": "Subscription Form",
    "description": {
        "type": "p",
        "key": null,
        "ref": null,
        "props": {
            "children": "A form enabling readers to get notifications when new posts are published from this site."
        },
        "_owner": null
    },
    "category": "grow",
    "example": {
        "attributes": {}
    },
    "deprecated": [
        {
            "attributes": {
                "subscribeButton": {
                    "type": "string",
                    "default": "Subscribe"
                },
                "showSubscribersTotal": {
                    "type": "boolean",
                    "default": false
                },
                "className": {
                    "type": "string"
                }
            }
        },
        {
            "attributes": {
                "subscribePlaceholder": {
                    "type": "string",
                    "default": "Email Address"
                },
                "subscribeButton": {
                    "type": "string",
                    "default": "Subscribe"
                },
                "showSubscribersTotal": {
                    "type": "boolean",
                    "default": false
                },
                "submitButtonText": {
                    "type": "string",
                    "default": "Subscribe"
                },
                "backgroundButtonColor": {
                    "type": "string"
                },
                "textButtonColor": {
                    "type": "string"
                },
                "customBackgroundButtonColor": {
                    "type": "string"
                },
                "customTextButtonColor": {
                    "type": "string"
                },
                "submitButtonClasses": {
                    "type": "string"
                },
                "className": {
                    "type": "string"
                }
            }
        },
        {
            "attributes": {
                "subscribePlaceholder": {
                    "type": "string",
                    "default": "Enter your email address"
                },
                "showSubscribersTotal": {
                    "type": "boolean",
                    "default": false
                },
                "buttonOnNewLine": {
                    "type": "boolean",
                    "default": false
                },
                "submitButtonText": {
                    "type": "string",
                    "default": "Sign Up"
                },
                "emailFieldBackgroundColor": {
                    "type": "string"
                },
                "customEmailFieldBackgroundColor": {
                    "type": "string"
                },
                "emailFieldGradient": {
                    "type": "string"
                },
                "customEmailFieldGradient": {
                    "type": "string"
                },
                "buttonBackgroundColor": {
                    "type": "string"
                },
                "customButtonBackgroundColor": {
                    "type": "string"
                },
                "buttonGradient": {
                    "type": "string"
                },
                "customButtonGradient": {
                    "type": "string"
                },
                "textColor": {
                    "type": "string"
                },
                "customTextColor": {
                    "type": "string"
                },
                "fontSize": {
                    "type": "number"
                },
                "customFontSize": {
                    "type": "number"
                },
                "borderRadius": {
                    "type": "number"
                },
                "borderWeight": {
                    "type": "number"
                },
                "borderColor": {
                    "type": "string"
                },
                "customBorderColor": {
                    "type": "string"
                },
                "padding": {
                    "type": "number"
                },
                "spacing": {
                    "type": "number"
                },
                "className": {
                    "type": "string"
                }
            }
        },
        {
            "attributes": {
                "subscribePlaceholder": {
                    "type": "string",
                    "default": "Enter your email address"
                },
                "showSubscribersTotal": {
                    "type": "boolean",
                    "default": false
                },
                "buttonOnNewLine": {
                    "type": "boolean",
                    "default": false
                },
                "submitButtonText": {
                    "type": "string",
                    "default": "Sign Up"
                },
                "emailFieldBackgroundColor": {
                    "type": "string"
                },
                "customEmailFieldBackgroundColor": {
                    "type": "string"
                },
                "emailFieldGradient": {
                    "type": "string"
                },
                "customEmailFieldGradient": {
                    "type": "string"
                },
                "buttonBackgroundColor": {
                    "type": "string"
                },
                "customButtonBackgroundColor": {
                    "type": "string"
                },
                "buttonGradient": {
                    "type": "string"
                },
                "customButtonGradient": {
                    "type": "string"
                },
                "textColor": {
                    "type": "string"
                },
                "customTextColor": {
                    "type": "string"
                },
                "fontSize": {
                    "type": "number"
                },
                "customFontSize": {
                    "type": "number"
                },
                "borderRadius": {
                    "type": "number"
                },
                "borderWeight": {
                    "type": "number"
                },
                "borderColor": {
                    "type": "string"
                },
                "customBorderColor": {
                    "type": "string"
                },
                "padding": {
                    "type": "number"
                },
                "spacing": {
                    "type": "number"
                },
                "className": {
                    "type": "string"
                }
            }
        }
    ],
    "attributes": {
        "subscribePlaceholder": {
            "type": "string",
            "default": "Enter your email address"
        },
        "showSubscribersTotal": {
            "type": "boolean",
            "default": false
        },
        "buttonOnNewLine": {
            "type": "boolean",
            "default": false
        },
        "submitButtonText": {
            "type": "string",
            "default": "Sign Up"
        },
        "emailFieldBackgroundColor": {
            "type": "string"
        },
        "customEmailFieldBackgroundColor": {
            "type": "string"
        },
        "emailFieldGradient": {
            "type": "string"
        },
        "customEmailFieldGradient": {
            "type": "string"
        },
        "buttonBackgroundColor": {
            "type": "string"
        },
        "customButtonBackgroundColor": {
            "type": "string"
        },
        "buttonGradient": {
            "type": "string"
        },
        "customButtonGradient": {
            "type": "string"
        },
        "textColor": {
            "type": "string"
        },
        "customTextColor": {
            "type": "string"
        },
        "fontSize": {
            "type": "number"
        },
        "customFontSize": {
            "type": "number"
        },
        "borderRadius": {
            "type": "number"
        },
        "borderWeight": {
            "type": "number"
        },
        "borderColor": {
            "type": "string"
        },
        "customBorderColor": {
            "type": "string"
        },
        "padding": {
            "type": "number"
        },
        "spacing": {
            "type": "number"
        },
        "className": {
            "type": "string"
        }
    }
}
Content generated by `save` function:

<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline wp-block-jetpack-subscriptions__use-newline">
			[jetpack_subscription_form
				subscribe_placeholder="Enter your email address"
				show_subscribers_total="false"
				button_on_newline="true"
				submit_button_text="<strong>Sign up</strong> to receive emails of all my future posts"
				custom_background_emailfield_color="undefined"
				custom_background_button_color="undefined"
				custom_text_button_color="undefined"
				custom_font_size="16"
				custom_border_radius="0"
				custom_border_weight="3"
				custom_border_color="#e22658"
				custom_padding="15"
				custom_spacing="10"
				submit_button_classes="has-e-22658-border-color has-text-color has-accent-color has-background has-subtle-background-background-color"
				email_field_classes="has-e-22658-border-color"
				show_only_email_and_button="true"
			]</div>

Content retrieved from post body:

<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline wp-block-jetpack-subscriptions__use-newline">[jetpack_subscription_form subscribe_placeholder="Enter your email address" show_subscribers_total="false" button_on_newline="true" submit_button_text="<strong>Sign up</strong> to receive emails of all my future posts" custom_font_size="49px" custom_border_radius="0" custom_border_weight="3" custom_border_color="#e22658" custom_padding="15" custom_spacing="10" submit_button_classes="has-49-px-font-size has-e-22658-border-color has-text-color has-accent-color has-background has-subtle-background-background-color" email_field_classes="has-49-px-font-size has-e-22658-border-color" show_only_email_and_button="true"]</div>

stacimc · 2021-03-10T18:59:26Z

This seems to generate block validation errors when editing posts with Subscriptions blocks:

@jeherve Good catch! This is really odd -- I'm not sure what the root cause was, but it looks to have disappeared after rebasing.

anomiex · 2021-03-10T20:41:03Z

Needs a changelogger change file. In projects/plugins/jetpack, execute vendor/bin/changelogger add to create one interactively.

stacimc · 2021-03-12T21:36:45Z

Rebased after merging in the button width options (#18809)

jeherve

The tests seem to fail now:
https://github.com/Automattic/jetpack/pull/19002/checks?check_run_id=2098887487

glendaviesnz · 2021-03-16T19:50:37Z

The tests seem to fail now:
https://github.com/Automattic/jetpack/pull/19002/checks?check_run_id=2098887487

@stacimc looks like the test failure is because the dependency tree that the jest test runner is using in the jetpack repo is older that the one that is used to compile the frontend client, and UnitControl is not available. Strange that it didn't fail locally for you though.

The Jetpack crew have been working to get the dependencies updated, in the mean time you will probably either need to comment out the tests that are mounting this part of the component, or you might be able to mock UnitControl in the spec file with something like:

jest.mock( '@wordpress/components', () => ( {
	...jest.requireActual( '@wordpress/components' ),
	__experimentalUnitControl: () => <div>Mocked Unit Control</div>,
} ) );

stacimc · 2021-03-16T20:11:11Z

The tests seem to fail now:
https://github.com/Automattic/jetpack/pull/19002/checks?check_run_id=2098887487

@stacimc looks like the test failure is because the dependency tree that the jest test runner is using in the jetpack repo is older that the one that is used to compile the frontend client, and UnitControl is not available. Strange that it didn't fail locally for you though.

My apologies -- there were a couple of PRs affected by this and I missed updating the status/comment on this one. Yes, this is being held up by the dependency update :(

I like the suggestion of mocking it for now. I'll work on that and create a follow up to include removing the mock and adding additional tests for the width.

stacimc · 2021-03-16T20:52:29Z

I've temporarily mocked out the width controls for now, follow up issue to fix at: 253-gh-Automattic/view-design

github-actions · 2021-03-18T17:43:06Z

Great news! One last step: head over to your WordPress.com diff, D58003-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

stacimc · 2021-03-18T21:25:54Z

Holding off on deploying this one, as it relies on #18809 (which needs to be deployed along with the release for the sake of Atomic sites).

jeherve · 2021-04-06T17:31:40Z

r223840-wpcom

stacimc added [Status] In Progress [Block] Button labels Mar 3, 2021

stacimc self-assigned this Mar 3, 2021

matticbot added the Touches WP.com Files label Mar 3, 2021

github-actions bot added the [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ label Mar 3, 2021

stacimc force-pushed the add/button-tests branch from 9beeb31 to 4a57880 Compare March 4, 2021 02:15

ramonjd reviewed Mar 4, 2021

View reviewed changes

stacimc changed the title ~~[In Progress] Button block: Add tests~~ Button block: Add tests Mar 4, 2021

stacimc marked this pull request as ready for review March 4, 2021 21:41

stacimc added [Status] Needs Team Review and removed [Status] In Progress labels Mar 5, 2021

apeatling previously approved these changes Mar 9, 2021

View reviewed changes

apeatling added [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] Needs Team Review labels Mar 9, 2021

jeherve reviewed Mar 10, 2021

View reviewed changes

jeherve added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Mar 10, 2021

stacimc dismissed apeatling’s stale review via f152055 March 10, 2021 18:02

stacimc force-pushed the add/button-tests branch from 845b143 to f152055 Compare March 10, 2021 18:02

stacimc added [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Mar 10, 2021

anomiex added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Mar 10, 2021

jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Mar 11, 2021

jeherve added this to the 9.6 milestone Mar 11, 2021

stacimc added 5 commits March 12, 2021 13:04

[not verified] Add fixtures

59e9cf7

[not verified] Linting

e17b22c

[not verified] Add changelog

a72f0d9

[not verified] Update changelog, no public message required

ebd8e24

Clean up: move all panels to the controls

da806ac

stacimc dismissed jeherve’s stale review via da806ac March 12, 2021 21:36

stacimc force-pushed the add/button-tests branch from f5645ac to da806ac Compare March 12, 2021 21:36

stacimc added [Status] In Progress and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Mar 12, 2021

jeherve requested changes Mar 15, 2021

View reviewed changes

jeherve added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! and removed [Status] In Progress labels Mar 15, 2021

Temporarily mock out the width controls

0edac7d

Mock button width panel in Controls tests

8ed08c6

stacimc added [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Mar 17, 2021

jeherve approved these changes Mar 17, 2021

View reviewed changes

jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Mar 17, 2021

stacimc merged commit a78c2df into master Mar 18, 2021

stacimc deleted the add/button-tests branch March 18, 2021 17:41

matticbot removed the [Status] Ready to Merge Go ahead, you can push that green button! label Mar 18, 2021

ramonjd mentioned this pull request Mar 24, 2021

Block fixtures: trim block fixture HTML when generating fixtures #19180

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Button block: Add tests #19002

Button block: Add tests #19002

stacimc commented Mar 3, 2021 •

edited

Loading

matticbot commented Mar 3, 2021

github-actions bot commented Mar 3, 2021 •

edited

Loading

ramonjd Mar 4, 2021

apeatling left a comment

jeherve left a comment

stacimc commented Mar 10, 2021

anomiex commented Mar 10, 2021

stacimc commented Mar 12, 2021

jeherve left a comment

glendaviesnz commented Mar 16, 2021

stacimc commented Mar 16, 2021

stacimc commented Mar 16, 2021

github-actions bot commented Mar 18, 2021

stacimc commented Mar 18, 2021

jeherve commented Apr 6, 2021

Button block: Add tests #19002

Button block: Add tests #19002

Conversation

stacimc commented Mar 3, 2021 • edited Loading

Changes proposed in this Pull Request:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Proposed changelog entry for your changes:

matticbot commented Mar 3, 2021

github-actions bot commented Mar 3, 2021 • edited Loading

ramonjd Mar 4, 2021

Choose a reason for hiding this comment

apeatling left a comment

Choose a reason for hiding this comment

jeherve left a comment

Choose a reason for hiding this comment

stacimc commented Mar 10, 2021

anomiex commented Mar 10, 2021

stacimc commented Mar 12, 2021

jeherve left a comment

Choose a reason for hiding this comment

glendaviesnz commented Mar 16, 2021

stacimc commented Mar 16, 2021

stacimc commented Mar 16, 2021

github-actions bot commented Mar 18, 2021

stacimc commented Mar 18, 2021

jeherve commented Apr 6, 2021

stacimc commented Mar 3, 2021 •

edited

Loading

github-actions bot commented Mar 3, 2021 •

edited

Loading