Skip to content

Commit 286fc06

Browse files
ryanwelcherryanwelcher
committed
Add e2e tests for enable caching feature
1 parent aaed952 commit 286fc06

1 file changed

Lines changed: 310 additions & 0 deletions

File tree

‎tests/e2e/tests/enable-caching.spec.ts‎

Lines changed: 310 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
1+
/**
2+
* Import our custom test fixtures.
3+
*/
4+
import { test, expect } from '../aql-fixtures';
5+
6+
/**
7+
* Internal dependencies.
8+
*/
9+
import { insertAQL } from '../utils';
10+
11+
/**
12+
* Opens the AQL Performance Controls panel options menu and selects
13+
* the Caching item so the toggle becomes visible in the panel.
14+
*/
15+
const addCachingControl = async ( page ) => {
16+
await page
17+
.getByRole( 'button', { name: 'AQL: Performance Controls options' } )
18+
.click();
19+
await page.getByRole( 'menuitemcheckbox', { name: 'Caching' } ).click();
20+
await page.keyboard.press( 'Escape' );
21+
};
22+
23+
test.describe( 'Enable Caching toggle', () => {
24+
test.beforeEach( async ( { page, editor, playground, admin } ) => {
25+
await playground.init( { page, editor } );
26+
await admin.visitAdminPage( 'post-new.php' );
27+
28+
await editor.setPreferences( 'core/edit-post', {
29+
welcomeGuide: false,
30+
fullscreenMode: false,
31+
} );
32+
await insertAQL( { editor, page } );
33+
} );
34+
35+
test.afterEach( async ( { playground } ) => {
36+
await playground.cleanUp();
37+
} );
38+
39+
test( 'AQL: Performance Controls panel is visible', async ( { page } ) => {
40+
await expect(
41+
page.getByText( 'AQL: Performance Controls' )
42+
).toBeVisible();
43+
} );
44+
45+
test( 'Caching control can be added from the panel options menu', async ( {
46+
page,
47+
} ) => {
48+
await addCachingControl( page );
49+
50+
await expect(
51+
page.getByRole( 'checkbox', {
52+
name: 'Enable Caching for this query',
53+
} )
54+
).toBeVisible();
55+
56+
await expect(
57+
page.getByRole( 'checkbox', {
58+
name: 'Enable Caching for this query',
59+
} )
60+
).not.toBeChecked();
61+
} );
62+
63+
test( 'Enabling caching sets the attribute to true', async ( {
64+
page,
65+
editor,
66+
} ) => {
67+
await addCachingControl( page );
68+
69+
await page
70+
.getByRole( 'checkbox', { name: 'Enable Caching for this query' } )
71+
.click();
72+
73+
await expect(
74+
page.getByRole( 'checkbox', {
75+
name: 'Enable Caching for this query',
76+
} )
77+
).toBeChecked();
78+
79+
const blocks = await editor.getBlocks();
80+
expect( blocks[ 0 ].attributes.query.enable_caching ).toEqual( true );
81+
} );
82+
83+
test( 'Disabling caching sets the attribute to false', async ( {
84+
page,
85+
editor,
86+
} ) => {
87+
await addCachingControl( page );
88+
89+
// Toggle on then off.
90+
await page
91+
.getByRole( 'checkbox', { name: 'Enable Caching for this query' } )
92+
.click();
93+
await page
94+
.getByRole( 'checkbox', { name: 'Enable Caching for this query' } )
95+
.click();
96+
97+
await expect(
98+
page.getByRole( 'checkbox', {
99+
name: 'Enable Caching for this query',
100+
} )
101+
).not.toBeChecked();
102+
103+
const blocks = await editor.getBlocks();
104+
expect( blocks[ 0 ].attributes.query.enable_caching ).toEqual( false );
105+
} );
106+
107+
test( 'Reset All clears the enable_caching attribute', async ( {
108+
page,
109+
editor,
110+
} ) => {
111+
await addCachingControl( page );
112+
113+
// Enable caching.
114+
await page
115+
.getByRole( 'checkbox', { name: 'Enable Caching for this query' } )
116+
.click();
117+
118+
let blocks = await editor.getBlocks();
119+
expect( blocks[ 0 ].attributes.query.enable_caching ).toEqual( true );
120+
121+
// Use the panel's Reset All option.
122+
await page
123+
.getByRole( 'button', { name: 'AQL: Performance Controls options' } )
124+
.click();
125+
await page.getByRole( 'menuitem', { name: 'Reset all' } ).click();
126+
127+
blocks = await editor.getBlocks();
128+
expect( blocks[ 0 ].attributes.query.enable_caching ).toEqual( false );
129+
} );
130+
131+
test( 'Caching toggle is disabled when order is set to Random', async ( {
132+
page,
133+
} ) => {
134+
await addCachingControl( page );
135+
136+
await page.getByLabel( 'Post Order By' ).selectOption( 'rand' );
137+
138+
await expect(
139+
page.getByRole( 'checkbox', {
140+
name: 'Enable Caching for this query',
141+
} )
142+
).toBeDisabled();
143+
} );
144+
145+
test( 'Switching to Random order clears enable_caching', async ( {
146+
page,
147+
editor,
148+
} ) => {
149+
await addCachingControl( page );
150+
151+
// Enable caching first.
152+
await page
153+
.getByRole( 'checkbox', { name: 'Enable Caching for this query' } )
154+
.click();
155+
156+
let blocks = await editor.getBlocks();
157+
expect( blocks[ 0 ].attributes.query.enable_caching ).toEqual( true );
158+
159+
// Switch to Random order.
160+
await page.getByLabel( 'Post Order By' ).selectOption( 'rand' );
161+
162+
// Attribute must be cleared.
163+
blocks = await editor.getBlocks();
164+
expect( blocks[ 0 ].attributes.query.enable_caching ).toEqual( false );
165+
166+
// Toggle must be disabled.
167+
await expect(
168+
page.getByRole( 'checkbox', {
169+
name: 'Enable Caching for this query',
170+
} )
171+
).toBeDisabled();
172+
} );
173+
174+
test( 'Switching away from Random order re-enables the caching toggle', async ( {
175+
page,
176+
} ) => {
177+
await addCachingControl( page );
178+
179+
// Go to Random first.
180+
await page.getByLabel( 'Post Order By' ).selectOption( 'rand' );
181+
182+
await expect(
183+
page.getByRole( 'checkbox', {
184+
name: 'Enable Caching for this query',
185+
} )
186+
).toBeDisabled();
187+
188+
// Switch to a non-random order.
189+
await page.getByLabel( 'Post Order By' ).selectOption( 'date' );
190+
191+
await expect(
192+
page.getByRole( 'checkbox', {
193+
name: 'Enable Caching for this query',
194+
} )
195+
).toBeEnabled();
196+
197+
await expect(
198+
page.getByRole( 'checkbox', {
199+
name: 'Enable Caching for this query',
200+
} )
201+
).not.toBeChecked();
202+
} );
203+
} );
204+
205+
test.describe( 'Enable Caching - Frontend Rendering', () => {
206+
test.beforeEach( async ( { page, editor, playground } ) => {
207+
await playground.init( { page, editor } );
208+
} );
209+
210+
test.afterEach( async ( { playground } ) => {
211+
await playground.cleanUp();
212+
} );
213+
214+
test( 'Page renders correctly with caching enabled', async ( {
215+
page,
216+
editor,
217+
admin,
218+
} ) => {
219+
test.setTimeout( 60000 );
220+
221+
await admin.visitAdminPage( 'post-new.php' );
222+
223+
await editor.setPreferences( 'core/edit-post', {
224+
welcomeGuide: false,
225+
fullscreenMode: false,
226+
} );
227+
228+
await insertAQL( { editor, page } );
229+
230+
await addCachingControl( page );
231+
232+
await page
233+
.getByRole( 'checkbox', { name: 'Enable Caching for this query' } )
234+
.click();
235+
236+
await expect(
237+
page.getByRole( 'checkbox', {
238+
name: 'Enable Caching for this query',
239+
} )
240+
).toBeChecked();
241+
242+
await editor.publishPost();
243+
244+
const postUrl = await page
245+
.locator( '.post-publish-panel__postpublish-buttons a' )
246+
.first()
247+
.getAttribute( 'href' );
248+
249+
expect( postUrl ).toBeTruthy();
250+
251+
await page.goto( postUrl! );
252+
await page.waitForLoadState( 'networkidle' );
253+
254+
// The query loop should render with posts visible.
255+
const queryLoop = page.locator( '.wp-block-query' ).first();
256+
await expect( queryLoop ).toBeVisible();
257+
await expect( queryLoop.locator( '.wp-block-post-title' ).first() ).toBeVisible();
258+
} );
259+
260+
test( 'Repeated loads of a cached page return consistent results', async ( {
261+
page,
262+
editor,
263+
admin,
264+
} ) => {
265+
test.setTimeout( 60000 );
266+
267+
await admin.visitAdminPage( 'post-new.php' );
268+
269+
await editor.setPreferences( 'core/edit-post', {
270+
welcomeGuide: false,
271+
fullscreenMode: false,
272+
} );
273+
274+
await insertAQL( { editor, page } );
275+
await addCachingControl( page );
276+
277+
await page
278+
.getByRole( 'checkbox', { name: 'Enable Caching for this query' } )
279+
.click();
280+
281+
await editor.publishPost();
282+
283+
const postUrl = await page
284+
.locator( '.post-publish-panel__postpublish-buttons a' )
285+
.first()
286+
.getAttribute( 'href' );
287+
288+
expect( postUrl ).toBeTruthy();
289+
290+
// First visit primes the cache.
291+
await page.goto( postUrl! );
292+
await page.waitForLoadState( 'networkidle' );
293+
294+
const firstLoadTitles = await page
295+
.locator( '.wp-block-query .wp-block-post-title' )
296+
.allTextContents();
297+
298+
// Second visit should serve from cache.
299+
await page.goto( postUrl! );
300+
await page.waitForLoadState( 'networkidle' );
301+
302+
const secondLoadTitles = await page
303+
.locator( '.wp-block-query .wp-block-post-title' )
304+
.allTextContents();
305+
306+
// Both loads must return the same posts in the same order.
307+
expect( secondLoadTitles ).toEqual( firstLoadTitles );
308+
expect( firstLoadTitles.length ).toBeGreaterThan( 0 );
309+
} );
310+
} );

0 commit comments

Comments
 (0)