test: Snapshot test for form message (#1223)

Fixes [NOTI-3489](https://sendbird.atlassian.net/browse/NOTI-3489)

### Test sheet

https://docs.google.com/spreadsheets/d/16lv6-77jS00_8tJOPHLcB-7wgON4miFw-BfvUJFyUE4/edit?gid=0#gid=0

### How to run snapshot test

`yarn test:visual`

### Android results

https://github.com/sendbird/uikit-android/blob/develop/uikit/src/test/snapshots/images/com.sendbird.uikit_MessageFormSnapshotTest_test%20snapshot%20for%20message%20form_form-204.png

### Changelogs

[NOTI-3489]:
https://sendbird.atlassian.net/browse/NOTI-3489?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: chohongm

Diff for: .gitignore

@@ -40,3 +40,9 @@ yarn-error.log*
 
 # docs
 /docs
+
+# Snapshot test data
+/playwright-report/
+/playwright/.cache/
+/test-results/
+/blob-report/

Diff for: __visual_tests__/__fixtures__/form/interface.ts

@@ -0,0 +1,20 @@
+export interface MockMessageFormItemProps {
+  name: string;
+  required?: boolean;
+  sort_order: number;
+  placeholder?: string;
+  style: object;
+  values?: string[];
+  validators?: object[];
+  draft_values?: string[];
+}
+
+export interface MockMessageFormProps {
+  name?: string;
+  items: MockMessageFormItemProps[];
+}
+
+export interface FormFixtureProps {
+  name: string;
+  form: MockMessageFormProps;
+}

Diff for: __visual_tests__/form/form-multiple.spec.ts

@@ -0,0 +1,169 @@
+import { test } from '@playwright/test';
+
+import { assertScreenshot, fillForm, runBeforeEach, testDraftValues } from '../utils';
+import { MockMessageFormProps } from '../__fixtures__/form/interface';
+
+runBeforeEach();
+
+// 201: Form with one text input (no fill), one text area input (no fill), and one chip input (no select)
+test('201', async ({ page }) => {
+  const form: MockMessageFormProps = {
+    name: 'test form',
+    items: [
+      {
+        name: 'Text form',
+        required: true,
+        sort_order: 0,
+        placeholder: 'Text hint',
+        style: {
+          layout: 'text',
+        },
+        draft_values: [],
+      },
+      {
+        name: 'Textarea form',
+        required: true,
+        sort_order: 0,
+        placeholder: 'Textarea hint',
+        style: {
+          layout: 'textarea',
+        },
+      },
+      {
+        name: 'Chip form',
+        required: true,
+        sort_order: 0,
+        style: {
+          layout: 'chip',
+          options: [
+            'Chip1',
+            'Chip2',
+            'Chip3',
+            'Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4'
+            + 'Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4',
+          ],
+        },
+      },
+    ],
+  };
+  await fillForm(page, JSON.stringify(form));
+  await testDraftValues(page, form);
+  await assertScreenshot(page);
+});
+
+// 202: Form with one text input (no fill), one text input (no fill, not required)
+test('202', async ({ page }) => {
+  const form: MockMessageFormProps = {
+    name: 'test form',
+    items: [
+      {
+        name: 'Text form 1',
+        required: true,
+        sort_order: 0,
+        placeholder: 'Text 1 hint',
+        style: {
+          layout: 'text',
+        },
+      },
+      {
+        name: 'Text form 1',
+        required: false,
+        sort_order: 1,
+        placeholder: 'Text 2 hint',
+        style: {
+          layout: 'text',
+        },
+      },
+    ],
+  };
+  await fillForm(page, JSON.stringify(form));
+  await testDraftValues(page, form);
+  await assertScreenshot(page);
+});
+
+// 203: Form with one text area input (no fill), one text area input (no fill, not required) and one chip input (no select)
+test('203', async ({ page }) => {
+  const form: MockMessageFormProps = {
+    name: 'test form',
+    items: [
+      {
+        name: 'Textarea form 1',
+        required: true,
+        sort_order: 0,
+        placeholder: 'Textarea 1 hint',
+        style: {
+          layout: 'textarea',
+        },
+      },
+      {
+        name: 'Textarea form 2',
+        required: false,
+        sort_order: 1,
+        placeholder: 'Textarea 2 hint',
+        style: {
+          layout: 'textarea',
+        },
+      },
+    ],
+  };
+  await fillForm(page, JSON.stringify(form));
+  await testDraftValues(page, form);
+  await assertScreenshot(page);
+});
+
+// 204: Form with one chip input (no select), and one chip input (select one chip)
+test('204', async ({ page }) => {
+  const form: MockMessageFormProps = {
+    name: 'test form',
+    items: [
+      {
+        name: 'Chip form 1',
+        required: true,
+        sort_order: 0,
+        style: {
+          layout: 'chip',
+          options: [
+            'Chip1',
+            'Chip2',
+            'Chip3',
+            'Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4Chip4',
+          ],
+        },
+      },
+      {
+        name: 'Chip form 2',
+        required: true,
+        sort_order: 1,
+        style: {
+          layout: 'chip',
+          options: [
+            'Chip5',
+            'Chip6',
+            'Chip7',
+            'Chip8',
+          ],
+          default_options: [
+            'Chip5',
+          ],
+        },
+      },
+      {
+        name: 'Chip form 3',
+        required: true,
+        sort_order: 2,
+        style: {
+          layout: 'chip',
+          options: [
+            'Chip9',
+            'Chip10',
+            'Chip11',
+            'Chip12',
+          ],
+        },
+      },
+    ],
+  };
+  await fillForm(page, JSON.stringify(form));
+  await testDraftValues(page, form);
+  await assertScreenshot(page);
+});