Skip to content

Commit b5b6583

Browse files
zoobestikzoobestik
committed
fix(e2e): removecloseExternalBanners utility and fix education pages
- Add `data-test` attributes to various components in `education`, replacing CSS-based selectors for improved test reliability. - Remove `closeExternalBanners` utility and its usage across tests as it is no longer needed. - Update Playwright specs (`courses.spec.ts`, `education.spec.ts`) to use `data-test` attributes. - Refactor relative path navigation in tests for `CoursesPage` and `TeachPage` initialization.
1 parent ff5bcd7 commit b5b6583

File tree

19 files changed

+142
-157
lines changed

19 files changed

+142
-157
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ interface CoursesListProps {
2222
export const CoursesList: FC<CoursesListProps> = ({ universities }) => {
2323
const textCn = useTextStyles();
2424
return (
25-
<div className={styles.list}>
26-
<div className={cn(styles.header, textCn('rs-h4'))}>
25+
<div className={styles.list} data-test="courses">
26+
<div className={cn(styles.header, textCn('rs-h4'))} data-test="courses-header">
2727
<div className={cn(styles.cell, styles.cellFirst)}>University title</div>
2828
<div className={cn(styles.cell, styles.cellSecond)}>Location</div>
2929
<div className={cn(styles.cell, styles.cellThird)}>Teaching Kotlin</div>
3030
</div>
3131
{universities.map((university) => (
32-
<div className={cn(styles.item, textCn('rs-text-2', { hardness: 'hard' }))} key={university.id}>
32+
<div className={cn(styles.item, textCn('rs-text-2', { hardness: 'hard' }))} key={university.id} data-test="courses-item">
3333
<div className={cn(styles.cell, styles.cellFirst)}>{university.title}</div>
3434
<div className={cn(styles.cell, styles.cellSecond)}>{university.location}</div>
3535
<div className={cn(styles.cell, styles.cellThird)}>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export const EducationLayout: FC<EducationLayoutProps> = ({
5151
</div>
5252

5353
<CtaBlock
54+
className={'cta-block'}
5455
topTitle={
5556
'If you would like to introduce Kotlin into your classroom or have any questions about teaching or learning Kotlin'
5657
}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const SubscriptionForm: FC = () => {
5151
}}
5252
>
5353
{({ setFieldValue }) => (
54-
<Form className={styles.form}>
54+
<Form className={styles.form} data-test="subscription-form">
5555
<img src={MailIcon.src} className={styles.icon} alt="Subscribe form" />
5656

5757
<div className={cn(styles.text, textCn('rs-h3'))}>
@@ -66,12 +66,14 @@ export const SubscriptionForm: FC = () => {
6666
className={styles.input}
6767
/>
6868

69-
<FormikPrivacyCheckbox consentId={consentId} privacy={privacy} className={styles.checkbox} />
69+
<div data-test="subscription-checkbox">
70+
<FormikPrivacyCheckbox consentId={consentId} privacy={privacy} className={styles.checkbox} />
71+
</div>
7072

7173
{isSubmitted ? (
7274
<span className={cn(styles.button, styles.submitted)}>
7375
<span className={styles.submittedText}>Subscribe</span>
74-
<CheckIcon className={styles.submittedIcon} />
76+
<CheckIcon className={styles.submittedIcon} data-test="subscription-submitted-icon" />
7577
</span>
7678
) : (
7779
<FormikSubmitButton size="m" className={styles.button}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const TeachLaunchCourse: FC = () => {
99

1010
return (
1111
<div className={styles.launchCourse}>
12-
<div className={cn('ktl-text-1', styles.text)}>
12+
<div className={cn('ktl-text-1', styles.text)} data-test="teach-launch-course">
1313
The Programming in Kotlin course is a comprehensive toolkit for teaching Kotlin and can be easily
1414
customized to align with specific educational needs. The course comes with slides, lecture notes, and
1515
assessment resources.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ interface TeachMapMarkerProps {
1414

1515
export const TeachMapMarker: FC<TeachMapMarkerProps> = ({ university, showTooltip, onClose }) => {
1616
return (
17-
<div className={cn(styles.marker, { [styles.active]: showTooltip })}>
17+
<div className={cn(styles.marker, { [styles.active]: showTooltip })} data-test="teach-map-marker">
1818
{showTooltip && <TeachMapTooltip university={university} onClose={onClose} />}
1919
</div>
2020
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const TeachMapTooltip: FC<TeachMapTooltipProps> = ({ university, onClose
1919
);
2020

2121
return (
22-
<div className={cn(styles.tooltip, 'ktl-text-3')}>
22+
<div className={cn(styles.tooltip, 'ktl-text-3')} data-test="teach-map-tooltip">
2323
<div className={styles.header}>
2424
<div>
2525
<div className={styles.headerText}>{university.title}</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const TeachMap: FC<TeachMapProps> = ({ className, universities }) => {
3232

3333
return (
3434
<ErrorBoundary fallback={<div>Map is unavailable</div>}>
35-
<div className={cn(styles.map, className)}>
35+
<div className={cn(styles.map, className)} data-test={'teach-map'}>
3636
<GoogleMapReact
3737
bootstrapURLKeys={{ key: mapSettings.key }}
3838
defaultCenter={mapSettings.defaultCenter}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ export const TeachNumbers: FC<TeachNumbersProps> = ({ countriesCount, universiti
1313
<div className={styles.title}>
1414
<div className="ktl-hero">{countriesCount}</div>
1515
</div>
16-
<div className={styles.subtitle}>
16+
<div className={styles.subtitle} data-test="teach-number-subtitle">
1717
<div className="ktl-text-2">countries</div>
1818
</div>
1919
</div>
2020
<div className={styles.number}>
2121
<div className={styles.title}>
2222
<div className="ktl-hero">{universitiesCount}</div>
2323
</div>
24-
<div className={styles.subtitle}>
24+
<div className={styles.subtitle} data-test="teach-number-subtitle">
2525
<div className="ktl-text-2">universities</div>
2626
</div>
2727
</div>

‎pages/education/index.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,9 @@ function EducationPage() {
7575
</Button>
7676
</div>
7777

78-
<div className={cn(styles.features, 'ktl-row', 'ktl-offset-top-l')}>
78+
<div className={cn(styles.features, 'ktl-row', 'ktl-offset-top-l')} data-test="teach-features">
7979
<div className="ktl-col-12 ktl-col-md-4">
80-
<div className={styles.feature}>
80+
<div className={styles.feature} data-test="teach-feature">
8181
<div className={cn(styles.featureIcon, 'ktl-offset-bottom-m')}>
8282
<img
8383
src="/images/education/icons/teach-academically-recognized-icon.svg"
@@ -95,7 +95,7 @@ function EducationPage() {
9595
</div>
9696

9797
<div className="ktl-col-12 ktl-col-md-4">
98-
<div className={styles.feature}>
98+
<div className={styles.feature} data-test="teach-feature">
9999
<div className={cn(styles.featureIcon, 'ktl-offset-bottom-m')}>
100100
<img
101101
src="/images/education/icons/teach-popular-icon.svg"
@@ -113,7 +113,7 @@ function EducationPage() {
113113
</div>
114114

115115
<div className="ktl-col-12 ktl-col-md-4">
116-
<div className={styles.feature}>
116+
<div className={styles.feature} data-test="teach-feature">
117117
<div className={cn(styles.featureIcon, 'ktl-offset-bottom-m')}>
118118
<img
119119
src="/images/education/icons/teach-multiplatform-icon.svg"
@@ -133,7 +133,7 @@ function EducationPage() {
133133
</div>
134134

135135
<div className="ktl-offset-top-l">
136-
<div className={styles.topButtons}>
136+
<div className={styles.topButtons} data-test="teach-top-buttons">
137137
<Button
138138
size="l"
139139
icon={<SlackIcon />}
@@ -178,43 +178,43 @@ function EducationPage() {
178178
Kotlin is taught at {universitiesCount} universities
179179
</h2>
180180

181-
<div className={styles.universitiesTopNumbers}>
181+
<div className={styles.universitiesTopNumbers} data-test="universities-numbers">
182182
<TeachNumbers countriesCount={countriesCount} universitiesCount={universitiesCount} />
183183
</div>
184184
</div>
185185
</div>
186186

187187
<div className={cn(styles.universitiesLogos, 'ktl-offset-top-m')}>
188-
<div className={styles.logos}>
189-
<div className={styles.logosItem}>
188+
<div className={styles.logos} data-test="teach-logos">
189+
<div className={styles.logosItem} data-test="teach-logo">
190190
<img
191191
className={styles.logosHopkins}
192192
src="/images/education/universities/harvard.jpg"
193193
alt="Harvard University"
194194
/>
195195
</div>
196-
<div className={styles.logosItem}>
196+
<div className={styles.logosItem} data-test="teach-logo">
197197
<img
198198
className={styles.logosCambridge}
199199
src="/images/education/universities/cambridge.png"
200200
alt="University of Cambridge"
201201
/>
202202
</div>
203-
<div className={styles.logosItem}>
203+
<div className={styles.logosItem} data-test="teach-logo">
204204
<img
205205
className={styles.logosStanford}
206206
src="/images/education/universities/stanford.png"
207207
alt="Stanford University"
208208
/>
209209
</div>
210-
<div className={styles.logosItem}>
210+
<div className={styles.logosItem} data-test="teach-logo">
211211
<img
212212
className={styles.logosImperial}
213213
src="/images/education/universities/imperial.png"
214214
alt="Imperial College London"
215215
/>
216216
</div>
217-
<div className={styles.logosItem}>
217+
<div className={styles.logosItem} data-test="teach-logo">
218218
<img
219219
className={styles.logosChicago}
220220
src="/images/education/universities/uchicago.png"
@@ -224,9 +224,9 @@ function EducationPage() {
224224
</div>
225225
</div>
226226

227-
<TeachMap className={styles.mapWrapper} universities={universities} />
227+
<TeachMap className={styles.mapWrapper} universities={universities} data-test="teach-map" />
228228

229-
<div className={cn(styles.universitiesBottom, 'ktl-offset-top-m')}>
229+
<div className={cn(styles.universitiesBottom, 'ktl-offset-top-m')} data-test="teach-universities-bottom">
230230
<div className="ktl-row">
231231
<div className="ktl-col-12 ktl-col-sm-8 ktl-col-sm-offset-2">
232232
<p className="ktl-text-2 ktl-offset-bottom-m">
@@ -270,7 +270,7 @@ function EducationPage() {
270270
<ul className={styles.links}>
271271
<li className={styles.linksFirstList}>
272272
<p className="ktl-h4 ktl-offset-bottom-xs">Get started</p>
273-
<ul className={styles.list}>
273+
<ul className={styles.list} data-test="teach-list">
274274
<li className={styles.listItem}>
275275
<a href="/docs/kotlin-tour-welcome.html" className={textCn('rs-link', { external: true })}>
276276

@@ -330,7 +330,7 @@ function EducationPage() {
330330

331331
<li className={styles.listItem}>
332332
<div className={textCn('rs-text-2')}>Atomic Kotlin:</div>
333-
<ul className={cn(styles.list, styles.sublist)}>
333+
<ul className={cn(styles.list, styles.sublist)} data-test="teach-list">
334334
<li className={styles.listItem}>
335335
<a
336336
href="https://www.atomickotlin.com/exercises/"
@@ -390,7 +390,7 @@ function EducationPage() {
390390

391391
<li className={styles.linksSecondList}>
392392
<p className="ktl-h4 ktl-offset-bottom-xs">Tools</p>
393-
<ul className={styles.list}>
393+
<ul className={styles.list} data-test="teach-list">
394394
<li className={styles.listItem}>
395395
<a
396396
href="https://www.jetbrains.com/community/education/#students"
@@ -436,7 +436,7 @@ function EducationPage() {
436436

437437
<li className={styles.linksThirdList}>
438438
<p className="ktl-h4 ktl-offset-bottom-xs">Online Courses</p>
439-
<ul className={styles.list}>
439+
<ul className={styles.list} data-test="teach-list">
440440
<li className={styles.listItem}>
441441
<a
442442
target="_blank"
@@ -472,7 +472,7 @@ function EducationPage() {
472472

473473
<li className={styles.linksFourthList}>
474474
<p className="ktl-h4 ktl-offset-bottom-xs">Android in Kotlin</p>
475-
<ul className={styles.list}>
475+
<ul className={styles.list} data-test="teach-list">
476476
<li className={styles.listItem}>
477477
<a
478478
href="https://developer.android.com/courses/android-basics-compose/course"
@@ -499,7 +499,7 @@ function EducationPage() {
499499

500500
<li className={styles.linksFifthList}>
501501
<p className="ktl-h4 ktl-offset-bottom-xs">Practice Kotlin</p>
502-
<ul className={styles.list}>
502+
<ul className={styles.list} data-test="teach-list">
503503
<li className={styles.listItem}>
504504
<a href="https://play.kotlinlang.org/koans/overview" className={textCn('rs-link')}>
505505
Koans
@@ -525,7 +525,7 @@ function EducationPage() {
525525
<SubscriptionForm />
526526
</section>
527527

528-
<section className={cn(styles.video, 'ktl-offset-top-xxl')}>
528+
<section className={cn(styles.video, 'ktl-offset-top-xxl')} data-test="teach-video">
529529
<div className="ktl-layout ktl-layout--center">
530530
<div className="ktl-row">
531531
<div className="ktl-col">

0 commit comments

Comments
 (0)