mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-27 11:01:38 -04:00
d2332093f6
* fix: main menu a11y updates * update font menu * fix: sign in button text alignment * fix: disabled button font * fix: language menu font * remove sign-in from main menu * fix: add section dividers to menu * fix: height on language selector menu * fix: alignment of Menu button text * fix: language globe icon * refactor: remove dup selector * update language menu colors * refactor: clearer name for language menu display state * fix: don't close onBlur if Menu button is clicked * refactor: move globe icon styling to CSS * refactor: get rid of switch statements * refactor: remove try catch block * fix: translate Change language button * fix: move search into nav menu for mobile layout * fix: forgot a merge * refactor: updates for changes in i18n/all-langs * fix: prevent menu from collapsing when focus is on change language button and user clicks into search * fix: translate cancel change option in language picker * feat: add cypress tests * feat: display the complete language list * fix: fix TS typing * fix: force scrollbar on lang menu * fix: remove scroll bar from lang menu * fix: close menu when user tabs away from last menu item * add list role to navigation list to appease Safari * chore: capitalize Change Language/remove CSS comment * fix: right side search box alignment in narrow view * remove extraneous list role * fix: cypress Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com> Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
114 lines
3.5 KiB
JavaScript
114 lines
3.5 KiB
JavaScript
import { availableLangs, LangNames } from '../../../../config/i18n/all-langs';
|
|
import envData from '../../../../config/env.json';
|
|
|
|
const { clientLocale } = envData;
|
|
|
|
const selectors = {
|
|
'navigation-list': '.nav-list',
|
|
'toggle-button': '.toggle-button-nav',
|
|
'language-menu': '.nav-lang-menu',
|
|
'sign-in-button': "[data-test-label='landing-small-cta']",
|
|
'avatar-link': '.avatar-nav-link',
|
|
'avatar-container': '.avatar-container'
|
|
};
|
|
|
|
const links = {
|
|
'sign-in': '/signin',
|
|
'sign-out': '/signout',
|
|
donate: '/donate',
|
|
curriculum: '/learn',
|
|
forum: 'https://forum.freecodecamp.org/',
|
|
news: 'https://freecodecamp.org/news/',
|
|
radio: 'https://coderadio.freecodecamp.org',
|
|
'avatar-link': '/developmentuser',
|
|
settings: '/settings'
|
|
};
|
|
|
|
describe('Default Navigation Menu', () => {
|
|
it('should render the expected nav items.', () => {
|
|
cy.visit('/learn');
|
|
testLink('Sign in', 'sign-in-button');
|
|
cy.get(selectors['language-menu']).should('not.be.visible');
|
|
cy.get(selectors['toggle-button']).should('be.visible').click();
|
|
cy.get(selectors['navigation-list']).contains('Sign in to change theme.');
|
|
testLink('Donate');
|
|
testLink('Curriculum');
|
|
testLink('Forum');
|
|
testLink('News');
|
|
testLink('Radio');
|
|
});
|
|
});
|
|
|
|
describe('Lanuage menu', () => {
|
|
it('should render all used languages.', () => {
|
|
cy.get(selectors['navigation-list']).contains('Change Language').click();
|
|
testAllLanuges();
|
|
cy.get(selectors['language-menu'])
|
|
.should('be.visible')
|
|
.contains('English')
|
|
.should('have.attr', 'aria-current', 'true');
|
|
cy.get(selectors['language-menu'])
|
|
.should('be.visible')
|
|
.contains(LangNames[clientLocale])
|
|
.should('have.attr', 'aria-current', 'true');
|
|
});
|
|
it('should have default language selected', () => {
|
|
cy.get(selectors['language-menu'])
|
|
.should('be.visible')
|
|
.contains(LangNames[clientLocale])
|
|
.should('have.attr', 'aria-current', 'true');
|
|
});
|
|
});
|
|
|
|
describe('Authenticated Navigation Menu', () => {
|
|
before(() => {
|
|
cy.clearCookies();
|
|
cy.exec('npm run seed');
|
|
cy.login();
|
|
cy.get(selectors['toggle-button']).should('be.visible').click();
|
|
});
|
|
it('should show default avatar.', () => {
|
|
testLink('Settings');
|
|
testLink('Sign out');
|
|
cy.get(selectors['sign-in-button']).should('not.exist');
|
|
cy.get(selectors['avatar-link'])
|
|
.should('have.attr', 'href')
|
|
.and('contain', links['avatar-link']);
|
|
cy.get(selectors['avatar-container']).should(
|
|
'have.class',
|
|
'default-border'
|
|
);
|
|
cy.get(selectors['navigation-list']).contains('Night Mode').click();
|
|
cy.get('body').should('have.class', 'dark-palette');
|
|
});
|
|
});
|
|
|
|
describe('Donor Navigation Menu', () => {
|
|
before(() => {
|
|
cy.clearCookies();
|
|
cy.exec('npm run seed -- --donor');
|
|
cy.login();
|
|
cy.visit('/donate');
|
|
});
|
|
it('should show donor avatar border.', () => {
|
|
cy.get(selectors['avatar-container']).should('have.class', 'gold-border');
|
|
});
|
|
it('should show thank you message.', () => {
|
|
cy.get(selectors['navigation-list']).contains('Thanks for donating');
|
|
});
|
|
});
|
|
|
|
const testAllLanuges = () => {
|
|
const availableLangNames = availableLangs.client.map(lang => LangNames[lang]);
|
|
availableLangNames.forEach(langName =>
|
|
cy.get(selectors['language-menu']).contains(langName)
|
|
);
|
|
};
|
|
|
|
const testLink = (item, selector = 'navigation-list') =>
|
|
cy
|
|
.get(selectors[selector])
|
|
.contains(item)
|
|
.should('have.attr', 'href')
|
|
.and('contain', links[item.replaceAll(' ', '-').toLowerCase()]);
|