Skip to content

Commit

Permalink
code improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgefilipecosta
jorgefilipecosta committed Oct 8, 2018
1 parent 3e951a4 commit ccb5cda
Showing 1 changed file with 69 additions and 54 deletions.
123 changes: 69 additions & 54 deletions test/e2e/specs/align-hook.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,24 +27,27 @@ describe( 'Align Hook Works As Expected', () => {

const getAlignmentToolbarLabels = async () => {
const buttonLabels = await page.evaluate( () => {
const buttons = [];
document.querySelectorAll(
'.editor-block-toolbar button[aria-label^="Align"]'
).forEach(
return Array.from(
document.querySelectorAll(
'.editor-block-toolbar button[aria-label^="Align"]'
)
).map(
( button ) => {
buttons.push( button.getAttribute( 'aria-label' ) );
return button.getAttribute( 'aria-label' );
}
);
return buttons;
} );
return buttonLabels;
};

const createShowsTheExpectedButtonsTest = ( blockName, buttonLabels ) => {
it( 'Shows the expected buttons on the alignment toolbar', async () => {
await insertBlock( blockName );
expect( await getAlignmentToolbarLabels() ).toEqual( buttonLabels );
} );
it( 'Shows the expected buttons on the alignment toolbar',
async () => {
await insertBlock( blockName );
expect(
await getAlignmentToolbarLabels()
).toEqual( buttonLabels );
} );
};

const createDoesNotApplyAlignmentByDefaultTest = ( blockName ) => {
Expand All @@ -66,59 +69,69 @@ describe( 'Align Hook Works As Expected', () => {
};

const createCorrectlyAppliesAndRemovesAlignmentTest = ( blockName, alignment ) => {
it( 'Correctly applies the selected alignment and correctly removes the alignment', async () => {
const BUTTON_SELECTOR = `.editor-block-toolbar button[aria-label="Align ${ alignment }"]`;
const BUTTON_PRESSED_SELECTOR = `${ BUTTON_SELECTOR }[aria-pressed="true"]`;
// set the specified alignment.
await insertBlock( blockName );
await page.click( BUTTON_SELECTOR );
it( 'Correctly applies the selected alignment and correctly removes the alignment',
async () => {
const BUTTON_SELECTOR = `.editor-block-toolbar button[aria-label="Align ${ alignment }"]`;
const BUTTON_PRESSED_SELECTOR = `${ BUTTON_SELECTOR }[aria-pressed="true"]`;
// set the specified alignment.
await insertBlock( blockName );
await page.click( BUTTON_SELECTOR );

// verify the button of the specified alignment is pressed.
let pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
expect( pressedButtons ).toHaveLength( 1 );
// verify the button of the specified alignment is pressed.
let pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
expect( pressedButtons ).toHaveLength( 1 );

let htmlMarkup = await getEditedPostContent();
let htmlMarkup = await getEditedPostContent();

// verify the markup of the selected alignment was generated.
expect( htmlMarkup ).toMatchSnapshot();
// verify the markup of the selected alignment was generated.
expect( htmlMarkup ).toMatchSnapshot();

// verify the markup can be correctly parsed
await verifyMarkupIsValid( htmlMarkup );
// verify the markup can be correctly parsed
await verifyMarkupIsValid( htmlMarkup );

await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
await selectBlockByClientId(
( await getAllBlocks() )[ 0 ].clientId
);

// remove the alignment.
await page.click( BUTTON_SELECTOR );
// remove the alignment.
await page.click( BUTTON_SELECTOR );

// verify no alignment button is in pressed state.
pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
expect( pressedButtons ).toHaveLength( 0 );
// verify no alignment button is in pressed state.
pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
expect( pressedButtons ).toHaveLength( 0 );

// verify alignment markup was removed from the block.
htmlMarkup = await getEditedPostContent();
expect( htmlMarkup ).toMatchSnapshot();
// verify alignment markup was removed from the block.
htmlMarkup = await getEditedPostContent();
expect( htmlMarkup ).toMatchSnapshot();

// verify the markup when no alignment is set is valid
await verifyMarkupIsValid( htmlMarkup );
// verify the markup when no alignment is set is valid
await verifyMarkupIsValid( htmlMarkup );

await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
await selectBlockByClientId(
( await getAllBlocks() )[ 0 ].clientId
);

// verify no alignment button is in pressed state after parsing the block.
pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
expect( pressedButtons ).toHaveLength( 0 );
} );
// verify no alignment button is in pressed state after parsing the block.
pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
expect( pressedButtons ).toHaveLength( 0 );
}
);
};

describe( 'Block with no alignment set', () => {
const BLOCK_NAME = 'Test No Alignment Set';
it( 'Shows no alignment buttons on the alignment toolbar', async () => {
expect( await getAlignmentToolbarLabels() ).toHaveLength( 0 );
} );

it( 'Does not save any alignment related attribute or class', async () => {
await insertBlock( BLOCK_NAME );
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
it( 'Shows no alignment buttons on the alignment toolbar',
async () => {
expect( await getAlignmentToolbarLabels() ).toHaveLength( 0 );
}
);

it( 'Does not save any alignment related attribute or class',
async () => {
await insertBlock( BLOCK_NAME );
expect( await getEditedPostContent() ).toMatchSnapshot();
}
);
} );

describe( 'Block with align true', () => {
Expand Down Expand Up @@ -164,12 +177,14 @@ describe( 'Align Hook Works As Expected', () => {
expect( pressedButtons ).toHaveLength( 1 );
} );

it( 'The default markup does not contain the alignment attribute but contains the alignment class', async () => {
await insertBlock( BLOCK_NAME );
const markup = await getEditedPostContent();
expect( markup ).not.toContain( '"align":"right"' );
expect( markup ).toContain( 'alignright' );
} );
it( 'The default markup does not contain the alignment attribute but contains the alignment class',
async () => {
await insertBlock( BLOCK_NAME );
const markup = await getEditedPostContent();
expect( markup ).not.toContain( '"align":"right"' );
expect( markup ).toContain( 'alignright' );
}
);

it( 'Can remove the default alignment and the align attribute equals none but alignnone class is not applied', async () => {
await insertBlock( BLOCK_NAME );
Expand Down

0 comments on commit ccb5cda

Please sign in to comment.