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.

Sign up for GitHub

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

Font Library: Add upload font test #60221

Merged
merged 17 commits into from
Mar 28, 2024
Merged

Font Library: Add upload font test #60221

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
6c3c85d
Add upload font test
mikachan Mar 26, 2024
612c540
Use Exo 2 woff as test font
mikachan Mar 27, 2024
14c419c
Test uploading multiple fonts
mikachan Mar 27, 2024
c9b8a1e
Update test/e2e/specs/site-editor/font-library.spec.js
mikachan Mar 27, 2024
7546a06
Update test/e2e/specs/site-editor/font-library.spec.js
mikachan Mar 27, 2024
5677dbe
Add test for CSS rules
mikachan Mar 27, 2024
5089b36
Rename multiple fonts test case
mikachan Mar 27, 2024
ca4606b
Add e2e plugin to delete fonts and the fonts directory
creativecoder Mar 27, 2024
dd90c38
Use delete fonts plugin in e2e tests and check for all uploaded font …
creativecoder Mar 27, 2024
be75bfa
Fix coding standards
creativecoder Mar 27, 2024
8b58239
Remove timeouts
mikachan Mar 27, 2024
c89457c
Remove step to go back to the Library tab
mikachan Mar 27, 2024
cd9d86c
Remove isVisible check, covered with click action
mikachan Mar 27, 2024
43f96b4
Remove visible check for another element that is clicked
mikachan Mar 27, 2024
f38f4f6
Modify e2e fonts plugin to use a random directory and cleanup on plug…
creativecoder Mar 28, 2024
871d17c
Fix lint
getdave Mar 28, 2024
b81f7b7
Move font management tests into separate describe block
mikachan Mar 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added test/e2e/assets/Exo2-Regular.woff
View file
Open in desktop
Binary file not shown.
Binary file added test/e2e/assets/Exo2-SemiBoldItalic.woff2
View file
Open in desktop
Binary file not shown.
81 changes: 66 additions & 15 deletions test/e2e/specs/site-editor/font-library.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,66 @@ 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 allow user to upload a local font', async ( {
page,
} ) => {
getdave marked this conversation as resolved.
Show resolved Hide resolved
await page.getByRole( 'button', { name: 'Styles' } ).click();
await page
.getByRole( 'button', { name: 'Typography Styles' } )
.click();
await page
.getByRole( 'button', {
name: 'Manage Fonts',
} )
.click();

// Delete test font family (Exo 2) if it exists
await expect(
page.getByRole( 'tab', { name: 'Upload' } )
).toBeVisible( { timeout: 80000 } );

if (
await page.getByRole( 'button', { name: 'Exo 2' } ).isVisible()
) {
await page.getByRole( 'button', { name: 'Exo 2' } ).click();
await page.getByRole( 'button', { name: 'Delete' } ).click();
await page.getByRole( 'button', { name: 'Delete' } ).click();
await page.getByRole( 'tab', { name: 'Library' } ).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( [
mikachan marked this conversation as resolved.
Show resolved Hide resolved
'./test/e2e/assets/Exo2-Regular.woff',
'./test/e2e/assets/Exo2-SemiBoldItalic.woff2',
] );

// Check fonts were installed
await expect(
page
.getByLabel( 'Upload' )
.getByText( 'Fonts were installed successfully.' )
).toBeVisible( { timeout: 40000 } );
await page.getByRole( 'tab', { name: 'Library' } ).click();
// Provides coverage for https://github.com/WordPress/gutenberg/issues/60040.
getdave marked this conversation as resolved.
Show resolved Hide resolved
await expect(
page.getByRole( 'button', { name: 'Exo 2' } )
).toBeVisible();
mikachan marked this conversation as resolved.
Show resolved Hide resolved
} );
} );

test.describe( 'When a theme with bundled fonts is active', () => {
Expand All @@ -37,26 +88,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 +119,21 @@ 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/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();
await page.getByRole( 'button', { name: 'System Font' } ).click();
await expect(
page.getByRole( 'heading', { name: /system font/i } )
page.getByRole( 'heading', { name: 'System Font' } )
).toBeVisible();
await expect(
page.getByRole( 'checkbox', { name: /system font normal/i } )
page.getByRole( 'checkbox', { name: 'System Font Normal' } )
).toBeVisible();
} );
} );
Expand Down
Loading