The jasmine-differ from linkel

To Do

Rudimentary CSS
Rip out the relevant parts of the expected and actuals from the full string
Brainstorm how to do a diff
I might have to use a text input box for the outputs because right now I'm using
for line breaks

First steps

I would like to write a webpage that has an input that can take text pasted into it, and then formats the text. The text is going to be the Jasmine failed test when something is expected to have been called with something but instead was called with another thing. Maybe without a buttonpress. The text is then formatted into two groups, the part that's after "to have been called with" and before "but actual calls were", and then the part after that to the end, excluding the period.

It'll show the expected on the left and the actual on the right.

Once I have something that can do that, then I can think about diffing it. After I get something that works to diff it, I would like to look into diffing algorithms a little closer and have gleaned a better understanding of how it works.

Example

For example, I would like to turn the following:

Expected spy EventServiceMock.getEventsObservable to have been called with [ Object({ eventGroupIds: [ 'ROOT' ], selfEventGroupIds: [ 'ROOT' ], startDate: Object({ year: 2019, month: 6, day: 17 }), endDate: Object({ year: 2019, month: 6, day: 24 }), manualOnly: false, trainableOnly: false, boutsOnly: false, pageNumber: 1, pageSize: 10, triggerIds: [ ], statusIds: [ ], behaviorIds: [ ], fighterIds: [ ], equipmentIds: [ ], includeAllFighterAndTrainerEvents: true, sortField: 'RecordDateLocal', sortDirection: 'desc' }) ] but actual calls were [ Object({ eventGroupIds: [ 'ROOT' ], selfEventGroupIds: [ 'ROOT' ], startDate: Object({ year: 2019, month: 6, day: 17 }), endDate: Object({ year: 2019, month: 6, day: 24 }), manualOnly: false, trainableOnly: false, boutsOnly: false, pageNumber: 1, pageSize: 10, triggerIds: [ ], statusIds: [ ], behaviorIds: [ ], fighterIds: [ ], equipmentIds: [ ], cameraIds: [ ], includeAllFighterAndTrainerEvents: true, sortField: 'RecordDateLocal', sortDirection: 'desc' }) ].

into this:

Expected:

[ Object({ eventGroupIds: [ 'ROOT' ], selfEventGroupIds: [ 'ROOT' ], startDate: Object({ year: 2019, month: 6, day: 17 }), endDate: Object({ year: 2019, month: 6, day: 24 }), manualOnly: false, trainableOnly: false, boutsOnly: false, pageNumber: 1, pageSize: 10, triggerIds: [ ], statusIds: [ ], behaviorIds: [ ], fighterIds: [ ], equipmentIds: [ ], includeAllFighterAndTrainerEvents: true, sortField: 'RecordDateLocal', sortDirection: 'desc' }) ]

Actual:

[ Object({ eventGroupIds: [ 'ROOT' ], selfEventGroupIds: [ 'ROOT' ], startDate: Object({ year: 2019, month: 6, day: 17 }), endDate: Object({ year: 2019, month: 6, day: 24 }), manualOnly: false, trainableOnly: false, boutsOnly: false, pageNumber: 1, pageSize: 10, triggerIds: [ ], statusIds: [ ], behaviorIds: [ ], fighterIds: [ ], equipmentIds: [ ], cameraIds: [ ], includeAllFighterAndTrainerEvents: true, sortField: 'RecordDateLocal', sortDirection: 'desc' }) ]

Code refactor submission

Was using hardcoded constant numbers instead of the length of the string I was looking for. A friend helpfully provided a potential refactor--will wait to see if they make a PR.

const textInput = document.querySelector("#text-input");

const formatText = () => {
    resultTable.innerHTML = "Expected spy EventServiceMock.getEventsObservable to have been called with [ Object({ eventGroupIds: [ 'first' ], selfEventGroupIds: [ 'ROOT' ], startDate: Object({ year: 2019, month: 6, day: 17 }), endDate: Object({ year: 2019, month: 6, day: 24 }), manualOnly: false, trainableOnly: false, boutsOnly: false, pageNumber: 1, pageSize: 10, triggerIds: [  ], statusIds: [  ], behaviorIds: [  ], fighterIds: [  ], equipmentIds: [  ], includeAllFighterAndTrainerEvents: true, sortField: 'RecordDateLocal', sortDirection: 'desc' }) ] but actual calls were [ Object({ eventGroupIds: [ 'second' ], selfEventGroupIds: [ 'ROOT' ], startDate: Object({ year: 2019, month: 6, day: 17 }), endDate: Object({ year: 2019, month: 6, day: 24 }), manualOnly: false, trainableOnly: false, boutsOnly: false, pageNumber: 1, pageSize: 10, triggerIds: [  ], statusIds: [  ], behaviorIds: [  ], fighterIds: [  ], equipmentIds: [  ], cameraIds: [  ], includeAllFighterAndTrainerEvents: true, sortField: 'RecordDateLocal', sortDirection: 'desc' }) ].";

    let myString = String(textInput.value);

    const matcherStringStart = ' [ Object('
    const expectedResultStartIndex = myString.indexOf(matcherStringStart) + matcherStringStart.length

    const matcherStringEnd = ') ]'
    const expectedResultEndIndex = myString.indexOf(matcherStringEnd)

    let expectedResult = myString.slice(expectedResultStartIndex, expectedResultEndIndex).replace(/Object\(/g, '').replace(/\)/g, '')

    myString = myString.slice(expectedResultEndIndex + matcherStringEnd.length)

    const actualResultStartIndex = myString.indexOf(matcherStringStart) + matcherStringStart.length
    const actualResultEndIndex = myString.indexOf(matcherStringEnd)

    let actualResult = myString.slice(actualResultStartIndex, actualResultEndIndex).replace(/Object\(/g, '').replace(/\)/g, '')

    let expectedResultSplitByKey = expectedResult.replace(/[A-z]+:/g, '|$&').split('|')
    let actualResultSplitByKey = actualResult.replace(/[A-z]+:/g, '|$&').split('|')

    let amountToIterate = Math.max(expectedResultSplitByKey.length, actualResultSplitByKey.length)
                        
    for (i = 0; i < amountToIterate; i++) {
        let row = document.createElement("tr")
        let elineNum = document.createElement("td");
        let elineData = document.createElement("td");
        elineNum.className = "diff-line-number";
        elineData.className = "diff-line";
        elineNum.innerHTML = i+1;
        elineData.innerHTML = expectedResultSplitByKey[i];

        let alineNum = document.createElement("td");
        let alineData = document.createElement("td");
        alineNum.className = "diff-line-number";
        alineData.className = "diff-line";
        alineNum.innerHTML = i+1;
        alineData.innerHTML = actualResultSplitByKey[i];

        row.appendChild(elineNum);
        row.appendChild(elineData);
        row.appendChild(alineNum);
        row.appendChild(alineData);
        resultTable.appendChild(row);
    }
}

textInput.innerHTML = "Expected spy EventServiceMock.getEventsObservable to have been called with [ Object({ eventGroupIds: [ 'ROOT' ], selfEventGroupIds: [ 'ROOT' ], startDate: Object({ year: 2019, month: 6, day: 17 }), endDate: Object({ year: 2019, month: 6, day: 24 }), manualOnly: false, trainableOnly: false, boutsOnly: false, pageNumber: 1, pageSize: 10, triggerIds: [  ], statusIds: [  ], behaviorIds: [  ], fighterIds: [  ], equipmentIds: [  ], includeAllFighterAndTrainerEvents: true, sortField: 'RecordDateLocal', sortDirection: 'desc' }) ] but actual calls were [ Object({ eventGroupIds: [ 'ROOT' ], selfEventGroupIds: [ 'ROOT' ], startDate: Object({ year: 2019, month: 6, day: 17 }), endDate: Object({ year: 2019, month: 6, day: 24 }), manualOnly: false, trainableOnly: false, boutsOnly: false, pageNumber: 1, pageSize: 10, triggerIds: [  ], statusIds: [  ], behaviorIds: [  ], fighterIds: [  ], equipmentIds: [  ], cameraIds: [  ], includeAllFighterAndTrainerEvents: true, sortField: 'RecordDateLocal', sortDirection: 'desc' }) ]."
formatText();```

linkel / jasmine-differ Goto Github PK

jasmine-differ's Introduction

To Do

First steps

Example

jasmine-differ's People

Contributors

Watchers

jasmine-differ's Issues

Code refactor submission

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent