dididy commented on code in PR #5102: URL: https://github.com/apache/zeppelin/pull/5102#discussion_r2460111786
########## zeppelin-web-angular/e2e/tests/home/home-page-layout.spec.ts: ########## @@ -0,0 +1,144 @@ +/* + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { expect, test } from '@playwright/test'; +import { HomePage } from '../../models/home-page'; +import { HomePageUtil } from '../../models/home-page.util'; +import { addPageAnnotationBeforeEach, performLoginIfRequired, waitForZeppelinReady, PAGES } from '../../utils'; + +test.describe('Home Page - Layout and Grid', () => { + addPageAnnotationBeforeEach(PAGES.WORKSPACE.HOME); + + test.beforeEach(async ({ page }) => { + await page.goto('/#/'); + await waitForZeppelinReady(page); + await performLoginIfRequired(page); + }); + + test.describe('Responsive Grid Layout', () => { + test('should display responsive grid structure', async ({ page }) => { + const homePageUtil = new HomePageUtil(page); + + await test.step('Given I am on the home page', async () => { + const homePage = new HomePage(page); + await homePage.navigateToHome(); + }); + + await test.step('When the page loads', async () => { + await waitForZeppelinReady(page); + }); + + await test.step('Then I should see the responsive grid layout', async () => { + await homePageUtil.verifyResponsiveGrid(); + }); + }); + + test('should have proper column distribution', async ({ page }) => { + const homePage = new HomePage(page); + + await test.step('Given I am on the home page', async () => { + await homePage.navigateToHome(); + }); + + await test.step('When I examine the grid columns', async () => { + await expect(homePage.moreInfoGrid).toBeVisible(); + }); + + await test.step('Then I should see the notebook column with proper sizing', async () => { + await expect(homePage.notebookColumn).toBeVisible(); + // Check that the column contains notebook content + const notebookHeading = homePage.notebookColumn.locator('h3'); + await expect(notebookHeading).toBeVisible(); + const headingText = await notebookHeading.textContent(); + expect(headingText).toContain('Notebook'); + }); + + await test.step('And I should see the help/community column with proper sizing', async () => { + await expect(homePage.helpCommunityColumn).toBeVisible(); + // Check that the column contains help and community content + const helpHeading = homePage.helpCommunityColumn.locator('h3').first(); + await expect(helpHeading).toBeVisible(); + const helpText = await helpHeading.textContent(); + expect(helpText).toContain('Help'); + }); + }); + + test('should maintain layout structure across different viewport sizes', async ({ page }) => { + const homePage = new HomePage(page); + + await test.step('Given I am on the home page', async () => { + await homePage.navigateToHome(); + }); + + await test.step('When I resize to tablet view', async () => { + await page.setViewportSize({ width: 768, height: 1024 }); + await page.waitForTimeout(500); + }); + + await test.step('Then the grid should still be visible and functional', async () => { + await expect(homePage.moreInfoGrid).toBeVisible(); + await expect(homePage.notebookColumn).toBeVisible(); + await expect(homePage.helpCommunityColumn).toBeVisible(); + }); + + await test.step('When I resize to mobile view', async () => { + await page.setViewportSize({ width: 375, height: 667 }); + await page.waitForTimeout(500); + }); + + await test.step('Then the grid should adapt to mobile layout', async () => { + await expect(homePage.moreInfoGrid).toBeVisible(); + // Check that both columns are still visible and stacked vertically Review Comment: I deleted the comment. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
