-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
src/components: update component DrawerMenu styling based on graphic …
…design (#576) * update sidebar color + logo * update layout background + menu colors * update tests * update icons * unify test data source * fix padding * update e2e tests * src/css: define global SCSS white color var --------- Co-authored-by: Šimon Macek <[email protected]> Co-authored-by: Tomas Zigo <[email protected]>
- Loading branch information
3 people
authored
Sep 23, 2024
1 parent
c238f4c
commit 7f03f89
Showing
14 changed files
with
204 additions
and
96 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,118 @@ | ||
| import DrawerMenu from '../global/DrawerMenu.vue'; | ||
| import { i18n } from '../../boot/i18n'; | ||
| import { colors } from 'quasar'; | ||
| import { menuBottom, menuTop } from '../../mocks/layout'; | ||
|
|
||
| const menuItems = [ | ||
| { icon: 'home', name: 'home' }, | ||
| { icon: 'route', name: 'routes' }, | ||
| { icon: 'emoji_events', name: 'results' }, | ||
| { icon: 'people', name: 'community' }, | ||
| { icon: 'verified', name: 'discounts' }, | ||
| { icon: 'business', name: 'coordinator' }, | ||
| { icon: 'account_circle', name: 'profile' }, | ||
| { | ||
| icon: 'email', | ||
| name: 'inviteFriends', | ||
| }, | ||
| { | ||
| icon: 'volunteer_activism', | ||
| name: 'donate', | ||
| }, | ||
| ]; | ||
| // colors | ||
| const { getPaletteColor } = colors; | ||
| const white = getPaletteColor('white'); | ||
| const grey4 = getPaletteColor('grey-4'); | ||
|
|
||
| // selectors | ||
| const selectorDrawerMenuItem = 'drawer-menu-item'; | ||
| const selectorDrawerMenuItemIcon = 'drawer-menu-item-icon'; | ||
|
|
||
| // variables | ||
| const iconSize = 18; | ||
| const fontSize = '16px'; | ||
|
|
||
| describe('DrawerMenu', () => { | ||
| beforeEach(() => { | ||
| cy.mount(DrawerMenu, {}); | ||
| }); | ||
| context('menu top', () => { | ||
| beforeEach(() => { | ||
| cy.mount(DrawerMenu, { | ||
| props: { | ||
| items: menuTop, | ||
| }, | ||
| }); | ||
| cy.wrap(menuTop).as('menu'); | ||
| }); | ||
|
|
||
| it('has translation for all strings', () => { | ||
| cy.testLanguageStringsInContext( | ||
| menuTop.map((item) => item.title), | ||
| 'drawerMenu', | ||
| i18n, | ||
| ); | ||
| }); | ||
|
|
||
| it('has translation for all strings', () => { | ||
| cy.testLanguageStringsInContext( | ||
| menuItems.map((item) => item.name), | ||
| 'drawerMenu', | ||
| i18n, | ||
| ); | ||
| coreTests(); | ||
| }); | ||
|
|
||
| it('should render the list with the correct number of items', () => { | ||
| cy.window().then(() => { | ||
| cy.get('.q-item').should('have.length', 9); | ||
| context('menu bottom', () => { | ||
| beforeEach(() => { | ||
| cy.mount(DrawerMenu, { | ||
| props: { | ||
| items: menuBottom, | ||
| }, | ||
| }); | ||
| cy.wrap(menuBottom).as('menu'); | ||
| }); | ||
|
|
||
| coreTests(); | ||
| }); | ||
|
|
||
| it('should render each item with the expected icon and text content', () => { | ||
| cy.window().then(() => { | ||
| menuItems.forEach((item, index) => { | ||
| cy.get('.q-item') | ||
| .eq(index) | ||
| .within(() => { | ||
| cy.get('.q-icon') | ||
| .should('be.visible') | ||
| .and('contain.text', item.icon); | ||
| function coreTests() { | ||
| it('should render the list with the correct number of items', () => { | ||
| cy.window().then(() => { | ||
| cy.get('@menu').then((menu) => { | ||
| cy.dataCy(selectorDrawerMenuItem).should('have.length', menu.length); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('renders items with correct styling', () => { | ||
| cy.window().then(() => { | ||
| cy.get('@menu').then((menu) => { | ||
| cy.dataCy(selectorDrawerMenuItem).each(($item, index) => { | ||
| // test if current route | ||
| if ($item.hasClass('menu-active-item')) { | ||
| // active item | ||
| cy.wrap($item) | ||
| .should('have.color', white) | ||
| .and('have.css', 'font-size', fontSize) | ||
| .and('have.css', 'font-weight', '700') | ||
| .and( | ||
| 'contain', | ||
| i18n.global.t(`drawerMenu.${menu[index].title}`), | ||
| ) | ||
| .within(() => { | ||
| cy.dataCy(selectorDrawerMenuItemIcon).should( | ||
| 'have.color', | ||
| white, | ||
| ); | ||
| cy.dataCy(selectorDrawerMenuItemIcon) | ||
| .invoke('width') | ||
| .should('be.eq', iconSize); | ||
| cy.dataCy(selectorDrawerMenuItemIcon) | ||
| .invoke('height') | ||
| .should('be.eq', iconSize); | ||
| }); | ||
| } else { | ||
| // inactive item | ||
| cy.wrap($item) | ||
| .should('have.color', white) | ||
| .and('have.css', 'font-size', fontSize) | ||
| .and('have.css', 'font-weight', '400') | ||
| .and( | ||
| 'contain', | ||
| i18n.global.t(`drawerMenu.${menu[index].title}`), | ||
| ) | ||
| .within(() => { | ||
| cy.dataCy(selectorDrawerMenuItemIcon).should( | ||
| 'have.color', | ||
| grey4, | ||
| ); | ||
| cy.dataCy(selectorDrawerMenuItemIcon) | ||
| .invoke('width') | ||
| .should('be.eq', iconSize); | ||
| cy.dataCy(selectorDrawerMenuItemIcon) | ||
| .invoke('height') | ||
| .should('be.eq', iconSize); | ||
| }); | ||
| } | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.