Repository: oppia/oppia
File: core/tests/puppeteer-acceptance-tests/specs/logged-in-learner/goes-through-the-sign-in-flow.spec.ts (TypeScript)

Code before:
// Copyright 2025 The Oppia Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * @fileoverview Acceptance test from CUJv3 Doc
 * https://docs.google.com/document/d/1D7kkFTzg3rxUe3QJ_iPlnxUzBFNElmRkmAWss00nFno/
 *
 * LI.SI. Learner goes through the sign-in flow
 */

import testConstants from '../../utilities/common/test-constants';
import {UserFactory} from '../../utilities/common/user-factory';
import {LoggedInUser} from '../../utilities/user/logged-in-user';
import {LoggedOutUser} from '../../utilities/user/logged-out-user';
import {ReleaseCoordinator} from '../../utilities/user/release-coordinator';

const ROLES = testConstants.Roles;

describe('Logged In Learner', function () {
  const loggedInUser: LoggedInUser & LoggedOutUser = Object.assign(
    new LoggedInUser(),
    new LoggedOutUser()
  );
  let releaseCoordinator: ReleaseCoordinator;

  beforeAll(async function () {
    // Create release coordinator to enable redesigned learner dashboard.
    releaseCoordinator = await UserFactory.createNewUser(
      'releaseCoordinator',
      'release_coordinator@example.com',
      [ROLES.RELEASE_COORDINATOR]
    );
    await releaseCoordinator.enableFeatureFlag(
      'show_redesigned_learner_dashboard'
    );
  }, 600000);

  it('should be able to login and see Learner Dashboard', async function () {
    // Click on "Sign In" button and fill email.
    await loggedInUser.openBrowser();
    await loggedInUser.navigateToSignUpPage();

    // Enter email to proceed to username page.
    await loggedInUser.enterEmail('logged_in_user@example.com');

    // Verify the signup page is shown with username field after entering email.
    await loggedInUser.waitForUsernameInputToBeVisible();

    // Fill an invalid username and verify error message.
    await loggedInUser.typeInvalidUsernameInUsernameInput('invalid@user!');

    // Verify error message with clear instructions is shown.
    await loggedInUser.expectUsernameError(
      'Usernames can only have alphanumeric characters.'
    );

    // Clear the invalid username and sign in with valid username.
    await loggedInUser.clearUsernameInput();
    await loggedInUser.signInWithUsername('loggedInUser');

    // Verify learner is redirected to Learner Dashboard.
    await loggedInUser.expectToBeOnLearnerDashboardPage();

    // Verify "Continue where you left off" section is NOT available.
    await loggedInUser.expectContinueFromWhereYouLeftSectionInRedesignedDashboardToBePresent(
      false
    );

    // Verify "Learn Something New" section is visible.
    await loggedInUser.expectLearnSomethingNewSectionInRedesignedDashboardToBePresent();

    // Click on "Progress" tab and verify it's empty.
    await loggedInUser.navigateToProgressSection();
    await loggedInUser.expectProgressSectionToBeEmptyInNewLD();
  });

  it('should land on navbar', async function () {
    // User should still be logged in from previous test and on learner dashboard.
    // Navigate to learner dashboard to ensure we're on a page with navbar.
    // In redesigned dashboard, mobile home section selector doesn't exist,
    // so we navigate directly to the dashboard.
    await loggedInUser.navigateToLearnerDashboard();

    // Check if "Learn", "About", and "Get Involved" works properly.
    await loggedInUser.expectNavbarToWorkProperly();

    // Check if profile dropdown works properly.
    await loggedInUser.clickOnProfileDropdown();
    await loggedInUser.expectProfileDropdownToContainElementWithContent(
      'loggedInUser'
    );
  });
  afterAll(async function () {
    await UserFactory.closeAllBrowsers();
    await loggedInUser.closeBrowser();
  });
});


Review comment (suggestion):
There is issue in the method `expectToBeOnLearnerDashboardPage` It should be `expect(await this.page.url())...`. Using `this.page.waitForFunction` would be even better option.

Code after:
      'logged_in_user@example.com'
    );

    // Fill an invalid username and verify error message.
    await loggedInUser.typeInvalidUsernameInUsernameInput('invalid@user!');

    // Verify error message with clear instructions is shown.
    await loggedInUser.expectUsernameError(
      'Usernames can only have alphanumeric characters.'
    );

    // Clear the invalid username and try username with "Admin" in it.
    await loggedInUser.clearUsernameInput();
    await loggedInUser.typeInvalidUsernameInUsernameInput('TopicAdmin');

    // Verify different error message for username with "Admin".
    await loggedInUser.expectUsernameError(
      "User names with 'admin' are reserved."
    );

    // Clear the invalid username and sign in with valid username.
    await loggedInUser.clearUsernameInput();
    await loggedInUser.signInWithUsername('loggedInUser');

    // Verify learner is redirected to Learner Dashboard.
    await loggedInUser.expectToBeOnLearnerDashboardPage();

    // Verify welcome message with username.
    await loggedInUser.expectGreetingToHaveNameOfUser('loggedInUser');

    // Verify "Continue where you left off" section is NOT available.
    await loggedInUser.expectContinueFromWhereYouLeftSectionInRedesignedDashboardToBePresent(
      false
    );

    // Verify "Learn Something New" section is visible and shows Chapter 1.
    await loggedInUser.expectLearnSomethingNewSectionInRedesignedDashboardToBePresent();
    await loggedInUser.expectChapterToBePresentInLearnSomethingNewSection(
      'Chapter 1'
    );

    // Click on "Progress" tab and verify it's empty.
    await loggedInUser.navigateToProgressSection();
    await loggedInUser.expectProgressSectionToBeEmptyInNewLD();
  });
  afterAll(async function () {
    await UserFactory.closeAllBrowsers();
    await loggedInUser.closeBrowser();
  });
});