test(teach): add desktop tests for all /education/ pages

Author: zoobestik

static/js/ktl-component/courses/index.jsx

@@ -12,7 +12,7 @@ import {TeachMap} from '../teach/components/teach-map/teach-map.jsx';
 const Courses = ({universities, path}) => {
   const [activeIndex, setActiveIndex] = useState(0);
   return (
-    <div>
+    <div data-test="teach-courses">
       <TeachTopMenu path={path} />
 
       <section className="ktl-layout ktl-layout--center">

static/js/ktl-component/why-teach/index.jsx

@@ -13,7 +13,7 @@ import quotes from './quotes.json';
 export const WhyTeach = ({path}) => {
 
   return (
-    <div className="teach-wrapper">
+    <div className="teach-wrapper" data-test="teach-why-teach-page">
       <TeachTopMenu path={path}/>
 
       <div className="ktl-layout ktl-layout--center">

test/e2e/teach/courses.spec.ts

@@ -0,0 +1,106 @@
+import { expect, test } from '@playwright/test';
+import { CoursesPage } from '../../page/teach/courses-page';
+import { closeExternalBanners } from '../utils';
+import { testSelector } from '../../utils';
+import { checkTeachCta, checkTeachMap, checkTeachSubnav } from './utils';
+
+test.describe('Courses page appearance and functionality', async () => {
+    test.beforeEach(async ({ page, context, baseURL }) => {
+        const coursesPage = new CoursesPage(page);
+        await coursesPage.init();
+        await closeExternalBanners(context, page, baseURL);
+    });
+
+    test('Should load the courses page correctly', async ({ page }) => {
+        // Check if the page title is correct
+        expect(await page.title()).toBe('List of Courses');
+
+        // Check if the main content is visible
+        const mainContent = page.locator(testSelector('teach-courses'));
+        await expect(mainContent).toBeVisible();
+
+        // Check if the page heading is correct
+        const title = mainContent.locator('h1');
+        await expect(title).toBeVisible();
+
+        expect(await title.textContent()).toBe('Universities That Teach Kotlin');
+    });
+
+    test('Should have working navigation buttons', async ({ page }) => {
+        await checkTeachSubnav(page, 'List of Courses');
+    });
+
+    test('Should have working tab navigation', async ({ page }) => {
+        // Check if the tab list is visible
+        const tabList = page.locator('.ktl-courses__tabs');
+        await expect(tabList).toBeVisible();
+
+        // Check if both tabs are present
+        const tableViewTab = tabList.locator('button').filter({ hasText: 'Table view' });
+        await expect(tableViewTab).toBeVisible();
+
+        const mapViewTab = tabList.locator('button').filter({ hasText: 'Map view' });
+        await expect(mapViewTab).toBeVisible();
+
+        await expect(tableViewTab).toHaveAttribute('data-test', 'tab tab-selected');
+        await expect(mapViewTab).toHaveAttribute('data-test', 'tab');
+
+        // CoursesList should be visible in the table view
+        await expect(page.locator('.ktl-courses-list')).toBeVisible();
+
+        // Switch to the map view
+        await mapViewTab.click();
+
+        // Map view should now be active
+        await expect(tableViewTab).toHaveAttribute('data-test', 'tab');
+        await expect(mapViewTab).toHaveAttribute('data-test', 'tab tab-selected');
+
+        // TeachMap should be visible in the map view
+        await expect(page.locator('.teach-map .gm-style')).toBeVisible();
+
+        // Switch back to the table view
+        await tableViewTab.click();
+
+        // Table view should be active again
+        await expect(tableViewTab).toHaveAttribute('data-test', 'tab tab-selected');
+        await expect(mapViewTab).toHaveAttribute('data-test', 'tab');
+
+        // CoursesList should be visible again
+        await expect(page.locator('.ktl-courses-list')).toBeVisible();
+    });
+
+    test('Should display university list in table view', async ({ page }) => {
+        // Make sure we're in a table view
+        const tableViewTab = page.locator('button').filter({ hasText: 'Table view' });
+        await tableViewTab.click();
+
+        // Check if the course list is visible
+        const coursesList = page.locator('.ktl-courses-list');
+        await expect(coursesList).toBeVisible();
+
+        // Check and verify the headers of the course list
+        const headers = coursesList.locator('.ktl-courses-list-header .ktl-courses-list-cell');
+        expect(await headers.count()).toBe(3);
+        expect(await headers.nth(0).textContent()).toBe('University title');
+        expect(await headers.nth(1).textContent()).toBe('Location');
+        expect(await headers.nth(2).textContent()).toBe('Teaching Kotlin');
+
+        // Check if there are universities in the list
+        const universities = coursesList.locator('.ktl-courses-list__item');
+        expect(await universities.count()).toBeGreaterThan(0);
+        expect(await universities.first().locator('.ktl-courses-list-cell').count())
+            .toBe(3);
+    });
+
+    test('Should display map with markers in map view', async ({ page }) => {
+        // Switch to the map view
+        const mapViewTab = page.locator('button').filter({ hasText: 'Map view' });
+        await mapViewTab.click();
+
+        // Check if the map is visible
+        const map = page.locator('.teach-map');
+        await checkTeachMap(page, map);
+    });
+
+    test('Should have action buttons for educators', checkTeachCta);
+});

test/e2e/teach/education.spec.ts

@@ -0,0 +1,242 @@
+import { expect, test } from '@playwright/test';
+import { TeachPage } from '../../page/teach/education';
+import { closeExternalBanners } from '../utils';
+import { testSelector } from '../../utils';
+import { checkTeachCta, checkTeachMap, checkTeachSubnav, MAILTO_LINK, MATERIALS_LINK, SIGNUP_LINK } from './utils';
+
+test.describe('Education landing page content and interactions', async () => {
+    test.beforeEach(async ({ context, page, baseURL }) => {
+        const teachPage = new TeachPage(page);
+        await teachPage.init();
+        await closeExternalBanners(context, page, baseURL);
+    });
+
+    test('Should load the education page correctly', async ({ page }) => {
+        // Check if the page title is correct
+        expect(await page.title()).toBe('Kotlin for Education');
+
+        // Check if the main content is visible
+        const mainContent = page.locator(testSelector('teach-index-page'));
+        await expect(mainContent).toBeVisible();
+
+        // Check if the page heading is correct
+        const title = mainContent.locator('h1');
+        await expect(title).toBeVisible();
+
+        expect(await title.textContent()).toBe('Teach Computer Science with Kotlin');
+    });
+
+    test('Should have working navigation buttons', async ({ page }) => {
+        await checkTeachSubnav(page, 'Overview');
+    });
+
+    test('Should display course materials download button', async ({ page }) => {
+        const block = page.locator('.teach-launch-course__text');
+
+        const button = block.locator(`a[href="${MATERIALS_LINK}"]`);
+        await expect(button).toBeVisible();
+
+        expect(await block.screenshot()).toMatchSnapshot('launch-course-text.png');
+    });
+
+    test('Should display features section with features', async ({ page }) => {
+        // Check if the features section is visible
+        const featuresSection = page.locator('.teach-features');
+        await expect(featuresSection).toBeVisible();
+
+        // Check if there are exactly 3 features
+        const expectedFeatures = ['Academically recognized', 'Language of the industry', 'Multiplatform'];
+        const features = featuresSection.locator('.teach-feature');
+        expect(await features.count()).toBe(3);
+
+        // Check each feature
+        for (let i = 0; i < expectedFeatures.length; i++) {
+            const feature = features.nth(i);
+            await expect(feature.locator('.teach-feature__icon img')).toBeVisible();
+            expect(await feature.locator('.ktl-h3').textContent()).toBe(expectedFeatures[i]);
+        }
+
+        expect(await featuresSection.screenshot()).toMatchSnapshot('teach-features.png');
+    });
+
+    test('Should display buttons in top section', async ({ page }) => {
+        const block = page.locator('.teach-top-buttons');
+
+        await expect(block.locator(`a[href="${SIGNUP_LINK}"]`)).toBeVisible();
+        await expect(block.locator(`a[href="why-teach-kotlin.html"]`)).toBeVisible();
+
+        expect(await block.screenshot()).toMatchSnapshot('teach-top-mobile-buttons.png');
+    });
+
+    test('Should display university statistics correctly', async ({ page }) => {
+        // Check if the university count is displayed
+        const universitiesText = page.locator('.universities-top__title h2');
+        expect(await universitiesText.textContent()).toBe('Kotlin Courses Around the World');
+
+        // Check if the TeachNumbers component is visible
+        const teachNumbers = page.locator('.universities-top__numbers');
+        await expect(teachNumbers).toBeVisible();
+
+        // Check if the TeachNumbers component is visible
+        const subtitles = teachNumbers.locator('.teach-number__subtitle');
+        expect(await subtitles.count()).toBe(2);
+        expect(await subtitles.nth(0).textContent()).toBe('countries');
+        expect(await subtitles.nth(1).textContent()).toBe('universities');
+    });
+
+    test('Should display university logos', async ({ page }) => {
+        // Check if the university logos are visible
+        const logos = page.locator('.teach-logos__logo');
+        expect(await logos.count()).toBe(5);
+
+        // Check specific universities
+        await expect(page.locator('img[alt="Harvard University"]')).toBeVisible();
+        await expect(page.locator('img[alt="University of Cambridge"]')).toBeVisible();
+        await expect(page.locator('img[alt="Stanford University"]')).toBeVisible();
+        await expect(page.locator('img[alt="Imperial College London"]')).toBeVisible();
+        await expect(page.locator('img[alt="The University of Chicago"]')).toBeVisible();
+
+        expect(await page.locator('.teach-logos').screenshot()).toMatchSnapshot('teach-logos.png');
+    });
+
+    test('Should have a working interactive map', async ({ page }) => {
+        // Check if the map is visible
+        const map = page.locator('.teach-map__wrapper');
+        await checkTeachMap(page, map);
+    });
+
+    test('Should display navigation buttons', async ({ page }) => {
+        const bottom = page.locator('.teach-universities__bottom');
+        await expect(bottom).toBeVisible();
+
+        // Check if the mailto button is visible and working
+        const mailtoButton = bottom.locator(`a[href="${MAILTO_LINK}"]`);
+        await expect(mailtoButton).toBeVisible();
+
+        // Check if the "All Universities" button is visible
+        const allUniversitiesButton = bottom.locator('a[href="courses.html"]');
+        await expect(allUniversitiesButton).toBeVisible();
+    });
+
+    test('Should have comprehensive resource links section', async ({ page }) => {
+        // Check if the resources section is visible
+        const resourcesSection = page.locator('#start-teaching-kotlin');
+        await expect(resourcesSection).toBeVisible();
+
+        // Check section title
+        const sectionTitle = resourcesSection.locator('h2');
+        await expect(sectionTitle).toHaveText('Start Teaching Kotlin with These Resources');
+
+        // Check category headings
+        const expectedTitles = ['Get started', 'Tools', 'Online Courses', 'Android in Kotlin', 'Practice Kotlin'];
+        const categoryHeadings = resourcesSection.locator('.ktl-h4');
+        await expect(categoryHeadings).toHaveCount(expectedTitles.length);
+
+        // Check each category heading and its associated links
+        for (let i = 0; i < expectedTitles.length; i++) {
+            const item = categoryHeadings.nth(i);
+            await expect(item).toHaveText(expectedTitles[i]);
+            const links = item.locator(':scope + .teach-list > li');
+            expect(await links.count()).toBeGreaterThan(0);
+        }
+    });
+
+    test('Should have a working subscription form', async ({ page }) => {
+        const email = '[email protected]';
+
+        await page.route('https://forms-service.jetbrains.com/marketo', route => {
+            if (route.request().method() !== 'POST') route.continue();
+            route.fulfill({
+                status: 200,
+                contentType: 'application/json',
+                body: JSON.stringify({ 'success': true, 'cause': [] })
+            });
+        });
+
+        await page.route(`https://account.jetbrains.com/services/acceptAgreement?email=${encodeURIComponent(email)}&type=mkt.newsletter.visitor`, route => {
+            if (route.request().method() !== 'POST') route.continue();
+            route.fulfill({
+                status: 200,
+                contentType: 'application/json',
+                body: JSON.stringify({ 'status': 'OK' })
+            });
+        });
+
+        // Locate the subscription form
+        const subscriptionForm = page.locator('.teach-subscription-section');
+        await expect(subscriptionForm).toBeVisible();
+
+        // Find the form elements
+        await subscriptionForm.locator('input[name="Email"]').fill(email);
+
+        // Check the privacy checkbox by clicking its label
+        await subscriptionForm.locator('.teach-subscription-form__checkbox label').click();
+
+        // Submit the form
+        await subscriptionForm.locator('button[type="submit"]').click();
+
+        // Verify that the form shows the submitted state (check icon appears)
+        await expect(subscriptionForm.locator('.teach-subscription-form__submitted-icon')).toBeVisible();
+
+        expect(await subscriptionForm.screenshot()).toMatchSnapshot('subscription-form.png');
+    });
+
+    test('Should have a working YouTube player', async ({ page }) => {
+        // Check if the YouTube player container is visible
+        const youtubePlayer = page.locator('.teach-video');
+        await expect(youtubePlayer).toBeVisible();
+
+        // Check if the player is in "show video" mode
+        await expect(youtubePlayer.locator('[class*="ktl-youtube-player-module_preview_"]')).toBeVisible();
+
+        // Check if the play button is visible
+        const playButton = youtubePlayer.locator('[class*="ktl-youtube-player-module_play-button_"]');
+        await expect(playButton).toBeVisible();
+
+        // Click the play button to start the video
+        await playButton.click();
+
+        // After clicking, the play button should be hidden and the video should be playing
+        await expect(playButton).toBeHidden();
+
+        // Check if the iframe is loaded correctly
+        const iframe = youtubePlayer.locator('iframe');
+        await expect(iframe).toBeVisible();
+
+        // Check if the iframe has the correct src attribute (YouTube embed URL)
+        const iframeSrc = await iframe.getAttribute('src');
+        expect(iframeSrc).toBeTruthy();
+        expect(iframeSrc).toContain('youtube.com');
+        expect(iframeSrc).toContain('PLlFc5cFwUnmzT4cgLOGJYGnY6j0W2xoFA');
+    });
+
+    test('Should have working quotes slider', async ({ page }) => {
+        const quotes = page.locator('[class*=ktl-quotes-slider-module_quotes-slider_]');
+
+        // Initial state of quotes
+        const defaultAuthor = quotes.getByText('David Vaughn', { exact: false });
+        await expect(defaultAuthor).toBeVisible();
+
+        const quoteContent = quotes.getByText('Kotlin is faster to develop', { exact: false });
+        await expect(quoteContent).toBeVisible();
+
+        // Controls of navigation
+        const controls = page.locator('[class*=ktl-quotes-slider-module_control_]');
+        await expect(controls).toHaveCount(2);
+
+        const backButton = controls.first();
+        await expect(backButton).not.toHaveClass(/ktl-quotes-slider-module_control-active_/);
+
+        const forwardButton = controls.last();
+        await expect(forwardButton).toHaveClass(/ktl-quotes-slider-module_control-active_/);
+
+        await forwardButton.click();
+
+        await expect(quotes.getByText('Sergey Bratus')).toBeVisible();
+        await expect(quotes.getByText('I used Kotlin')).toBeVisible();
+
+        await expect(backButton).toHaveClass(/ktl-quotes-slider-module_control-active_/);
+    });
+
+    test('Should have action buttons for educators', checkTeachCta);
+});