wip e2e

aguingand · aguingand · commit df1cccb696a6 · 2025-01-24T13:58:45.000+01:00
diff --git a/resources/js/form/components/FormFieldLayout.vue b/resources/js/form/components/FormFieldLayout.vue
@@ -16,14 +16,15 @@
         class?: string,
         fieldGroup?: boolean,
         stickyLabel?: boolean,
+        ariaLabel?: string,
     }>();
     const emit = defineEmits<{
         (e: 'label-click'),
         (e: 'locale-change', locale: string)
     }>();
     const form = useParentForm();
     const id = useId(`form-field_${props.fieldErrorKey}`);
-    const ariaLabelledBy = computed(() => `${id}-label`);
+    const ariaLabelledBy = computed(() => props.field.label ? `${id}-label` : null);
     const ariaDescribedBy = computed(() => [
             props.field.helpMessage && `${id}-help-message`,
             form.fieldHasError(props.field, props.fieldErrorKey) && `${id}-error`,
@@ -51,6 +52,7 @@
             props.class,
         )"
         :role="fieldGroup ? 'group' : null"
+        :aria-label="ariaLabel"
         :aria-labelledby="fieldGroup ? ariaLabelledBy : null"
         :aria-describedby="fieldGroup ? ariaDescribedBy : null"
         :aria-invalid="form.fieldHasError(field, fieldErrorKey)"
diff --git a/resources/js/form/components/fields/editor/extensions/upload/UploadNode.vue b/resources/js/form/components/fields/editor/extensions/upload/UploadNode.vue
@@ -85,6 +85,9 @@
             as-editor-embed
             :legend="upload.legend"
             :dropdown-edit-label="parentEditor.props.field.uploads.fields.legend ? __('sharp::form.editor.extension_node.edit_button') : null"
+            :aria-label="props.node.attrs.isImage
+                ? __('sharp::form.editor.extension_node.upload_image.aria_label')
+                : __('sharp::form.editor.extension_node.upload.aria_label')"
             @thumbnail="onThumbnailGenerated"
             @transform="onUploadTransformed"
             @error="onUploadError"
diff --git a/resources/js/form/components/fields/editor/toolbar/config.ts b/resources/js/form/components/fields/editor/toolbar/config.ts
@@ -121,19 +121,19 @@ export const buttons: { [key in Exclude<FormEditorToolbarButton, '|' | 'link' |
         command: editor => editor.chain().focus().insertHtml().run(),
         isActive: editor => editor.isActive('html'),
         icon: CodeXml,
-        label: () => null,
+        label: () => __('sharp::form.editor.toolbar.html.title'),
     },
     'code-block': {
         command: editor => editor.chain().focus().toggleCodeBlock().run(),
         isActive: editor => editor.isActive('codeBlock'),
         icon: FileCode,
-        label: () => null,
+        label: () => __('sharp::form.editor.toolbar.code_block.title'),
     },
     'superscript': {
         command: editor => editor.chain().focus().toggleSuperscript().run(),
         isActive: editor => editor.isActive('superscript'),
         icon: Superscript,
-        label: () => null,
+        label: () => __('sharp::form.editor.toolbar.superscript.title'),
     },
     'undo': {
         command: editor => editor.chain().undo().run(),
diff --git a/resources/js/form/components/fields/upload/Upload.vue b/resources/js/form/components/fields/upload/Upload.vue
@@ -42,7 +42,12 @@
     } from "@/components/ui/dialog";
     import { rotate, rotateTo } from "@/form/components/fields/upload/util/rotate";
 
-    const props = defineProps<FormFieldProps<FormUploadFieldData> & { asEditorEmbed?: boolean, legend?: string, dropdownEditLabel?: string }>();
+    const props = defineProps<FormFieldProps<FormUploadFieldData> & {
+        asEditorEmbed?: boolean,
+        legend?: string,
+        dropdownEditLabel?: string,
+        ariaLabel?: string,
+    }>();
 
     defineOptions({
         inheritAttrs: false,
@@ -381,7 +386,7 @@
 </script>
 
 <template>
-    <FormFieldLayout v-bind="props">
+    <FormFieldLayout v-bind="props" field-group>
         <template #default="{ id, ariaDescribedBy }">
             <template v-if="value?.path || value?.uploaded || uppyFile">
                 <div :class="{ 'bg-background border rounded-md p-4': !asEditorEmbed }">
diff --git a/resources/lang/en/form.php b/resources/lang/en/form.php
@@ -67,6 +67,8 @@
 
     'editor.extension_node.edit_button' => 'Edit...',
     'editor.extension_node.remove_button' => 'Remove',
+    'editor.extension_node.upload.aria_label' => 'Embedded file',
+    'editor.extension_node.upload_image.aria_label' => 'Embedded image',
 
     'editor.dialogs.upload.title.new' => 'Insert file',
     'editor.dialogs.upload.title.update' => 'Update',
@@ -105,17 +107,20 @@
     'editor.toolbar.strikethrough.title' => 'Strike through',
     'editor.toolbar.highlight.title' => 'Highlight',
     'editor.toolbar.small.title' => 'Small text',
+    'editor.toolbar.superscript.title' => 'Superscript',
     'editor.toolbar.heading_1.title' => 'Heading 1',
     'editor.toolbar.heading_2.title' => 'Heading 2',
     'editor.toolbar.heading_3.title' => 'Heading 3',
     'editor.toolbar.code.title' => 'Code',
+    'editor.toolbar.code_block.title' => 'Code block',
     'editor.toolbar.quote.title' => 'Quote',
     'editor.toolbar.unordered_list.title' => 'Unordered list',
     'editor.toolbar.ordered_list.title' => 'Ordered list',
     'editor.toolbar.link.title' => 'Link',
     'editor.toolbar.image.title' => 'Image',
     'editor.toolbar.table.title' => 'Table',
     'editor.toolbar.iframe.title' => 'Web embed',
+    'editor.toolbar.html.title' => 'Insert HTML',
     'editor.toolbar.upload.title' => 'Insert file',
     'editor.toolbar.upload_image.title' => 'Insert image',
     'editor.toolbar.horizontal_rule.title' => 'Horizontal rule',
diff --git a/resources/lang/fr/form.php b/resources/lang/fr/form.php
@@ -67,6 +67,8 @@
 
     'editor.extension_node.edit_button' => 'Modifier...',
     'editor.extension_node.remove_button' => 'Supprimer',
+    'editor.extension_node.upload.aria_label' => 'Fichier intégré',
+    'editor.extension_node.upload_image.aria_label' => 'Image intégré',
 
     'editor.dialogs.upload.title.new' => 'Insérer un fichier',
     'editor.dialogs.upload.title.update' => 'Modifier le fichier',
@@ -107,10 +109,12 @@
     'editor.toolbar.strikethrough.title' => 'Barré',
     'editor.toolbar.highlight.title' => 'Surligner',
     'editor.toolbar.small.title' => 'Texte plus petit',
+    'editor.toolbar.superscript.title' => 'Exposant',
     'editor.toolbar.heading_1.title' => 'Titre 1',
     'editor.toolbar.heading_2.title' => 'Titre 2',
     'editor.toolbar.heading_3.title' => 'Titre 3',
     'editor.toolbar.code.title' => 'Code',
+    'editor.toolbar.code_block.title' => 'Bloc de code',
     'editor.toolbar.quote.title' => 'Citation',
     'editor.toolbar.unordered_list.title' => 'Liste',
     'editor.toolbar.ordered_list.title' => 'Liste ordonnée',
@@ -119,6 +123,7 @@
     'editor.toolbar.table.title' => 'Table',
     'editor.toolbar.iframe.title' => 'Intégration web',
     'editor.toolbar.upload.title' => 'Insérer un fichier',
+    'editor.toolbar.html.title' => 'Insérer du HTML',
     'editor.toolbar.upload_image.title' => 'Insérer une image',
     'editor.toolbar.horizontal_rule.title' => 'Séparateur',
     'editor.toolbar.fullscreen.title' => 'Plein écran',
diff --git a/tests-e2e/fixtures/upload-image.jpg b/tests-e2e/fixtures/upload-image.jpg
diff --git a/tests-e2e/fixtures/upload.pdf b/tests-e2e/fixtures/upload.pdf
diff --git a/tests-e2e/site/app/Sharp/TestModels/TestModelForm.php b/tests-e2e/site/app/Sharp/TestModels/TestModelForm.php
@@ -154,6 +154,7 @@ public function buildFormFields(FieldsContainer $formFields): void
                         SharpFormEditorField::OL,
                         SharpFormEditorField::UL,
                         SharpFormEditorField::QUOTE,
+                        SharpFormEditorField::UPLOAD,
                         SharpFormEditorField::UPLOAD_IMAGE,
                         SharpFormEditorField::CODE_BLOCK,
                         SharpFormEditorField::SEPARATOR,
@@ -163,7 +164,7 @@ public function buildFormFields(FieldsContainer $formFields): void
                     ])
                     ->allowUploads(
                         SharpFormEditorUpload::make()
-                            ->setImageOnly()
+//                            ->setImageOnly()
                             ->setImageCropRatio('1:1')
                             ->setStorageDisk('local')
                             ->setStorageBasePath('data')
diff --git a/tests-e2e/site/routes/e2e.php b/tests-e2e/site/routes/e2e.php
@@ -3,12 +3,19 @@
 use App\Models\User;
 use Illuminate\Support\Facades\Artisan;
 use Illuminate\Support\Facades\Route;
+use Illuminate\Support\Facades\Storage;
 
 Route::get('/e2e/init', function () {
     Artisan::call('snapshot:load', [
         'name' => 'e2e-seed',
     ]);
 
+    Storage::disk(sharp()->config()->get('uploads.tmp_disk'))
+        ->deleteDirectory(sharp()->config()->get('uploads.tmp_dir'));
+
+    Storage::disk(sharp()->config()->get('uploads.thumbnails_disk'))
+        ->deleteDirectory(sharp()->config()->get('uploads.thumbnails_disk'));
+
     if (request()->input('login')) {
         $user = User::where('email', 'test@example.org')->firstOrFail();
 
diff --git a/tests-e2e/tests/form.spec.ts b/tests-e2e/tests/form.spec.ts
@@ -2,6 +2,7 @@
 
 import { test, expect, Page } from '@playwright/test';
 import { init } from "../helpers";
+import path from "node:path";
 
 
 async function createForm(page: Page) {
@@ -264,9 +265,38 @@ test.describe('form', () => {
         await page.getByRole('dialog').getByRole('textbox', { name: 'URL' }).fill('https://example.com');
         await page.getByRole('dialog').getByRole('button', { name: 'Insert link' }).click();
         await expect(editor.getByRole('textbox').locator('a')).toHaveText('link');
-        await editor.getByRole('textbox').press('Enter');
+        await editor.getByRole('textbox').pressSequentially(' ');
+      });
+      await test.step('highlight', async () => {
+        await editor.getByRole('button', { name: 'Highlight' }).click();
+        await editor.getByRole('textbox').pressSequentially('highlight');
+        await expect(editor.getByRole('textbox').locator('mark')).toHaveText('highlight');
+        await editor.getByRole('button', { name: 'Highlight' }).click();
+        await editor.getByRole('textbox').pressSequentially(' ');
+      });
+      await test.step('small text', async () => {
+        await editor.getByRole('button', { name: 'Small text' }).click();
+        await editor.getByRole('textbox').pressSequentially('small');
+        await expect(editor.getByRole('textbox').locator('small')).toHaveText('small');
+        await editor.getByRole('button', { name: 'Small text' }).click();
+        await editor.getByRole('textbox').pressSequentially(' ');
+      });
+      await test.step('superscript', async () => {
+        await editor.getByRole('button', { name: 'Superscript' }).click();
+        await editor.getByRole('textbox').pressSequentially('superscript');
+        await expect(editor.getByRole('textbox').locator('sup')).toHaveText('superscript');
+        await editor.getByRole('button', { name: 'Superscript' }).click();
+        await editor.getByRole('textbox').pressSequentially(' ');
+      });
+      await test.step('code', async () => {
+        await editor.getByRole('button', { name: 'Code', exact: true }).click();
+        await editor.getByRole('textbox').pressSequentially('code');
+        await expect(editor.getByRole('textbox').locator('code')).toHaveText('code');
+        await editor.getByRole('button', { name: 'Code', exact: true }).click();
+        await editor.getByRole('textbox').pressSequentially(' ');
       });
       await test.step('headings', async () => {
+        await editor.getByRole('textbox').press('Enter');
         await editor.getByRole('button', { name: 'Heading 1' }).click();
         await expect(editor.getByRole('textbox').locator('h1')).toBeVisible();
         await editor.getByRole('textbox').pressSequentially('heading 1');
@@ -315,6 +345,21 @@ test.describe('form', () => {
         await editor.getByRole('textbox').press('Enter');
         await expect(editor.getByRole('textbox').locator('blockquote')).toHaveText('quote');
       });
+      await test.step('upload', async () => {
+        const fileChooserPromise = page.waitForEvent('filechooser');
+        await editor.getByRole('button', { name: 'Insert file' }).click();
+        const fileChooser = await fileChooserPromise;
+        await fileChooser.setFiles(path.resolve(__dirname, '../fixtures/upload.pdf'));
+        await expect(editor.getByRole('textbox')).toContainText('upload.pdf')
+      });
+      await test.step('upload image', async () => {
+        const fileChooserPromise = page.waitForEvent('filechooser');
+        await editor.getByRole('button', { name: 'Insert image' }).click();
+        const fileChooser = await fileChooserPromise;
+        await fileChooser.setFiles(path.resolve(__dirname, '../fixtures/upload-image.jpg'));
+        await expect(editor.getByRole('textbox').locator('img')).toBeVisible();
+        await expect(editor.getByRole('textbox')).toContainText('upload-image.jpg')
+      });
       await page.waitForTimeout(1000);
     });
   });
