tests for form

playwright/mocks/file_mock_1.json

+{
+    "foo": "bar" 
+}
\ No newline at end of file

playwright/mocks/file_mock_2.json

+{
+    "foo": "bar",
+    "baz": ["baz","baz","baz"]
+}
\ No newline at end of file

playwright/mocks/file_mock_with_very_long_name.json

+{
+    "id": 1,
+    "title": "iPhone 9",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec leo odio. Vivamus iaculis faucibus tempus. Duis dapibus, ligula eu consequat ornare, sapien nisl laoreet arcu, eu pharetra dolor urna eget ligula. Sed facilisis pretium risus in finibus. Maecenas egestas orci euismod venenatis aliquam. Vivamus sed pretium dui, vitae porta ipsum. Donec elit tortor, imperdiet eu nulla at, condimentum consequat nisi. Phasellus mollis sem aliquam dolor lacinia bibendum. Mauris pulvinar vestibulum sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vitae facilisis odio. Mauris in ultricies nulla. Sed ornare consequat nulla. Cras pellentesque, erat at gravida rutrum, erat neque facilisis magna, et iaculis enim tortor ornare felis. Quisque mollis dignissim magna. In vitae ultricies felis.  Quisque in ipsum non lorem ornare elementum vel vitae nisl. Integer luctus pulvinar dui a eleifend. Aliquam iaculis odio vitae metus ullamcorper, sed semper turpis consectetur. In convallis, justo a aliquet rhoncus, erat metus fringilla turpis, eget imperdiet purus est quis magna. Curabitur ornare mattis malesuada. In vitae lacinia est. Sed sit amet magna eget dolor tempus euismod.",
+    "price": 549,
+    "discountPercentage": 12.96,
+    "rating": 4.69,
+    "stock": 94,
+    "brand": "Apple",
+    "category": "smartphones",
+    "thumbnail": "https://i.dummyjson.com/data/products/1/thumbnail.jpg",
+    "images": [
+      "https://i.dummyjson.com/data/products/1/1.jpg",
+      "https://i.dummyjson.com/data/products/1/2.jpg",
+      "https://i.dummyjson.com/data/products/1/3.jpg",
+      "https://i.dummyjson.com/data/products/1/4.jpg",
+      "https://i.dummyjson.com/data/products/1/thumbnail.jpg"
+    ]
+}
\ No newline at end of file

ui/contractVerification/ContractVerificationForm.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+import ContractVerificationForm from './ContractVerificationForm';
+
+const hooksConfig = {
+  router: {
+    query: {},
+  },
+};
+
+test('flatten source code method +@dark-mode +@mobile', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <ContractVerificationForm/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.getByText(/flattened source code/i).click();
+  await page.getByText(/optimization enabled/i).click();
+  await page.getByText(/add contract libraries/i).click();
+  await page.locator('button[aria-label="add"]').click();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('standard input json method', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <ContractVerificationForm/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.getByText(/via standard/i).click();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('sourcify method +@dark-mode +@mobile', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <ContractVerificationForm/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.getByText(/via sourcify/i).click();
+  await page.getByText(/upload files/i).click();
+  await page.locator('input[name="sources"]').setInputFiles([
+    './playwright/mocks/file_mock_1.json',
+    './playwright/mocks/file_mock_2.json',
+    './playwright/mocks/file_mock_with_very_long_name.json',
+  ]);
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('multi-part files method', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <ContractVerificationForm/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.getByText(/via multi-part files/i).click();
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('vyper contract method', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <ContractVerificationForm/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.getByText(/vyper contract/i).click();
+
+  await expect(component).toHaveScreenshot();
+});

ui/contractVerification/fields/ContractVerificationFieldOptimization.tsx

@@ -29,7 +29,7 @@ const ContractVerificationFieldOptimization = () => {
 
   const renderInputControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'optimization_runs'>}) => {
     return (
-      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }}>
+      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }} isRequired>
         <Input
           { ...field }
           required

ui/shared/forms/FileInput.tsx

@@ -40,6 +40,7 @@ const FileInput = <Values extends FieldValues, Names extends Path<Values>>({ chi
         ref={ ref }
         accept={ accept }
         multiple={ multiple }
+        name={ field.name }
       />
       { children }
     </InputGroup>