Skip to content

Commit

Permalink
src/components/global: update component FooterBar based on graphic de…
Browse files Browse the repository at this point in the history 
…sign (#565)

* footer layout update

* fix types for config and i18n

* add logo automat

* add translations and dynamic link

* update tests

* added tests

* refactor test selectors and variables

* footer bar responsive update

* src/components/__tests__: add Auto*Mat logo URL link request/response test

* src/components/__tests__: remove empty line

* Better var name

---------

Co-authored-by: Šimon Macek <[email protected]>
Co-authored-by: Tomas Zigo <[email protected]>
  • Loading branch information
@maceksimon @tmszi
3 people authored Sep 19, 2024
1 parent 60f7a59 commit 940e9cd
Show file tree
Hide file tree
Showing 11 changed files with 407 additions and 333 deletions.
1 change: 1 addition & 0 deletions ride_to_work_by_bike_config.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ contactEmail = "[email protected]"

# EXTERNAL URLS

urlAutoMat = "https://auto-mat.cz"
urlFacebook = "https://www.facebook.com/spolekautomat"
urlInstagram = "https://www.instagram.com/spolekautomat"
urlTwitter = "https://twitter.com/spolekautomat"
Expand Down
1 change: 1 addition & 0 deletions src/assets/svg/logo-automat.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
325 changes: 209 additions & 116 deletions src/components/__tests__/FooterBar.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,39 @@ import {
httpTooManyRequestsStatusMessage,
} from '../../../test/cypress/support/commonTests';

// colors
const { getPaletteColor } = colors;
const white = getPaletteColor('white');
const grey8 = getPaletteColor('grey-8');
const primary = getPaletteColor('primary');

// selectors
const selectorFooterLogo = 'footer-logo';
const selectorFooterAutoMatLogoLink = 'footer-auto-mat-logo-link';
const selectorFooterAutoMatLogo = 'footer-auto-mat-logo';
const selectorFooterLogoSeparator = 'footer-logo-separator';
const selectorFooterSocialMenu = 'footer-social-menu';
const selectorFooterSocialMenuButton = 'footer-social-menu-button';
const selectorFooterSocialMenuLinkFacebook = 'footer-social-menu-link-facebook';
const selectorFooterSocialMenuLinkInstagram =
'footer-social-menu-link-instagram';
const selectorFooterSocialMenuLinkTwitter = 'footer-social-menu-link-twitter';
const selectorFooterSocialMenuLinkYoutube = 'footer-social-menu-link-youtube';
const selectorFooterSocialMenuIcon = 'footer-social-menu-icon';
const selectorLanguageSwitcherFooter = 'language-switcher-footer';
const selectorFooterTopButton = 'footer-top-button';
const selectorFooterTopButtonText = 'footer-top-button-text';
const selectorFooterAutoMat = 'footer-auto-mat';
const selectorFooterChallengeOrganizer = 'footer-challenge-organizer';
const selectorFooterCopyrightListDesktop = 'footer-copyright-list-desktop';
const selectorFooterCopyrightListMobile = 'footer-copyright-list-mobile';

// variables
const iconSize = 24;
const displayFlex = 'flex';
const flexWrap = 'wrap';
const fontSize = '14px';
const fontWeight = '400';

// Fix make request user-agent header on the macOS with Google Chrome web browser
const urlTwitterUserAgentHeader =
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) \
Expand All @@ -27,107 +58,78 @@ describe('<FooterBar>', () => {
beforeEach(() => {
cy.mount(FooterBar, {
props: {
copyright: [
'Tato aplikace je svobodný software.',
'Výzvu Do práce na kole pořádá <a href="https://auto-mat.cz" target="_blank">Auto*Mat, z.s.</a>',
],
copyright: ['Tato aplikace je svobodný software.'],
},
});
cy.viewport('macbook-16');
});

it('renders background', () => {
coreTests();

it('renders Auto*Mat logo text', () => {
cy.dataCy(selectorFooterChallengeOrganizer)
.should('be.visible')
.and('have.css', 'font-size', fontSize)
.and('have.css', 'font-weight', fontWeight)
.and('have.color', grey8)
.and('contain', i18n.global.t('footer.textChallengeOrganizer'));
});

it('renders copyright list', () => {
cy.window().then(() => {
cy.dataCy('footer-background')
cy.dataCy(selectorFooterCopyrightListDesktop)
.should('be.visible')
.and('have.css', 'position', 'absolute')
.and('have.css', 'top', '0px')
.and('have.css', 'left', '0px');
.and('have.css', 'display', displayFlex)
.and('have.css', 'flex-wrap', flexWrap)
.and('have.css', 'font-size', fontSize)
.and('have.css', 'font-weight', fontWeight)
.and('have.color', grey8);
});
});
});

it('renders logo', () => {
cy.window().then(() => {
cy.dataCy('footer-logo')
.should('be.visible')
.and('have.css', 'height', '40px')
.and('have.color', white);
context('mobile', () => {
beforeEach(() => {
cy.mount(FooterBar, {
props: {},
});
cy.viewport('iphone-6');
});

it('renders social menu', () => {
coreTests();

it('renders copyright list', () => {
cy.window().then(() => {
cy.dataCy('footer-social-menu')
.should('be.visible')
.and('have.css', 'display', 'flex')
.and('have.css', 'align-items', 'center');
cy.dataCy('footer-social-menu-button')
.should('be.visible')
.and('have.css', 'border-radius', '50%');
cy.dataCy('footer-social-menu-button')
.invoke('height')
.should('be.equal', 42);
cy.dataCy('footer-social-menu-button')
.invoke('width')
.should('be.equal', 42);
cy.dataCy('footer-social-menu-link-facebook')
.should('be.visible')
.and('have.attr', 'href', rideToWorkByBikeConfig.urlFacebook);
cy.dataCy('footer-social-menu-link-instagram')
.should('be.visible')
.and('have.attr', 'href', rideToWorkByBikeConfig.urlInstagram);
cy.dataCy('footer-social-menu-link-twitter')
.should('be.visible')
.and('have.attr', 'href', rideToWorkByBikeConfig.urlTwitter);
cy.dataCy('footer-social-menu-link-youtube')
cy.dataCy(selectorFooterCopyrightListMobile)
.should('be.visible')
.and('have.attr', 'href', rideToWorkByBikeConfig.urlYoutube);
cy.dataCy('footer-social-menu-icon')
.should('be.visible')
.and('have.color', white);
cy.dataCy('footer-social-menu-icon')
.invoke('height')
.should('be.equal', 18);
cy.dataCy('footer-social-menu-icon')
.invoke('width')
.should('be.equal', 18);
.and('have.css', 'display', displayFlex)
.and('have.css', 'flex-wrap', flexWrap)
.and('have.css', 'font-size', fontSize)
.and('have.css', 'font-weight', fontWeight)
.and('have.color', grey8);
});
});
});
});

it('provides valid URLs for social links', () => {
cy.request({
url: rideToWorkByBikeConfig.urlFacebook,
failOnStatusCode: failOnStatusCode,
}).then((resp) => {
if (resp.status === httpTooManyRequestsStatus) {
cy.log(httpTooManyRequestsStatusMessage);
return;
}
expect(resp.status).to.eq(httpSuccessfullStatus);
});
cy.request({
url: rideToWorkByBikeConfig.urlInstagram,
failOnStatusCode: failOnStatusCode,
}).then((resp) => {
if (resp.status === httpTooManyRequestsStatus) {
cy.log(httpTooManyRequestsStatusMessage);
return;
}
expect(resp.status).to.eq(httpSuccessfullStatus);
});
cy.request({
url: rideToWorkByBikeConfig.urlTwitter,
headers: { 'user-agent': urlTwitterUserAgentHeader },
failOnStatusCode: failOnStatusCode,
}).then((resp) => {
if (resp.status === httpTooManyRequestsStatus) {
cy.log(httpTooManyRequestsStatusMessage);
return;
}
expect(resp.status).to.eq(httpSuccessfullStatus);
});
function coreTests() {
it('renders RTWBB logo', () => {
cy.window().then(() => {
cy.dataCy(selectorFooterLogo)
.should('be.visible')
.and('have.css', 'width', '142px')
.and('have.css', 'height', '40px');
});
});

it('renders Auto*Mat logo with separator and text, validate URL link', () => {
cy.window().then(() => {
// link
cy.dataCy(selectorFooterAutoMatLogoLink)
.should('be.visible')
.and('have.attr', 'href', rideToWorkByBikeConfig.urlAutoMat);
cy.request({
url: rideToWorkByBikeConfig.urlYoutube,
url: rideToWorkByBikeConfig.urlAutoMat,
failOnStatusCode: failOnStatusCode,
}).then((resp) => {
if (resp.status === httpTooManyRequestsStatus) {
Expand All @@ -136,47 +138,138 @@ describe('<FooterBar>', () => {
}
expect(resp.status).to.eq(httpSuccessfullStatus);
});
cy.dataCy(selectorFooterAutoMatLogo)
.should('be.visible')
.and('have.css', 'width', '74px')
.and('have.css', 'height', '28px');
});
});

it('renders language switcher', () => {
cy.window().then(() => {
cy.dataCy('language-switcher-footer')
.should('be.visible')
.and('have.css', 'font-size', '14px')
.and('have.css', 'font-weight', '400')
.and('have.color', white);
});
it('renders separator between logos', () => {
cy.dataCy(selectorFooterLogoSeparator).should('be.visible');
});

it('renders social menu', () => {
cy.window().then(() => {
cy.dataCy(selectorFooterSocialMenu)
.should('be.visible')
.and('have.css', 'display', displayFlex)
.and('have.css', 'align-items', 'center');
cy.dataCy(selectorFooterSocialMenuButton)
.should('be.visible')
.and('have.css', 'border-radius', '50%');
cy.dataCy(selectorFooterSocialMenuLinkFacebook)
.should('be.visible')
.and('have.attr', 'href', rideToWorkByBikeConfig.urlFacebook);
cy.dataCy(selectorFooterSocialMenuLinkInstagram)
.should('be.visible')
.and('have.attr', 'href', rideToWorkByBikeConfig.urlInstagram);
cy.dataCy(selectorFooterSocialMenuLinkTwitter)
.should('be.visible')
.and('have.attr', 'href', rideToWorkByBikeConfig.urlTwitter);
cy.dataCy(selectorFooterSocialMenuLinkYoutube)
.should('be.visible')
.and('have.attr', 'href', rideToWorkByBikeConfig.urlYoutube);
cy.dataCy(selectorFooterSocialMenuIcon)
.should('be.visible')
.and('have.color', primary);
cy.dataCy(selectorFooterSocialMenuIcon)
.invoke('height')
.should('be.equal', iconSize);
cy.dataCy(selectorFooterSocialMenuIcon)
.invoke('width')
.should('be.equal', iconSize);
});
});

it('renders a go to top button', () => {
cy.window().then(() => {
cy.dataCy('footer-top-button')
.should('be.visible')
.and('have.css', 'width', '38px')
.and('have.css', 'height', '38px')
.and('have.color', white);
});
it('renders social menu items side by side', () => {
cy.testElementsSideBySide(
selectorFooterSocialMenuLinkFacebook,
selectorFooterSocialMenuLinkInstagram,
);
cy.testElementsSideBySide(
selectorFooterSocialMenuLinkInstagram,
selectorFooterSocialMenuLinkTwitter,
);
cy.testElementsSideBySide(
selectorFooterSocialMenuLinkTwitter,
selectorFooterSocialMenuLinkYoutube,
);
});

it('provides valid URLs for social links', () => {
cy.request({
url: rideToWorkByBikeConfig.urlFacebook,
failOnStatusCode: failOnStatusCode,
}).then((resp) => {
if (resp.status === httpTooManyRequestsStatus) {
cy.log(httpTooManyRequestsStatusMessage);
return;
}
expect(resp.status).to.eq(httpSuccessfullStatus);
});
cy.request({
url: rideToWorkByBikeConfig.urlInstagram,
failOnStatusCode: failOnStatusCode,
}).then((resp) => {
if (resp.status === httpTooManyRequestsStatus) {
cy.log(httpTooManyRequestsStatusMessage);
return;
}
expect(resp.status).to.eq(httpSuccessfullStatus);
});
cy.request({
url: rideToWorkByBikeConfig.urlTwitter,
headers: { 'user-agent': urlTwitterUserAgentHeader },
failOnStatusCode: failOnStatusCode,
}).then((resp) => {
if (resp.status === httpTooManyRequestsStatus) {
cy.log(httpTooManyRequestsStatusMessage);
return;
}
expect(resp.status).to.eq(httpSuccessfullStatus);
});
cy.request({
url: rideToWorkByBikeConfig.urlYoutube,
failOnStatusCode: failOnStatusCode,
}).then((resp) => {
if (resp.status === httpTooManyRequestsStatus) {
cy.log(httpTooManyRequestsStatusMessage);
return;
}
expect(resp.status).to.eq(httpSuccessfullStatus);
});
});

it('renders copyright list', () => {
cy.window().then(() => {
cy.dataCy('footer-copyright-list-desktop')
.should('be.visible')
.and('have.css', 'display', 'flex')
.and('have.css', 'flex-wrap', 'wrap')
.and('have.css', 'font-size', '14px')
.and('have.css', 'font-weight', '400')
.and('have.color', white);
});
it('renders language switcher', () => {
cy.window().then(() => {
cy.dataCy(selectorLanguageSwitcherFooter).should('be.visible');
});
});

context('mobile', () => {
beforeEach(() => {
cy.mount(FooterBar, {
props: {},
});
cy.viewport('iphone-6');
it('renders a go to top button', () => {
cy.window().then(() => {
// button with icon
cy.dataCy(selectorFooterTopButton)
.should('be.visible')
.and('have.color', primary);
// text
cy.dataCy(selectorFooterTopButtonText)
.should('be.visible')
.and('have.css', 'font-size', fontSize)
.and('have.css', 'font-weight', fontWeight)
.and('have.color', primary);
});
});
});

it('renders button and text for scrolling to top side by side', () => {
cy.testElementsSideBySide(
selectorFooterTopButton,
selectorFooterTopButtonText,
);
});

it('renders RTWBB logo and Auto*Mat section side by side', () => {
cy.testElementsSideBySide(selectorFooterLogo, selectorFooterAutoMat);
});
}
Loading

0 comments on commit 940e9cd

Please sign in to comment.