JSFiddle - React, Tailwind, and code Playground

by termi

HTML

<h1>history.go/popstate and history.pushState bug</h1>

<button id=button>test</button>

<div id=output />

JavaScript

// history.go and history.pushState bug

function runTest(theLastOne){
    history.pushState(null, '', '/page=0');
    var expected = getPage(window.location.href);
    history.pushState(null, '', '/page=1');
    history.pushState(null, '', '/page=2');
    
    history.go(-2);//go back to '/page=0', on 'popstate' event location shoud be '/page=0' too
    
    //setTimeout(function(){
    
    history.pushState(null, '', '/page=3');
    history.pushState(null, '', theLastOne);//set the finale url
    
    //}, 0)

    return expected;
};

function test() {    
    window._lastPopStateHref = '';
    
    if (!window._hasEvent){
        window._hasEvent = true;
        
        window.addEventListener('popstate', function() {
            window._lastPopStateHref = getPage(window.location.href);
        })
    }
    
    var output = document.getElementById('output');
    var expectedUrl = '/page=4';
    var expectedPopState = runTest(expectedUrl);
    
    output.innerHTML = "running";
    
    setTimeout(function() {
        var result = '';
        var current = getPage(window.location.href);
        if ( current != expectedUrl ) {
            result += '<p><span style="color:red">Url set failed</span><br />has: ' + current + '<br />expected: ' + expectedUrl + '</p>';
        }
        else {
            result += '<p><span style="color:green">Url set passed</span><br />has: ' + current + '<br />expected: ' + expectedUrl + '</p>';
        }
        
        current = window._lastPopStateHref;
        if ( current ) {
            if ( current != expectedPopState ) {
                result += '<p><span style="color:red">history.go/popstate failed</span><br />has: ' + current + '<br />expected: ' + expectedPopState + '</p>';
            }
            else {
                result += '<p><span style="color:green">history.go/popstate passed</span><br />has: ' + current + '<br />expected: ' + expectedPopState + '</p>';
            }
        }
        else {
           ...