profile tests

mocks/user/profile.ts

@@ -0,0 +1,6 @@
+export const base = {
+  avatar: 'https://avatars.githubusercontent.com/u/22130104',
+  email: '[email protected]',
+  name: 'tom goriunov',
+  nickname: 'tom2drum',
+};

ui/snippets/header/ColorModeToggler.tsx

@@ -89,6 +89,7 @@ const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref)
       <chakra.div
         { ...getCheckboxProps() }
         __css={ trackStyles }
+        aria-label="Toggle color mode"
       >
         <Icon
           boxSize={ 4 }

ui/snippets/profileMenu/ProfileMenuDesktop.pw.tsx

@@ -0,0 +1,56 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as profileMock from 'mocks/user/profile';
+import authFixture from 'playwright/fixtures/auth';
+import TestApp from 'playwright/TestApp';
+
+import ProfileMenuDesktop from './ProfileMenuDesktop';
+
+test('no auth', async({ mount, page }) => {
+  const hooksConfig = {
+    router: {
+      asPath: '/',
+    },
+  };
+  const component = await mount(
+    <TestApp>
+      <ProfileMenuDesktop/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await component.locator('.identicon').click();
+  expect(page.url()).toBe('http://localhost:3100/auth/auth0?path=%2F');
+});
+
+test.describe('auth', () => {
+  const extendedTest = test.extend({
+    context: ({ context }, use) => {
+      authFixture(context);
+      use(context);
+    },
+  });
+
+  extendedTest('+@dark-mode', async({ mount, page }) => {
+    await page.route('/node-api/account/profile', (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(profileMock.base),
+    }));
+    await page.route(profileMock.base.avatar, (route) => {
+      return route.fulfill({
+        status: 200,
+        path: './playwright/image_s.jpg',
+      });
+    });
+
+    const component = await mount(
+      <TestApp>
+        <ProfileMenuDesktop/>
+      </TestApp>,
+    );
+
+    await component.getByAltText(/Profile picture/i).click();
+    await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 550 } });
+  });
+});

ui/snippets/profileMenu/ProfileMenuMobile.pw.tsx

@@ -0,0 +1,55 @@
+import { test, expect, devices } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as profileMock from 'mocks/user/profile';
+import authFixture from 'playwright/fixtures/auth';
+import TestApp from 'playwright/TestApp';
+
+import ProfileMenuMobile from './ProfileMenuMobile';
+
+test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+test('no auth', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <ProfileMenuMobile/>
+    </TestApp>,
+  );
+
+  await component.locator('.identicon').click();
+  await expect(page).toHaveScreenshot();
+});
+
+test.describe('auth', () => {
+  const extendedTest = test.extend({
+    context: ({ context }, use) => {
+      authFixture(context);
+      use(context);
+    },
+  });
+
+  extendedTest('base view', async({ mount, page }) => {
+    await page.route('/node-api/account/profile', (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(profileMock.base),
+    }));
+    await page.route(profileMock.base.avatar, (route) => {
+      return route.fulfill({
+        status: 200,
+        path: './playwright/image_s.jpg',
+      });
+    });
+
+    const component = await mount(
+      <TestApp>
+        <ProfileMenuMobile/>
+      </TestApp>,
+    );
+
+    await component.getByAltText(/Profile picture/i).click();
+    await expect(page).toHaveScreenshot();
+
+    await page.locator('div[aria-label="Toggle color mode"]').click();
+    await expect(page).toHaveScreenshot();
+  });
+});