Skip to content

Commit 36fc4f5

Browse files
authored
Merge pull request #256 from newfold-labs/enhance/cypress-mirage-polish
Add Cypress Tests for Cloudflare Mirage, Polish and Fonts
2 parents 9418d35 + a26550a commit 36fc4f5

File tree

5 files changed

+424
-0
lines changed

5 files changed

+424
-0
lines changed
Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
// <reference types="Cypress" />
2+
import PerformancePage from '../support/pageObjects/performancePage';
3+
import {
4+
setSiteCapabilities,
5+
clearSiteCapabilities,
6+
clearFontOptimizationOption,
7+
assertHtaccessHasRule,
8+
assertHtaccessHasNoRule,
9+
} from '../support/serverHelpers';
10+
11+
describe(
12+
'Cloudflare Font Optimization Toggle',
13+
{ testIsolation: true },
14+
() => {
15+
const performancePageLocators = new PerformancePage();
16+
17+
beforeEach( () => {
18+
cy.login(
19+
Cypress.env( 'wpUsername' ),
20+
Cypress.env( 'wpPassword' )
21+
);
22+
clearFontOptimizationOption();
23+
cy.setPermalinkStructure();
24+
} );
25+
26+
it( 'Shows Font Optimization section when capability is true and toggle is enabled', () => {
27+
// Visit the performance page to set the initial capabilities
28+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
29+
cy.get( '#nfd-performance', { timeout: 10000 } ).should(
30+
'be.visible'
31+
);
32+
33+
setSiteCapabilities( { hasCloudflareFonts: true } );
34+
cy.reload();
35+
36+
performancePageLocators.getFontToggle().should( 'exist' );
37+
performancePageLocators
38+
.getFontToggle()
39+
.should( 'have.attr', 'aria-checked', 'true' )
40+
.click()
41+
.should( 'have.attr', 'aria-checked', 'false' );
42+
} );
43+
44+
it( 'Does not show Font Optimization section when capability is false', () => {
45+
setSiteCapabilities( { hasCloudflareFonts: false } );
46+
47+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
48+
cy.get( '#nfd-performance', { timeout: 10000 } ).should(
49+
'be.visible'
50+
);
51+
52+
performancePageLocators.getFontToggle().should( 'not.exist' );
53+
} );
54+
55+
it( 'Writes correct rewrite rules to .htaccess when Font Optimization is enabled', () => {
56+
setSiteCapabilities( { hasCloudflareFonts: true } );
57+
58+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
59+
60+
performancePageLocators
61+
.getFontToggle()
62+
.should( 'exist' )
63+
.and( 'have.attr', 'aria-checked', 'true' );
64+
65+
assertHtaccessHasRule( '04d3b602' );
66+
} );
67+
68+
it( 'Toggles Font Optimization on/off and updates .htaccess accordingly', () => {
69+
setSiteCapabilities( { hasCloudflareFonts: true } );
70+
71+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
72+
73+
performancePageLocators
74+
.getFontToggle()
75+
.should( 'exist' )
76+
.and( 'have.attr', 'aria-checked', 'true' );
77+
78+
assertHtaccessHasRule( '04d3b602' );
79+
80+
// Toggle OFF
81+
performancePageLocators
82+
.getFontToggle()
83+
.click()
84+
.should( 'have.attr', 'aria-checked', 'false' );
85+
86+
assertHtaccessHasNoRule( '04d3b602' );
87+
88+
// Toggle ON again
89+
performancePageLocators
90+
.getFontToggle()
91+
.click()
92+
.should( 'have.attr', 'aria-checked', 'true' );
93+
94+
assertHtaccessHasRule( '04d3b602' );
95+
} );
96+
97+
after( () => {
98+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
99+
100+
cy.get( 'body' ).then( ( $body ) => {
101+
if ( $body.find( '[data-id="cloudflare-fonts"]' ).length > 0 ) {
102+
performancePageLocators
103+
.getFontToggle()
104+
.then( ( $toggle ) => {
105+
if ( $toggle.attr( 'aria-checked' ) === 'true' ) {
106+
cy.wrap( $toggle )
107+
.click()
108+
.should(
109+
'have.attr',
110+
'aria-checked',
111+
'false'
112+
);
113+
}
114+
} );
115+
}
116+
} );
117+
118+
clearFontOptimizationOption();
119+
clearSiteCapabilities();
120+
} );
121+
}
122+
);
Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
// <reference types="Cypress" />
2+
import PerformancePage from '../support/pageObjects/performancePage';
3+
import {
4+
clearImageOptimizationOption,
5+
setSiteCapabilities,
6+
clearSiteCapabilities,
7+
assertHtaccessHasRule,
8+
assertHtaccessHasNoRule,
9+
} from '../support/serverHelpers';
10+
11+
describe( 'Cloudflare Mirage Toggle', { testIsolation: true }, () => {
12+
const performancePageLocators = new PerformancePage();
13+
14+
beforeEach( () => {
15+
cy.login( Cypress.env( 'wpUsername' ), Cypress.env( 'wpPassword' ) );
16+
clearImageOptimizationOption();
17+
cy.setPermalinkStructure();
18+
} );
19+
20+
it( 'Shows Mirage section when capability is true and toggle is enabled', () => {
21+
setSiteCapabilities( { hasCloudflareMirage: true } );
22+
23+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
24+
cy.get( '#nfd-performance', { timeout: 10000 } ).should( 'be.visible' );
25+
26+
performancePageLocators.getMirageToggle().should( 'exist' );
27+
performancePageLocators
28+
.getMirageToggle()
29+
.should( 'have.attr', 'aria-checked', 'true' )
30+
.click()
31+
.should( 'have.attr', 'aria-checked', 'false' );
32+
} );
33+
34+
it( 'Does not show Mirage section when capability is false', () => {
35+
setSiteCapabilities( { hasCloudflareMirage: false } );
36+
37+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
38+
cy.get( '#nfd-performance', { timeout: 10000 } ).should( 'be.visible' );
39+
40+
performancePageLocators.getMirageToggle().should( 'not.exist' );
41+
} );
42+
43+
it( 'Writes correct rewrite rules to .htaccess when Mirage is enabled', () => {
44+
setSiteCapabilities( { hasCloudflareMirage: true } );
45+
46+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
47+
48+
performancePageLocators
49+
.getMirageToggle()
50+
.should( 'exist' )
51+
.and( 'have.attr', 'aria-checked', 'true' );
52+
53+
assertHtaccessHasRule( '63a6825d' );
54+
} );
55+
56+
it( 'Toggles Mirage on/off and updates .htaccess accordingly', () => {
57+
setSiteCapabilities( { hasCloudflareMirage: true } );
58+
59+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
60+
61+
performancePageLocators
62+
.getMirageToggle()
63+
.should( 'exist' )
64+
.and( 'have.attr', 'aria-checked', 'true' );
65+
66+
assertHtaccessHasRule( '63a6825d' );
67+
68+
// Toggle OFF
69+
performancePageLocators
70+
.getMirageToggle()
71+
.click()
72+
.should( 'have.attr', 'aria-checked', 'false' );
73+
74+
assertHtaccessHasNoRule( '63a6825d' );
75+
76+
// Toggle ON again
77+
performancePageLocators
78+
.getMirageToggle()
79+
.click()
80+
.should( 'have.attr', 'aria-checked', 'true' );
81+
82+
assertHtaccessHasRule( '63a6825d' );
83+
} );
84+
85+
after( () => {
86+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
87+
88+
cy.get( 'body' ).then( ( $body ) => {
89+
if ( $body.find( '[data-id="cloudflare-mirage"]' ).length > 0 ) {
90+
performancePageLocators.getMirageToggle().then( ( $toggle ) => {
91+
if ( $toggle.attr( 'aria-checked' ) === 'true' ) {
92+
cy.wrap( $toggle )
93+
.click()
94+
.should( 'have.attr', 'aria-checked', 'false' );
95+
}
96+
} );
97+
}
98+
} );
99+
100+
clearImageOptimizationOption();
101+
clearSiteCapabilities();
102+
} );
103+
} );
Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
// <reference types="Cypress" />
2+
import PerformancePage from '../support/pageObjects/performancePage';
3+
import {
4+
clearImageOptimizationOption,
5+
setSiteCapabilities,
6+
clearSiteCapabilities,
7+
assertHtaccessHasRule,
8+
assertHtaccessHasNoRule,
9+
} from '../support/serverHelpers';
10+
11+
describe( 'Cloudflare Polish Toggle', { testIsolation: true }, () => {
12+
const performancePageLocators = new PerformancePage();
13+
14+
beforeEach( () => {
15+
cy.login( Cypress.env( 'wpUsername' ), Cypress.env( 'wpPassword' ) );
16+
clearImageOptimizationOption();
17+
cy.setPermalinkStructure();
18+
} );
19+
20+
it( 'Shows Polish section when capability is true and toggle is enabled', () => {
21+
setSiteCapabilities( { hasCloudflarePolish: true } );
22+
23+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
24+
cy.get( '#nfd-performance', { timeout: 10000 } ).should( 'be.visible' );
25+
26+
performancePageLocators.getPolishToggle().should( 'exist' );
27+
performancePageLocators
28+
.getPolishToggle()
29+
.should( 'have.attr', 'aria-checked', 'true' )
30+
.click()
31+
.should( 'have.attr', 'aria-checked', 'false' );
32+
} );
33+
34+
it( 'Does not show Polish section when capability is false', () => {
35+
setSiteCapabilities( { hasCloudflarePolish: false } );
36+
37+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
38+
cy.get( '#nfd-performance', { timeout: 10000 } ).should( 'be.visible' );
39+
40+
performancePageLocators.getPolishToggle().should( 'not.exist' );
41+
} );
42+
43+
it( 'Writes correct rewrite rules to .htaccess when Polish is enabled', () => {
44+
setSiteCapabilities( { hasCloudflarePolish: true } );
45+
46+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
47+
48+
performancePageLocators
49+
.getPolishToggle()
50+
.should( 'exist' )
51+
.and( 'have.attr', 'aria-checked', 'true' );
52+
53+
assertHtaccessHasRule( '27cab0f2' );
54+
} );
55+
56+
it( 'Toggles Polish on/off and updates .htaccess accordingly', () => {
57+
setSiteCapabilities( { hasCloudflarePolish: true } );
58+
59+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
60+
61+
performancePageLocators
62+
.getPolishToggle()
63+
.should( 'exist' )
64+
.and( 'have.attr', 'aria-checked', 'true' );
65+
66+
assertHtaccessHasRule( '27cab0f2' );
67+
68+
performancePageLocators
69+
.getPolishToggle()
70+
.click()
71+
.should( 'have.attr', 'aria-checked', 'false' );
72+
73+
assertHtaccessHasNoRule( '27cab0f2' );
74+
75+
performancePageLocators
76+
.getPolishToggle()
77+
.click()
78+
.should( 'have.attr', 'aria-checked', 'true' );
79+
80+
assertHtaccessHasRule( '27cab0f2' );
81+
} );
82+
83+
after( () => {
84+
cy.visit( '/wp-admin/admin.php?page=nfd-performance' );
85+
86+
cy.get( 'body' ).then( ( $body ) => {
87+
if ( $body.find( '[data-id="cloudflare-polish"]' ).length > 0 ) {
88+
performancePageLocators.getPolishToggle().then( ( $toggle ) => {
89+
if ( $toggle.attr( 'aria-checked' ) === 'true' ) {
90+
cy.wrap( $toggle )
91+
.click()
92+
.should( 'have.attr', 'aria-checked', 'false' );
93+
}
94+
} );
95+
}
96+
} );
97+
98+
clearImageOptimizationOption();
99+
clearSiteCapabilities();
100+
} );
101+
} );

tests/cypress/support/pageObjects/performancePage.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,43 @@ class performancePage {
5353
getListItems() {
5454
return cy.get( 'ul.nfd-select__options > li' );
5555
}
56+
57+
getMirageToggle() {
58+
return cy.get( '[data-id="cloudflare-mirage"]' );
59+
}
60+
61+
enableMirageToggle() {
62+
this.getMirageToggle().then( ( $el ) => {
63+
if ( $el.attr( 'aria-checked' ) === 'false' ) {
64+
cy.wrap( $el ).click();
65+
}
66+
} );
67+
this.getMirageToggle().should( 'have.attr', 'aria-checked', 'true' );
68+
}
69+
70+
disableMirageToggle() {
71+
this.getMirageToggle().then( ( $el ) => {
72+
if ( $el.attr( 'aria-checked' ) === 'true' ) {
73+
cy.wrap( $el ).click();
74+
}
75+
} );
76+
this.getMirageToggle().should( 'have.attr', 'aria-checked', 'false' );
77+
}
78+
79+
assertMirageToggle( expectedState = 'true' ) {
80+
this.getMirageToggle()
81+
.should( 'exist' )
82+
.and( 'have.attr', 'aria-checked', expectedState );
83+
}
84+
85+
getFontToggle() {
86+
return cy.get( '[data-id="cloudflare-fonts"]' );
87+
}
88+
89+
getPolishToggle() {
90+
return cy.get( '[data-id="cloudflare-polish"]' );
91+
}
92+
5693
interceptRequest( method, url, alias ) {
5794
cy.intercept( method, url ).as( alias );
5895
}

0 commit comments

Comments
 (0)