diff --git a/apps/web/src/components/navigation/header/header.tsx b/apps/web/src/components/navigation/header/header.tsx index cde3909667..b0c8bc2656 100644 --- a/apps/web/src/components/navigation/header/header.tsx +++ b/apps/web/src/components/navigation/header/header.tsx @@ -60,7 +60,7 @@ export function Header() { mobileMenuOpen ? '' : 'hidden' )} > - +
{renderQuickbar()} diff --git a/apps/web/src/components/navigation/header/menu/menu.tsx b/apps/web/src/components/navigation/header/menu/menu.tsx index 6998933092..7e7ba648cf 100644 --- a/apps/web/src/components/navigation/header/menu/menu.tsx +++ b/apps/web/src/components/navigation/header/menu/menu.tsx @@ -12,7 +12,7 @@ const AuthItems = dynamic(() => import('./auth-items').then((mod) => mod.AuthItems) ) -export function Menu() { +export function Menu({ isMobile }: { isMobile?: boolean }) { const auth = useAuthentication() const { headerData } = useInstanceData() const [mounted, setMounted] = useState(false) @@ -22,7 +22,7 @@ export function Menu() { const showAuth = auth && mounted return ( - + { + // once would be enough but this way we don't care about the order the tests are run in + I.resizeWindow(415, 800) +}) +After(({ I }) => { + // back to default + I.resizeWindow(1280, 720) +}) + +Scenario('About Serlo @mobile', ({ I }) => { + I.amOnPage('/') + + // Make sure it's the landing page + I.see('einfache Erklärungen') + I.see('Biologie') + I.see('werbefrei') + + // Rounded corners are probably causing problems, move cursor a bit + I.click('Mehr über uns', null, { position: { x: 10, y: 10 } }) + + // Try to reduce flakyness + I.waitForText('Über Serlo', 10, 'h1') + + // I am on the about page + I.seeInTitle('Über Serlo') + I.see('mehr als 10 Jahren') + + // Navigating around + I.click('Pädagogisches Konzept') + I.click('Anleitung für die Lernplattform serlo.org') + I.scrollPageToBottom() + I.click('Community') + + // Make sure it's the right page, wait longer to reduce flakiness + I.waitForText("Was gibt's zu tun?", 20) +}) + +Scenario('Main Menu @mobile', async ({ I }) => { + I.amOnPage('/') + + // closed on load + I.dontSeeElement('nav[aria-label="Main"]') + + // opens + I.click('button[aria-label="Menu"]') + I.seeElement('nav[aria-label="Main"]') + I.see('Fächer', 'nav[aria-label="Main"]') + I.see('Anmelden', 'nav[aria-label="Main"]') + + // sub menus open + I.click('Mitmachen', 'nav[aria-label="Main"]') + I.see('Überprüfe Bearbeitungen', 'nav[aria-label="Main"]') + I.see('Zusammenarbeit', 'nav[aria-label="Main"]') + + // and close + I.click('Mitmachen', 'nav[aria-label="Main"]') + I.dontSee('Überprüfe Bearbeitungen', 'nav[aria-label="Main"]') + + // menu closes + I.click('button[aria-label="Menu"]') + I.dontSeeElement('nav[aria-label="Main"]') + + // auto closes after navigation + I.click('button[aria-label="Menu"]') + I.click('Über Uns', 'nav[aria-label="Main"]') + I.click('Über Serlo', 'nav[aria-label="Main"]') + I.dontSeeElement('nav[aria-label="Main"]') + + // opens on content page + I.amOnPage('/1555') + I.dontSeeElement('nav[aria-label="Main"]') + I.click('button[aria-label="Menu"]') + I.seeElement('nav[aria-label="Main"]') + I.see('Fächer', 'nav[aria-label="Main"]') + I.see('Anmelden', 'nav[aria-label="Main"]') +}) + +Scenario('Quickbar @mobile', ({ I }) => { + I.amOnPage('/') + + I.say('Open quickbar') + I.click('$quickbar-input') + I.type('Vektor') + + // Check dropdown + I.seeElement('$quickbar-combobox-overlay') + I.see('Kreuzprodukt') + I.see('Vektorbegriff') + I.see('Auf Serlo nach') + + I.say('Assert aria attributes and navigate options using keyboard') + I.seeAttributesOnElements('$quickbar-combobox-overlay', { role: 'listbox' }) + I.seeAttributesOnElements('$quickbar-input', { role: 'combobox' }) + + I.seeAttributesOnElements('$quickbar-option-0', { 'aria-selected': 'true' }) + I.seeAttributesOnElements('$quickbar-option-1', { 'aria-selected': 'false' }) + I.seeAttributesOnElements('$quickbar-option-2', { 'aria-selected': 'false' }) + + I.pressKey('ArrowDown') + I.seeAttributesOnElements('$quickbar-option-0', { 'aria-selected': 'false' }) + I.seeAttributesOnElements('$quickbar-option-1', { 'aria-selected': 'true' }) + I.seeAttributesOnElements('$quickbar-option-2', { 'aria-selected': 'false' }) + + I.pressKey('ArrowUp') + I.seeAttributesOnElements('$quickbar-option-0', { 'aria-selected': 'true' }) + I.seeAttributesOnElements('$quickbar-option-1', { 'aria-selected': 'false' }) + I.seeAttributesOnElements('$quickbar-option-2', { 'aria-selected': 'false' }) + + I.pressKey('Enter') + I.seeInTitle('Vektor') + + I.say('Perform another search') + I.amOnPage('/') + I.click('$quickbar-input') + I.type('Aufgaben zu Urnenmodellen') + + I.click('Aufgaben zu Urnenmodellen') + I.seeInTitle('Aufgaben zu Urnenmodellen') + I.see('Abiturkurs Stochastik') +}) + +Scenario('Share modal @mobile', ({ I }) => { + I.amOnPage('/1553') + I.click('Teilen') + I.see('Link kopieren') + I.see('Als PDF herunterladen') + + // QR code + I.seeElement('svg[width="128"][height="128"]') +}) +Scenario('Legal Pages @mobile', async ({ I }) => { + I.amOnPage('/') + I.click('Impressum') + I.see('Amtsgericht München') + I.see('Haftung für Inhalte') + I.seeInCurrentUrl('/legal') + + I.amOnPage('/') + I.click('Datenschutz') + I.see('personenbezogene Daten') + I.see('Verarbeitung der Nutzerdaten') + I.see('Einwilligungen für externe Inhalte') + const date = await I.grabTextFrom('time') + assert.equal(true, date && date.length !== 0) + I.seeInCurrentUrl('/privacy') + + I.amOnPage('/') + I.click('Nutzungsbedingungen und Urheberrecht') + I.see('Änderungsvorbehalt') + I.see('CC-BY-SA-Lizenz') + + I.amOnPage('/hi/privacy') + I.see('Privacy Policy') + I.see('en@serlo.org') +}) +Scenario('Consent @mobile', async ({ I }) => { + I.amOnPage('/') + I.click('Jetzt Spenden') + + // Make sure that twingle is activated + const needConfirmation = await tryTo(() => { + I.see('Spendenformular laden') + }) + if (needConfirmation) { + I.click('Spendenformular laden') + } + + I.amOnPage('/') + I.click('Einwilligungen widerrufen') + I.see('Twingle') + I.click('Nicht mehr erlauben') + I.see('Keine Einwilligungen gespeichert') + + // Go back and check + I.amOnPage('/') + I.click('Jetzt Spenden') + I.see('Spendenformular laden') +})