test(e2e): Centralize cookie banner handling in global setup and cleanup test code

.gitignore

@@ -49,5 +49,6 @@ generated
 /reports*
 /data/page_views_map.json
 test-results
+test/storage-state.json
 
 public/data

.teamcity/tests/buildTypes/E2EProductionTest.kt

@@ -48,6 +48,7 @@ object E2EProductionTest : BuildType({
 
     features {
         notifications {
+            branchFilter = "+:master"
             enabled = !isProjectPlayground()
             notifierSettings = slackNotifier {
                 connection = "PROJECT_EXT_486"

.teamcity/tests/buildTypes/E2ETests.kt

@@ -1,12 +1,9 @@
 package tests.buildTypes
 
-import documentation.builds.KotlinWithCoroutines
 import jetbrains.buildServer.configs.kotlin.BuildType
 import jetbrains.buildServer.configs.kotlin.FailureAction
 import jetbrains.buildServer.configs.kotlin.buildSteps.script
-import kotlinlang.builds.BuildJsAssets
-import references.builds.kotlinx.coroutines.KotlinxCoroutinesBuildApiReference
-import references.builds.kotlinx.serialization.KotlinxSerializationBuildApiReference
+import kotlinlang.builds.BuildSitePages
 
 
 object E2ETests : BuildType({
@@ -16,70 +13,36 @@ object E2ETests : BuildType({
         +:test-results/* => test-results.zip
     """.trimIndent()
 
+    requirements {
+        exists("docker.server.version")
+        contains("docker.server.osType", "linux")
+    }
+
     vcs {
         root(vcsRoots.KotlinLangOrg)
     }
 
-    dependencies {
-        artifacts(KotlinWithCoroutines) {
-            cleanDestination = true
-            artifactRules = """
-                +:webHelpImages.zip!** => dist/docs/images/
-                +:webHelpKR2.zip!** => dist/docs/
-            """.trimIndent()
-        }
-
-        dependency(BuildJsAssets) {
-            snapshot {
-                onDependencyFailure = FailureAction.FAIL_TO_START
-                onDependencyCancel = FailureAction.CANCEL
-            }
-
-            artifacts {
-                artifactRules = "+:assets.zip!** => _assets/"
-            }
-        }
-
-        dependency(KotlinxCoroutinesBuildApiReference) {
-            snapshot {
-                onDependencyFailure = FailureAction.CANCEL
-                onDependencyCancel = FailureAction.CANCEL
-            }
-
-            artifacts {
-                artifactRules = "+:pages.zip!** => libs/kotlinx.coroutines/"
-            }
-        }
-
-        dependency(KotlinxSerializationBuildApiReference) {
-            snapshot {
-                onDependencyFailure = FailureAction.CANCEL
-                onDependencyCancel = FailureAction.CANCEL
-            }
-
-            artifacts {
-                artifactRules = "+:pages.zip!** => libs/kotlinx.serialization/"
-            }
-        }
+    params {
+        param("env.WEBTEAM_UI_NPM_TOKEN", "%WEBTEAM_UI_NPM_TOKEN%")
     }
 
     steps {
-        script {
-            name = "Set execute permissions"
-            scriptContent = "chmod +x ./scripts/test/run-e2e-tests.sh"
-        }
         script {
             name = "Run E2E tests"
             scriptContent = "./scripts/test/run-e2e-tests.sh"
         }
     }
 
-    artifactRules = """
-        +:test-results/ => test-results/
-    """.trimIndent()
-
-    requirements {
-        exists("docker.server.version")
-        contains("docker.server.osType", "linux")
+    dependencies {
+        dependency(BuildSitePages) {
+            snapshot {
+                onDependencyFailure = FailureAction.FAIL_TO_START
+                onDependencyCancel = FailureAction.CANCEL
+            }
+            artifacts {
+                buildRule = sameChainOrLastFinished()
+                artifactRules = "+:pages.zip!** => dist/"
+            }
+        }
     }
 })

blocks/education/courses-list/courses-list.tsx

@@ -22,14 +22,14 @@ interface CoursesListProps {
 export const CoursesList: FC<CoursesListProps> = ({ universities }) => {
     const textCn = useTextStyles();
     return (
-        <div className={styles.list}>
-            <div className={cn(styles.header, textCn('rs-h4'))}>
+        <div className={styles.list} data-test="courses">
+            <div className={cn(styles.header, textCn('rs-h4'))} data-test="courses-header">
                 <div className={cn(styles.cell, styles.cellFirst)}>University title</div>
                 <div className={cn(styles.cell, styles.cellSecond)}>Location</div>
                 <div className={cn(styles.cell, styles.cellThird)}>Teaching Kotlin</div>
             </div>
             {universities.map((university) => (
-                <div className={cn(styles.item, textCn('rs-text-2', { hardness: 'hard' }))} key={university.id}>
+                <div className={cn(styles.item, textCn('rs-text-2', { hardness: 'hard' }))} key={university.id} data-test="courses-item">
                     <div className={cn(styles.cell, styles.cellFirst)}>{university.title}</div>
                     <div className={cn(styles.cell, styles.cellSecond)}>{university.location}</div>
                     <div className={cn(styles.cell, styles.cellThird)}>

blocks/education/education-layout/education-layout.tsx

@@ -51,6 +51,7 @@ export const EducationLayout: FC<EducationLayoutProps> = ({
             </div>
 
             <CtaBlock
+                className={'cta-block'}
                 topTitle={
                     'If you would like to introduce Kotlin into your classroom or have any questions about teaching or learning Kotlin'
                 }

blocks/education/subscription-form/subscription-form.tsx

@@ -51,7 +51,7 @@ export const SubscriptionForm: FC = () => {
             }}
         >
             {({ setFieldValue }) => (
-                <Form className={styles.form}>
+                <Form className={styles.form} data-test="subscription-form">
                     <img src={MailIcon.src} className={styles.icon} alt="Subscribe form" />
 
                     <div className={cn(styles.text, textCn('rs-h3'))}>
@@ -66,12 +66,14 @@ export const SubscriptionForm: FC = () => {
                         className={styles.input}
                     />
 
-                    <FormikPrivacyCheckbox consentId={consentId} privacy={privacy} className={styles.checkbox} />
+                    <div data-test="subscription-checkbox">
+                        <FormikPrivacyCheckbox consentId={consentId} privacy={privacy} className={styles.checkbox} />
+                    </div>
 
                     {isSubmitted ? (
                         <span className={cn(styles.button, styles.submitted)}>
                             <span className={styles.submittedText}>Subscribe</span>
-                            <CheckIcon className={styles.submittedIcon} />
+                            <CheckIcon className={styles.submittedIcon} data-test="subscription-submitted-icon" />
                         </span>
                     ) : (
                         <FormikSubmitButton size="m" className={styles.button}>

blocks/education/teach-launch-course/teach-launch-course.tsx

@@ -9,7 +9,7 @@ export const TeachLaunchCourse: FC = () => {
 
     return (
         <div className={styles.launchCourse}>
-            <div className={cn('ktl-text-1', styles.text)}>
+            <div className={cn('ktl-text-1', styles.text)} data-test="teach-launch-course">
                 The Programming in Kotlin course is a comprehensive toolkit for teaching Kotlin and can be easily
                 customized to align with specific educational needs. The course comes with slides, lecture notes, and
                 assessment resources.

blocks/education/teach-map/teach-map-marker.tsx

@@ -14,7 +14,7 @@ interface TeachMapMarkerProps {
 
 export const TeachMapMarker: FC<TeachMapMarkerProps> = ({ university, showTooltip, onClose }) => {
     return (
-        <div className={cn(styles.marker, { [styles.active]: showTooltip })}>
+        <div className={cn(styles.marker, { [styles.active]: showTooltip })} data-test="teach-map-marker">
             {showTooltip && <TeachMapTooltip university={university} onClose={onClose} />}
         </div>
     );

blocks/education/teach-map/teach-map-tooltip.tsx

@@ -19,7 +19,7 @@ export const TeachMapTooltip: FC<TeachMapTooltipProps> = ({ university, onClose
     );
 
     return (
-        <div className={cn(styles.tooltip, 'ktl-text-3')}>
+        <div className={cn(styles.tooltip, 'ktl-text-3')} data-test="teach-map-tooltip">
             <div className={styles.header}>
                 <div>
                     <div className={styles.headerText}>{university.title}</div>

blocks/education/teach-map/teach-map.tsx

@@ -32,7 +32,7 @@ export const TeachMap: FC<TeachMapProps> = ({ className, universities }) => {
 
     return (
         <ErrorBoundary fallback={<div>Map is unavailable</div>}>
-            <div className={cn(styles.map, className)}>
+            <div className={cn(styles.map, className)} data-test={'teach-map'}>
                 <GoogleMapReact
                     bootstrapURLKeys={{ key: mapSettings.key }}
                     defaultCenter={mapSettings.defaultCenter}

blocks/education/teach-numbers/teach-numbers.tsx

@@ -13,15 +13,15 @@ export const TeachNumbers: FC<TeachNumbersProps> = ({ countriesCount, universiti
                 <div className={styles.title}>
                     <div className="ktl-hero">{countriesCount}</div>
                 </div>
-                <div className={styles.subtitle}>
+                <div className={styles.subtitle} data-test="teach-number-subtitle">
                     <div className="ktl-text-2">countries</div>
                 </div>
             </div>
             <div className={styles.number}>
                 <div className={styles.title}>
                     <div className="ktl-hero">{universitiesCount}</div>
                 </div>
-                <div className={styles.subtitle}>
+                <div className={styles.subtitle} data-test="teach-number-subtitle">
                     <div className="ktl-text-2">universities</div>
                 </div>
             </div>

docker-compose-e2e-statics.yml

@@ -1,34 +1,30 @@
-version: '3'
 services:
   nginx-server:
-    build:
-      context: .
-      dockerfile: ./dockerfiles/nginx-server/Dockerfile
-    ports:
-      - 8081:80
+    image: nginx:stable-alpine
     networks:
-      - network1
+      - test-network
+    volumes:
+      - ./dist:/usr/share/nginx/html
     healthcheck:
-        test: [ "CMD", "curl", "-f", "http://localhost" ]
-        interval: 30s
-        timeout: 10s
-        retries: 3
+      test: [ "CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost" ]
+      interval: 30s
+      timeout: 5s
+      retries: 3
 
   playwright:
-    build:
-      context: .
-      dockerfile: ./dockerfiles/playwright/Dockerfile
-    command: yarn run test:e2e:ci
+    image: mcr.microsoft.com/playwright:v1.57.0-noble
     environment:
       BASE_URL: "http://nginx-server"
+      WEBTEAM_UI_NPM_TOKEN: ${WEBTEAM_UI_NPM_TOKEN}
+    working_dir: /var/www
     volumes:
-      - ./test/snapshots:/var/www/test/snapshots
-      - ./test-results:/var/www/test-results
+      - .:/var/www
+    command: sh -c "yarn install && yarn run test:e2e:ci"
     depends_on:
       nginx-server:
         condition: service_healthy
     networks:
-      - network1
+      - test-network
 
 networks:
-  network1:
+  test-network:

dockerfiles/e2e-tests/Dockerfile

@@ -15,7 +15,7 @@ RUN npm install --global yarn
 
 # Install Playwright dependencies
 RUN apt-get -y install wget gnupg
-RUN npx playwright@1.53.0 install-deps
+RUN npx playwright@1.57 install-deps
 
 WORKDIR /var/www
 

package.json

@@ -107,6 +107,7 @@
         "next-optimized-images": "3.0.0-canary.10",
         "next-transpile-modules": "^10.0.1",
         "playwright": "1.57.0",
+        "playwright-teamcity-reporter": "1.0.5",
         "postcss-custom-media": "10.0.0",
         "postcss-import": "15.1.0",
         "prettier": "2.6.2",
@@ -136,11 +137,11 @@
         "lint": "next lint",
         "test": "playwright test test",
         "test:production": "playwright test test/production",
-        "test:production:ci": "CI=true BASE_URL=https://kotlinlang.org playwright test test/production",
+        "test:production:ci": "CI=true BASE_URL=https://kotlinlang.org playwright test",
         "test:production:headed": "playwright test test/production --headed --project=chromium",
         "test:production:debug": "PWDEBUG=1 playwright test test/production --project=chromium",
         "test:e2e": "playwright test test/e2e",
-        "test:e2e:ci": "CI=true playwright test test/e2e",
+        "test:e2e:ci": "CI=true playwright test",
         "test:e2e:headed": "playwright test test/e2e --headed",
         "test:e2e:debug": "PWDEBUG=1 playwright test test/e2e  --project=chromium",
         "test:e2e:update": "playwright test test/e2e --update-snapshots",