From d4dc39c2b55f1cc0754c7589396b286be4aadd9f Mon Sep 17 00:00:00 2001 From: cballevre Date: Wed, 8 Nov 2023 11:55:59 +0100 Subject: [PATCH] feat: Handle new configuration for logos --- src/components/FooterLogo/FooterLogo.jsx | 25 ++++--- src/components/FooterLogo/FooterLogo.spec.jsx | 59 ++++++++++------- src/components/FooterLogo/helpers.js | 21 ------ src/components/FooterLogo/helpers.spec.js | 66 ------------------- 4 files changed, 48 insertions(+), 123 deletions(-) delete mode 100644 src/components/FooterLogo/helpers.js delete mode 100644 src/components/FooterLogo/helpers.spec.js diff --git a/src/components/FooterLogo/FooterLogo.jsx b/src/components/FooterLogo/FooterLogo.jsx index 03ca2f9b45..a45022581a 100644 --- a/src/components/FooterLogo/FooterLogo.jsx +++ b/src/components/FooterLogo/FooterLogo.jsx @@ -3,8 +3,6 @@ import { useClient, useQuery } from 'cozy-client' import { buildContextQuery } from 'queries' import Divider from 'cozy-ui/transpiled/react/Divider' -import { getHomeLogos } from 'components/FooterLogo/helpers' - export const FooterLogo = () => { const client = useClient() const rootURL = client.getStackClient().uri @@ -12,11 +10,12 @@ export const FooterLogo = () => { const contextQuery = buildContextQuery() const { data } = useQuery(contextQuery.definition, contextQuery.options) - const logos = getHomeLogos(data, rootURL) + const logos = data?.logos?.home?.light || [] + const secondaries = logos.filter(logos => logos.type === 'secondary') + const main = logos.find(logos => logos.type === 'main') - const hasSecondaries = - logos.secondaries && Object.keys(logos.secondaries).length !== 0 - const hasMain = logos.main !== undefined + const hasSecondaries = secondaries.length !== 0 + const hasMain = main !== undefined if (!hasMain && !hasSecondaries) return
@@ -27,9 +26,9 @@ export const FooterLogo = () => {
{hasMain ? ( {logos.main.alt} ) : null} @@ -40,11 +39,11 @@ export const FooterLogo = () => { ) : null} {hasSecondaries ? (
- {Object.entries(logos.secondaries).map(([logoSrc, logoAlt]) => ( + {secondaries.map(({ src, alt }) => ( {logoAlt} { - const setup = ({ attributes = {} } = {}) => { + const setup = mockLogos => { + const homeLogos = mockLogos ? { logos: { home: { light: mockLogos } } } : {} const mockClient = createMockClient({ queries: { 'io.cozy.settings/context': { @@ -18,7 +19,7 @@ describe('FooterLogo', () => { data: [ { id: 'io.cozy.settings/context', - attributes + ...homeLogos } ] } @@ -40,42 +41,54 @@ describe('FooterLogo', () => { }) it('should render secondaries logo only', () => { - setup({ - attributes: { - home_logos: { - '/logo/1_partner.svg': 'Partner n°1', - '/logo/2_partner.svg': 'Partner n°2' - } + setup([ + { + src: '/logo/partner1.png', + alt: 'Partner n°1', + type: 'secondary' + }, + { + src: '/logo/partner2.png', + alt: 'Partner n°2', + type: 'secondary' } - }) + ]) const images = screen.getAllByAltText(/Partner n°*?/i) expect(images.length).toEqual(2) }) it('should render main logo only', () => { - setup({ - attributes: { - home_logos: { - '/lgoo/main_partner.svg': 'Main partner' - } + setup([ + { + src: '/logo/partner_main.png', + alt: 'Main partner', + type: 'main' } - }) + ]) const image = screen.getByAltText('Main partner') expect(image).toBeInTheDocument() }) it('should render both', () => { - setup({ - attributes: { - home_logos: { - '/lgoo/main_partner.svg': 'Main partner', - '/logo/1_partner.svg': 'Partner n°1', - '/logo/2_partner.svg': 'Partner n°2' - } + setup([ + { + src: '/logo/partner_main.png', + alt: 'Main partner', + type: 'main' + }, + { + src: '/logo/partner1.png', + alt: 'Partner n°1', + type: 'secondary' + }, + { + src: '/logo/partner2.png', + alt: 'Partner n°2', + type: 'secondary' } - }) + ]) const main = screen.getByAltText('Main partner') expect(main).toBeInTheDocument() diff --git a/src/components/FooterLogo/helpers.js b/src/components/FooterLogo/helpers.js deleted file mode 100644 index 9be7627ed0..0000000000 --- a/src/components/FooterLogo/helpers.js +++ /dev/null @@ -1,21 +0,0 @@ -export const getHomeLogos = (data, rootURL) => { - if (data) { - const logos = data?.attributes?.home_logos || {} - return Object.keys(logos).reduce((acc, logoSrc) => { - const filename = logoSrc.substring(logoSrc.lastIndexOf('/') + 1) - const logo = { - url: `${rootURL}/assets${logoSrc}`, - alt: logos[logoSrc] - } - if (filename.startsWith('main_')) { - acc['main'] = logo - } else { - acc['secondaries'] = acc['secondaries'] || {} - acc['secondaries'][logo.url] = logo.alt - } - return acc - }, {}) - } - - return {} -} diff --git a/src/components/FooterLogo/helpers.spec.js b/src/components/FooterLogo/helpers.spec.js deleted file mode 100644 index a5f7f54927..0000000000 --- a/src/components/FooterLogo/helpers.spec.js +++ /dev/null @@ -1,66 +0,0 @@ -import { getHomeLogos } from 'components/FooterLogo/helpers' - -describe('getHomeLogos', () => { - const setupData = home_logos => { - return { - attributes: { - home_logos - } - } - } - const rootURL = 'http://example.com' - - it('should return {} by default', () => { - expect(getHomeLogos()).toStrictEqual({}) - }) - - it('should return secondaries', () => { - const data = setupData({ - '/logos/1_partner.png': 'Partner n°1', - '/logos/2_partner.png': 'Partner n°2' - }) - expect(getHomeLogos(data, rootURL)).toStrictEqual({ - secondaries: { - 'http://example.com/assets/logos/1_partner.png': 'Partner n°1', - 'http://example.com/assets/logos/2_partner.png': 'Partner n°2' - } - }) - }) - - it('should return secondaries should respect order', () => { - const data = setupData({ - '/logos/A.gif': 'Partner A', - '/logos/1_partner.png': 'Partner n°1', - '/logos/3_partner.png': 'Partner n°3', - '/logos/2_partner.png': 'Partner n°2' - }) - expect(getHomeLogos(data, rootURL)).toStrictEqual({ - secondaries: { - 'http://example.com/assets/logos/1_partner.png': 'Partner n°1', - 'http://example.com/assets/logos/2_partner.png': 'Partner n°2', - 'http://example.com/assets/logos/3_partner.png': 'Partner n°3', - 'http://example.com/assets/logos/A.gif': 'Partner A' - } - }) - }) - - it('should return main and secondaries', () => { - const data = setupData({ - '/logos/2_partner.png': 'Partner n°2', - '/logos/1_partner.png': 'Partner n°1', - '/logos/main_partner.png': 'Main partner', - '/logos/3_partner.png': 'Partner n°3' - }) - expect(getHomeLogos(data, rootURL)).toStrictEqual({ - main: { - url: 'http://example.com/assets/logos/main_partner.png', - alt: 'Main partner' - }, - secondaries: { - 'http://example.com/assets/logos/1_partner.png': 'Partner n°1', - 'http://example.com/assets/logos/2_partner.png': 'Partner n°2', - 'http://example.com/assets/logos/3_partner.png': 'Partner n°3' - } - }) - }) -})