From 703e9db06d10689866664d97b659629e68ee3f6f Mon Sep 17 00:00:00 2001
From: "guilhem.carron" <gcarron@grandlyon.com>
Date: Wed, 21 Jul 2021 15:48:34 +0200
Subject: [PATCH] Update tests
---
.../Feedback/FeedbackModal.spec.tsx | 126 +++++++++++++--
src/components/Feedback/FeedbackModal.tsx | 25 ++-
.../__snapshots__/FeedbackModal.spec.tsx.snap | 148 ++----------------
3 files changed, 140 insertions(+), 159 deletions(-)
diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx
index 7b6c47d27..50a165584 100644
--- a/src/components/Feedback/FeedbackModal.spec.tsx
+++ b/src/components/Feedback/FeedbackModal.spec.tsx
@@ -1,10 +1,16 @@
import React from 'react'
import * as reactRedux from 'react-redux'
-import { shallow } from 'enzyme'
+import { mount } from 'enzyme'
import FeedbackModal from 'components/Feedback/FeedbackModal'
import Button from '@material-ui/core/Button'
import { userChallengeExplo1OnGoing } from '../../../tests/__mocks__/userChallengeData.mock'
+import { Provider } from 'react-redux'
+import {
+ createMockStore,
+ mockInitialEcolyoState,
+} from '../../../tests/__mocks__/store'
+import { act } from '@testing-library/react'
const mockSendMail = jest.fn()
jest.mock('services/mail.service', () => {
@@ -31,22 +37,42 @@ const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch')
describe('FeedbackModal component', () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ let store: any
+ beforeEach(() => {
+ store = createMockStore(mockInitialEcolyoState)
+ })
it('should render the component', () => {
mockUseDispatch.mockReturnValue(jest.fn())
mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing)
- const component = shallow(
- <FeedbackModal open={true} handleCloseClick={handleFeedbackModalClose} />
+ const component = mount(
+ <Provider store={store}>
+ <FeedbackModal
+ open={true}
+ handleCloseClick={handleFeedbackModalClose}
+ />
+ </Provider>
).getElement()
expect(component).toMatchSnapshot()
})
})
describe('FeedbackModal functionnalities', () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ let store: any
+ beforeEach(() => {
+ store = createMockStore(mockInitialEcolyoState)
+ })
it('should should send an email to the support', () => {
mockUseDispatch.mockReturnValue(jest.fn())
mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing)
- const wrapper = shallow(
- <FeedbackModal open={true} handleCloseClick={handleFeedbackModalClose} />
+ const wrapper = mount(
+ <Provider store={store}>
+ <FeedbackModal
+ open={true}
+ handleCloseClick={handleFeedbackModalClose}
+ />
+ </Provider>
)
const mockPlatform = 'platform'
@@ -58,8 +84,14 @@ describe('FeedbackModal functionnalities', () => {
const expectedMailData = {
mode: 'from',
- to: [{ name: 'Support', email: 'ecolyo@grandlyon.com' }],
+ to: [
+ {
+ name: 'Support',
+ email: 'ecolyo@grandlyon.com',
+ },
+ ],
subject: '[Ecolyo] - Feedbacks - feedback.type_bug',
+ attachments: [],
parts: [
{
type: 'text/plain',
@@ -90,9 +122,11 @@ describe('FeedbackModal functionnalities', () => {
.find('div.fb-selector-item')
.first()
.simulate('click')
- wrapper
- .find('#idFeedbackDescription')
- .simulate('change', { target: { value: 'La description' } })
+ wrapper.find('#idFeedbackDescription').simulate('change', {
+ target: {
+ value: 'La description',
+ },
+ })
wrapper.find(Button).simulate('click')
expect(mockSendMail).toHaveBeenCalledWith(
@@ -100,19 +134,79 @@ describe('FeedbackModal functionnalities', () => {
expectedMailData
)
})
- it('should close the modal and reset the inputs', () => {
+ it('should close the modal and reset the inputs', async () => {
mockUseDispatch.mockReturnValue(jest.fn())
mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing)
- const wrapper = shallow(
- <FeedbackModal open={true} handleCloseClick={handleFeedbackModalClose} />
+ const wrapper = mount(
+ <Provider store={store}>
+ <FeedbackModal
+ open={true}
+ handleCloseClick={handleFeedbackModalClose}
+ />
+ </Provider>
)
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ wrapper.find('#idFeedbackDescription').simulate('change', {
+ target: {
+ value: 'La description',
+ },
+ })
wrapper
- .find('#idFeedbackDescription')
- .simulate('change', { target: { value: 'La description' } })
- wrapper.find('.modal-paper-close-button').simulate('click')
+ .find('.modal-paper-close-button')
+ .first()
+ .simulate('click')
expect(handleFeedbackModalClose).toHaveBeenCalledTimes(1)
setTimeout(() => {
- expect(wrapper.find('#idFeedbackDescription').prop('value')).toBeNull()
+ expect(wrapper.find('#idFeedbackDescription').prop('value')).toBe('')
})
})
+ // it('should resolve file as data URL', async () => {
+ // const wrapper = mount(
+ // <Provider store={store}>
+ // <FeedbackModal
+ // open={true}
+ // handleCloseClick={handleFeedbackModalClose}
+ // />
+ // </Provider>
+ // )
+ // const file = new File([new ArrayBuffer(1)], 'file.jpg')
+ // const fileReader = new ReadFileAsDataURL.FileReaderMock()
+ // jest.spyOn(window, 'FileReader').mockImplementation(() => fileReader)
+
+ // fileReader.result = 'file content'
+ // fileReader.addEventListener.mockImplementation((_, fn) => fn())
+
+ // const content = await readFileAsDataURL(file)
+
+ // expect(content).toBe('file content')
+ // expect(fileReader.readAsDataURL).toHaveBeenCalledTimes(1)
+ // expect(fileReader.readAsDataURL).toHaveBeenCalledWith(file)
+ // })
+ it('should upload the image', async () => {
+ const wrapper = mount(
+ <Provider store={store}>
+ <FeedbackModal
+ open={true}
+ handleCloseClick={handleFeedbackModalClose}
+ />
+ </Provider>
+ )
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve))
+ wrapper.update()
+ })
+ const file = new File([new ArrayBuffer(1)], 'file.jpg')
+ const readAsDataURLSpy = jest.spyOn(FileReader.prototype, 'readAsDataURL')
+ wrapper.find('#folder').simulate('change', { target: { files: [file] } })
+ expect(readAsDataURLSpy).toBeCalledWith(file)
+ expect(
+ wrapper
+ .find('.removeUploaded')
+ .first()
+ .simulate('click')
+ )
+ })
})
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index 23f07d9a5..44d11d0a2 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -168,6 +168,17 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
</div>
)
}
+ const readFileAsDataURL = async (file: File): Promise<string> => {
+ return new Promise(resolve => {
+ const reader = new FileReader()
+ reader.onloadend = () => {
+ if (reader.result) {
+ resolve(reader.result as string)
+ }
+ }
+ reader.readAsDataURL(file)
+ })
+ }
const getDocument = async (
e: ChangeEvent<HTMLInputElement>
): Promise<void> => {
@@ -175,13 +186,8 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
const file = files ? files[0] : null
if (file) {
setuploadedFile(file)
- const reader: FileReader = new FileReader()
- reader.onloadend = () => {
- /* eslint-disable @typescript-eslint/no-explicit-any */
- const res: any = reader.result
- setTextFile(res.split(',')[1])
- }
- reader.readAsDataURL(file)
+ const base64File: string = await readFileAsDataURL(file)
+ setTextFile(base64File.split(',')[1])
}
}
@@ -276,7 +282,10 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
</span>
<div className="fileName">
<span>{uploadedFile.name}</span>
- <IconButton onClick={() => setuploadedFile(null)}>
+ <IconButton
+ onClick={() => setuploadedFile(null)}
+ className="removeUploaded"
+ >
<Icon icon={CloseIcon} size={12} />
</IconButton>
</div>
diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
index e0e94c316..2fd286dd6 100644
--- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
+++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
@@ -1,143 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FeedbackModal component should render the component 1`] = `
-<ForwardRef(WithStyles)
- aria-labelledby="accessibility-title"
- classes={
+<Provider
+ store={
Object {
- "paper": "modal-paper yellow-border",
- "root": "modal-root",
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
}
}
- disableBackdropClick={true}
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={true}
>
- <div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <ForwardRef(WithStyles)
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[Function]}
- >
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
- />
- </ForwardRef(WithStyles)>
- <div
- className="fb-root"
- >
- <React.Fragment>
- <div
- className="fb-header text-18-bold"
- id="title"
- >
- feedback.title
- </div>
- <form
- className="fb-content"
- >
- <label
- className="fb-label text-16-bold"
- htmlFor="feedbackType"
- >
- feedback.type
- </label>
- <fieldset
- className="fb-selector"
- id="feedbackType"
- >
- <div
- className="fb-selector-item"
- >
- <StyledIconBorderedButton
- aria-label="feedback.accessibility.select_type_bug"
- autoFocus={true}
- icon="test-file-stub"
- onClick={[Function]}
- selected={true}
- size={36}
- >
- <div
- className="fb-selector-item-selectedlabel text-10-bold"
- >
- feedback.type_bug
- </div>
- </StyledIconBorderedButton>
- </div>
- <div
- className="fb-selector-item"
- >
- <StyledIconBorderedButton
- aria-label="feedback.accessibility.select_type_idea"
- autoFocus={false}
- icon="test-file-stub"
- onClick={[Function]}
- selected={false}
- size={36}
- >
- <div
- className="fb-selector-item-label text-10-normal"
- >
- feedback.type_idea
- </div>
- </StyledIconBorderedButton>
- </div>
- <div
- className="fb-selector-item"
- >
- <StyledIconBorderedButton
- aria-label="feedback.accessibility.select_type_other"
- autoFocus={false}
- icon="test-file-stub"
- onClick={[Function]}
- selected={false}
- size={36}
- >
- <div
- className="fb-selector-item-label text-10-normal"
- >
- feedback.type_other
- </div>
- </StyledIconBorderedButton>
- </div>
- </fieldset>
- <label
- className="fb-label text-16-bold"
- htmlFor="idFeedbackDescription"
- >
- feedback.description
- </label>
- <textarea
- className="fb-form fb-textarea"
- id="idFeedbackDescription"
- name="description"
- onChange={[Function]}
- placeholder="feedback.description_placeholder"
- value=""
- />
- <ForwardRef(WithStyles)
- aria-label="feedback.accessibility.button_send"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
- disabled={false}
- onClick={[Function]}
- type="submit"
- >
- feedback.send
- </ForwardRef(WithStyles)>
- </form>
- </React.Fragment>
- </div>
-</ForwardRef(WithStyles)>
+ <FeedbackModal
+ handleCloseClick={[MockFunction]}
+ open={true}
+ />
+</Provider>
`;
--
GitLab