Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Repeater e2e tests #328

Merged
merged 9 commits into from
Nov 21, 2024
4 changes: 2 additions & 2 deletions .github/setup-node/action.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ runs:
using: 'composite'
steps:
- name: Use desired version of Node.js
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version-file: '.nvmrc'
node-version: ${{ inputs.node-version }}
Expand All @@ -24,7 +24,7 @@ runs:

- name: Cache node_modules
id: cache-node_modules
uses: actions/cache@v3
uses: actions/cache@v4
with:
path: '**/node_modules'
key: node_modules-${{ runner.os }}-${{ steps.node-version.outputs.NODE_VERSION }}-${{ hashFiles('package-lock.json') }}
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4

- name: Disable xDebug - fixes PHP Fatal Error for `i18n make-pot`
uses: shivammathur/setup-php@v2
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/tests-e2e.yml
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ jobs:
totalParts: [4]

steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4

- name: Setup Node.js and install dependencies
uses: ./.github/setup-node
Expand Down
8 changes: 4 additions & 4 deletions .github/workflows/tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ jobs:
WP_ENV_CORE: ${{ matrix.wordpress == '' && 'WordPress/WordPress' || format( 'https://wordpress.org/wordpress-{0}.zip', needs.compute-previous-wordpress-version.outputs.previous-wordpress-version ) }}

steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4

- name: Setup Node.js and install dependencies
uses: ./.github/setup-node
Expand Down Expand Up @@ -162,7 +162,7 @@ jobs:
if: ${{ github.repository == 'nk-crew/lazy-blocks' || github.event_name == 'pull_request' }}

steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4

- name: Setup Node.js and install dependencies
uses: ./.github/setup-node
Expand All @@ -181,7 +181,7 @@ jobs:

steps:
- name: Checkout repository
uses: actions/checkout@v3
uses: actions/checkout@v4

- name: Set up PHP
uses: shivammathur/setup-php@v2
Expand All @@ -197,7 +197,7 @@ jobs:
run: echo "date=$(/bin/date -u --date='last Mon' "+%F")" >> $GITHUB_OUTPUT

- name: Cache PHPCS scan cache
uses: actions/cache@v3
uses: actions/cache@v4
with:
path: .cache/phpcs.json
key: ${{ runner.os }}-date-${{ steps.get-date.outputs.date }}-phpcs-cache-${{ hashFiles('**/composer.json', 'phpcs.xml.dist') }}
Expand Down
4 changes: 0 additions & 4 deletions classes/class-blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -1206,10 +1206,6 @@ public function prepare_block_attributes( $controls, $child_of = '', $block = nu
'type' => 'string',
'default' => '',
);
$attributes['align'] = array(
'type' => 'string',
'default' => '',
);
$attributes['anchor'] = array(
'type' => 'string',
'default' => '',
Expand Down
213 changes: 213 additions & 0 deletions tests/e2e/specs/editor-block-base-controls.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
/* eslint-disable jsdoc/no-undefined-types */
/**
* WordPress dependencies
*/
import { test, expect } from '@wordpress/e2e-test-utils-playwright';
import { createBlock } from '../utils/create-block';
import { removeAllBlocks } from '../utils/remove-all-blocks';

test.describe('editor block with Base control', () => {
test.afterEach(async ({ requestUtils }) => {
await removeAllBlocks({ requestUtils });
});

/**
* Manually add Base Block.
*
* @param {Page} page Provides methods to interact with a single tab in a Browser, or an extension background page in Chromium.
* @param {Editor} editor End to end test utilities for the WordPress Block Editor.
* @param {Admin} admin End to end test utilities for WordPress admin’s user interface.
* @param {RequestUtils} requestUtils Playwright utilities for interacting with the WordPress REST API.
* @return {number} blockID Block ID.
*/
async function manuallyAddBaseBlock(page, editor, admin, requestUtils) {
const blockID = await createBlock({
requestUtils,
title: 'Test Base Block',
slug: 'test-base-block',
code: '<p>Test text control is: <?php echo $attributes["test-text-control"]; ?></p><p>Test select control label is: <?php echo $attributes["test-select-control"]["label"]; ?></p><p>Test select control value is: <?php echo $attributes["test-select-control"]["value"]; ?></p><?php if ( $attributes["test-checkbox-control"] ) : ?><p>The checkbox test control is True</p><?php else: ?><p>The checkbox test control is False</p><?php endif; ?>',
codeSingleOutput: true,
});

await admin.visitAdminPage('edit.php?post_type=lazyblocks');

await page.getByLabel('“Test Base Block” (Edit)').click();

await page.waitForTimeout(500);

const closeModal = await page
.locator('.components-modal__header')
.getByRole('button', { name: 'Close' });

await page.waitForTimeout(500);

if (await closeModal.isVisible()) {
await closeModal.click();
}

// Generate Text control
await editor.canvas
.getByLabel('Inspector Controls')
.getByRole('button')
.click();

await editor.canvas.getByText('(no label)').click();

await page.getByLabel('Label').fill('Test Text Control');

await page.getByLabel('Type').click();

await page.getByRole('button', { name: 'Text', exact: true }).click();

// Generate Select control
await editor.canvas
.getByLabel('Inspector Controls')
.locator('button.lzb-constructor-controls-item-appender')
.click();

await editor.canvas.getByText('(no label)').click();

await page.getByLabel('Label').fill('Test Select Control');

await page.getByLabel('Type').click();

await page.getByRole('button', { name: 'Select' }).click();

await page.getByRole('button', { name: '+ Add Choice' }).click();
await page.getByPlaceholder('Label').fill('First Selector Choice');
await page.getByPlaceholder('Value').fill('first');
await page.getByRole('button', { name: '+ Add Choice' }).click();

await page
.getByPlaceholder('Label')
.nth(1)
.fill('Second Selector Choice');

await page.getByPlaceholder('Value').nth(1).fill('second');

await page.getByLabel('Both (Array)').check();

// Generate Checkbox control
await editor.canvas
.getByLabel('Inspector Controls')
.locator('button.lzb-constructor-controls-item-appender')
.click();

await editor.canvas.getByText('(no label)').click();

await page.getByLabel('Label').fill('Test Checkbox Control');
await page.getByLabel('Type').click();
await page.getByRole('button', { name: 'Checkbox' }).click();
await page
.locator('#lazyblocks-control-checkbox-checked')
.nth(1)
.check();

await editor.canvas.getByLabel('PHP').click();

// Publish post.
await page.locator('role=button[name="Save"i]').click();

await expect(page.locator('role=button[name="Save"i]')).toBeDisabled();

return blockID;
}

test('create Base block manually in constructor UI', async ({
page,
editor,
admin,
requestUtils,
}) => {
const blockID = await manuallyAddBaseBlock(
page,
editor,
admin,
requestUtils
);
// Check for this block in the lazyblocks posts list admin.
await admin.visitAdminPage('edit.php?post_type=lazyblocks');

await expect(page.locator(`#post-${blockID}`)).toBeVisible();
});

test('should render Base block correctly', async ({
page,
editor,
admin,
requestUtils,
}) => {
await manuallyAddBaseBlock(page, editor, admin, requestUtils);

await admin.createNewPost();

await editor.insertBlock({
name: 'lazyblock/test-base-block',
});

await page.getByLabel('Test Text Control').fill('Just a text');

await page.getByLabel('Test Select Control').selectOption('second');

await page
.locator(
'input[type="checkbox"].components-checkbox-control__input'
)
.uncheck();

// Backend render.
await expect(
editor.canvas
.locator('.lzb-preview-server')
.getByText('Test text control is: Just a text')
).toBeVisible();

await expect(
editor.canvas
.locator('.lzb-preview-server')
.getByText(
'Test select control label is: Second Selector Choice'
)
).toBeVisible();

await expect(
editor.canvas
.locator('.lzb-preview-server')
.getByText('Test select control value is: second')
).toBeVisible();

await expect(
editor.canvas
.locator('.lzb-preview-server')
.getByText('The checkbox test control is False')
).toBeVisible();

await page
.getByRole('button', { name: 'Publish', exact: true })
.click();
await page
.getByLabel('Editor publish')
.getByRole('button', { name: 'Publish', exact: true })
.click();
await page
.getByLabel('Editor publish')
.getByRole('link', { name: 'View Post' })
.click();

// Frontend render.
await expect(
page.getByText('Test text control is: Just a text')
).toBeVisible();
await expect(
page.getByText(
'Test select control label is: Second Selector Choice'
)
).toBeVisible();
await expect(
page.getByText('Test select control value is: second')
).toBeVisible();
await expect(
page.getByText('The checkbox test control is False')
).toBeVisible();
});
});
Loading
Loading