Skip to content

Commit

Permalink
Adds Playwright, first tests and linting.
Browse files Browse the repository at this point in the history
This runs in your local database and is noisy! I'd rather run it with a separate database but that might be overkill, I don't know.
  • Loading branch information
tharsheblows committed Jul 29, 2024
1 parent 973f2a9 commit b697b43
Show file tree
Hide file tree
Showing 8 changed files with 2,286 additions and 26 deletions.
6 changes: 5 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,9 @@
"camelcase": "off",
"no-alert": "off",
"vars-on-top": "warn"
}
},
"ignorePatterns": [
"e2e/*",
"playwright.config.js"
]
}
8 changes: 8 additions & 0 deletions .eslintrc.playwright.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"env": {
"browser": true
},
"extends": [
"plugin:@wordpress/eslint-plugin/esnext"
]
}
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,7 @@ alerts/js/*.min.js

# Generated test data
tests/data/tmp/*
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
2 changes: 1 addition & 1 deletion .vscode/extensions.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
"recommendations": [
"EditorConfig.EditorConfig",
"felixfbecker.php-debug",
"ikappas.phpcs"
"ms-playwright.playwright"
]
}
63 changes: 63 additions & 0 deletions e2e/editor-new-post.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { test, expect } from '@wordpress/e2e-test-utils-playwright';
import { v4 as uuidv4 } from 'uuid';

test.describe( 'Editor: saving a new post', () => {
let page, postTitle, postId;

test.beforeAll( async ( { browser } ) => {
page = await browser.newPage();

const uuid = uuidv4();
postTitle = `Test Post ${ uuid }`; // Sometimes this runs more than once within a microsecond so it's a UUID.

// eslint-disable-next-line no-console
console.log( `New post ${ postTitle }` );

// Even though we're using WP's npm package, it's more straightforward to do it this way, at least for me in this environment.
await page.goto( 'http://stream.wpenv.net/wp-login.php?redirect_to=http://stream.wpenv.net/wp-admin/post-new.php%2F&reauth=1' );
await page.getByLabel( 'Username or Email Address' ).fill( 'admin' );
await page.getByLabel( 'Password', { exact: true } ).fill( 'password' );
await page.getByRole( 'button', { name: 'Log In' } ).click();
await page.getByLabel( 'Add title' ).click();
await page.getByLabel( 'Add title' ).fill( postTitle );
await page.getByLabel( 'Add title' ).press( 'Tab' );
await page.getByLabel( 'Empty block; start writing or' ).fill( 'I\'m a test post' );
await page.getByRole( 'button', { name: 'Publish', exact: true } ).click();

postId = await page.locator( 'input#post_ID' ).inputValue();

// eslint-disable-next-line no-console
console.log( `Post ID: ${ postId }` );

// We need to wait for both of the editor responses! The post saves to the posts table then the metadata saves to postmeta.
await Promise.all( [
page.waitForResponse( ( resp ) => resp.url().includes( 'meta-box-loader' ) && resp.status() === 302 ),
page.waitForResponse( ( resp ) => resp.url().includes( `wp-json/wp/v2/posts/${ postId }` ) && resp.status() === 200 ),
page.getByLabel( 'Editor publish' ).getByRole( 'button', { name: 'Publish', exact: true } ).click(),
] );

// They are too much in the posts table so I'm deleting them.
await page.goto( 'http://stream.wpenv.net/wp-admin/edit.php?post_type=post' );
const listTable = page.getByRole( 'table', { name: 'Table ordered by' } );
await expect( listTable ).toBeVisible();

// Move post to trash.
await listTable.getByRole( 'link', { name: `“${ postTitle }” (Edit)` } ).hover();
await listTable.getByRole( 'link', { name: `Move “${ postTitle }” to the Trash` } ).click();

// Ok, we're all set up, let's go to our page.
await page.goto( 'http://stream.wpenv.net/wp-admin/admin.php?page=wp_stream' );
} );

// Do we have a published row?
test( 'has published row', async () => {
// Expects Stream log to have "Test Post" post published visible.
await expect( page.getByText( `"${ postTitle }" post published` ) ).toBeVisible();
} );

// We should not have an updated row. This times out which makes it fail.
test( 'does not have updated row', async () => {
// Expects Stream log to have "Test Post" post published visible.
await expect( page.getByText( `"${ postTitle }" post updated` ) ).not.toBeVisible();
} );
} );
Loading

0 comments on commit b697b43

Please sign in to comment.