ui testing

ui/src/__tests__/components/schema_create.test.tsx

@@ -0,0 +1,66 @@
+import { screen } from '@testing-library/react'
+import { CreateSchema } from '@/components'
+import { GenerateSchemaResponse } from '@/service/types'
+import { renderWithProviders } from '@/utils/testing'
+import fetchMock from 'jest-fetch-mock'
+
+const mockSchemaData: GenerateSchemaResponse = {
+  metadata: {
+    domain: 'domain',
+    dataset: 'dataset',
+    sensitivity: 'PRIVATE',
+    layer: 'default',
+    description: 'Some base description...',
+    owners: [
+      {
+        name: 'Tiny Tim',
+        email: 'tiny_tim@email.com'
+      }
+    ],
+    key_only_tags: [],
+    key_value_tags: {},
+    update_behaviour: 'APPEND'
+  },
+  columns: [
+    {
+      name: 'col1',
+      partition_index: null,
+      data_type: 'int',
+      allow_null: true,
+      format: null
+    }
+  ]
+}
+
+const mockLayersData = ['default']
+
+describe('Component: SchemaCreate', () => {
+  afterEach(() => {
+    fetchMock.resetMocks()
+    jest.clearAllMocks()
+  })
+
+  it('renders', async () => {
+    renderWithProviders(
+      <CreateSchema schemaData={mockSchemaData} layersData={mockLayersData} />
+    )
+
+    // Expect the initial UI to be populated with the schema data
+    expect(screen.getByTestId('sensitivity')).toHaveValue('PRIVATE')
+    expect(screen.getByTestId('layer')).toHaveValue('default')
+    expect(screen.getByTestId('domain')).toHaveValue('domain')
+    expect(screen.getByTestId('dataset')).toHaveValue('dataset')
+    expect(screen.getByTestId('description')).toHaveValue('Some base description...')
+  })
+
+  it('renders the need to change date format', async () => {
+    mockSchemaData.columns[0].data_type = 'date'
+    renderWithProviders(
+      <CreateSchema schemaData={mockSchemaData} layersData={mockLayersData} />
+    )
+
+    // eslint-disable-next-line jest-dom/prefer-in-document
+    expect(screen.getAllByTestId('date-format')).toHaveLength(1)
+    expect(screen.getAllByTestId('date-format')[0]).toBeRequired()
+  })
+})

ui/src/components/SchemaCreate.tsx

@@ -98,6 +98,11 @@ function CreateSchema({
     )
   }
 
+  // Used to conditionally show the format field if we have a date data type in the table
+  const doesTypesContainData = newSchemaData.columns.some(
+    (cols) => cols.data_type === 'date'
+  )
+
   return (
     <form
       onSubmit={handleSubmit(async (_data: SchemaCreate) => {
@@ -133,6 +138,7 @@ function CreateSchema({
                   error={!!error}
                   helperText={error?.message}
                   onChange={(e) => field.onChange(e.target.value)}
+                  inputProps={{ 'data-testid': 'sensitivity' }}
                 />
               </>
             )}
@@ -153,6 +159,7 @@ function CreateSchema({
                   error={!!error}
                   helperText={error?.message}
                   onChange={(e) => field.onChange(e.target.value)}
+                  inputProps={{ 'data-testid': 'layer' }}
                 />
               </>
             )}
@@ -175,6 +182,7 @@ function CreateSchema({
                   error={!!error}
                   helperText={error?.message}
                   onChange={(e) => field.onChange(e.target.value)}
+                  inputProps={{ 'data-testid': 'domain' }}
                 />
               </>
             )}
@@ -197,6 +205,7 @@ function CreateSchema({
                   error={!!error}
                   helperText={error?.message}
                   onChange={(e) => field.onChange(e.target.value)}
+                  inputProps={{ 'data-testid': 'dataset' }}
                 />
               </>
             )}
@@ -222,6 +231,7 @@ function CreateSchema({
                   helperText={error?.message}
                   placeholder="Enter a human readable descriptive to describe the dataset..."
                   onChange={(e) => field.onChange(e.target.value)}
+                  inputProps={{ 'data-testid': 'description' }}
                 />
               </>
             )}
@@ -259,6 +269,24 @@ function CreateSchema({
                   </FormControl>
                 )
               },
+              {
+                children:
+                  item.data_type === 'date' ? (
+                    <TextField
+                      inputProps={{ 'data-testid': 'date-format' }}
+                      size="small"
+                      variant="outlined"
+                      type="text"
+                      placeholder="%Y-%m-%d"
+                      required
+                      onChange={(e) =>
+                        setNewSchemaDataColumn(item.name, 'format', e.target.value)
+                      }
+                    />
+                  ) : (
+                    ''
+                  )
+              },
               {
                 children: (
                   <FormControl fullWidth size="small">
@@ -299,6 +327,7 @@ function CreateSchema({
           headers={[
             { children: 'Name' },
             { children: 'Data Type' },
+            { children: doesTypesContainData ? 'Data Format' : '' },
             { children: 'Allows Null' },
             { children: 'Partition Index (Optional)' }
           ]}