diff --git a/src/components/Ecogesture/EcogestureEmptyList.spec.tsx b/src/components/Ecogesture/EcogestureEmptyList.spec.tsx
index 8b67619d0d1ef93cb836cc1644779df414d7082d..79aa75d28f875bdeb25eebf80f32d8bc1eb487b4 100644
--- a/src/components/Ecogesture/EcogestureEmptyList.spec.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList.spec.tsx
@@ -20,7 +20,7 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
const mockStore = configureStore([])
const mockChangeTab = jest.fn()
-describe('EcogestureError component', () => {
+describe('EcogestureEmptyList component', () => {
it('should be rendered correctly', () => {
const store = mockStore({
ecolyo: {
@@ -33,7 +33,7 @@ describe('EcogestureError component', () => {
<EcogestureEmptyList setTab={mockChangeTab} isObjective={true} />
</Provider>
)
- expect(toJson(wrapper)).toMatchSnapshot
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should return to all ecogestures', () => {
const store = mockStore({
diff --git a/src/components/Ecogesture/EcogestureList.spec.tsx b/src/components/Ecogesture/EcogestureList.spec.tsx
index aebaa199fdaee1b7ec43d12372bc0de52afa5f9a..ba858ab86ce49a64bb47c1f45e4222e847c8022b 100644
--- a/src/components/Ecogesture/EcogestureList.spec.tsx
+++ b/src/components/Ecogesture/EcogestureList.spec.tsx
@@ -9,7 +9,7 @@ import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { ecogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
import { BrowserRouter } from 'react-router-dom'
import { Button, MenuItem } from '@material-ui/core'
-import { act } from 'react-dom/test-utils'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -39,10 +39,7 @@ describe('EcogesturesList component', () => {
</BrowserRouter>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(toJson(wrapper)).toMatchSnapshot()
})
it('should open the filter menu and select all ecogesture', async () => {
@@ -59,10 +56,7 @@ describe('EcogesturesList component', () => {
</BrowserRouter>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find('.filter-button').simulate('click')
wrapper
.find(Button)
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index c5f4551a22e283eb6fddb5f9678ab4a95d162b40..ccf7ef7ab1c05ff587d6bb5673d56f94ba049cd3 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -64,97 +64,91 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
return (
<div className="ecogesture-root">
- <>
- <div className="efficiency-button-content">
- <div className="filters text-16-normal">
- <div
- className="filter-button"
- onClick={() => toggleDropDown()}
- tabIndex={0}
- onBlur={e => {
- if (e.relatedTarget === null) toggleDropDown()
+ <div className="efficiency-button-content">
+ <div className="filters text-16-normal">
+ <div
+ className="filter-button"
+ onClick={() => toggleDropDown()}
+ tabIndex={0}
+ onBlur={e => {
+ if (e.relatedTarget === null) toggleDropDown()
+ }}
+ >
+ <Button
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-14-normal',
}}
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ aria-label={t(`ecogesture.MENU_TITLE`)}
+ onClick={toggleMenu}
+ variant="contained"
>
- <Button
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-14-normal',
- }}
- aria-controls="simple-menu"
- aria-haspopup="true"
- aria-label={t(`ecogesture.MENU_TITLE`)}
- onClick={toggleMenu}
- variant="contained"
+ <StyledIcon icon={SortIcon} size={20} />
+ <span
+ className={openDropDown ? 'ecogestures opened' : 'ecogestures'}
>
- <StyledIcon icon={SortIcon} size={20} />
- <span
- className={
- openDropDown ? 'ecogestures opened' : 'ecogestures'
- }
- >
- {activeFilter === 'ALL'
- ? t(`ecogesture.MENU_TITLE`)
- : t(`ecogesture.${activeFilter}`)}
- </span>
- </Button>
- <Menu
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={() => closeMenu()}
- PopoverClasses={{
- paper: 'filter-menu',
- }}
- variant="menu"
- MenuListProps={{ className: 'filter-menu-list' }}
- >
- {Object.values(Usage).map((usage, key) => {
- return (
- typeof usage !== 'number' && (
- <MenuItem
- classes={{
- root: `${
- usage === activeFilter ? 'item-active' : ''
- }`,
- }}
- key={key}
- selected={usage === activeFilter}
- onClick={() => closeMenu(usage)}
- >
- {t(`ecogesture.${usage}`)}
- {usage === activeFilter && (
- <ListItemIcon classes={{ root: 'filter-menu-icon' }}>
- <StyledIcon icon={CheckIcon} size={13} />
- </ListItemIcon>
- )}
- </MenuItem>
- )
+ {activeFilter === 'ALL'
+ ? t(`ecogesture.MENU_TITLE`)
+ : t(`ecogesture.${activeFilter}`)}
+ </span>
+ </Button>
+ <Menu
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={() => closeMenu()}
+ PopoverClasses={{
+ paper: 'filter-menu',
+ }}
+ variant="menu"
+ MenuListProps={{ className: 'filter-menu-list' }}
+ >
+ {Object.values(Usage).map((usage, key) => {
+ return (
+ typeof usage !== 'number' && (
+ <MenuItem
+ classes={{
+ root: `${usage === activeFilter ? 'item-active' : ''}`,
+ }}
+ key={key}
+ selected={usage === activeFilter}
+ onClick={() => closeMenu(usage)}
+ >
+ {t(`ecogesture.${usage}`)}
+ {usage === activeFilter && (
+ <ListItemIcon classes={{ root: 'filter-menu-icon' }}>
+ <StyledIcon icon={CheckIcon} size={13} />
+ </ListItemIcon>
+ )}
+ </MenuItem>
)
- })}
- </Menu>
- </div>
+ )
+ })}
+ </Menu>
</div>
</div>
- <div className="ecogesture-content">
- {list && activeFilter === Usage[Usage.ALL] ? (
- list.map((ecogesture, index) => (
- <EcogestureCard
- ecogesture={ecogesture}
- key={index}
- currentTab={currentTab}
- />
- ))
- ) : list && activeFilter !== Usage[Usage.ALL] ? (
- filterEcogesture(list)
- ) : (
- <div className="ec-filter-error">
- <div className="text-16-normal">
- {t('ecogesture.no_ecogesture')}
- </div>
+ </div>
+ <div className="ecogesture-content">
+ {list && activeFilter === Usage[Usage.ALL] ? (
+ list.map((ecogesture, index) => (
+ <EcogestureCard
+ ecogesture={ecogesture}
+ key={index}
+ currentTab={currentTab}
+ />
+ ))
+ ) : list && activeFilter !== Usage[Usage.ALL] ? (
+ filterEcogesture(list)
+ ) : (
+ <div className="ec-filter-error">
+ <div className="text-16-normal">
+ {t('ecogesture.no_ecogesture')}
</div>
- )}
- </div>
- </>
+ </div>
+ )}
+ </div>
</div>
)
}
diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx
index 8734f67f0948f94625c93e9d4fe653a7c7a4fb51..c147d7eaabe523f7b7d273b66f707b5ca1b40fa2 100644
--- a/src/components/Ecogesture/EcogestureView.tsx
+++ b/src/components/Ecogesture/EcogestureView.tsx
@@ -81,28 +81,40 @@ const EcogestureView: React.FC<EcogestureViewProps> = ({
//TODO go to tinder ecogesture
}, [dispatch])
- const handleChange = (event: React.ChangeEvent<{}>, newValue: any) => {
- setValue(newValue)
- }
+ const handleChange = useCallback(
+ (event: React.ChangeEvent<{}>, newValue: any) => {
+ setValue(newValue)
+ },
+ []
+ )
- const tabProps = (index: number) => {
+ const tabProps = useCallback((index: number) => {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
}
- }
- const getLabel = (tab: number) => {
- return (
- <>
- {t(`ecogesture.title_tab_${tab}`)}
- <br></br>
- {tab === EcogestureStatus.OBJECTIVE &&
- `(${objectiveEcogestureList.length})`}
- {tab === EcogestureStatus.DOING && `(${doingEcogestureList.length})`}
- {tab === EcogestureStatus.ALL && `(${allEcogestureList.length})`}
- </>
- )
- }
+ }, [])
+
+ const getLabel = useCallback(
+ (tab: number) => {
+ return (
+ <>
+ {t(`ecogesture.title_tab_${tab}`)}
+ <br></br>
+ {tab === EcogestureStatus.OBJECTIVE &&
+ `(${objectiveEcogestureList.length})`}
+ {tab === EcogestureStatus.DOING && `(${doingEcogestureList.length})`}
+ {tab === EcogestureStatus.ALL && `(${allEcogestureList.length})`}
+ </>
+ )
+ },
+ [
+ allEcogestureList.length,
+ doingEcogestureList.length,
+ objectiveEcogestureList.length,
+ t,
+ ]
+ )
useEffect(() => {
let subscribed = true
diff --git a/src/components/Ecogesture/SingleEcogesture.tsx b/src/components/Ecogesture/SingleEcogesture.tsx
index cdec59e878acd5fee58bc8e4c091748987e8c594..6aaa8fdd0ead7311fe72ca13a6eb19586832d37f 100644
--- a/src/components/Ecogesture/SingleEcogesture.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.tsx
@@ -124,13 +124,16 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
setValidExploration,
])
- return isLoading ? (
- <Content height={headerHeight}>
- <div className="se-loader-container">
- <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
- </div>
- </Content>
- ) : ecogesture ? (
+ if (isLoading) {
+ return (
+ <Content height={headerHeight}>
+ <div className="se-loader-container">
+ <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
+ </div>
+ </Content>
+ )
+ }
+ return ecogesture ? (
<>
<CozyBar
titleKey={ecogesture && ecogesture.shortName}
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureEmptyList.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureEmptyList.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..dd45ee676b600e22e47fcbbc3852162321378196
--- /dev/null
+++ b/src/components/Ecogesture/__snapshots__/EcogestureEmptyList.spec.tsx.snap
@@ -0,0 +1,343 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <EcogestureEmptyList
+ isObjective={true}
+ setTab={[MockFunction]}
+ >
+ <div
+ className="ec-empty-container"
+ >
+ <div
+ className="ec-empty-content"
+ >
+ <StyledIcon
+ className="icon-big"
+ icon="test-file-stub"
+ size={150}
+ >
+ <Icon
+ aria-hidden={true}
+ className="icon-big"
+ icon="test-file-stub"
+ size={150}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="icon-big styles__icon___23x3R"
+ height={150}
+ style={Object {}}
+ width={150}
+ >
+ <svg
+ aria-hidden={true}
+ className="icon-big styles__icon___23x3R"
+ height={150}
+ style={Object {}}
+ width={150}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="text-16-normal text"
+ >
+ ecogesture.emptyList.obj1
+ </div>
+ <div
+ className="text-16-normal text"
+ >
+ ecogesture.emptyList.obj2
+ </div>
+ <div
+ className="btn-container"
+ >
+ <WithStyles(ForwardRef(Button))
+ aria-label="ecogesture.emptyList.btn1"
+ classes={
+ Object {
+ "label": "text-16-bold",
+ "root": "btn-secondary-negative btn1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ aria-label="ecogesture.emptyList.btn1"
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-16-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative btn1",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="ecogesture.emptyList.btn1"
+ className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="ecogesture.emptyList.btn1"
+ className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <button
+ aria-label="ecogesture.emptyList.btn1"
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn1 MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiButton-label text-16-bold"
+ >
+ ecogesture.emptyList.btn1
+ </span>
+ <NoSsr>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ <WithStyles(ForwardRef(Button))
+ aria-label="ecogesture.emptyList.btn2"
+ classes={
+ Object {
+ "label": "text-16-bold",
+ "root": "btn-highlight",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ aria-label="ecogesture.emptyList.btn2"
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-16-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-highlight",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="ecogesture.emptyList.btn2"
+ className="MuiButton-root btn-highlight MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="ecogesture.emptyList.btn2"
+ className="MuiButton-root btn-highlight MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <button
+ aria-label="ecogesture.emptyList.btn2"
+ className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiButton-label text-16-bold"
+ >
+ ecogesture.emptyList.btn2
+ </span>
+ <NoSsr>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </NoSsr>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ </div>
+ </div>
+ </div>
+ </EcogestureEmptyList>
+</Provider>
+`;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index c5cb38086284f955e40a86fb5c5de0b50ac2c81d..6c77799807f2b0e6dc2e6aca529cb5c1d806da7b 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -47,7 +47,6 @@ const Header: React.FC<HeaderProps> = ({
const headerBottomHeight = 8
const handleClickBack = useCallback(() => {
- console.log('tab', tab)
tab ? history.push(`/ecogestures/${tab}`) : history.goBack()
}, [history, tab])