|
| 1 | +import { render, screen } from "../../../test-utils"; |
| 2 | +import EditorModal from "../../../../src/components/modals/editorModals/EditorModal"; |
| 3 | +import SocialAppearanceModal from "../../../../src/components/modals/editorModals/SocialAppearanceModal"; |
| 4 | +import { noop } from "lodash"; |
| 5 | + |
| 6 | +/** |
| 7 | + * Mocked EditorModal container. |
| 8 | + * |
| 9 | + * Renders the modal open, without the WP data store the container normally reads from. |
| 10 | + * |
| 11 | + * @param {Object} props The props. |
| 12 | + * |
| 13 | + * @returns {JSX.Element} The element. |
| 14 | + */ |
| 15 | +const EditorModalMock = props => ( |
| 16 | + <EditorModal { ...props } postTypeName="post" isOpen={ true } open={ noop } close={ noop } /> |
| 17 | +); |
| 18 | + |
| 19 | +jest.mock( "../../../../src/containers/EditorModal", () => EditorModalMock ); |
| 20 | + |
| 21 | +// The editors are Redux containers; this suite is about the modal chrome around them. |
| 22 | +jest.mock( "../../../../src/containers/FacebookEditor", () => ( { |
| 23 | + __esModule: true, |
| 24 | + "default": () => "Facebook editor", |
| 25 | +} ) ); |
| 26 | +jest.mock( "../../../../src/containers/TwitterEditor", () => ( { |
| 27 | + __esModule: true, |
| 28 | + "default": () => "X editor", |
| 29 | +} ) ); |
| 30 | + |
| 31 | +describe( "SocialAppearanceModal", () => { |
| 32 | + beforeEach( () => { |
| 33 | + global.wpseoAdminL10n = { |
| 34 | + "shortlinks.social_previews_info": "https://example.com/social-previews", |
| 35 | + }; |
| 36 | + } ); |
| 37 | + |
| 38 | + it( "links the modal title to the social previews page when Open Graph is enabled", () => { |
| 39 | + render( <SocialAppearanceModal useOpenGraphData={ true } useTwitterData={ true } /> ); |
| 40 | + |
| 41 | + const link = screen.getByRole( "link", { name: /Learn more about social previews/ } ); |
| 42 | + |
| 43 | + expect( link ).toHaveAttribute( "href", "https://example.com/social-previews" ); |
| 44 | + } ); |
| 45 | + |
| 46 | + it( "still offers the help link when X appearance is disabled", () => { |
| 47 | + render( <SocialAppearanceModal useOpenGraphData={ true } useTwitterData={ false } /> ); |
| 48 | + |
| 49 | + expect( screen.getByRole( "link", { name: /Learn more about social previews/ } ) ).toBeInTheDocument(); |
| 50 | + } ); |
| 51 | + |
| 52 | + it( "does not offer the help link when Open Graph is disabled", () => { |
| 53 | + // Only the X appearance editor remains, matching the metabox, which has no link in that case either. |
| 54 | + render( <SocialAppearanceModal useOpenGraphData={ false } useTwitterData={ true } /> ); |
| 55 | + |
| 56 | + expect( screen.getByText( "X editor" ) ).toBeInTheDocument(); |
| 57 | + expect( screen.queryByRole( "link", { name: /Learn more about social previews/ } ) ).toBeNull(); |
| 58 | + } ); |
| 59 | +} ); |
0 commit comments