Skip to content

Commit 2ffa67b

Browse files
HardeepAsraniHardeepAsrani
committed
chore: move e2e tests
1 parent b9876a3 commit 2ffa67b

File tree

2 files changed

+218
-0
lines changed

2 files changed

+218
-0
lines changed

‎e2e-tests/fixtures/customizer/scroll-to-top/scroll-to-top-setup.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"general": {
3+
"neve_scroll_to_top_side": "left",
4+
"neve_scroll_to_top_label": "Go up",
5+
"neve_scroll_to_top_offset": 100,
6+
"neve_scroll_to_top_padding": {
7+
"desktop": { "top": 10, "right": 12, "bottom": 10, "left": 12 },
8+
"tablet": { "top": 6, "right": 8, "bottom": 6, "left": 8 },
9+
"mobile": { "top": 10, "right": 12, "bottom": 10, "left": 12 },
10+
"desktop-unit": "px",
11+
"tablet-unit": "px",
12+
"mobile-unit": "px"
13+
},
14+
"neve_scroll_to_top_border_radius": 100,
15+
"neve_scroll_to_top_icon_color": "#ff0000",
16+
"neve_scroll_to_top_icon_hover_color": "#ff0000",
17+
"neve_scroll_to_top_background_color": "#ffffff",
18+
"neve_scroll_to_top_background_hover_color": "#ffffff",
19+
"neve_scroll_to_top_type": "icon",
20+
"neve_scroll_to_top_image": 0,
21+
"neve_scroll_to_top_on_mobile": false
22+
},
23+
"icon-check": {
24+
"neve_scroll_to_top_side": "left",
25+
"neve_scroll_to_top_icon_size": "{ \"mobile\": \"100\", \"tablet\": \"50\", \"desktop\": \"100\" }",
26+
"neve_scroll_to_top_on_mobile": false
27+
}
28+
}

‎e2e-tests/specs/customizer/scroll-to-top/scroll-to-top.spec.ts‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
import { test, expect } from '@playwright/test';
2+
import { setCustomizeSettings, scrollTo, visitAdminPage } from '../../../utils';
3+
import data from '../../../fixtures/customizer/scroll-to-top/scroll-to-top-setup.json';
4+
5+
test.describe( 'Scroll to top', function () {
6+
test( 'Checks the position', async function ( { page, request, baseURL } ) {
7+
await setCustomizeSettings( 'stt-left', data.general, {
8+
request,
9+
baseURL,
10+
} );
11+
await page.goto( '/hello-world/?test_name=stt-left' );
12+
await scrollTo( page, 'bottom' );
13+
const scrollToTopBtn = await page.locator( '#scroll-to-top' );
14+
await expect( scrollToTopBtn ).toHaveCSS( 'left', '20px' );
15+
16+
await setCustomizeSettings(
17+
'stt-right',
18+
{ neve_scroll_to_top_side: 'right' },
19+
{
20+
request,
21+
baseURL,
22+
}
23+
);
24+
await page.goto( '/hello-world/?test_name=stt-right' );
25+
await scrollTo( page, 'bottom' );
26+
await expect( scrollToTopBtn ).toHaveCSS( 'right', '20px' );
27+
await scrollToTopBtn.click();
28+
await page.waitForTimeout( 2000 );
29+
const isAtTop = await page.evaluate( () => {
30+
return window.scrollY === 0;
31+
} );
32+
await expect( isAtTop ).toBeTruthy();
33+
} );
34+
35+
test( 'Checks scroll to top general settings', async function ( {
36+
page,
37+
request,
38+
baseURL,
39+
} ) {
40+
await setCustomizeSettings( 'stt-general', data.general, {
41+
request,
42+
baseURL,
43+
} );
44+
45+
await page.goto( '/hello-world/?test_name=stt-general' );
46+
const sttButton = await page.locator( '#scroll-to-top' );
47+
48+
// Checks label
49+
await page.evaluate( () => {
50+
window.scrollTo( 0, document.body.scrollHeight );
51+
} );
52+
await expect( sttButton ).toBeVisible();
53+
await expect(
54+
await sttButton.getByText( /Go up/ ).first()
55+
).toBeVisible();
56+
57+
// Checks offset
58+
await scrollTo( page, 80 );
59+
await page.waitForTimeout( 500 );
60+
await expect( sttButton ).not.toBeVisible();
61+
await scrollTo( page, 110 );
62+
await page.waitForTimeout( 500 );
63+
await expect( sttButton ).toBeVisible();
64+
65+
// Checks button padding
66+
await scrollTo( page, 'bottom' );
67+
await expect( sttButton ).toHaveCSS( 'padding', '10px 12px' );
68+
69+
await page.setViewportSize( { width: 768, height: 1024 } );
70+
await expect( sttButton ).toHaveCSS( 'padding', '6px 8px' );
71+
72+
await page.setViewportSize( { width: 375, height: 812 } );
73+
await expect( sttButton ).toHaveCSS( 'padding', '10px 12px' );
74+
75+
// Checks border radius
76+
await scrollTo( page, 'bottom' );
77+
await expect( sttButton ).toHaveCSS( 'border-radius', '100px' );
78+
79+
// Checks colors
80+
await scrollTo( page, 'bottom' );
81+
await expect( sttButton ).toHaveCSS( 'color', 'rgb(255, 0, 0)' );
82+
await expect( sttButton ).toHaveCSS(
83+
'background-color',
84+
'rgb(255, 255, 255)'
85+
);
86+
87+
await sttButton.hover();
88+
await expect( sttButton ).toHaveCSS(
89+
'background-color',
90+
'rgb(255, 255, 255)'
91+
);
92+
await expect( sttButton ).toHaveCSS( 'color', 'rgb(255, 0, 0)' );
93+
} );
94+
95+
test( 'Checks the icon type', async function ( {
96+
page,
97+
request,
98+
baseURL,
99+
} ) {
100+
const iconTypeData = Object.assign( {}, data.general );
101+
102+
// Get the id of the first image to be able to apply it.
103+
await visitAdminPage( page, 'upload.php', '' );
104+
await page.locator( '.attachment' ).first().click();
105+
const urlString = page.url();
106+
const url = new URL( urlString );
107+
const imageId = url.searchParams.get( 'item' ) || '';
108+
109+
iconTypeData.neve_scroll_to_top_type = 'image';
110+
iconTypeData.neve_scroll_to_top_image = parseInt( imageId );
111+
112+
await setCustomizeSettings( 'stt-icon-check', iconTypeData, {
113+
request,
114+
baseURL,
115+
} );
116+
117+
await page.goto( '/hello-world/?test_name=stt-icon-check' );
118+
await scrollTo( page, 'bottom' );
119+
120+
const scrollToTopImage = await page.locator(
121+
'#scroll-to-top .scroll-to-top-image'
122+
);
123+
await expect( await scrollToTopImage.count() ).toBeGreaterThan( 0 );
124+
125+
await expect( scrollToTopImage ).toHaveCSS(
126+
'background-image',
127+
/image.png/
128+
);
129+
130+
await setCustomizeSettings( 'stt-icon-check2', data.general, {
131+
request,
132+
baseURL,
133+
} );
134+
await page.goto( '/hello-world/?test_name=stt-icon-check2' );
135+
await scrollTo( page, 'bottom' );
136+
await expect(
137+
await page.locator( '#scroll-to-top svg' ).count()
138+
).toEqual( 1 );
139+
} );
140+
141+
test( 'Checks hiding on mobile', async function ( {
142+
page,
143+
request,
144+
baseURL,
145+
} ) {
146+
const hidingData = Object.assign( {}, data.general );
147+
hidingData.neve_scroll_to_top_on_mobile = true;
148+
149+
await setCustomizeSettings( 'stt-check-hiding', hidingData, {
150+
request,
151+
baseURL,
152+
} );
153+
154+
await page.goto( '/hello-world/?test_name=stt-check-hiding' ); // iphone-x
155+
156+
const sttButton = await page.locator( '#scroll-to-top' );
157+
158+
await page.setViewportSize( { width: 375, height: 812 } );
159+
await scrollTo( page, 'bottom' );
160+
await expect( sttButton ).not.toBeVisible();
161+
162+
await page.setViewportSize( { width: 1440, height: 900 } );
163+
await scrollTo( page, 'bottom' );
164+
await expect( sttButton ).toBeVisible();
165+
} );
166+
167+
test( 'Checks icon size', async function ( { page, request, baseURL } ) {
168+
await setCustomizeSettings( 'stt-check-icon3', data[ 'icon-check' ], {
169+
request,
170+
baseURL,
171+
} );
172+
173+
await page.goto( '/hello-world/?test_name=stt-check-icon3' );
174+
await scrollTo( page, 'bottom' );
175+
176+
const sttIcon = await page.locator(
177+
'#scroll-to-top .scroll-to-top-icon'
178+
);
179+
await expect( sttIcon ).toHaveCSS( 'width', '100px' );
180+
await expect( sttIcon ).toHaveCSS( 'height', '100px' );
181+
182+
await page.setViewportSize( { width: 768, height: 1024 } );
183+
await expect( sttIcon ).toHaveCSS( 'width', '50px' );
184+
await expect( sttIcon ).toHaveCSS( 'height', '50px' );
185+
186+
await page.setViewportSize( { width: 375, height: 812 } );
187+
await expect( sttIcon ).toHaveCSS( 'width', '100px' );
188+
await expect( sttIcon ).toHaveCSS( 'height', '100px' );
189+
} );
190+
} );

0 commit comments

Comments
 (0)