{__( - 'When you click save button, the window will be reloaded and this setting will be applied', + 'When you click save button, the window will be reloaded and this setting will be applied.', 'vk-blocks' )}
diff --git a/test/e2e-tests/specs/margin-extension.test.js b/test/e2e-tests/specs/margin-extension.test.js new file mode 100644 index 000000000..a0f3992d5 --- /dev/null +++ b/test/e2e-tests/specs/margin-extension.test.js @@ -0,0 +1,182 @@ +/** + * WordPress dependencies + */ + import { + createNewPost, + searchForBlock, + clickButton, +} from '@wordpress/e2e-test-utils'; + +/** +* Internal dependencies +*/ +import { changeSiteLang } from '../helper/changeSiteLang'; + +// https://github.com/WordPress/gutenberg/blob/7d880708c6281c185256b8e7d3dffe178da33d09/packages/e2e-tests/specs/performance/post-editor.test.js#L34 +jest.setTimeout( 1000000 ); + +describe( 'MarginExtension', () => { + let oldLanguage; + beforeEach( async () => { + jest.setTimeout(600000); + oldLanguage = await changeSiteLang( 'en' ); + await createNewPost(); + } ); + afterEach( async () => { + await changeSiteLang( oldLanguage ); + }); + it( 'MarginExtension', async () => { + // 共通余白を選択をしやすくするためにトップツールバーをオンにする + const optionsButtonSelector = `//button[@aria-label='Options']`; + const [optionsButton] = await page.$x(optionsButtonSelector); + await optionsButton.click(); + await page.keyboard.press( 'Enter' ); + + /** + * 共通余白が設定できるブロック一覧 + * + * ブロック名の変更や追加した場合はこの一覧を更新する必要ある + * + * 子ブロックに共通余白を追加する場合、親ブロックを配置していないと子ブロックの共通余白を追加することが出来ないため配置するブロックと余白を追加したいブロックの配列を用意している + */ + + // 配列サンプル + // const testBlockTitleLists = [ + // // ['配置したいブロック','共通余白を設定するブロック','editor-block-list-item-に続くクラス名'] + // ['Paragraph', 'Paragraph', 'paragraph'], + // [ "Ballon", "Ballon", "vk-blocks-balloon" ], + // [ "New FAQ", "New FAQ", "vk-blocks-faq2" ], + // ['Heading', 'Heading', 'vk-blocks-heading'], + // ['Image', 'Image', 'image'], + // ['Heading', 'Heading', 'heading'], + // ] + + const testBlockTitleLists = [ + [ "Alert", "Alert", "vk-blocks-alert" ], + [ "Ballon", "Ballon", "vk-blocks-balloon" ], + [ "Border Box", "Border Box", "vk-blocks-border-box" ], + [ "Button", "Button", "vk-blocks-button" ], + [ "Classic FAQ", "Classic FAQ", "vk-blocks-faq" ], + [ "New FAQ", "New FAQ", "vk-blocks-faq2" ], + [ "Flow", "Flow", "vk-blocks-flow" ], + [ "Heading", "Heading", "vk-blocks-heading" ], + [ "Icon", "Icon", "vk-blocks-icon" ], + [ "Icon Outer", "Icon Outer", "vk-blocks-icon-outer" ], + [ "Page Content", "Page Content", "vk-blocks-page-content" ], + [ "PR Blocks (not recommended)", "PR Blocks (not recommended)", "vk-blocks-pr-blocks" ], + [ "PR Content", "PR Content", "vk-blocks-pr-content" ], + [ "Responsive Spacer", "Responsive Spacer", "vk-blocks-spacer" ], + [ "Staff", "Staff", "vk-blocks-staff" ], + [ "Accordion", "Accordion", "vk-blocks-accordion" ], + [ "Animation", "Animation", "vk-blocks-animation" ], + [ "Breadcrumb", "Breadcrumb", "vk-blocks-breadcrumb" ], + [ "Button Outer", "Button Outer", "vk-blocks-button-outer" ], + [ "Card", "Card", "vk-blocks-card" ], + [ "Child page list", "Child page list", "vk-blocks-child-page" ], + [ "Grid Column Card", "Grid Column Card", "vk-blocks-gridcolcard" ], + [ "Icon Card", "Icon Card", "vk-blocks-icon-card" ], + [ "Outer", "Outer", "vk-blocks-outer" ], + [ "Post list", "Post list", "vk-blocks-post-list" ], + [ "Selected Post List", "Selected Post List", "vk-blocks-select-post-list" ], + [ "Step", "Step", "vk-blocks-step" ], + [ "Slider", "Slider", "vk-blocks-slider" ], + [ "Table of Contents", "Table of Contents", "vk-blocks-table-of-contents-new" ], + [ "Timeline", "Timeline", "vk-blocks-timeline" ], + [ "Paragraph", "Paragraph", "paragraph" ], + [ "Image", "Image", "image" ], + [ "Heading", "Heading", "heading" ], + [ "Gallery", "Gallery", "gallery" ], + [ "List", "List", "list" ], + [ "Quote", "Quote", "quote" ], + [ "Buttons", "Buttons", "buttons" ], + [ "Code", "Code", "code" ], + [ "Columns", "Columns", "columns" ], + [ "Cover", "Cover", "cover" ], + [ "Embed", "Embed", "embed" ], + [ "File", "File", "file" ], + [ "Group", "Group", "group" ], + [ "Media & Text", "Media & Text", "media-text" ], + [ "Preformatted", "Preformatted", "preformatted" ], + [ "Pullquote", "Pullquote", "pullquote" ], + [ "Separator", "Separator", "separator" ], + [ "Spacer", "Spacer", "spacer" ], + [ "Table", "Table", "table" ], + // [ "Text Columns (deprecated)", "Text Columns (deprecated)", "text-columns" ], // ブロックが存在しないのでコメントアウト + [ "Verse", "Verse", "verse" ], + [ "Video", "Video", "video" ], + [ "Navigation", "Navigation", "navigation" ], + [ "Query Loop", "Query Loop", "query" ], + // 子ブロック + [ "New FAQ", "FAQ Answer", "vk-blocks-faq2" ], + [ "New FAQ", "FAQ Question", "vk-blocks-faq2" ], + [ "Accordion", "Accordion Target", "vk-blocks-accordion" ], + [ "Accordion", "Accordion Trigger", "vk-blocks-accordion" ], + [ "Grid Column Card", "Grid Column Card Item", "vk-blocks-gridcolcard" ], + [ "Grid Column Card", "Grid Column Card Item Body", "vk-blocks-gridcolcard" ], + [ "Step", "Step Item", "vk-blocks-step" ], + [ "Timeline", "Timeline Item", "vk-blocks-timeline" ], + [ "Buttons", "Button", "buttons" ] + ] + + for (let i = 0; i < testBlockTitleLists.length; i++) { + + // ブロックを追加 + await searchForBlock( testBlockTitleLists[i][0] ); + const insertButton = await page.waitForXPath( + `//button[contains(@class, "editor-block-list-item-${ testBlockTitleLists[i][2] }")]` + ); + await insertButton.click(); + + // List viewをクリック + const listViewButtonSelector = `//button[@aria-label='List View']`; + const [listViewButton] = await page.$x(listViewButtonSelector); + await listViewButton.click(); + + // 共通余白を設定したいブロックをクリック + await clickButton( testBlockTitleLists[i][1] ); + + // 共通余白のドロップダウンをクリック + const marginDropdownButtonSelector = `//button[@aria-label='Margin the block']`; + const [marginDropdownButton] = await page.$x(marginDropdownButtonSelector); + await marginDropdownButton.click(); + + //共通余白 Top lgを選択 + await page.keyboard.press( 'Enter' ); + + //共通余白 下をクリック + await marginDropdownButton.click(); + for (let i = 0; i < 4; i++) { + await page.keyboard.press( 'Tab' ); + } + await page.keyboard.press( 'Enter' ); + + // 共通余白のクラス名が存在するかチェック + expect( + await page.$( '.vk_block-margin-lg--margin-top' ) + ).not.toBeNull(); + expect( + await page.$( '.vk_block-margin-0--margin-bottom' ) + ).not.toBeNull(); + + // 配置したブロックが増えるとテストが動かなくなる,またインナーブロックの場合、その中に配置されることがありテストわかりにくくなるので配置したブロックを削除 + await clickButton( testBlockTitleLists[i][0] ); + await page.keyboard.press( 'Escape' ); + await page.keyboard.press( 'Backspace' ); + + } + } ) + + /** + * 以下のブロックは上記のテストではブロックの配置が単純ではないため対応出来ていない + * + * Columns, Columns > Column + * Navigation > Custom Link, Submenu + * Query Loop > Post Template, Pagination + * + * 初期配置ではブロックが配置されないためクラス名が見当たらないため + * Grid Column Card Item Footer + * Grid Column Card Item header + */ + +}); +