Skip to content

Commit

Permalink
Milestone 2.5: Adding E2E tests for blog homepage, author profile pag…
Browse files Browse the repository at this point in the history 
…e and blog post page. (oppia#16435)
  • Loading branch information
@Rijuta-s
Rijuta-s authored Nov 10, 2022
1 parent ebe441e commit d40bb8a
Show file tree
Hide file tree
Showing 14 changed files with 636 additions and 42 deletions.
5 changes: 5 additions & 0 deletions .github/workflows/e2e_miscellaneous_tests.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,11 @@ jobs:
run: xvfb-run -a --server-args="-screen 0, 1285x1000x24" python -m scripts.run_e2e_tests --skip-install --skip-build --suite="blogDashboard" --prod_env
env:
VIDEO_RECORDING_IS_ENABLED: 0
- name: Run e2e Blog Pages Test
if: ${{ steps.check-risk.outputs.is-low-risk != 0 }}
run: xvfb-run -a --server-args="-screen 0, 1285x1000x24" python -m scripts.run_e2e_tests --skip-install --skip-build --suite="blog" --prod_env
env:
VIDEO_RECORDING_IS_ENABLED: 0
- name: Run e2e Publication Test
if: ${{ steps.check-risk.outputs.is-low-risk != 0 }}
run: xvfb-run -a --server-args="-screen 0, 1285x1000x24" python -m scripts.run_e2e_tests --suite="publication" --skip-install --skip-build --server_log_level="info" --prod_env
Expand Down
2 changes: 1 addition & 1 deletion ...tes/components/common-layout-directives/navigation-bars/top-navigation-bar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@
</a>
</li>
<li class="nav-item">
<a class="dropdown-item nav-link oppia-navbar-tab-content about-link"
<a class="dropdown-item nav-link oppia-navbar-tab-content about-link e2e-test-blog-link"
[href]="getOppiaBlogUrl()"
target="_blank"
(keydown)="onMenuKeypress($event, 'aboutMenu', {enter: ACTION_CLOSE})"
Expand Down
6 changes: 4 additions & 2 deletions ...lates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ export class TopNavigationBarComponent implements OnInit, OnDestroy {
@Input() subheaderText!: string;

DEFAULT_CLASSROOM_URL_FRAGMENT = AppConstants.DEFAULT_CLASSROOM_URL_FRAGMENT;
MEDIUM_BLOG_URL = 'https://medium.com/oppia-org';
OPPIA_BLOG_URL = '/blog';
url!: URL;
currentLanguageCode!: string;
supportedSiteLanguages!: LanguageInfo[];
Expand Down Expand Up @@ -370,9 +372,9 @@ export class TopNavigationBarComponent implements OnInit, OnDestroy {

getOppiaBlogUrl(): string {
if (this.platformFeatureService.status.BlogPages.isEnabled) {
return '/blog';
return this.OPPIA_BLOG_URL;
} else {
return 'https://medium.com/oppia-org';
return this.MEDIUM_BLOG_URL;
}
}

Expand Down
52 changes: 36 additions & 16 deletions core/templates/pages/blog-author-profile-page/blog-author-profile-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
<div class="oppia-blog-author-page justify-content-center">
<mat-card class="oppia-blog-author-page-card oppia-page-card py-5 mb-5">
<mat-card-header class="blog-author-page-header mr-0" [ngClass]="{'d-flex flex-column align-items-center': isSmallScreenViewActive()}">
<mat-card-header class="blog-author-page-header mr-0"
[ngClass]="{'d-flex flex-column align-items-center': isSmallScreenViewActive()}">
<img mat-card-avatar
[src]="authorProfilePicUrl"
alt="Profile image of the author"
class="authorProfilePic">
<mat-card-title class="w-100 d-flex flex-column" [ngClass]="{'align-items-center mt-2': isSmallScreenViewActive()}">
<span class="blog-author-name">
class="authorProfilePic e2e-test-author-profile-photo">
<mat-card-title class="w-100 d-flex flex-column"
[ngClass]="{'align-items-center mt-2': isSmallScreenViewActive()}">
<span class="blog-author-name e2e-test-author-name">
{{ authorName }}
</span>
<span class="total-blog-post-number-display"
[innerHTML]="'I18N_BLOG_AUTHOR_PROFILE_PAGE_TOTAL_POSTS_DISPLAY' | translate: {totalNumber: totalBlogPosts}">
</span>
</mat-card-title>
<mat-card-subtitle class="mt-3 blog-author-bio" [ngClass]="{'text-center': isSmallScreenViewActive()}">
<mat-card-subtitle class="mt-3 blog-author-bio"
[ngClass]="{'text-center': isSmallScreenViewActive()}">
{{ authorBio }}
</mat-card-subtitle>
</mat-card-header>
</mat-card>
<mat-card class="oppia-blog-author-page-card oppia-page-card py-5">
<mat-card class="oppia-blog-author-page-card oppia-page-card py-5 e2e-test-oppia-author-profile-page-card">
<div *ngIf="!noResultsFound && !showBlogPostCardsLoadingScreen"
class="oppia-blog-post-card-container">
<div class="d-flex align-items-baseline">
Expand All @@ -30,36 +33,47 @@
(pageChange)="onPageChange()"
class="ml-auto">
<ng-template ngbPaginationPrevious>
<i class="fa fa-angle-left text-center w-100" aria-hidden="true" (click)="onPageChange()"></i>
<i class="fa fa-angle-left text-center w-100"
aria-hidden="true"
(click)="onPageChange()">
</i>
</ng-template>
<ng-template ngbPaginationNumber let-p>
<button disabled class="pagination-button">{{ p }}</button>
</ng-template>
<ng-template ngbPaginationNext>
<i class="fa fa-angle-right text-center w-100" aria-hidden="true" (click)="onPageChange()"></i>
<i class="fa fa-angle-right text-center w-100"
aria-hidden="true"
(click)="onPageChange()">
</i>
</ng-template>
</ngb-pagination>
</div>
<div *ngFor="let blogPostSummary of blogPostSummariesToShow" class="blog-post-card">
<oppia-blog-card class="d-flex justify-content-center"
<div *ngFor="let blogPostSummary of blogPostSummariesToShow"
class="blog-post-card e2e-test-blog-post-list">
<oppia-blog-card class="d-flex justify-content-center e2e-test-blog-post-tile-item"
[blogPostSummary]="blogPostSummary"
[authorProfilePicDataUrl]="blogPostSummary.authorProfilePicUrl"
[shownOnblogPostPage]="false">
</oppia-blog-card>
</div>
</div>
<div *ngIf="noResultsFound && !showBlogPostCardsLoadingScreen" class="posts-display-heading text-center">
<div *ngIf="noResultsFound && !showBlogPostCardsLoadingScreen"
class="posts-display-heading text-center">
<picture>
<source type="image/webp" [srcset]="getStaticImageUrl('/images/general/no_explorations_found.webp')">
<source type="image/png" [srcset]="getStaticImageUrl('/images/general/no_explorations_found.png')">
<source type="image/webp"
[srcset]="getStaticImageUrl('/images/general/no_explorations_found.webp')">
<source type="image/png"
[srcset]="getStaticImageUrl('/images/general/no_explorations_found.png')">
<img [src]="getStaticImageUrl('/general/no_explorations_found.png')">
</picture>
{{ 'I18N_BLOG_HOME_PAGE_NO_RESULTS_FOUND' | translate }}
</div>
<div *ngIf="showBlogPostCardsLoadingScreen" class="my-auto">
<mat-spinner class="mx-auto"></mat-spinner>
</div>
<div *ngIf="!noResultsFound && !showBlogPostCardsLoadingScreen" class="d-flex">
<div *ngIf="!noResultsFound && !showBlogPostCardsLoadingScreen"
class="d-flex">
<ngb-pagination [collectionSize]="totalBlogPosts"
[(page)]="page"
[maxSize]="2"
Expand All @@ -68,13 +82,19 @@
(pageChange)="onPageChange()"
class="ml-auto">
<ng-template ngbPaginationPrevious >
<i class="fa fa-angle-left text-center w-100" aria-hidden="true" (click)="onPageChange()"></i>
<i class="fa fa-angle-left text-center w-100"
aria-hidden="true"
(click)="onPageChange()">
</i>
</ng-template>
<ng-template ngbPaginationNumber let-p>
<button disabled class="pagination-button">{{ p }}</button>
</ng-template>
<ng-template ngbPaginationNext>
<i class="fa fa-angle-right text-center w-100" aria-hidden="true" (click)="onPageChange()"></i>
<i class="fa fa-angle-right text-center w-100"
aria-hidden="true"
(click)="onPageChange()">
</i>
</ng-template>
</ngb-pagination>
</div>
Expand Down
3 changes: 2 additions & 1 deletion core/templates/pages/blog-author-profile-page/blog-author-profile-page.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,8 @@ export class BlogAuthorProfilePageComponent implements OnInit {

loadInitialBlogAuthorProfilePageData(): void {
this.blogHomePageBackendApiService.fetchBlogAuthorProfilePageDataAsync(
this.authorUsername, '0').then((data: BlogAuthorProfilePageData) => {
this.authorUsername, '0'
).then((data: BlogAuthorProfilePageData) => {
if (data.numOfBlogPostSummaries) {
this.totalBlogPosts = data.numOfBlogPostSummaries;
this.authorName = data.displayedAuthorName;
Expand Down
4 changes: 3 additions & 1 deletion core/templates/pages/blog-dashboard-page/blog-card/blog-card.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@
</picture>
</div>
<div class="blog-card-content" [ngClass]="{'mx-1 my-1': shownOnblogPostPage}">
<mat-card-title class="blog-card-title">{{ blogPostSummary.title }}</mat-card-title>
<mat-card-title class="blog-card-title e2e-test-blog-post-tile-title">
{{ blogPostSummary.title }}
</mat-card-title>
<mat-card-header class="mt-2">
<img mat-card-avatar
[src]="authorProfilePictureUrl"
Expand Down
24 changes: 13 additions & 11 deletions core/templates/pages/blog-home-page/blog-home-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="oppia-blog-home-page d-flex justify-content-center">
<mat-card class="oppia-blog-home-page-card oppia-page-card py-5">
<mat-card class="oppia-blog-home-page-card oppia-page-card py-5 e2e-test-oppia-blog-home-page-card">
<div class="d-flex" [ngClass]="{'flex-column-reverse': isSmallScreenViewActive()}">
<div *ngIf="!noResultsFound && !showBlogPostCardsLoadingScreen"
class="oppia-blog-post-card-container"
Expand All @@ -15,15 +15,15 @@
[pageSize]="MAX_NUM_CARDS_TO_DISPLAY_ON_BLOG_HOMEPAGE"
[rotate]="true"
(pageChange)="onPageChange()"
class="ml-auto">
class="ml-auto e2e-test-pagination">
<ng-template ngbPaginationPrevious >
<i class="fa fa-angle-left text-center w-100" aria-hidden="true" (click)="onPageChange()"></i>
<i class="fa fa-angle-left text-center w-100 e2e-test-pagination-prev-button" aria-hidden="true" (click)="onPageChange()"></i>
</ng-template>
<ng-template ngbPaginationNumber let-p>
<button disabled class="pagination-button">{{ p }}</button>
</ng-template>
<ng-template ngbPaginationNext>
<i class="fa fa-angle-right text-center w-100" aria-hidden="true" (click)="onPageChange()"></i>
<i class="fa fa-angle-right text-center w-100 e2e-test-pagination-next-button" aria-hidden="true" (click)="onPageChange()"></i>
</ng-template>
</ngb-pagination>
</div>
Expand Down Expand Up @@ -59,14 +59,16 @@
{{ 'I18N_BLOG_HOME_SEARCH_PAGE_POSTS_HEADING' | translate }}
</div>
</div>
<div *ngFor="let blogPostSummary of blogPostSummariesToShow" class="blog-post-card">
<div *ngFor="let blogPostSummary of blogPostSummariesToShow" class="blog-post-card e2e-test-blog-post-list">
<oppia-blog-card [blogPostSummary]="blogPostSummary"
[authorProfilePicDataUrl]="blogPostSummary.authorProfilePicUrl"
[shownOnblogPostPage]="false">
[shownOnblogPostPage]="false"
class="e2e-test-blog-post-tile-item">
</oppia-blog-card>
</div>
</div>
<div *ngIf="noResultsFound && !showBlogPostCardsLoadingScreen" class="col-8 posts-display-heading text-center">
<div *ngIf="noResultsFound && !showBlogPostCardsLoadingScreen"
class="col-8 posts-display-heading text-center e2e-test-no-results-found">
<picture>
<source type="image/webp" [srcset]="getStaticImageUrl('/images/general/no_explorations_found.webp')">
<source type="image/png" [srcset]="getStaticImageUrl('/images/general/no_explorations_found.png')">
Expand All @@ -82,8 +84,8 @@
[ngClass]="{'pl-5': !isSmallScreenViewActive(), 'mobile-view-columns-separator': isSmallScreenViewActive()}">
<span [ngClass]="{'d-inline-flex': isSmallScreenViewActive()}">
<img [src]="oppiaAvatarImgUrl" alt="image of Oppia Avatar"
class="mr-auto ml-auto oppia-blog-home-page-card-avatar d-flex flex-grow-1">
<h1 class="d-flex flex-grow-1 blog-home-page-welcome"
class="mr-auto ml-auto oppia-blog-home-page-card-avatar d-flex flex-grow-1 e2e-test-oppia-avatar-image">
<h1 class="d-flex flex-grow-1 blog-home-page-welcome e2e-test-blog-welcome-heading"
[ngClass]="{'mx-auto my-2': !isSmallScreenViewActive(), 'ml-5 my-auto': isSmallScreenViewActive()}">
{{ 'I18N_BLOG_HOME_PAGE_WELCOME_HEADING' | translate }}
</h1>
Expand All @@ -94,11 +96,11 @@ <h2 class="d-flex flex-grow-1 blog-home-page-oppia-description mx-auto">
<h4 class="d-flex flex-grow-1 search-heading">
{{ 'I18N_BLOG_HOME_PAGE_QUERY_SEARCH_HEADING' | translate }}
</h4>
<form class="navbar-form oppia-search-bar-form pl-0" role="search">
<form class="navbar-form oppia-search-bar-form pl-0 e2e-test-search-field" role="search">
<div class="form-group d-flex"
[ngClass]="{'flex-row-reverse': isSmallScreenViewActive()}">
<input type="text"
class="form-control oppia-search-bar-input oppia-search-bar-text-input"
class="form-control oppia-search-bar-input oppia-search-bar-text-input e2e-test-search-input"
[(ngModel)]="searchQuery"
(ngModelChange)="searchButtonIsActive ? null : onSearchQueryChangeExec()"
[ngModelOptions]="{ updateOn: 'blur', standalone:'true' }"
Expand Down
8 changes: 5 additions & 3 deletions core/templates/pages/blog-home-page/tag-filter/tag-filter.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="oppia-same-row-container tag-filter w-100">
<div class="oppia-same-row-container tag-filter w-100 e2e-test-tag-filter-component">
<mat-form-field appearance="fill"
class="w-100"
[ngClass]="{'pb-5': !isSmallScreenViewActive}">
Expand All @@ -16,9 +16,11 @@
#trigger="matAutocompleteTrigger"
[formControl]="tagFilter"
[matAutocomplete]="auto"
[matChipInputFor]="chipList">
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
class="e2e-test-tag-filter-selection-input">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectTag($event)">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectTag($event)" class="e2e-test-tag-filter-selection-dropdown">
<mat-option *ngFor="let tag of filteredTags | async" [value]="tag" (click)="$event.stopPropagation(); trigger.openPanel()">
{{ tag }}
</mat-option>
Expand Down
14 changes: 8 additions & 6 deletions core/templates/pages/blog-post-page/blog-post-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<div class="justify-content-center" *ngIf="this.blogPost">
<mat-card class="oppia-blog-post-page-card oppia-page-card py-5 mb-4">
<mat-card-title class="blog-card-title" [ngClass]="{'mt-5': !isSmallScreenViewActive()}">
<mat-card class="oppia-blog-post-page-card oppia-page-card py-5 mb-4 e2e-test-oppia-blog-post-page-card">
<mat-card-title class="blog-card-title e2e-test-blog-post-page-title-container" [ngClass]="{'mt-5': !isSmallScreenViewActive()}">
{{ blogPost.title }}
</mat-card-title>
<div class="blog-card-header-content">
<mat-card-header [ngClass]="{'mb-5': !isSmallScreenViewActive(), 'mb-0': isSmallScreenViewActive()}">
<img mat-card-avatar
class="mr-2"
class="mr-2 e2e-test-author-profile-photo"
[src]="authorProfilePicUrl"
alt="Profile image of the author of the blog post"
(click)="navigateToAuthorProfilePage()">
<mat-card-subtitle class="blog-author-name" (click)="navigateToAuthorProfilePage()">
<mat-card-subtitle class="blog-author-name e2e-test-author-name" (click)="navigateToAuthorProfilePage()">
{{ blogPost.displayedAuthorName }}
</mat-card-subtitle>
<mat-card-subtitle class="pt-2 font-weight-light mobile-published-date" (click)="navigateToAuthorProfilePage()">
Expand Down Expand Up @@ -75,10 +75,12 @@ <h3 class="post-to-recommend-section-heading">
{{ 'I18N_BLOG_POST_PAGE_RECOMMENDATION_SECTON_HEADING' | translate }}
</h3>
<div class="justify-content-between" [ngClass]="{'d-flex': !isSmallScreenViewActive()}">
<div *ngFor="let blogPostSummary of postsToRecommend" class="blog-post-card mb-4">
<div *ngFor="let blogPostSummary of postsToRecommend"
class="blog-post-card mb-4 e2e-test-blog-post-list">
<oppia-blog-card [blogPostSummary]="blogPostSummary"
[authorProfilePicDataUrl]="blogPostSummary.authorProfilePicUrl"
[shownOnblogPostPage]="true">
[shownOnblogPostPage]="true"
class="e2e-test-blog-post-tile-item">
</oppia-blog-card>
</div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions core/tests/wdio.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@ var suites = {
'./core/tests/webdriverio_desktop/blogDashboard.js'
],

blog: [
'./core/tests/webdriverio_desktop/blog.js'
],

checkpointFeatures: [
'./core/tests/webdriverio_desktop/checkpointFeatures.js'
],
Expand Down
Loading

0 comments on commit d40bb8a

Please sign in to comment.