From 0727f3187808561635dc189dfedc9940fa3ba8ae Mon Sep 17 00:00:00 2001 From: Ole Martin Handeland Date: Thu, 14 Jul 2022 11:00:20 +0200 Subject: [PATCH] Cleaning up some warnings from tests and React runtime (#337) Co-authored-by: Ole Martin Handeland --- .../base/DatepickerComponent.test.tsx | 14 +++++++ .../src/components/base/ImageComponent.tsx | 2 +- .../base/ParagraphComponent.test.tsx | 37 +++++++++++++++++++ .../components/base/ParagraphComponent.tsx | 6 +++ .../src/utils/dateHelpers.test.ts | 14 ++++++- .../src/utils/validation.test.ts | 19 ++++++++++ .../src/utils/validation.ts | 10 +++++ 7 files changed, 100 insertions(+), 2 deletions(-) diff --git a/src/altinn-app-frontend/src/components/base/DatepickerComponent.test.tsx b/src/altinn-app-frontend/src/components/base/DatepickerComponent.test.tsx index 9b3e5be6fa..7fdc6e74ee 100644 --- a/src/altinn-app-frontend/src/components/base/DatepickerComponent.test.tsx +++ b/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'), diff --git a/src/altinn-app-frontend/src/components/base/ImageComponent.tsx b/src/altinn-app-frontend/src/components/base/ImageComponent.tsx index 701a3ef4bd..fa46a028a2 100644 --- a/src/altinn-app-frontend/src/components/base/ImageComponent.tsx +++ b/src/altinn-app-frontend/src/components/base/ImageComponent.tsx @@ -57,7 +57,7 @@ export function ImageComponent(props: IImageProps) { {renderSvg ? ( diff --git a/src/altinn-app-frontend/src/components/base/ParagraphComponent.test.tsx b/src/altinn-app-frontend/src/components/base/ParagraphComponent.test.tsx index 2a568cc881..c3d45f1dd0 100644 --- a/src/altinn-app-frontend/src/components/base/ParagraphComponent.test.tsx +++ b/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
when a header text is supplied', () => { + const { container } = render( + Hello world} + language={mockLanguage} + getTextResource={mockGetTextResource} + textResourceBindings={mockTextResourceBindings} + {...({} as IComponentProps)} + />, + ); + + expect(container.querySelector('#mock-id').tagName).toEqual('DIV'); + }); + + it('should render in a

when regular text content is supplied', () => { + const { container } = render( + + Hello world with line +
+ break + + } + language={mockLanguage} + getTextResource={mockGetTextResource} + textResourceBindings={mockTextResourceBindings} + {...({} as IComponentProps)} + />, + ); + + expect(container.querySelector('#mock-id').tagName).toEqual('P'); + }); }); diff --git a/src/altinn-app-frontend/src/components/base/ParagraphComponent.tsx b/src/altinn-app-frontend/src/components/base/ParagraphComponent.tsx index 00c624d4b5..59c5bb8c45 100644 --- a/src/altinn-app-frontend/src/components/base/ParagraphComponent.tsx +++ b/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 ( diff --git a/src/altinn-app-frontend/src/utils/dateHelpers.test.ts b/src/altinn-app-frontend/src/utils/dateHelpers.test.ts index c78bb58583..50578833d9 100644 --- a/src/altinn-app-frontend/src/utils/dateHelpers.test.ts +++ b/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); diff --git a/src/altinn-app-frontend/src/utils/validation.test.ts b/src/altinn-app-frontend/src/utils/validation.test.ts index 31294ec29d..6e3b95e0f5 100644 --- a/src/altinn-app-frontend/src/utils/validation.test.ts +++ b/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', () => { diff --git a/src/altinn-app-frontend/src/utils/validation.ts b/src/altinn-app-frontend/src/utils/validation.ts index b1611791e5..301f664c3a 100644 --- a/src/altinn-app-frontend/src/utils/validation.ts +++ b/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,