test: add sidebar e2e

package.json

@@ -24,6 +24,7 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
+    "e2e-ui": "npx playwright test --ui",
     "prettier": "prettier --config ./.prettierrc --write \"src/{app,environments}/**/*{.ts,.html,.scss,.json}\"",
     "prettier:verify": "prettier --config ./.prettierrc --check \"src/{app,environments}/**/*{.ts,.html,.scss,.json}\"",
     "prettier:staged": "pretty-quick --staged",
@@ -76,4 +77,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

playwright.config.ts

@@ -10,7 +10,7 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './tests',
+  testDir: './tests-e2e',
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */

tests-e2e/sidebar.e2e.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+
+test('check sidebar menu link', async ({ page }) => {
+  await page.goto('/', { waitUntil: 'networkidle' });
+  await page.getByRole('navigation').locator('div').filter({ hasText: 'Auth' }).nth(3).click();
+  await page.getByRole('link', { name: 'Sign up' }).click();
+  await expect(page.locator('h2')).toContainText('Sign Up !');
+});
+
+test('check toggle sidebar', async ({ page }) => {
+  await page.goto('/', { waitUntil: 'networkidle' });
+  const sidebar = page.locator('app-sidebar');
+  await page.getByRole('navigation').getByRole('button').first().click();
+  await page.waitForTimeout(500);
+  const collapsedSidebarSizes = await sidebar.boundingBox();
+  expect(collapsedSidebarSizes?.width).toBe(70);
+  await page.getByRole('navigation').getByRole('button').click();
+  await page.waitForTimeout(500);
+  const normalSidebarSizes = await sidebar.boundingBox();
+  expect(normalSidebarSizes?.width).toBe(256);
+});