WIP: write test

apps/app/playwright/20-basic-features/create-page-button.spec.ts

@@ -4,7 +4,24 @@ test.describe('Create page button', () => {
   test('click and autofocus to title text input', async({ page }) => {
     await page.goto('/');
 
-    await page.getByTestId('grw-page-create-button').getByLabel('Create').click();
+    await page.getByTestId('grw-page-create-button').getByRole('button', { name: 'Create' }).click();
+
+    // should be focused
     await expect(page.getByPlaceholder('Input page name')).toBeFocused();
   });
 });
+
+test.describe('Create page button dropdown menu', () => {
+  test('open and ', async({ page }) => {
+    await page.goto('/');
+
+    // open dropdown menu
+    await page.getByTestId('grw-page-create-button').hover();
+    await page.getByTestId('grw-page-create-button')
+      .getByLabel('Open create page menu').click({ force: true }); // force click to prevent pointer events loop: refs https://github.com/microsoft/playwright/issues/12298#issuecomment-1170136711
+    await page.getByRole('menuitem', { name: 'Create today page' }).click();
+
+    // should not be focused
+    await expect(page.getByPlaceholder('Input page name')).not.toBeFocused();
+  });
+});

apps/app/src/components/Sidebar/PageCreateButton/DropendMenu.tsx

@@ -48,6 +48,7 @@ export const DropendMenu = React.memo((props: DropendMenuProps): JSX.Element =>
           <DropdownItem divider />
           <li><span className="text-muted px-3">{t('create_page_dropdown.todays.desc')}</span></li>
           <DropdownItem
+            aria-label="Create today page"
             onClick={onClickCreateTodaysMemo}
           >
             {todaysPath}

apps/app/src/components/Sidebar/PageCreateButton/DropendToggle.tsx

@@ -14,9 +14,10 @@ export const DropendToggle = (): JSX.Element => {
       color="primary"
       className={`position-absolute z-1 ${moduleClass}`}
       aria-expanded={false}
+      aria-label="Open create page menu"
       data-testid="grw-page-create-button-dropend-toggle"
     >
-      <Hexagon />
+      <Hexagon className="pe-none" />
       <div className="hitarea position-absolute" />
       <span className="icon material-symbols-outlined position-absolute">chevron_right</span>
     </DropdownToggle>