Implement part of #17712 : Acceptance tests for Exploration Creator Section(CUJ 10).

.github/workflows/e2e_lighthouse_performance_acceptance_tests.yml

@@ -312,8 +312,9 @@ jobs:
           suite:
             - blog-admin-tests/assign-roles-to-users-and-change-tag-properties
             - blog-editor-tests/try-to-publish-a-duplicate-blog-post-and-get-blocked
-            - exploration-editor-tests/load-complete-and-restart-exploration-preview
             - exploration-editor-tests/create-exploration-and-change-basic-settings
+            - exploration-editor-tests/load-complete-and-restart-exploration-preview
+            - exploration-editor-tests/savedraft-publish-and-discard-the-changes
             - logged-in-user-tests/click-all-buttons-on-about-page
             - logged-in-user-tests/click-all-buttons-on-about-foundation-page
             - logged-in-user-tests/click-all-buttons-on-thanks-for-donating-page

core/tests/puppeteer-acceptance-tests/spec/exploration-editor-tests/create-exploration-and-change-basic-settings.spec.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 /**
- * @fileoverview Acceptance Test for Exploration Creator and Exploration Manager
+ * @fileoverview Acceptance Test for settings tab in exploration editor.
  */
 
 import {ConsoleReporter} from '../../puppeteer-testing-utilities/console-reporter';

core/tests/puppeteer-acceptance-tests/spec/exploration-editor-tests/savedraft-publish-and-discard-the-changes.spec.ts

@@ -0,0 +1,86 @@
+// Copyright 2024 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 for savedraft, publish and discard the changes.
+ */
+
+import {showMessage} from '../../puppeteer-testing-utilities/show-message-utils';
+import testConstants from '../../puppeteer-testing-utilities/test-constants';
+import {UserFactory} from '../../puppeteer-testing-utilities/user-factory';
+import {ExplorationEditor} from '../../user-utilities/exploration-editor-utils';
+
+const DEFAULT_SPEC_TIMEOUT_MSECS = testConstants.DEFAULT_SPEC_TIMEOUT_MSECS;
+enum INTERACTION_TYPES {
+  END_EXPLORATION = 'End Exploration',
+}
+
+describe('Exploration Creator', function () {
+  let explorationEditor: ExplorationEditor;
+  let explorationVisitor: ExplorationEditor;
+  let explorationId: string | null;
+  beforeAll(async function () {
+    explorationEditor = await UserFactory.createNewUser(
+      'explorationEditor',
+      'exploration_editor@example.com'
+    );
+    showMessage('explorationEditor is signed up successfully.');
+
+    explorationVisitor = await UserFactory.createNewUser(
+      'explorationVisitor',
+      'exploration_visitor@example.com'
+    );
+    showMessage('explorationVisitor is signed up successfully.');
+  }, DEFAULT_SPEC_TIMEOUT_MSECS);
+
+  it(
+    'should draft, discard and publish the changes',
+    async function () {
+      await explorationEditor.navigateToCreatorDashboardPage();
+      await explorationEditor.navigateToExplorationEditorPage();
+      await explorationEditor.dismissWelcomeModal();
+
+      await explorationEditor.createExplorationWithMinimumContent(
+        'Exploration intro text',
+        INTERACTION_TYPES.END_EXPLORATION
+      );
+
+      await explorationEditor.saveExplorationDraft();
+      explorationId = await explorationEditor.publishExplorationWithContent(
+        'Old Title',
+        'OppiaAcceptanceTestsCheck',
+        'Algebra'
+      );
+
+      await explorationEditor.navigateToSettingsTab();
+
+      await explorationEditor.updateTitleTo('New Title');
+      await explorationEditor.discardCurrentChanges();
+      await explorationEditor.expectTitleToBe('Old Title');
+
+      await explorationEditor.updateTitleTo('New Title');
+      await explorationEditor.saveExplorationDraft();
+      await explorationEditor.expectTitleToBe('New Title');
+
+      await explorationVisitor.expectExplorationToBeAccessibleByUrl(
+        explorationId
+      );
+    },
+    DEFAULT_SPEC_TIMEOUT_MSECS
+  );
+
+  afterAll(async function () {
+    await UserFactory.closeAllBrowsers();
+  });
+});

core/tests/puppeteer-acceptance-tests/user-utilities/exploration-editor-utils.ts

@@ -34,6 +34,7 @@ const saveChangesButton = 'button.e2e-test-save-changes';
 // Settings Tab elements.
 const settingsTab = 'a.e2e-test-exploration-settings-tab';
 const addTitleBar = 'input#explorationTitle';
+const explorationTitleSelector = '.e2e-test-exploration-title-input';
 const addGoalInputBox = '.e2e-test-exploration-objective-input';
 const categoryDropdown = 'mat-select.e2e-test-exploration-category-dropdown';
 const languageUpdateDropdown =
@@ -150,8 +151,14 @@ export class ExplorationEditor extends BaseUser {
    */
   async navigateToSettingsTab(): Promise<void> {
     if (this.isViewportAtMobileWidth()) {
-      await this.page.waitForSelector(mobileOptionsButton, {visible: true});
-      await this.clickOn(mobileOptionsButton);
+      const element = await this.page.$(mobileNavbarDropdown);
+      // If the element is not present, it means the mobile navigation bar is not expanded.
+      // The option to settings tab appears only in the mobile view after clicking on the mobile options button,
+      // which expands the mobile navigation bar.
+      if (!element) {
+        await this.page.waitForSelector(mobileOptionsButton, {visible: true});
+        await this.clickOn(mobileOptionsButton);
+      }
       await this.clickOn(mobileNavbarDropdown);
       await this.clickOn(mobileSettingsBar);
 
@@ -262,18 +269,35 @@ export class ExplorationEditor extends BaseUser {
    * Deletes the previous written title and updates the new title.
    */
   async updateTitleTo(title: string): Promise<void> {
+    await this.page.waitForSelector(explorationTitleSelector);
+    const titleInput = await this.page.$(explorationTitleSelector);
+    const oldTitle = await this.page.evaluate(input => input.value, titleInput);
     await this.clearAllTextFrom(addTitleBar);
     await this.type(addTitleBar, title);
     await this.page.keyboard.press('Tab');
+    if (oldTitle !== title) {
+      if (this.isViewportAtMobileWidth()) {
+        // Navbar text is hidden in mobile view port due to less screen so there is no visible
+        // change in UI after we update the input bar. Hence we need to explicitly wait for 2 sec.
+        await this.page.waitForTimeout(2000);
+      } else {
+        await this.page.waitForSelector('span.e2e-test-autosave-indicator', {
+          visible: true,
+        });
+        await this.page.waitForSelector('span.e2e-test-autosave-indicator', {
+          hidden: true,
+        });
+      }
+    }
     showMessage(`Title has been updated to ${title}`);
   }
 
   /**
    * Matches the expected title with current title.
    */
   async expectTitleToBe(expectedTitle: string): Promise<void> {
-    await this.page.waitForSelector('.e2e-test-exploration-title-input');
-    const titleInput = await this.page.$('.e2e-test-exploration-title-input');
+    await this.page.waitForSelector(explorationTitleSelector);
+    const titleInput = await this.page.$(explorationTitleSelector);
     const currentTitle = await this.page.evaluate(
       input => input.value,
       titleInput
@@ -650,8 +674,9 @@ export class ExplorationEditor extends BaseUser {
     });
     await Promise.all([
       this.clickOn(confirmDiscardButton),
-      this.page.waitForNavigation(),
+      this.page.waitForNavigation({waitUntil: 'networkidle0'}),
     ]);
+    await this.page.waitForFunction('document.readyState === "complete"');
     if (this.isViewportAtMobileWidth()) {
       await this.clickOn(mobileOptionsButton);
       await this.clickOn(basicSettingsDropdown);

scripts/common.py

@@ -216,6 +216,7 @@
     'blog-editor-tests/try-to-publish-a-duplicate-blog-post-and-get-blocked',
     'exploration-editor-tests/create-exploration-and-change-basic-settings',
     'exploration-editor-tests/load-complete-and-restart-exploration-preview',
+    'exploration-editor-tests/savedraft-publish-and-discard-the-changes',
     'logged-in-user-tests/click-all-buttons-on-about-page',
     'logged-in-user-tests/click-all-buttons-on-about-foundation-page',
     'logged-in-user-tests/click-all-buttons-on-thanks-for-donating-page',