wordRotator/test/test.testcafe.js

import {Selector} from 'testcafe';
import {ClientFunction} from 'testcafe';

let isLocal = true;
if (isLocal) {
    fixture`Play`
        .page`https://127.0.0.1/pwa/wordRotator/publicTest/`;
}
else {
    fixture`betaPlay`
        .page`http://beta.wordrotator.silas.link`
        .httpAuth({
            username: 'admin',
            password: '20luxl200'
        }).beforeEach(async t => {
            await t.wait(20000);
    });
}

const testLocalStorageSet = ClientFunction((key, value) => { localStorage.setItem(key, value)});

const coinsPerLevel = 5;
const dragDimen = 250;
const helpCost = 25;

const SEGMENT = {
    ONE: 0,
    TWO: 1,
    THREE: 2,
    FOUR: 3,
    FIVE: 4,
    SIX : 5,
    SEVEN: 6,
    EIGHT : 7,
    NINE: 8,
    TEN: 9,
    ELEVEN: 10,
    TWELVE: 11,
    THIRTEEN: 12,
    FOURTEEN: 13,
    FIFTEEN: 14,
    SIXTEEN: 15,
    SEVENTEEN: 16,
    EIGHTEEN:17,
    NINETEEN: 18,
    TWENTY:19,
    TWENTYONE:20
};

test('Play', async t => {
    await t
    //Main Menu
        .click(Selector('#play-button'))

        //first Level
        .expect(Selector('.segment.segment-parent.rotate-90').nth(0).getStyleProperty('transform')).eql("matrix(0, 1, -1, 0, 0, 0)")
        .expect(Selector('.segment.segment-parent.rotate-90').nth(1).getStyleProperty('transform')).eql("matrix(0, 1, -1, 0, 0, 0)")
        .expect(Selector('.segment.segment-parent.rotate-270').getStyleProperty('transform')).eql("matrix(0, -1, 1, 0, 0, 0)")
        .expect(Selector('#won-text').visible).eql(false)
        .expect(Selector('#continue-button').visible).eql(false)
        .expect(Selector('#level-number').textContent).eql("1")
        .click(Selector('.segment-parent').nth(SEGMENT.THREE))
        .expect(Selector('.segment.segment-parent.rotate-360').getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
        .click(Selector('.segment-parent').nth(SEGMENT.ONE))
        .click(Selector('.segment-parent').nth(SEGMENT.TWO))
        .click(Selector('.segment-parent').nth(SEGMENT.ONE))
        .click(Selector('.segment-parent').nth(SEGMENT.TWO))
        .click(Selector('.segment-parent').nth(SEGMENT.ONE))
        .click(Selector('.segment-parent').nth(SEGMENT.TWO))
        .expect(Selector('.segment.segment-parent.rotate-360').nth(1).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
        .expect(Selector('#won-text').visible).eql(true)
        .expect(Selector('#continue-button').visible).eql(true)
        .click(Selector('#continue-button'))
        .expect(Selector('.coin-counter').innerText).eql(""+coinsPerLevel)

        //TWOLevel
        .expect(Selector('.segment.segment-parent.rotate-270').nth(0).textContent).eql("BOAL")
        .expect(Selector('.segment.segment-parent.rotate-180').textContent).eql("DEAR")
        .expect(Selector('.segment.segment-parent.rotate-360').textContent).eql("NSMR")
        .expect(Selector('.segment.segment-parent.rotate-270').nth(1).textContent).eql("EEUF")
        .expect(Selector('.segment.segment-parent.rotate-270').nth(0).getStyleProperty('transform')).eql("matrix(0, -1, 1, 0, 0, 0)")
        .expect(Selector('.segment.segment-parent.rotate-180').getStyleProperty('transform')).eql("matrix(-1, 0, 0, -1, 0, 0)")
        .expect(Selector('.segment.segment-parent.rotate-360').getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
        .expect(Selector('.segment.segment-parent.rotate-270').nth(1).getStyleProperty('transform')).eql("matrix(0, -1, 1, 0, 0, 0)")
        .expect(Selector('#continue-button').visible).eql(false)
        .expect(Selector('#level-number').textContent).eql("2")
        .expect(Selector('#won-text').visible).eql(false)
        .click(Selector('.segment-parent').nth(SEGMENT.TWO))
        .click(Selector('.segment-parent').nth(SEGMENT.ONE))
        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        .click(Selector('.segment-parent').nth(SEGMENT.TWO))
        .expect(Selector('.segment-parent').nth(SEGMENT.TWO).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
        .click(Selector('.segment-parent').nth(SEGMENT.TWO))
        .expect(Selector('.segment-parent').nth(SEGMENT.TWO).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
        .expect(Selector('#won-text').visible).eql(true)
        .expect(Selector('#continue-button').visible).eql(true)
        .click(Selector('#continue-button'))
        .expect(Selector('.coin-counter').innerText).eql(""+coinsPerLevel*2)

        //THREE Level
        .expect(Selector('.segment-parent').nth(SEGMENT.ONE).textContent).eql("ZEHO")
        .expect(Selector('.segment-parent').nth(SEGMENT.TWO).textContent).eql("ITCH")
        .expect(Selector('.segment-parent').nth(SEGMENT.THREE).textContent).eql("STSA")
        .expect(Selector('.segment-parent').nth(SEGMENT.FOUR).textContent).eql("RAIS")
        .expect(Selector('.segment-parent').nth(SEGMENT.FIVE).textContent).eql("FEON")
        .click(Selector('.segment-parent').nth(SEGMENT.ONE))
        .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
        .click(Selector('.segment-parent').nth(SEGMENT.THREE))
        .click(Selector('.segment-parent').nth(SEGMENT.ONE))
        .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
        .click(Selector('.segment-parent').nth(SEGMENT.ONE))
        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
        .click(Selector('#continue-button'))
        .expect(Selector('.coin-counter').innerText).eql(""+coinsPerLevel*3)

        //4. Level
        .expect(Selector('.segment-parent').nth(SEGMENT.ONE).textContent).eql("FERÜINCKPHREYSSI")
        .expect(Selector('.segment-parent').nth(SEGMENT.TWO).textContent).eql("FERÜ")
        .expect(Selector('.segment-parent').nth(SEGMENT.THREE).textContent).eql("INCK")
        .expect(Selector('.segment-parent').nth(SEGMENT.FOUR).textContent).eql("PHRE")
        .expect(Selector('.segment-parent').nth(SEGMENT.FIVE).textContent).eql("YSSI")
        .expect(Selector('.segment-parent').nth(SEGMENT.SIX).textContent).eql("BEHE")
        .expect(Selector('.segment-parent').nth(SEGMENT.SEVEN).textContent).eql("RARZ")
        .expect(Selector('.segment-parent').nth(SEGMENT.EIGHT).textContent).eql("GUFA")
        .expect(Selector('.segment-parent').nth(SEGMENT.NINE).textContent).eql("SSLL")
        .expect(Selector('.segment-parent').nth(SEGMENT.TEN).textContent).eql("IKDEERNZTULANGND")
        .expect(Selector('.segment-parent').nth(SEGMENT.ELEVEN).textContent).eql("IKDE")
        .expect(Selector('.segment-parent').nth(SEGMENT.TWELVE).textContent).eql("ERNZ")
        .expect(Selector('.segment-parent').nth(SEGMENT.THIRTEEN).textContent).eql("TULA")
        .expect(Selector('.segment-parent').nth(SEGMENT.FOURTEEN).textContent).eql("NGND")
        .drag(Selector('.segment-parent').nth(SEGMENT.TEN), dragDimen, 4, {
            offsetX: 54,
            offsetY: 17
        })
        .drag(Selector('.segment-parent').nth(SEGMENT.ONE), dragDimen, 3, {
            offsetX: 54,
            offsetY: 17
        })
        .drag(Selector('.segment-parent').nth(SEGMENT.TEN).find('div').withText('I'), dragDimen, 4, {
            offsetX: 27,
            offsetY: 41
        })
        .drag(Selector('.segment-parent').nth(SEGMENT.ONE).find('div').withText('S'), 10, dragDimen, {
            offsetX: 64,
            offsetY: 32
        })
        .drag(Selector('.segment-parent').nth(SEGMENT.TEN), dragDimen, 4, {
            offsetX: 27,
            offsetY: 41
        })
        .click(Selector('.segment-parent').nth(SEGMENT.NINE))
        .click(Selector('.segment-parent').nth(SEGMENT.EIGHT))
        .click(Selector('.segment-parent').nth(SEGMENT.NINE))
        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        .click(Selector('.segment-parent').nth(SEGMENT.ELEVEN))
        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        .click(Selector('.segment-parent').nth(SEGMENT.ELEVEN))
        .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        .click(Selector('.segment-parent').nth(SEGMENT.ELEVEN))
        .click(Selector('.segment-parent').nth(SEGMENT.TWELVE))
        .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
        .click(Selector('.segment-parent').nth(SEGMENT.SIX))
        .click(Selector('.segment-parent').nth(SEGMENT.TWELVE))
        .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
        .click(Selector('.segment-parent').nth(SEGMENT.SIX))
        .expect(Selector('#continue-button').visible).eql(true)
        .expect(Selector('#won-text').visible).eql(true)
        .click(Selector('#continue-button'))
        .expect(Selector('.coin-counter').innerText).eql(""+coinsPerLevel*4)

        //5. Level
        .expect(Selector('#level-number').textContent).eql("5")
        .expect(Selector('.segment-parent').nth(SEGMENT.ONE).textContent).eql("BEANTOBEALBALEUM")
        .expect(Selector('.segment-parent').nth(SEGMENT.SIX).textContent).eql("NUTUNGNGRGHAIEUS")
        .expect(Selector('.segment-parent').nth(SEGMENT.ONE).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
        .expect(Selector('.segment-parent').nth(SEGMENT.SIX).getStyleProperty('transform')).eql("matrix(0, 1, -1, 0, 0, 0)")

        .click(Selector('.segment-parent').nth(SEGMENT.THREE))
        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        .click(Selector('.segment-parent').nth(SEGMENT.TWO))
        .drag(Selector('.segment-parent').nth(SEGMENT.SIX).find('div').withText('U'), 3, dragDimen, {
            offsetX: 69,
            offsetY: 150
        })
        .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
        .click(Selector('.segment-parent').nth(SEGMENT.THREE))
        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
        .drag(Selector('.segment-parent').nth(SEGMENT.SIX), 3, dragDimen, {
            offsetX: 86,
            offsetY: 133
        })
        .click(Selector('.segment-parent').nth(SEGMENT.THREE))
        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
        .drag(Selector('.segment-parent').nth(SEGMENT.SIX), 10, dragDimen, {
            offsetX: 60,
            offsetY: 137
        })
        .expect(Selector('#won-text').visible).eql(true)
        .expect(Selector('#continue-button').visible).eql(true)
        .click(Selector('#continue-button'))
        .expect(Selector('.coin-counter').innerText).eql(""+coinsPerLevel*5)


        //Level 6
        .expect(Selector('#level-number').textContent).eql("6")
        .expect(Selector('.segment-parent').nth(SEGMENT.ONE).textContent).eql("FEGEHLISARBEBERE")
        .expect(Selector('.segment-parent').nth(SEGMENT.ONE).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
        .expect(Selector('.segment-parent').nth(SEGMENT.TEN).getStyleProperty('transform')).eql("matrix(-1, 0, 0, -1, 0, 0)")
        .expect(Selector('.segment-parent').nth(SEGMENT.TEN).textContent).eql("ITITSPSCIKARAROT")

        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
        .click(Selector('.segment-parent').nth(SEGMENT.NINE))
        .drag(Selector('.segment-parent').nth(SEGMENT.TEN).find('div').withText('A'), dragDimen, -4, {
            offsetX: 33,
            offsetY: 18
        })
        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        .click(Selector('.segment-parent').nth(SEGMENT.SIX))
        .click(Selector('.segment-parent').nth(SEGMENT.TWENTY))
        .click(Selector('.segment-parent').nth(SEGMENT.TWELVE))
        .click(Selector('.segment-parent').nth(SEGMENT.NINE))
        .click(Selector('.segment-parent').nth(SEGMENT.THIRTEEN))
        .click(Selector('.segment-parent').nth(SEGMENT.TWENTYONE))
        .click(Selector('.segment-parent').nth(SEGMENT.TWO))
        .click(Selector('.segment-parent').nth(SEGMENT.EIGHT))
        .click(Selector('.segment-parent').nth(SEGMENT.ELEVEN))
        .click(Selector('.segment-parent').nth(SEGMENT.NINE))
        .click(Selector('.segment-parent').nth(SEGMENT.TWELVE))
        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        .click(Selector('.segment-parent').nth(SEGMENT.FOURTEEN))
        .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
        .click(Selector('.segment-parent').nth(SEGMENT.SIXTEEN))
        .click(Selector('.segment-parent').nth(SEGMENT.TWELVE))
        .click(Selector('.segment-parent').nth(SEGMENT.NINETEEN))
        .click(Selector('.segment-parent').nth(SEGMENT.TWENTYONE))
        .click(Selector('.segment-parent').nth(SEGMENT.TWENTY))
        .click(Selector('.segment-parent').nth(SEGMENT.THIRTEEN))
        .click(Selector('.segment-parent').nth(SEGMENT.TWENTY))
        .click(Selector('.segment-parent').nth(SEGMENT.SEVENTEEN))
        .click(Selector('.segment-parent').nth(SEGMENT.SIXTEEN))
        .click(Selector('.segment-parent').nth(SEGMENT.FOURTEEN))
        .click(Selector('.segment-parent').nth(SEGMENT.NINETEEN))
        .click(Selector('.segment-parent').nth(SEGMENT.TWENTYONE))
        .drag(Selector('.segment-parent').nth(SEGMENT.TEN).find('div').withText('P'), dragDimen, -3, {
            offsetX: 22,
            offsetY: 16
        })
        .expect(Selector('div').withText('P').nth(11).find('.segment.segment-parent.layer-2.rotate-360').getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
        .expect(Selector('#continue-button').visible).eql(true)
        .expect(Selector('#won-text').visible).eql(true)
        .click(Selector('#continue-button'))
        .expect(Selector('.coin-counter').innerText).eql(""+coinsPerLevel*6)


        //Level 7
        .expect(Selector('.segment-parent').nth(SEGMENT.SIX).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
        .expect(Selector('.segment-row > .child-container').childElementCount).eql(3)

        .drag(Selector('.segment-parent').nth(SEGMENT.ONE), 4, dragDimen, {
            offsetX: 50,
            offsetY: 73
        })

        .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
        .click(Selector('.segment-parent').nth(SEGMENT.THIRTEEN))
        .click(Selector('.segment-parent').nth(SEGMENT.TWO))
        .drag(Selector('.segment-parent').nth(SEGMENT.ELEVEN), 14, dragDimen, {
            offsetX: 55,
            offsetY: 57
        })
        .drag(Selector('.segment-parent').nth(SEGMENT.ONE), 4, dragDimen, {
            offsetX: 50,
            offsetY: 73
        })
        .click(Selector('.segment-parent').nth(SEGMENT.THREE))
        .click(Selector('.segment-parent').nth(SEGMENT.EIGHT))
        .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        // .click(Selector('.segment-parent').nth(SEGMENT.THIRTEEN))
        .click(Selector('.segment-parent').nth(SEGMENT.FIVE))
        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        .click(Selector('.segment-parent').nth(SEGMENT.SEVEN))
        .click(Selector('.segment-parent').nth(SEGMENT.THREE))
        .click(Selector('.segment-parent').nth(SEGMENT.EIGHT))
        .click(Selector('.segment-parent').nth(SEGMENT.NINE))
        .click(Selector('.segment-parent').nth(SEGMENT.FOUR))
        .drag(Selector('.segment-parent').nth(SEGMENT.ELEVEN), 14, dragDimen, {
            offsetX: 55,
            offsetY: 57
        })
        .drag(Selector('.segment-parent').nth(SEGMENT.ONE), 4, dragDimen, {
            offsetX: 50,
            offsetY: 73
        })
        // .click(Selector('.segment-parent').nth(SEGMENT.THIRTEEN))
        .click(Selector('#help-button'))
        .wait(5000)
        .expect(Selector('.coin-counter').innerText).eql(""+(coinsPerLevel*7-helpCost))

        .expect(Selector('#won-text').visible).eql(true)
        .expect(Selector('#continue-button').visible).eql(true)
        .click(Selector('#continue-button'))
        .expect(Selector('#site-content').childElementCount).eql(1);
});
test('LoadLastLevel', async t => {
    await t.click(Selector('#play-button'))
        .expect(Selector('.segment-parent').nth(SEGMENT.ONE).hasClass('locked')).ok()
        .expect(Selector('.segment-parent').nth(SEGMENT.ONE).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
        .expect(Selector('.segment-parent').nth(SEGMENT.TWO).getStyleProperty('transform')).eql("matrix(1, 0, 0, 1, 0, 0)")
        .expect(Selector('.segment-parent').nth(SEGMENT.THREE).getStyleProperty('transform')).eql("matrix(0, -1, 1, 0, 0, 0)")
}).before(async t => {
    // await t.
    await testLocalStorageSet("currentLevel", "{\"id\":15,\"rotations\":[0,0,270],\"locks\":[false,true,true]}");
});