83eb33d54a
Previously we added a left panel. We now need to adapt the layout so that it becomesresponsive. We therefore add a burger menu on the left on mobile which, when clicked, deploys the left-panel over all the content.
49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import { expect, test } from '@playwright/test';
|
|
|
|
test.describe('Left panel desktop', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/');
|
|
});
|
|
|
|
test('checks all the elements are visible', async ({ page }) => {
|
|
await expect(page.getByTestId('left-panel-desktop')).toBeVisible();
|
|
await expect(page.getByTestId('left-panel-mobile')).toBeHidden();
|
|
await expect(page.getByRole('button', { name: 'house' })).toBeVisible();
|
|
await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible();
|
|
});
|
|
});
|
|
|
|
test.describe('Left panel mobile', () => {
|
|
test.use({ viewport: { width: 500, height: 1200 } });
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/');
|
|
});
|
|
|
|
test('checks all the desktop elements are hidden and all mobile elements are visible', async ({
|
|
page,
|
|
}) => {
|
|
await expect(page.getByTestId('left-panel-desktop')).toBeHidden();
|
|
await expect(page.getByTestId('left-panel-mobile')).not.toBeInViewport();
|
|
|
|
const header = page.locator('header').first();
|
|
const homeButton = page.getByRole('button', { name: 'house' });
|
|
const newDocButton = page.getByRole('button', { name: 'New doc' });
|
|
const languageButton = page.getByRole('combobox', { name: 'Language' });
|
|
const logoutButton = page.getByRole('button', { name: 'Logout' });
|
|
|
|
await expect(homeButton).not.toBeInViewport();
|
|
await expect(newDocButton).not.toBeInViewport();
|
|
await expect(languageButton).not.toBeInViewport();
|
|
await expect(logoutButton).not.toBeInViewport();
|
|
|
|
await header.getByLabel('Open the header menu').click();
|
|
|
|
await expect(page.getByTestId('left-panel-mobile')).toBeInViewport();
|
|
await expect(homeButton).toBeInViewport();
|
|
await expect(newDocButton).toBeInViewport();
|
|
await expect(languageButton).toBeInViewport();
|
|
await expect(logoutButton).toBeInViewport();
|
|
});
|
|
});
|