Merge pull request #4943 from JetBrains/e2e-educational-test

[Meta: Move pages to NextJS] add E2E `/educational/` test

Author: zoobestik

.gitignore

@@ -50,3 +50,4 @@ generated
 
 /reports*
 /data/page_views_map.json
+test-results

playwright.config.js

@@ -0,0 +1,24 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const MAX_DIFF_PIXEL_RATIO = 0.025 as const;
+
+export default defineConfig({
+    forbidOnly: !!process.env.CI,
+    retries: process.env.CI ? 2 : 0,
+    reporter: process.env.CI ? 'dot' : 'list',
+    snapshotDir: 'test/snapshots',
+    expect: {
+        toMatchSnapshot: { maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO },
+        toHaveScreenshot: { maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO }
+    },
+    use: {
+        baseURL: process.env.BASE_URL || 'http://localhost:9000',
+        trace: 'off'
+    },
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] }
+        }
+    ]
+});

playwright.config.ts

@@ -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/courses/index.jsx

@@ -22,7 +22,7 @@ export const TeachMap = ({className}) => {
         const items = data.map(university => {
           return {
             ...university,
-            id: `${university.title}-${university.location}`
+            id: `${university.title}-${university.location}-${university.geo.lat}-${university.geo.lng}`
           }
         });
         setUniversities(items)

static/js/ktl-component/teach/components/teach-map/teach-map.jsx

@@ -15,7 +15,7 @@ import './style.scss';
 import {SubscriptionForm} from './components/subscription-form';
 import {TeachMap} from './components/teach-map/teach-map.jsx';
 import {SlackIcon} from "@rescui/icons";
-import Button from "@rescui/button";
+import { Button } from "@rescui/button";
 import { TeachLaunchCourse } from "./components/teach-launch-course";
 
 import { useTextStyles } from '@rescui/typography';
@@ -41,7 +41,7 @@ const Teach = (props) => {
                       rel="noopener"
                       className="teach-cta-block-button"
                   >
-                      Join Educators Сommunity
+                      Join Educators Community
                   </Button>
 
                   <Button mode="outline" href="why-teach-kotlin.html" className="teach-cta-block-button">
@@ -121,7 +121,7 @@ const Teach = (props) => {
                           rel="noopener"
                           className="teach-cta-block-button"
                       >
-                          Join Educators Сommunity
+                          Join Educators Community
                       </Button>
 
                       <Button size="l" mode="outline" href="why-teach-kotlin.html" className="teach-cta-block-button">

static/js/ktl-component/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">

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

@@ -1,22 +1,22 @@
-import { expect, test } from '@playwright/test';
+import { expect, Page, test } from '@playwright/test';
 import { ApiReferencePage } from '../page/api-reference-page';
 
 const pagesWithCustomizedTemplates = [
     {
         name: 'kotlinx.coroutines index',
-        getInstance: (page) => new ApiReferencePage(page, '/api/kotlinx.coroutines/'),
+        getInstance: (page: Page) => new ApiReferencePage(page, '/api/kotlinx.coroutines/'),
     },
     {
         name: 'kotlinx-coroutines-core module',
-        getInstance: (page) => new ApiReferencePage(page, '/api/kotlinx.coroutines/kotlinx-coroutines-core/'),
+        getInstance: (page: Page) => new ApiReferencePage(page, '/api/kotlinx.coroutines/kotlinx-coroutines-core/'),
     },
     {
         name: 'kotlinx-serialization index',
-        getInstance: (page) => new ApiReferencePage(page,  '/api/kotlinx.serialization/'),
+        getInstance: (page: Page) => new ApiReferencePage(page,  '/api/kotlinx.serialization/'),
     },
     {
         name: 'kotlinx-serialization-core module',
-        getInstance: (page) => new ApiReferencePage(page,  '/api/kotlinx.serialization/kotlinx-serialization-core/'),
+        getInstance: (page: Page) => new ApiReferencePage(page,  '/api/kotlinx.serialization/kotlinx-serialization-core/'),
     },
 ];
 

test/e2e/api-references-template-customization.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, checkTeachNav } 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 checkTeachNav(page, 'List of Courses');
+    });
+
+    test('Should have working tab navigation', async ({ page }) => {
+        // Check if the tab list is visible
+        const tabList = page.locator(testSelector('tab-list'));
+        await expect(tabList).toBeVisible();
+
+        // Check if both tabs are present
+        const tableViewTab = tabList.getByRole('tab', { name: 'Table view', exact: true });
+        await expect(tableViewTab).toBeVisible();
+
+        const mapViewTab = tabList.getByRole('tab', { name: 'Map view', exact: true });
+        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.getByRole('tab', { name: '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.getByRole('tab', { name: '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);
+});