mirror of
				https://github.com/zulip/zulip.git
				synced 2025-11-04 05:53:43 +00:00 
			
		
		
		
	puppeteer: Migrate navigation test from casper.
Also adds a helper function that is used in later tests too.
This commit is contained in:
		@@ -1,132 +0,0 @@
 | 
				
			|||||||
"use strict";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
var common = require("../casper_lib/common.js");
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// Test basic tab navigation.
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
common.start_and_log_in();
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
casper.then(function () {
 | 
					 | 
				
			||||||
    casper.test.info("Testing navigation");
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function wait_for_tab(tab) {
 | 
					 | 
				
			||||||
    casper.waitForSelector("#" + tab + ".tab-pane.active", function () {
 | 
					 | 
				
			||||||
        casper.test.assertExists("#" + tab + ".tab-pane.active", tab + " page is active");
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function then_navigate_to(click_target, tab) {
 | 
					 | 
				
			||||||
    casper.then(function () {
 | 
					 | 
				
			||||||
        casper.test.info("Visiting #" + click_target);
 | 
					 | 
				
			||||||
        casper.click("a[href='#" + click_target + "']");
 | 
					 | 
				
			||||||
        wait_for_tab(tab);
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function then_navigate_to_settings() {
 | 
					 | 
				
			||||||
    casper.then(function () {
 | 
					 | 
				
			||||||
        casper.test.info("Navigate to settings");
 | 
					 | 
				
			||||||
        var menu_selector = "#settings-dropdown";
 | 
					 | 
				
			||||||
        casper.waitUntilVisible(menu_selector, function () {
 | 
					 | 
				
			||||||
            casper.click(menu_selector);
 | 
					 | 
				
			||||||
            casper.waitUntilVisible('a[href^="#settings"]', function () {
 | 
					 | 
				
			||||||
                casper.click('a[href^="#settings"]');
 | 
					 | 
				
			||||||
                casper.waitUntilVisible("#settings_page", function () {
 | 
					 | 
				
			||||||
                    casper.test.assertExists("#settings_page", "Settings page is active");
 | 
					 | 
				
			||||||
                    casper.click("#settings_page .exit");
 | 
					 | 
				
			||||||
                });
 | 
					 | 
				
			||||||
            });
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function then_navigate_to_subscriptions() {
 | 
					 | 
				
			||||||
    casper.then(function () {
 | 
					 | 
				
			||||||
        casper.test.info("Navigate to subscriptions");
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        var menu_selector = "#settings-dropdown";
 | 
					 | 
				
			||||||
        casper.waitUntilVisible(menu_selector, function () {
 | 
					 | 
				
			||||||
            casper.click(menu_selector);
 | 
					 | 
				
			||||||
            casper.click('a[href^="#streams"]');
 | 
					 | 
				
			||||||
            casper.waitUntilVisible("#subscription_overlay", function () {
 | 
					 | 
				
			||||||
                casper.test.assertExists("#subscriptions_table", "#subscriptions page is active");
 | 
					 | 
				
			||||||
                casper.click("#subscription_overlay .exit");
 | 
					 | 
				
			||||||
            });
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// Take a navigation tour of the app.
 | 
					 | 
				
			||||||
// Entries are (click target, tab that should be active after clicking).
 | 
					 | 
				
			||||||
then_navigate_to_settings();
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
var verona_narrow;
 | 
					 | 
				
			||||||
casper.then(function () {
 | 
					 | 
				
			||||||
    var verona_id = casper.evaluate(function () {
 | 
					 | 
				
			||||||
        return stream_data.get_stream_id("Verona");
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
    verona_narrow = "narrow/stream/" + verona_id + "-Verona";
 | 
					 | 
				
			||||||
    casper.test.info(verona_narrow);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    then_navigate_to(verona_narrow, "message_feed_container");
 | 
					 | 
				
			||||||
    then_navigate_to("message_feed_container", "message_feed_container");
 | 
					 | 
				
			||||||
    then_navigate_to_subscriptions();
 | 
					 | 
				
			||||||
    then_navigate_to("", "message_feed_container");
 | 
					 | 
				
			||||||
    then_navigate_to_settings();
 | 
					 | 
				
			||||||
    then_navigate_to("narrow/is/private", "message_feed_container");
 | 
					 | 
				
			||||||
    then_navigate_to_subscriptions();
 | 
					 | 
				
			||||||
    then_navigate_to(verona_narrow, "message_feed_container");
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
var initial_page_load_time;
 | 
					 | 
				
			||||||
var hash;
 | 
					 | 
				
			||||||
var orig_hash;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// Verify reload.js's server-initiated browser reload hash
 | 
					 | 
				
			||||||
// save/restore logic works.
 | 
					 | 
				
			||||||
casper.then(function () {
 | 
					 | 
				
			||||||
    initial_page_load_time = casper.evaluate(function () {
 | 
					 | 
				
			||||||
        return page_params.page_load_time;
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
    casper.test.info(initial_page_load_time);
 | 
					 | 
				
			||||||
    orig_hash = casper.evaluate(function () {
 | 
					 | 
				
			||||||
        return window.location.hash;
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
    casper.evaluate(function () {
 | 
					 | 
				
			||||||
        reload.initiate({immediate: true});
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
casper.then(function () {
 | 
					 | 
				
			||||||
    // Confirm that's we've actually reloaded using the page load timestamp.
 | 
					 | 
				
			||||||
    casper.waitFor(
 | 
					 | 
				
			||||||
        function () {
 | 
					 | 
				
			||||||
            return casper.evaluate(function (input) {
 | 
					 | 
				
			||||||
                return page_params.page_load_time > input;
 | 
					 | 
				
			||||||
            }, initial_page_load_time);
 | 
					 | 
				
			||||||
        },
 | 
					 | 
				
			||||||
        function () {
 | 
					 | 
				
			||||||
            // Verify the hash was preserved
 | 
					 | 
				
			||||||
            hash = casper.evaluate(function () {
 | 
					 | 
				
			||||||
                return window.location.hash;
 | 
					 | 
				
			||||||
            });
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
    );
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
casper.then(function () {
 | 
					 | 
				
			||||||
    casper.waitUntilVisible("#zfilt", function () {
 | 
					 | 
				
			||||||
        // Verify that we're narrowed to the target stream
 | 
					 | 
				
			||||||
        casper.test.assertEquals(orig_hash, hash);
 | 
					 | 
				
			||||||
        casper.test.assertVisible("#zfilt");
 | 
					 | 
				
			||||||
        casper.test.assertNotVisible("#zhome");
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
common.then_log_out();
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// Run the above queued actions.
 | 
					 | 
				
			||||||
casper.run(function () {
 | 
					 | 
				
			||||||
    casper.test.done();
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
@@ -152,6 +152,15 @@ class CommonUtils {
 | 
				
			|||||||
        return await page.evaluate((selector) => $(selector).text().trim(), selector);
 | 
					        return await page.evaluate((selector) => $(selector).text().trim(), selector);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    async wait_for_text(page, selector, text) {
 | 
				
			||||||
 | 
					        await page.waitForFunction(
 | 
				
			||||||
 | 
					            (selector, text) => $(selector).text().includes(text),
 | 
				
			||||||
 | 
					            {},
 | 
				
			||||||
 | 
					            selector,
 | 
				
			||||||
 | 
					            text,
 | 
				
			||||||
 | 
					        );
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    async get_stream_id(page, stream_name) {
 | 
					    async get_stream_id(page, stream_name) {
 | 
				
			||||||
        return await page.evaluate(
 | 
					        return await page.evaluate(
 | 
				
			||||||
            (stream_name) => stream_data.get_stream_id(stream_name),
 | 
					            (stream_name) => stream_data.get_stream_id(stream_name),
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										100
									
								
								frontend_tests/puppeteer_tests/07-navigation.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										100
									
								
								frontend_tests/puppeteer_tests/07-navigation.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,100 @@
 | 
				
			|||||||
 | 
					"use strict";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const assert = require("assert").strict;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const common = require("../puppeteer_lib/common");
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					async function wait_for_tab(page, tab) {
 | 
				
			||||||
 | 
					    const tab_slector = `#${tab}.tab-pane.active`;
 | 
				
			||||||
 | 
					    await page.waitForSelector(tab_slector, {visible: true});
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					async function navigate_to(page, click_target, tab) {
 | 
				
			||||||
 | 
					    console.log("Visiting #" + click_target);
 | 
				
			||||||
 | 
					    await page.click(`a[href='#${click_target}']`);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await wait_for_tab(page, tab);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					async function open_menu(page) {
 | 
				
			||||||
 | 
					    const menu_selector = "#settings-dropdown";
 | 
				
			||||||
 | 
					    await page.waitForSelector(menu_selector, {visible: true});
 | 
				
			||||||
 | 
					    await page.click(menu_selector);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					async function navigate_to_settings(page) {
 | 
				
			||||||
 | 
					    console.log("Navigating to settings");
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await open_menu(page);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    const settings_selector = "a[href^='#settings']";
 | 
				
			||||||
 | 
					    await page.waitForSelector(settings_selector, {visible: true});
 | 
				
			||||||
 | 
					    await page.click(settings_selector);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await page.waitForSelector("#settings_page", {visible: true});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await page.click("#settings_page .content-wrapper .exit");
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					async function navigate_to_subscriptions(page) {
 | 
				
			||||||
 | 
					    console.log("Navigate to subscriptions");
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await open_menu(page);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    const manage_streams_selector = 'a[href^="#streams"]';
 | 
				
			||||||
 | 
					    await page.waitForSelector(manage_streams_selector, {visible: true});
 | 
				
			||||||
 | 
					    await page.click(manage_streams_selector);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await page.waitForSelector("#subscription_overlay", {visible: true});
 | 
				
			||||||
 | 
					    await page.waitForSelector("#subscriptions_table", {visible: true});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await page.click("#subscription_overlay .exit");
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					async function test_reload_hash(page) {
 | 
				
			||||||
 | 
					    const initial_page_load_time = await page.evaluate(() => page_params.page_load_time);
 | 
				
			||||||
 | 
					    console.log("initial load time: " + initial_page_load_time);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    const initial_hash = await page.evaluate(() => window.location.hash);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await page.evaluate(() => reload.initiate({immediate: true}));
 | 
				
			||||||
 | 
					    await page.waitForSelector("#zfilt", {visible: true});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    const page_load_time = await page.evaluate(() => page_params.page_load_time);
 | 
				
			||||||
 | 
					    assert(page_load_time > initial_page_load_time, "Page not reloaded.");
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    const hash = await page.evaluate(() => window.location.hash);
 | 
				
			||||||
 | 
					    assert.strictEqual(hash, initial_hash, "Hash not preserved.");
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					async function navigation_tests(page) {
 | 
				
			||||||
 | 
					    await common.log_in(page);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await navigate_to_settings(page);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    const verona_id = await page.evaluate(() => stream_data.get_stream_id("Verona"));
 | 
				
			||||||
 | 
					    const verona_narrow = `narrow/stream/${verona_id}-Verona`;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await navigate_to(page, verona_narrow, "message_feed_container");
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    // Hardcoded this instead of using `navigate_to`
 | 
				
			||||||
 | 
					    // as puppeteer cannot click hidden elements.
 | 
				
			||||||
 | 
					    await page.evaluate(() => $("a[href='#message_feed_container]'").click());
 | 
				
			||||||
 | 
					    await wait_for_tab(page, "message_feed_container");
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await navigate_to_subscriptions(page);
 | 
				
			||||||
 | 
					    await navigate_to(page, "", "message_feed_container");
 | 
				
			||||||
 | 
					    await navigate_to_settings(page);
 | 
				
			||||||
 | 
					    await navigate_to(page, "narrow/is/private", "message_feed_container");
 | 
				
			||||||
 | 
					    await navigate_to_subscriptions(page);
 | 
				
			||||||
 | 
					    await navigate_to(page, verona_narrow, "message_feed_container");
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await test_reload_hash(page);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    // Verify that we're narrowed to the target stream
 | 
				
			||||||
 | 
					    await common.wait_for_text(page, "#message_view_header .stream", "Verona");
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await common.log_out(page);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					common.run_test(navigation_tests);
 | 
				
			||||||
		Reference in New Issue
	
	Block a user