Fix tests, codegen and use Link instead of a

pkg/generator/attributes.go

@@ -94,7 +94,8 @@ func provideFieldContextAttributes(context map[string]interface{}, attributes []
 		provideGraphQLFieldTypeContextAttributes(fieldContext, attribute)
 		provideKotlinFieldContextAttributes(fieldContext, attribute)
 		provideInputFieldContextAttributes(fieldContext, attribute)
-		provideVueTemplateContextAttributes(fieldContext, attribute)
+		provideReactTemplateTestContextAttributes(fieldContext, attribute)
+		provideReactTemplateExpectedContextAttributes(fieldContext, attribute)
 	}
 }
 
@@ -311,7 +312,7 @@ func provideInputFieldContextAttributes(context map[string]interface{}, attribut
 	}
 }
 
-func provideVueTemplateContextAttributes(context map[string]interface{}, attribute ModelAttribute) {
+func provideReactTemplateTestContextAttributes(context map[string]interface{}, attribute ModelAttribute) {
 	switch attribute.Type {
 	case STRING:
 		context["fieldFrontendTestValue"] = "'Some " + attribute.Name + "'"
@@ -340,6 +341,35 @@ func provideVueTemplateContextAttributes(context map[string]interface{}, attribu
 	}
 }
 
+func provideReactTemplateExpectedContextAttributes(context map[string]interface{}, attribute ModelAttribute) {
+	switch attribute.Type {
+	case STRING:
+		context["fieldFrontendExpectedValue"] = "'Some " + attribute.Name + "'"
+	case INT:
+		context["fieldFrontendExpectedValue"] = "'10'"
+	case TEXT:
+		context["fieldFrontendExpectedValue"] = "'Some " + attribute.Name + "'"
+	case DATE:
+		context["fieldFrontendExpectedValue"] = "'2000-01-01'"
+	case BOOLEAN:
+		context["fieldFrontendExpectedValue"] = "true"
+	case NULL_STRING:
+		context["fieldFrontendExpectedValue"] = "'Some " + attribute.Name + "'"
+	case NULL_INT:
+		context["fieldFrontendExpectedValue"] = "'10'"
+	case NULL_TEXT:
+		context["fieldFrontendExpectedValue"] = "'Some " + attribute.Name + "'"
+	case NULL_DATE:
+		context["fieldFrontendExpectedValue"] = "'2000-01-01'"
+	case NULL_BOOLEAN:
+		context["fieldFrontendExpectedValue"] = "true"
+	case RELATIONAL:
+		context["fieldFrontendExpectedValue"] = "1"
+	default:
+		panic("Undetermined attribute type.")
+	}
+}
+
 func provideVariableWithDifferentCases(context map[string]interface{}, name string, valueInCamelCase string) {
 	context[name+"CamelCase"] = strcase.ToLowerCamel(valueInCamelCase)
 	context[name+"PascalCase"] = strcase.ToCamel(valueInCamelCase)

pkg/generator/attributes_test.go

@@ -256,6 +256,19 @@ func TestProvideFieldNameContextAttributes(t *testing.T) {
 	assert.Equal(t, "BOOLEAN_OPTIONAL", fields[9]["fieldInputType"])
 	assert.Equal(t, "RELATIONAL", fields[10]["fieldInputType"])
 
+	// fieldFrontendTestValue
+	assert.Equal(t, "'Some streetName'", fields[0]["fieldFrontendExpectedValue"])
+	assert.Equal(t, "'10'", fields[1]["fieldFrontendExpectedValue"])
+	assert.Equal(t, "'Some streetName'", fields[2]["fieldFrontendExpectedValue"])
+	assert.Equal(t, "'2000-01-01'", fields[3]["fieldFrontendExpectedValue"])
+	assert.Equal(t, "true", fields[4]["fieldFrontendExpectedValue"])
+	assert.Equal(t, "'Some streetName'", fields[5]["fieldFrontendExpectedValue"])
+	assert.Equal(t, "'10'", fields[6]["fieldFrontendExpectedValue"])
+	assert.Equal(t, "'Some streetName'", fields[7]["fieldFrontendExpectedValue"])
+	assert.Equal(t, "'2000-01-01'", fields[8]["fieldFrontendExpectedValue"])
+	assert.Equal(t, "true", fields[9]["fieldFrontendExpectedValue"])
+	assert.Equal(t, "1", fields[10]["fieldFrontendExpectedValue"])
+
 	// fieldFrontendTestValue
 	assert.Equal(t, "'Some streetName'", fields[0]["fieldFrontendTestValue"])
 	assert.Equal(t, "10", fields[1]["fieldFrontendTestValue"])

pkg/generator/templates/auth-frontend/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/app/components/user/Register.test.tsx.peb → pkg/generator/templates/auth-frontend/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/app/auth/Register.test.tsx.peb

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { UserForm } from '@components/app/auth/Register'
+import { Register } from '@components/app/auth/Register'
 import { Client, Provider } from 'urql'
 import { fromValue } from 'wonka'
 

pkg/generator/templates/auth-frontend/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/app/auth/RegisterSuccess.test.tsx.peb

@@ -0,0 +1,8 @@
+import { RegisterSuccess } from '@components/app/auth/RegisterSuccess'
+import { render } from '@testing-library/react'
+
+describe('RegisterSuccess', () => {
+  it('renders without errors', () => {
+    render(<Loader />)
+  })
+})

pkg/generator/templates/react-frontend-scaffold/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/app/[nameKebabCase]/[namePascalCase]Form.test.tsx.peb

@@ -44,11 +44,9 @@ describe('{{ namePascalCase }}Form', () => {
         <{{ namePascalCase }}Form id="1" onSave={jest.fn()} onCancel={jest.fn()} />
       </Provider>
     )
-    const expectedFormValues = {
-      ...{{ nameCamelCase }}{%for field in fields%}{%if field.isFieldRelational%},
-      {{field.fieldNameCamelCase}}: '1'{%endif%}{%endfor%}
+    const expectedFormValues = {{ "{" }}{%for field in fields%}
+      {{field.fieldNameCamelCase}}: {{field.fieldFrontendExpectedValue}},{%endfor%}
     }
-    delete expectedFormValues.id
     expect(screen.getByRole('form')).toHaveFormValues(expectedFormValues)
   })
 

pkg/generator/templates/react-frontend-scaffold/[artifactId]-web/src/components/app/[nameKebabCase]/[namePascalCase]Form.tsx.peb

@@ -94,6 +94,14 @@ export function {{ namePascalCase }}Form(props: {{ namePascalCase }}FormProps) {
     ),
   })
 {%endif%}{%endfor%}
+  const formik = useFormik({
+    initialValues: {{ "{" }}{%for field in fields%}
+{{ field.fieldNameCamelCase }}: data?.{{ nameCamelCase }}?.{{ field.fieldNameCamelCase }}{%if field.fieldType == "BOOLEAN" or field.fieldType == "NULL_BOOLEAN"%} || false{%endif%}{%if field.fieldType == "STRING" or field.fieldType == "NULL_STRING" or field.fieldType == "TEXT" or field.fieldType == "NULL_TEXT"%} || ''{%endif%},{%endfor%}
+    },
+    enableReinitialize: true,
+    onSubmit: doSubmit
+  })
+
   if (fetching{%for field in fields%}{%if field.isFieldRelational%} || {{ field.fieldTypePluralCamelCase }}QueryResult.fetching{%endif%}{%endfor%}) {
     return <Loader />
   }
@@ -104,13 +112,6 @@ export function {{ namePascalCase }}Form(props: {{ namePascalCase }}FormProps) {
     return <Error value={queryError} />
   }
 
-  const formik = useFormik({
-    initialValues: {{ "{" }}{%for field in fields%}
-      {{ field.fieldNameCamelCase }}: data?.{{ nameCamelCase }}?.{{ field.fieldNameCamelCase }}{%if field.fieldType == "BOOLEAN" or field.fieldType == "NULL_BOOLEAN"%} || false{%endif%}{%if field.fieldType == "STRING" or field.fieldType == "NULL_STRING" or field.fieldType == "TEXT" or field.fieldType == "NULL_TEXT"%} || ''{%endif%},{%endfor%}
-    },
-    onSubmit: doSubmit
-  })
-
   return (
     <Form role="form" onSubmit={formik.handleSubmit}>{%for field in fields%}
       {%if field.fieldType == "RELATIONAL" %}{props.{{ field.fieldNameCamelCase }} ? <></> : {%endif%}<Form.Field htmlFor="{{ field.fieldNameCamelCase }}" label="{{ field.fieldNamePascalCase }}">{%if field.fieldType == "STRING" or field.fieldType == "NULL_STRING" %}

pkg/generator/templates/react-frontend/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Form.test.tsx.peb

@@ -5,8 +5,8 @@ describe('Form', () => {
   it('renders form with fields', () => {
     render(
       <Form>
-        <Form.Field label="Field">
-          <Form.Text />
+        <Form.Field htmlFor="text" label="Field">
+          <Form.Text name="text" />
         </Form.Field>
       </Form>
     )

pkg/generator/templates/react-frontend/[artifactId]-web/[underscore][underscore]tests[underscore][underscore]/components/Header.test.tsx.peb

@@ -0,0 +1,11 @@
+import { Header } from '@components/Header'
+import { render, screen } from '@testing-library/react'
+
+describe('Header', () => {
+  [1, 2, 3, 4, 5, 6].forEach(level => {
+    it(`renders the header for header ${level}`, () => {
+      render(<Header level={level}>Hello, World!</Header>)
+      expect(screen.queryAllByText('Hello, World!')).toHaveLength(1)
+    })
+  })
+})

pkg/generator/templates/react-frontend/[artifactId]-web/codegen.yml.peb

@@ -2,7 +2,5 @@ overwrite: true
 schema: "../{{ artifactId }}-server/src/main/resources/schema/*"
 documents: "src/**/*.tsx"
 generates:
-  src/generated/graphql.ts:
-    plugins:
-      - "typescript"
-      - "typescript-document-nodes"
+  src/generated/:
+    preset: client

pkg/generator/templates/react-frontend/[artifactId]-web/src/components/Form.tsx.peb

@@ -20,42 +20,27 @@ Form.Field = (props: FieldProps) => {
   )
 }
 
-Form.Text = ({
-  children,
-  ...props
-}: React.InputHTMLAttributes<HTMLInputElement>) => {
+Form.Text = (props: React.InputHTMLAttributes<HTMLInputElement>) => {
   return (
-    <input type="text" {...props}>
-      {children}
-    </input>
+    <input type="text" {...props} />
   )
 }
 
-Form.Integer = ({
-  children,
-  ...props
-}: React.InputHTMLAttributes<HTMLInputElement>) => {
+Form.Integer = (props: React.InputHTMLAttributes<HTMLInputElement>) => {
   return (
     <input type="number" {...props} />
   )
 }
 
-Form.Date = ({
-  ...props
-}: React.InputHTMLAttributes<HTMLInputElement>) => {
+Form.Date = (props: React.InputHTMLAttributes<HTMLInputElement>) => {
   return (
     <input type="date" {...props} />
   )
 }
 
-Form.Checkbox = ({
-  children,
-  ...props
-}: React.InputHTMLAttributes<HTMLInputElement>) => {
+Form.Checkbox = (props: React.InputHTMLAttributes<HTMLInputElement>) => {
   return (
-    <input type="checkbox" {...props}>
-      {children}
-    </input>
+    <input type="checkbox" {...props} />
   )
 }
 

pkg/generator/templates/react-frontend/[artifactId]-web/src/components/Header.tsx.peb

@@ -0,0 +1,13 @@
+export interface HeaderProps {
+  level: number
+  children: React.ReactNode
+}
+
+export const Header = ({ level, children }: HeaderProps) => ({
+  1: <h1>{children}</h1>,
+  2: <h2>{children}</h2>,
+  3: <h3>{children}</h3>,
+  4: <h4>{children}</h4>,
+  5: <h5>{children}</h5>,
+  6: <h6>{children}</h6>,
+}[level])

pkg/generator/templates/react-frontend/[artifactId]-web/src/components/List.tsx.peb

@@ -1,3 +1,4 @@
+import Link from 'next/link'
 import React from 'react'
 
 export interface AppListFieldProps {
@@ -40,8 +41,8 @@ export const List = <T,>({
               <td key={field.name}>{'' + values[field.name as keyof T]}</td>
             ))}
             <td>
-              {actions.showHref && <a href={actions.showHref}>Show</a>}
-              {actions.editHref && <a href={actions.editHref}>Edit</a>}
+              {actions.showHref && <Link href={actions.showHref}>Show</Link>}
+              {actions.editHref && <Link href={actions.editHref}>Edit</Link>}
               {actions.onDeleteClick && <button onClick={actions.onDeleteClick}>Delete</button>}
             </td>
           </tr>

pkg/generator/templates/react-frontend/[artifactId]-web/src/components/layout/DefaultLayout.tsx.peb

@@ -1,3 +1,4 @@
+import { Header } from '@components/Header'
 import Link from 'next/link'
 import { ReactNode } from 'react'
 
@@ -15,7 +16,7 @@ export interface DefaultLayoutProps {
 export function DefaultLayout(props: DefaultLayoutProps) {
   return (
     <>
-      <h1>{{ artifactId }}</h1>
+      <div>{{ artifactId }}</div>
       {props.breadcrumbs && (
         <ul>
           {props.breadcrumbs.map((breadcrumb, i) => (
@@ -25,7 +26,7 @@ export function DefaultLayout(props: DefaultLayoutProps) {
           ))}
         </ul>
       )}
-      <h2>{props.title}</h2>
+      <Header level={1}>{props.title}</Header>
       {props.children}
     </>
   )

pkg/generator/templates/react-frontend/[artifactId]-web/tsconfig.json

@@ -54,10 +54,6 @@
     "node_modules",
     "next.config.js",
     "postcss.config.js",
-    "**/*.spec.ts",
-    "**/*.spec.tsx",
-    "**/*.test.ts",
-    "**/*.test.tsx",
     "coverage"
   ],
   "include": [