Cleaning up some warnings from tests and React runtime (#337)

Co-authored-by: Ole Martin Handeland <git@olemartin.org>

src/altinn-app-frontend/src/components/base/DatepickerComponent.test.tsx

@@ -59,6 +59,7 @@ describe('DatepickerComponent', () => {
   });
 
   it('should not show calendar initially, and show calendar when clicking calendar button', async () => {
+    jest.spyOn(console, 'error').mockImplementation();
     render();
 
     expect(getCalendarYearHeader('queryByRole')).not.toBeInTheDocument();
@@ -67,6 +68,12 @@ describe('DatepickerComponent', () => {
 
     expect(getCalendarYearHeader()).toBeInTheDocument();
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.error).toHaveBeenCalledWith(
+      expect.stringMatching(
+        /Material-UI: The `fade` color utility was renamed to `alpha` to better describe its functionality/,
+      ),
+    );
   });
 
   it('should not show calendar initially, and show calendar in a dialog when clicking calendar button, and screen size is mobile sized', async () => {
@@ -226,6 +233,7 @@ describe('DatepickerComponent', () => {
   });
 
   it('should show error message when typed date is on an invalid format and call handleDataChange with empty value if formdata is present', async () => {
+    jest.spyOn(console, 'warn').mockImplementation();
     const handleDataChange = jest.fn();
     render({ handleDataChange, formData: { simpleBinding: '12.12.2022' } });
 
@@ -241,6 +249,12 @@ describe('DatepickerComponent', () => {
     fireEvent.blur(inputField);
 
     expect(screen.getByRole('alert')).toBeInTheDocument();
+    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledWith(
+      expect.stringMatching(
+        /Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date/,
+      ),
+    );
 
     expect(
       screen.getByText('date_picker.invalid_date_message'),

src/altinn-app-frontend/src/components/base/ImageComponent.tsx

@@ -57,7 +57,7 @@ export function ImageComponent(props: IImageProps) {
     <Grid
       container
       direction='row'
-      justify={align}
+      justifyContent={align}
     >
       <Grid item={true}>
         {renderSvg ? (

src/altinn-app-frontend/src/components/base/ParagraphComponent.test.tsx

@@ -1,6 +1,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 import type { ITextResourceBindings } from 'src/features/form/layout';
 import type { IComponentProps } from 'src/components';
@@ -58,4 +59,40 @@ describe('ParagraphComponent', () => {
 
     expect(shallowParagraphComponent.find('HelpTextContainer')).toHaveLength(1);
   });
+
+  it('should render in a <div> when a header text is supplied', () => {
+    const { container } = render(
+      <ParagraphComponent
+        id={mockId}
+        text={<h3>Hello world</h3>}
+        language={mockLanguage}
+        getTextResource={mockGetTextResource}
+        textResourceBindings={mockTextResourceBindings}
+        {...({} as IComponentProps)}
+      />,
+    );
+
+    expect(container.querySelector('#mock-id').tagName).toEqual('DIV');
+  });
+
+  it('should render in a <p> when regular text content is supplied', () => {
+    const { container } = render(
+      <ParagraphComponent
+        id={mockId}
+        text={
+          <>
+            Hello world with line
+            <br />
+            break
+          </>
+        }
+        language={mockLanguage}
+        getTextResource={mockGetTextResource}
+        textResourceBindings={mockTextResourceBindings}
+        {...({} as IComponentProps)}
+      />,
+    );
+
+    expect(container.querySelector('#mock-id').tagName).toEqual('P');
+  });
 });

src/altinn-app-frontend/src/components/base/ParagraphComponent.tsx

@@ -34,6 +34,11 @@ const useStyles = makeStyles({
 
 export function ParagraphComponent(props: IComponentProps) {
   const classes = useStyles();
+  const isHeader =
+    typeof props.text === 'object' &&
+    typeof (props.text as any).type === 'string' &&
+    (props.text as any).type.match(/^h\d+$/);
+
   return (
     <Grid
       container={true}
@@ -42,6 +47,7 @@ export function ParagraphComponent(props: IComponentProps) {
     >
       <Grid item={true}>
         <Typography
+          component={isHeader ? 'div' : 'p'}
           id={props.id}
           className={`${classes.spacing} ${classes.typography}`}
         >

src/altinn-app-frontend/src/utils/dateHelpers.test.ts

@@ -21,13 +21,25 @@ describe('/utils/dateFlagParser.ts', () => {
   });
 
   describe('getISOString(...)', () => {
-    test.each(['', undefined, null, 'abcdef'])(
+    test.each(['', undefined, null])(
       'should return undefined if input date is %p',
       (date) => {
         expect(getISOString(date)).toBeUndefined();
       },
     );
 
+    it('should return undefined if input date is "abcdef"', () => {
+      jest.spyOn(console, 'warn').mockImplementation();
+
+      expect(getISOString('abcdef')).toBeUndefined();
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(console.warn).toHaveBeenCalledWith(
+        expect.stringMatching(
+          /Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date/,
+        ),
+      );
+    });
+
     it('should return ISO string if input date is valid ISO string', () => {
       const validISOString = '2020-12-13T12:00:00Z';
       const result = getISOString(validISOString);

src/altinn-app-frontend/src/utils/validation.test.ts

@@ -515,6 +515,25 @@ describe('utils > validation', () => {
         code: '',
       },
     ];
+
+    /**
+     * Silences deprecation warning about jsPropertySyntax from Ajv, so we don't pollute our test runner output with
+     * these warnings. We already know about the deprecation of jsPropertySyntax, and our tests will fail if/when
+     * AJV decides to completely remove support for this syntax.
+     *
+     * @see createValidator
+     */
+    const oldConsoleWarn = console.warn;
+    console.warn = (...args: any[]) => {
+      if (
+        typeof args[0] === 'string' &&
+        args[0].match(/DEPRECATED: option jsPropertySyntax/)
+      ) {
+        return;
+      }
+
+      oldConsoleWarn(...args);
+    };
   });
 
   describe('getErrorCount', () => {

src/altinn-app-frontend/src/utils/validation.ts

@@ -81,7 +81,17 @@ export function createValidator(schema: any): ISchemaValidator {
   const ajvOptions: Options = {
     allErrors: true,
     coerceTypes: true,
+
+    /**
+     * This option is deprecated in AJV, but continues to work for now. We have unit tests that will fail if the
+     * functionality is removed from AJV. The jsPropertySyntax (ex. 'Path.To.Array[0].Item') was replaced with JSON
+     * pointers in v7 (ex. '/Path/To/Array/0/Item'). If the option to keep the old syntax is removed at some point,
+     * we'll have to implement a translator ourselves, as we'll need this format to equal our data model bindings.
+     *
+     * @see https://github.com/ajv-validator/ajv/issues/1577#issuecomment-832216719
+     */
     jsPropertySyntax: true,
+
     strict: false,
     strictTypes: false,
     strictTuples: false,