From b442e7f838e9c769a2b91809189f5348f08674cf Mon Sep 17 00:00:00 2001 From: Eric Schultz Date: Fri, 13 Dec 2024 22:18:03 -0600 Subject: [PATCH 1/9] Update ProgressableButton test --- .../common/ProgressableButton.spec.tsx | 26 ++++++++---- .../ProgressableButton.spec.tsx.snap | 41 +------------------ 2 files changed, 21 insertions(+), 46 deletions(-) diff --git a/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx b/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx index dee1911ab..2f58b2132 100644 --- a/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx +++ b/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx @@ -3,17 +3,27 @@ import * as React from 'react'; import ProgressableButton from './ProgressableButton' import toJson from 'enzyme-to-json'; import {mount, shallow} from 'enzyme'; +import {render, screen} from '@testing-library/react' +import userEvent from '@testing-library/user-event' describe('ProgressableButton', () => { - test('Basic title button works', () => { - let output = shallow( - console.log('alert!')} buttonText={"nothing"} data-label="button"/>) - expect(toJson(output)).toMatchSnapshot() + test('Basic title button works', async () => { + const clicked = jest.fn() + let output = render( + ) + + userEvent.click(screen.getByText("nothing")) + expect(clicked).toBeCalled(); + + expect(output.baseElement.outerHTML).toMatchSnapshot() + + }) test('Progress means we change the title, dont disable and do turn on spinner', () => { - let output = mount( - console.log('alert!')} + const clicked = jest.fn() + let output = render( + { disableOnProgress={false} />) - expect(toJson(output)).toMatchSnapshot() + userEvent.click(screen.getByText("onProgress")) + expect(clicked).toBeCalled(); + expect(output.baseElement.outerHTML).toMatchSnapshot() }) test('Title is kept on progress if no titleOnProgress is set', () => { diff --git a/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap b/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap index ed4045a73..4bc89963a 100644 --- a/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap +++ b/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap @@ -1,17 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ProgressableButton Basic title button works 1`] = ` - -`; +exports[`ProgressableButton Basic title button works 1`] = `"
"`; exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when NOT in progress 1`] = ` `; -exports[`ProgressableButton Progress means we change the title, dont disable and do turn on spinner 1`] = ` - - - -`; +exports[`ProgressableButton Progress means we change the title, dont disable and do turn on spinner 1`] = `"
"`; exports[`ProgressableButton Title is kept on progress if no titleOnProgress is set 1`] = ` Date: Fri, 13 Dec 2024 22:20:42 -0600 Subject: [PATCH 2/9] Update one more test --- .../common/ProgressableButton.spec.tsx | 8 +++--- .../ProgressableButton.spec.tsx.snap | 26 +------------------ 2 files changed, 4 insertions(+), 30 deletions(-) diff --git a/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx b/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx index 2f58b2132..d240b8b88 100644 --- a/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx +++ b/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx @@ -31,20 +31,18 @@ describe('ProgressableButton', () => { disableOnProgress={false} />) - userEvent.click(screen.getByText("onProgress")) - expect(clicked).toBeCalled(); expect(output.baseElement.outerHTML).toMatchSnapshot() }) test('Title is kept on progress if no titleOnProgress is set', () => { - let output = mount( - console.log('alert!')} + let output = render( + {}} buttonText={"nothing"} data-label="button" inProgress={true} />) - expect(toJson(output)).toMatchSnapshot() + expect(output.baseElement.outerHTML).toMatchSnapshot() }) test('Progress means we change the title, disable and do turn on spinner', () => { diff --git a/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap b/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap index 4bc89963a..6416a3a28 100644 --- a/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap +++ b/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap @@ -84,28 +84,4 @@ exports[`ProgressableButton Progress means we change the title, disable and do t exports[`ProgressableButton Progress means we change the title, dont disable and do turn on spinner 1`] = `"
"`; -exports[`ProgressableButton Title is kept on progress if no titleOnProgress is set 1`] = ` - - - -`; +exports[`ProgressableButton Title is kept on progress if no titleOnProgress is set 1`] = `"
"`; From 1dd32796888b919a8cf6d87e44b0adf15826fedd Mon Sep 17 00:00:00 2001 From: Eric Schultz Date: Fri, 13 Dec 2024 22:23:40 -0600 Subject: [PATCH 3/9] Switch ProgressiveButton tests away from enzyme --- .../common/ProgressableButton.spec.tsx | 14 ++-- .../ProgressableButton.spec.tsx.snap | 80 +------------------ 2 files changed, 9 insertions(+), 85 deletions(-) diff --git a/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx b/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx index d240b8b88..26d8bb79d 100644 --- a/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx +++ b/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx @@ -1,8 +1,6 @@ // License: LGPL-3.0-or-later import * as React from 'react'; import ProgressableButton from './ProgressableButton' -import toJson from 'enzyme-to-json'; -import {mount, shallow} from 'enzyme'; import {render, screen} from '@testing-library/react' import userEvent from '@testing-library/user-event' @@ -46,7 +44,7 @@ describe('ProgressableButton', () => { }) test('Progress means we change the title, disable and do turn on spinner', () => { - let output = mount( + let output = render( console.log('alert!')} buttonText={"nothing"} data-label="button" @@ -55,12 +53,12 @@ describe('ProgressableButton', () => { disableOnProgress={true} />) - expect(toJson(output)).toMatchSnapshot() + expect(output.baseElement.outerHTML).toMatchSnapshot() }) test('Disabled manually set overrides whether we disable on progress when in progress', () => { - let output = mount( + let output = render( console.log('alert!')} buttonText={"nothing"} data-label="button" @@ -70,12 +68,12 @@ describe('ProgressableButton', () => { disabled={true} />) - expect(toJson(output)).toMatchSnapshot() + expect(output.baseElement.outerHTML).toMatchSnapshot() }) test('Disabled manually set overrides whether we disable on progress when NOT in progress', () => { - let output = mount( + let output = render( console.log('alert!')} buttonText={"nothing"} data-label="button" @@ -85,7 +83,7 @@ describe('ProgressableButton', () => { disabled={true} />) - expect(toJson(output)).toMatchSnapshot() + expect(output.baseElement.outerHTML).toMatchSnapshot() }) diff --git a/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap b/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap index 6416a3a28..a39fe79a7 100644 --- a/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap +++ b/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap @@ -2,85 +2,11 @@ exports[`ProgressableButton Basic title button works 1`] = `"
"`; -exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when NOT in progress 1`] = ` - - - -`; +exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when NOT in progress 1`] = `"
"`; -exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when in progress 1`] = ` - - - -`; +exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when in progress 1`] = `"
"`; -exports[`ProgressableButton Progress means we change the title, disable and do turn on spinner 1`] = ` - - - -`; +exports[`ProgressableButton Progress means we change the title, disable and do turn on spinner 1`] = `"
"`; exports[`ProgressableButton Progress means we change the title, dont disable and do turn on spinner 1`] = `"
"`; From 912e092814cea2b4a3b71ecfcfe4f58b93877353 Mon Sep 17 00:00:00 2001 From: Eric Schultz Date: Fri, 13 Dec 2024 22:31:27 -0600 Subject: [PATCH 4/9] Start to update Modal.spec --- .../legacy_react/src/components/common/Modal.spec.tsx | 5 +++-- .../src/components/common/__snapshots__/Modal.spec.tsx.snap | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/javascript/legacy_react/src/components/common/Modal.spec.tsx b/app/javascript/legacy_react/src/components/common/Modal.spec.tsx index 6616b81ab..b09ddef00 100644 --- a/app/javascript/legacy_react/src/components/common/Modal.spec.tsx +++ b/app/javascript/legacy_react/src/components/common/Modal.spec.tsx @@ -3,13 +3,14 @@ import * as React from 'react'; import Modal, {ModalProps} from './Modal' import {shallow, mount, ReactWrapper} from "enzyme"; import toJson from "enzyme-to-json"; +import {render, screen} from '@testing-library/react' import { DefaultCloseButton } from './DefaultCloseButton'; describe('Modal', () => { test('nothing displayed if inactive', () => { - let modal = shallow(
}/>) + let modal = render(
}/>) - expect(toJson(modal)).toMatchSnapshot() + expect(modal.baseElement.outerHTML).toMatchSnapshot() }) describe('active modal displays', () => { diff --git a/app/javascript/legacy_react/src/components/common/__snapshots__/Modal.spec.tsx.snap b/app/javascript/legacy_react/src/components/common/__snapshots__/Modal.spec.tsx.snap index 05ed686a9..2f0a9d4dd 100644 --- a/app/javascript/legacy_react/src/components/common/__snapshots__/Modal.spec.tsx.snap +++ b/app/javascript/legacy_react/src/components/common/__snapshots__/Modal.spec.tsx.snap @@ -367,4 +367,4 @@ exports[`Modal active modal displays matches snapshot 1`] = ` `; -exports[`Modal nothing displayed if inactive 1`] = `""`; +exports[`Modal nothing displayed if inactive 1`] = `"
"`; From 06844fd827eee08e8734fc2b6994bf3dacfd9e2e Mon Sep 17 00:00:00 2001 From: Eric Schultz Date: Fri, 13 Dec 2024 22:41:40 -0600 Subject: [PATCH 5/9] Use RTL for LabeledFieldComponent --- .../common/LabeledFieldComponent.spec.tsx | 19 ++- .../LabeledFieldComponent.spec.tsx.snap | 142 ++++++++++-------- 2 files changed, 90 insertions(+), 71 deletions(-) diff --git a/app/javascript/legacy_react/src/components/common/LabeledFieldComponent.spec.tsx b/app/javascript/legacy_react/src/components/common/LabeledFieldComponent.spec.tsx index 390eda678..4f9141532 100644 --- a/app/javascript/legacy_react/src/components/common/LabeledFieldComponent.spec.tsx +++ b/app/javascript/legacy_react/src/components/common/LabeledFieldComponent.spec.tsx @@ -1,37 +1,36 @@ // License: LGPL-3.0-or-later import * as React from 'react'; -import {shallow} from 'enzyme' -import toJson from 'enzyme-to-json' +import {render} from '@testing-library/react' import LabeledFieldComponent from './LabeledFieldComponent' describe('LabeledFieldComponent', () => { test('In Error with Children', () => { - let result = shallow(
) - expect(toJson(result)).toMatchSnapshot() + expect(result.baseElement).toMatchSnapshot() }) test('has error checked but no message so not really in error', () => { - let result = shallow( + let result = render(
) - expect(toJson(result)).toMatchSnapshot() + expect(result.baseElement).toMatchSnapshot() }) test('no error', () => { - let result = shallow( + let result = render(
) - expect(toJson(result)).toMatchSnapshot() + expect(result.baseElement).toMatchSnapshot() }) test('add extra classNames', () => { - let result = shallow(
) - expect(toJson(result)).toMatchSnapshot() + expect(result.baseElement).toMatchSnapshot() }) }) \ No newline at end of file diff --git a/app/javascript/legacy_react/src/components/common/__snapshots__/LabeledFieldComponent.spec.tsx.snap b/app/javascript/legacy_react/src/components/common/__snapshots__/LabeledFieldComponent.spec.tsx.snap index c035d5215..5a3e1de49 100644 --- a/app/javascript/legacy_react/src/components/common/__snapshots__/LabeledFieldComponent.spec.tsx.snap +++ b/app/javascript/legacy_react/src/components/common/__snapshots__/LabeledFieldComponent.spec.tsx.snap @@ -1,74 +1,94 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`LabeledFieldComponent In Error with Children 1`] = ` -
- - -
- -
+ +
+
+ +
+
+ + +
+
+
+ `; exports[`LabeledFieldComponent add extra classNames 1`] = ` -
- - -
- -
+ +
+
+ +
+
+ + +
+
+
+ `; exports[`LabeledFieldComponent has error checked but no message so not really in error 1`] = ` -
- - -
- -
+ +
+
+ +
+
+ + +
+
+
+ `; exports[`LabeledFieldComponent no error 1`] = ` -
- - -
- -
+ +
+
+ +
+
+ + +
+
+
+ `; From c28ec7b61e5f6592aec4d6c768faa778e6fbd52b Mon Sep 17 00:00:00 2001 From: Eric Schultz Date: Fri, 13 Dec 2024 22:42:50 -0600 Subject: [PATCH 6/9] Correct snapshot --- .../common/ProgressableButton.spec.tsx | 12 +- .../ProgressableButton.spec.tsx.snap | 117 +++++++++++++++++- 2 files changed, 117 insertions(+), 12 deletions(-) diff --git a/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx b/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx index 26d8bb79d..2ce2c1bf5 100644 --- a/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx +++ b/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx @@ -13,7 +13,7 @@ describe('ProgressableButton', () => { userEvent.click(screen.getByText("nothing")) expect(clicked).toBeCalled(); - expect(output.baseElement.outerHTML).toMatchSnapshot() + expect(output.baseElement).toMatchSnapshot() }) @@ -29,7 +29,7 @@ describe('ProgressableButton', () => { disableOnProgress={false} />) - expect(output.baseElement.outerHTML).toMatchSnapshot() + expect(output.baseElement).toMatchSnapshot() }) test('Title is kept on progress if no titleOnProgress is set', () => { @@ -40,7 +40,7 @@ describe('ProgressableButton', () => { inProgress={true} />) - expect(output.baseElement.outerHTML).toMatchSnapshot() + expect(output.baseElement).toMatchSnapshot() }) test('Progress means we change the title, disable and do turn on spinner', () => { @@ -53,7 +53,7 @@ describe('ProgressableButton', () => { disableOnProgress={true} />) - expect(output.baseElement.outerHTML).toMatchSnapshot() + expect(output.baseElement).toMatchSnapshot() }) @@ -68,7 +68,7 @@ describe('ProgressableButton', () => { disabled={true} />) - expect(output.baseElement.outerHTML).toMatchSnapshot() + expect(output.baseElement).toMatchSnapshot() }) @@ -83,7 +83,7 @@ describe('ProgressableButton', () => { disabled={true} />) - expect(output.baseElement.outerHTML).toMatchSnapshot() + expect(output.baseElement).toMatchSnapshot() }) diff --git a/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap b/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap index a39fe79a7..0829d8b54 100644 --- a/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap +++ b/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap @@ -1,13 +1,118 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ProgressableButton Basic title button works 1`] = `"
"`; +exports[`ProgressableButton Basic title button works 1`] = ` + +
+ +
+ +`; -exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when NOT in progress 1`] = `"
"`; +exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when NOT in progress 1`] = ` + +
+ +
+ +`; -exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when in progress 1`] = `"
"`; +exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when in progress 1`] = ` + +
+