Skip to content

Commit

Permalink
Font Library: Add upload font test (WordPress#60221)
Browse files Browse the repository at this point in the history 
* Add upload font test

* Use Exo 2 woff as test font

* Test uploading multiple fonts

* Update test/e2e/specs/site-editor/font-library.spec.js

Co-authored-by: Dave Smith <getdavemail@gmail.com>

* Update test/e2e/specs/site-editor/font-library.spec.js

Co-authored-by: Dave Smith <getdavemail@gmail.com>

* Add test for CSS rules

* Rename multiple fonts test case

* Add e2e plugin to delete fonts and the fonts directory

* Use delete fonts plugin in e2e tests and check for all uploaded font variations

* Fix coding standards

* Remove timeouts

* Remove step to go back to the Library tab

* Remove isVisible check, covered with click action

* Remove visible check for another element that is clicked

* Modify e2e fonts plugin to use a random directory and cleanup on plugin activation and deactivation

* Fix lint

* Move font management tests into separate describe block

---------

Co-authored-by: Dave Smith <getdavemail@gmail.com>
Co-authored-by: Grant Kinney <hi@grant.mk>
Co-authored-by: peterwilsoncc <peterwilsoncc@git.wordpress.org>
  • Loading branch information
@mikachan @getdave
@creativecoder @peterwilsoncc @cbravobernal
4 people authored and cbravobernal committed Apr 9, 2024
1 parent 3395a6d commit a57a7de
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 15 deletions.
68 changes: 68 additions & 0 deletions packages/e2e-tests/plugins/delete-installed-fonts.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<?php
/**
* Plugin Name: Gutenberg Test Delete Installed Fonts
* Plugin URI: https://github.com/WordPress/gutenberg
* Author: Gutenberg Team
*
* @package gutenberg-test-delete-installed-fonts
*/

/**
* Saves a randomly generated temporary font directory to use for e2e tests.
*/
function gutenberg_e2e_set_temp_font_dir() {
update_option( 'gutenberg_e2e_font_dir', '/e2e_fonts_' . wp_generate_uuid4() );
}
register_activation_hook( __FILE__, 'gutenberg_e2e_set_temp_font_dir' );

/**
* Uses the randomly generated font directory for the duration of the font tests.
*/
function gutenberg_filter_e2e_font_dir( $font_dir ) {
$subdir = get_option( 'gutenberg_e2e_font_dir' );

$font_dir['path'] .= $subdir;
$font_dir['url'] .= $subdir;
$font_dir['basedir'] .= $subdir;
$font_dir['baseurl'] .= $subdir;

return $font_dir;
}
add_filter( 'font_dir', 'gutenberg_filter_e2e_font_dir' );

/**
* Deletes all user installed fonts, associated font files, the fonts directory, and user global styles typography
* setings for the current theme so that we can test uploading/installing fonts in a clean environment.
*/
function gutenberg_delete_installed_fonts() {
$font_family_ids = new WP_Query(
array(
'post_type' => 'wp_font_family',
'posts_per_page' => -1,
'fields' => 'ids',
)
);

// Delete all font families, their child font faces, and associated font files.
foreach ( $font_family_ids->posts as $font_family_id ) {
wp_delete_post( $font_family_id, true );
}

// Delete the font directory, which should now be empty.
$font_path = wp_get_font_dir()['path'];

if ( is_dir( $font_path ) ) {
rmdir( $font_path );
}

// Delete any installed fonts from global styles.
$global_styles_post_id = WP_Theme_JSON_Resolver::get_user_global_styles_post_id();
$request = new WP_REST_Request( 'POST', '/wp/v2/global-styles/' . $global_styles_post_id );
$request->set_body_params( array( 'settings' => array( 'typography' => array( 'fontFamilies' => array() ) ) ) );

rest_do_request( $request );
}

// Clean up fonts on plugin activation and deactivation.
register_activation_hook( __FILE__, 'gutenberg_delete_installed_fonts' );
register_deactivation_hook( __FILE__, 'gutenberg_delete_installed_fonts' );
Binary file added test/e2e/assets/Exo2-Regular.woff
View file
Binary file not shown.
Binary file added test/e2e/assets/Exo2-SemiBoldItalic.woff2
View file
Binary file not shown.
121 changes: 106 additions & 15 deletions test/e2e/specs/site-editor/font-library.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ test.describe( 'Font Library', () => {
} );

test( 'should display the "Manage Fonts" icon', async ( { page } ) => {
await page.getByRole( 'button', { name: /styles/i } ).click();
await page.getByRole( 'button', { name: 'Styles' } ).click();
await page
.getByRole( 'button', { name: /typography styles/i } )
.getByRole( 'button', { name: 'Typography Styles' } )
.click();
const manageFontsIcon = page.getByRole( 'button', {
name: /manage fonts/i,
name: 'Manage Fonts',
} );
await expect( manageFontsIcon ).toBeVisible();
} );
Expand All @@ -37,26 +37,26 @@ test.describe( 'Font Library', () => {
} );

test( 'should display the "Manage Fonts" icon', async ( { page } ) => {
await page.getByRole( 'button', { name: /styles/i } ).click();
await page.getByRole( 'button', { name: 'Styles' } ).click();
await page
.getByRole( 'button', { name: /typography styles/i } )
.getByRole( 'button', { name: 'Typography Styles' } )
.click();
const manageFontsIcon = page.getByRole( 'button', {
name: /manage fonts/i,
name: 'Manage Fonts',
} );
await expect( manageFontsIcon ).toBeVisible();
} );

test( 'should open the "Manage Fonts" modal when clicking the "Manage Fonts" icon', async ( {
page,
} ) => {
await page.getByRole( 'button', { name: /styles/i } ).click();
await page.getByRole( 'button', { name: 'Styles' } ).click();
await page
.getByRole( 'button', { name: /typography styles/i } )
.getByRole( 'button', { name: 'Typography Styles' } )
.click();
await page
.getByRole( 'button', {
name: /manage fonts/i,
name: 'Manage Fonts',
} )
.click();
await expect( page.getByRole( 'dialog' ) ).toBeVisible();
Expand All @@ -68,21 +68,112 @@ test.describe( 'Font Library', () => {
test( 'should show font variant panel when clicking on a font family', async ( {
page,
} ) => {
await page.getByRole( 'button', { name: /styles/i } ).click();
await page.getByRole( 'button', { name: 'Styles' } ).click();
await page
.getByRole( 'button', { name: 'Typography Styles' } )
.click();
await page
.getByRole( 'button', {
name: 'Manage Fonts',
} )
.click();
await page.getByRole( 'button', { name: 'System Font' } ).click();
await expect(
page.getByRole( 'heading', { name: 'System Font' } )
).toBeVisible();
await expect(
page.getByRole( 'checkbox', { name: 'System Font Normal' } )
).toBeVisible();
} );
} );

test.describe( 'When a user manages custom fonts via the UI', () => {
test.beforeAll( async ( { requestUtils } ) => {
await requestUtils.activateTheme( 'emptytheme' );
/*
* Delete all installed fonts, font files, the fonts directory, and user font settings
* in global styles for the active theme before and after starting the tests.
*/
await requestUtils.activatePlugin(
'gutenberg-test-delete-installed-fonts'
);
} );

test.afterAll( async ( { requestUtils } ) => {
await requestUtils.deactivatePlugin(
'gutenberg-test-delete-installed-fonts'
);
} );

test.beforeEach( async ( { admin, editor } ) => {
await admin.visitSiteEditor();
await editor.canvas.locator( 'body' ).click();
} );

test( 'should allow user to add and remove multiple local font files', async ( {
page,
editor,
} ) => {
await page.getByRole( 'button', { name: 'Styles' } ).click();
await page
.getByRole( 'button', { name: /typography styles/i } )
.getByRole( 'button', { name: 'Typography Styles' } )
.click();
await page
.getByRole( 'button', {
name: /manage fonts/i,
name: 'Manage Fonts',
} )
.click();
await page.getByRole( 'button', { name: /system font/i } ).click();

// Upload local fonts.
await page.getByRole( 'tab', { name: 'Upload' } ).click();
const fileChooserPromise = page.waitForEvent( 'filechooser' );
await page.getByRole( 'button', { name: 'Upload Font' } ).click();
const fileChooser = await fileChooserPromise;
// Provides coverage for https://github.com/WordPress/gutenberg/issues/59023.
await fileChooser.setFiles( [
'./test/e2e/assets/Exo2-Regular.woff',
'./test/e2e/assets/Exo2-SemiBoldItalic.woff2',
] );

// Check fonts were installed.
await expect(
page.getByRole( 'heading', { name: /system font/i } )
page
.getByLabel( 'Upload' )
.getByText( 'Fonts were installed successfully.' )
).toBeVisible();
await page.getByRole( 'tab', { name: 'Library' } ).click();
// Provides coverage for https://github.com/WordPress/gutenberg/issues/60040.
await page.getByRole( 'button', { name: 'Exo 2' } ).click();
await expect( page.getByLabel( 'Exo 2 Normal' ) ).toBeVisible();
await expect(
page.getByLabel( 'Exo 2 Semi-bold Italic' )
).toBeVisible();

// Check CSS preset was created.
await page.getByRole( 'button', { name: 'Close' } ).click();
await page
.getByRole( 'button', { name: 'Typography Headings styles' } )
.click();
await page.getByLabel( 'Font' ).selectOption( 'Exo 2' );
await expect(
editor.canvas.locator( '.is-root-container h1' )
).toHaveCSS( 'font-family', '"Exo 2"' );

// Check fonts can be uninstalled.
await page.getByRole( 'button', { name: 'Back' } ).click();
await page
.getByRole( 'button', {
name: 'Manage Fonts',
} )
.click();

await page.getByRole( 'button', { name: 'Exo 2' } ).click();
await page.getByRole( 'button', { name: 'Delete' } ).click();
await page.getByRole( 'button', { name: 'Delete' } ).click();
await expect(
page.getByRole( 'checkbox', { name: /system font normal/i } )
page
.getByLabel( 'Library' )
.getByText( 'Font family uninstalled successfully.' )
).toBeVisible();
} );
} );
Expand Down

0 comments on commit a57a7de

Please sign in to comment.