Offer.Thumbnail test : remove useless test and fix warnings

src/components/pages/Offers/Offer/Thumbnail/ImageEditor/ImageEditor.jsx

@@ -1,7 +1,7 @@
 /*
-* @debt complexity "Gaël: file nested too deep in directory structure"
-* @debt directory "Gaël: this file should be migrated within the new directory structure"
-*/
+ * @debt complexity "Gaël: file nested too deep in directory structure"
+ * @debt directory "Gaël: this file should be migrated within the new directory structure"
+ */
 
 import PropTypes from 'prop-types'
 import React, { forwardRef, useCallback, useState } from 'react'

src/components/pages/Offers/Offer/Thumbnail/ImportFromComputer/ImportFromComputer.jsx

@@ -17,15 +17,17 @@ const ImportFromComputer = ({ setStep, setThumbnail, step }) => {
 
   const getError = async file => {
     for (const constraint of constraints) {
-      if (await constraint.validator(file)) return Promise.resolve(constraint.id)
+      const inError = constraint.asyncValidator ? await constraint.asyncValidator(file) : constraint.validator(file)
+      if (inError) {
+        return Promise.resolve(constraint.id)
+      }
     }
     return Promise.resolve('')
   }
 
   const submitThumbnail = useCallback(async () => {
     const currentFile = file.current.files[0]
     const error = await getError(currentFile)
-
     if (error === '') {
       setThumbnail(currentFile)
       setStep(step + 1)

src/components/pages/Offers/Offer/Thumbnail/ImportFromURL/ImportFromURL.jsx

@@ -47,8 +47,8 @@ const ImportFromURL = ({ isLoading, setIsLoading, setStep, setPreviewBase64, set
             setError(result.errors[0])
           } else {
             setPreviewBase64(result.image)
-            setStep(step + 1)
             setIsButtonDisabled(false)
+            setStep(step + 1)
           }
         } catch {
           setError('Une erreur est survenue')

src/components/pages/Offers/Offer/Thumbnail/__specs__/ImageEditor.spec.jsx

@@ -9,6 +9,7 @@ import {
   createImageFile,
   renderThumbnail,
 } from 'components/pages/Offers/Offer/Thumbnail/__specs__/setup'
+import * as pcapi from 'repository/pcapi/pcapi'
 
 // The tests files have been separated in two because this mock
 // breaks other tests
@@ -121,15 +122,15 @@ describe('when the user is on the preview step', () => {
     const closeModal = jest.fn()
     const setThumbnailInfo = jest.fn()
     renderThumbnail({ setIsModalOpened: closeModal, setThumbnailInfo: setThumbnailInfo })
-    jest.spyOn(global, 'fetch').mockResolvedValue({
-      json: () => Promise.resolve({ errors: [], image: '' }),
-      ok: true,
-      status: 201,
-    })
+    pcapi.validateDistantImage.mockResolvedValue({ errors: [], image: '' })
     fireEvent.click(screen.getByText('Utiliser une URL'))
     fireEvent.change(screen.getByLabelText('URL de l’image'), {
       target: { value: 'https://url_example.com' },
     })
+    const sumbitButton = screen.getByText('Valider', { selector: 'button' })
+    await waitFor(() => {
+      expect(sumbitButton).toBeEnabled()
+    })
     fireEvent.click(screen.getByText('Valider', { selector: 'button' }))
     fireEvent.change(await screen.findByPlaceholderText('Photographe...'), {
       target: { value: 'Mon crédit' },

src/components/pages/Offers/Offer/Thumbnail/__specs__/Thumbnail.spec.jsx

@@ -256,18 +256,20 @@ describe('thumbnail edition', () => {
         renderThumbnail()
 
         // When
-        fireEvent.click(screen.getByText('Utiliser une URL'))
+        const useUrlTabButton = screen.getByText('Utiliser une URL')
+        fireEvent.click(useUrlTabButton)
 
         // Then
-        expect(
-          await screen.findByText('Utilisez de préférence un visuel en orientation portrait', {
-            selector: 'p',
-          })
-        ).toBeInTheDocument()
+        const importFromComputerTitle = await screen.findByText(
+          'Utilisez de préférence un visuel en orientation portrait',
+          { selector: 'p' }
+        )
+        expect(importFromComputerTitle).toBeInTheDocument()
+
+        expect(screen.getByText('Valider', { selector: 'button' })).toBeDisabled()
         const urlInput = screen.getByLabelText('URL de l’image')
         expect(urlInput).toHaveAttribute('type', 'text')
         expect(urlInput).toHaveAttribute('placeholder', 'Ex : http://...')
-        expect(screen.getByText('Valider', { selector: 'button' })).toHaveAttribute('disabled')
       })
 
       it('should enable submit button if there is a string', () => {
@@ -279,7 +281,7 @@ describe('thumbnail edition', () => {
         fireEvent.change(screen.getByLabelText('URL de l’image'), { target: { value: 'MEFA' } })
 
         // Then
-        expect(screen.getByText('Valider', { selector: 'button' })).not.toHaveAttribute('disabled')
+        expect(screen.getByText('Valider', { selector: 'button' })).toBeEnabled()
       })
 
       it('should display an error if the url does not meet the requirements', async () => {
@@ -296,10 +298,8 @@ describe('thumbnail edition', () => {
         fireEvent.click(screen.getByText('Valider', { selector: 'button' }))
 
         // Then
-        expect(screen.getByLabelText('URL de l’image')).toHaveAttribute('disabled')
-        expect(await screen.findByText('Valider', { selector: 'button' })).toHaveAttribute(
-          'disabled'
-        )
+        expect(screen.getByLabelText('URL de l’image')).toBeDisabled()
+        expect(await screen.findByText('Valider', { selector: 'button' })).toBeDisabled()
         expect(
           await screen.findByText('API error message', { selector: 'pre' })
         ).toBeInTheDocument()
@@ -319,77 +319,45 @@ describe('thumbnail edition', () => {
         fireEvent.click(screen.getByText('Valider', { selector: 'button' }))
 
         // Then
-        expect(screen.getByLabelText('URL de l’image')).toHaveAttribute('disabled')
-        expect(await screen.findByText('Valider', { selector: 'button' })).toHaveAttribute(
-          'disabled'
-        )
+        expect(screen.getByLabelText('URL de l’image')).toBeDisabled()
+        expect(await screen.findByText('Valider', { selector: 'button' })).toBeDisabled()
         expect(
           await screen.findByText('Une erreur est survenue', { selector: 'pre' })
         ).toBeInTheDocument()
       })
 
-      it('should display a URL format error if URL format is invalid', () => {
+      it('should add and remove error when the user change the URL value', async () => {
         // Given
         renderThumbnail()
         fireEvent.click(screen.getByText('Utiliser une URL'))
         fireEvent.change(screen.getByLabelText('URL de l’image'), {
           target: { value: 'htp://url_example.com' },
         })
-
-        // When
-        fireEvent.click(screen.getByText('Valider', { selector: 'button' }))
-
-        // Then
-        expect(screen.getByText('Format d’URL non valide', { selector: 'pre' })).toBeInTheDocument()
-      })
-
-      it('should not display a URL format error if URL format is valid', async () => {
-        // Given
-        renderThumbnail()
-        fireEvent.click(screen.getByText('Utiliser une URL'))
-        fireEvent.change(screen.getByLabelText('URL de l’image'), {
-          target: { value: 'https://url_example.com' },
-        })
-
-        // When
         fireEvent.click(screen.getByText('Valider', { selector: 'button' }))
 
-        // Then
-        await waitFor(() => {
-          expect(screen.queryByText('Format d’URL non valide')).not.toBeInTheDocument()
-        })
-      })
-
-      it('should remove the error if the user rewrite the URL after a first error', () => {
-        // Given
-        renderThumbnail()
-        fireEvent.click(screen.getByText('Utiliser une URL'))
-        fireEvent.change(screen.getByLabelText('URL de l’image'), {
-          target: { value: 'htp://url_example.com' },
-        })
-        fireEvent.click(screen.getByText('Valider', { selector: 'button' }))
+        const urlFieldError = screen.queryByText('Format d’URL non valide', { selector: 'pre' })
+        expect(urlFieldError).toBeInTheDocument()
 
         // When
         fireEvent.change(screen.getByPlaceholderText('Ex : http://...'), {
           target: { value: 'http://url_example.com' },
         })
 
         // Then
-        expect(
-          screen.queryByText('Format d’URL non valide', { selector: 'pre' })
-        ).not.toBeInTheDocument()
+        expect(urlFieldError).not.toBeInTheDocument()
       })
 
       it('should go to the credit step if there is no validation error', async () => {
         // Given
         pcapi.validateDistantImage.mockResolvedValue({ errors: [] })
         renderThumbnail()
-        fireEvent.click(screen.getByText('Utiliser une URL'))
+        const useUrlTabButton = screen.getByText('Utiliser une URL')
+        fireEvent.click(useUrlTabButton)
+
+        // When
         fireEvent.change(screen.getByLabelText('URL de l’image'), {
           target: { value: 'http://url_example.com' },
         })
-
-        // When
         fireEvent.click(screen.getByText('Valider', { selector: 'button' }))
 
         // Then

src/components/pages/Offers/Offer/Thumbnail/__specs__/setup.jsx

@@ -18,6 +18,16 @@ jest.mock('repository/pcapi/pcapi', () => ({
   validateDistantImage: jest.fn(),
 }))
 
+export const createFile = ({
+  name = 'example.json',
+  type = 'application/json',
+  sizeInMB = 1,
+} = {}) => {
+  const oneMB = 1024 * 1024
+  const file = new File([''], name, { type })
+  Object.defineProperty(file, 'size', { value: oneMB * sizeInMB })
+  return file
+}
 
 export const createImageFile = ({
   name = 'example.png',
@@ -31,17 +41,6 @@ export const createImageFile = ({
   return file
 }
 
-export const createFile = ({
-  name = 'example.json',
-  type = 'application/json',
-  sizeInMB = 1,
-} = {}) => {
-  const oneMB = 1024 * 1024
-  const file = new File([''], name, { type })
-  Object.defineProperty(file, 'size', { value: oneMB * sizeInMB })
-  return file
-}
-
 export const renderThumbnail = ({
   setIsModalOpened = jest.fn(),
   setThumbnailInfo = jest.fn(),

src/components/pages/Offers/Offer/Thumbnail/_error_validator.js

@@ -1,7 +1,7 @@
 import { IMAGE_TYPE, MAX_IMAGE_SIZE, MIN_IMAGE_HEIGHT, MIN_IMAGE_WIDTH } from './_constants'
 
-const isNotAnImage = async file => !IMAGE_TYPE.includes(file.type)
-const isTooBig = async file => file.size > MAX_IMAGE_SIZE
+const isNotAnImage = file => !IMAGE_TYPE.includes(file.type)
+const isTooBig = file => file.size > MAX_IMAGE_SIZE
 const isOfPoorQuality = async file => {
   // Polyfill for Safari and IE not supporting createImageBitmap
   if (!('createImageBitmap' in window)) {
@@ -32,6 +32,6 @@ export const constraints = [
   {
     id: 'dimensions',
     description: 'La taille de l’image doit être au format 6/9, avec une largeur minimale de 400px',
-    validator: isOfPoorQuality,
+    asyncValidator: isOfPoorQuality,
   },
 ]