added Box Like UI for test cases

achintya-7 commented 1 year ago

Related Issue

Implementing diff and a new UI overhaul for the test cases

Closes: #334

Describe the changes you've made

The main task is to have a proper diff checker between expected and output responses while testing. The secondary task is to overhaul the UI. Initially, I started with an overhaul of the UI using box-cli.

Type of change

[x] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Code style update (formatting, local variables)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ ] This change requires a documentation update

Please let us know if any test cases are added

Please describe the tests(if any). Provide instructions how its affecting the coverage.

Describe if there is any unusual behaviour of your code(Write `NA` if there isn't)

A clear and concise description of it.

Checklist:

[x] My code follows the style guidelines of this project.
[x] I have performed a self-review of my own code.
[x] I have commented my code, particularly in hard-to-understand areas.
[x] I have made corresponding changes to the documentation.
[x] My changes generate no new warnings.
[ ] I have added tests that prove my fix is effective or that my feature works.
[ ] New and existing unit tests pass locally with my changes.

Screenshots (if any)

Original

Updated

nehagup commented 1 year ago

@achintya-7 the passed test cases will be too many so it'll be better if we can create boxes for failed ones and then show beautifies differences in actual and expected test case responses below that.

achintya-7 commented 1 year ago

@nehagup This is somewhat of a proposed idea for the error block I am thinking of. Regarding the diff checker, I will start working on it now and will probably go with this pkg go-diff. We also can do some A/B testing for boxes in case of the passed tests as well.

achintya-7 commented 1 year ago

These are the 2 diff packages I tried. I think the 2nd one can be a better choice here.

achintya-7 commented 1 year ago

@nehagup Yeah, we can go for something like that. I believe we could also change the way we display the JSON body and try to format it with indexing. It's hard to read it like this between the lines. There are various formatters that we can use. I think quite a big overhaul is in need here.

nehagup commented 1 year ago

@achintya-7 in case you're stuck, you can also refer - https://github.com/keploy/keploy/pull/492#issuecomment-1486309360

achintya-7 commented 1 year ago

The diff check is at last in error case. Regarding the formatting. I think the formatting is getting affected by the special text we add to get red and green colours in the string. A solution can be to subtract or add the same number of spaces that they take to make is justified.

achintya-7 commented 1 year ago

@nehagup Yah, we can surely remove it. I just let it be there for reference and review. Regarding the spacing between the 2 diffs, I have used 50 spaces just like you shared in that code snippet. We can surely increase it, maybe 75 could be a good fit.

nehagup commented 1 year ago

@achintya-7 sounds good! Also, please add code to consider the noisy fields(marked by keploy) and ignore them while showing diffs.

achintya-7 commented 1 year ago

@nehagup So I have used the cleanAct and cleanExp to generate the diffs as they will have the noise removed. Also, there can be multiple parts of it so I have seperated them with newlines and added the keyStr value above them for better understanding.

nehagup commented 1 year ago

@achintya-7 can you please share the screenshot with an example that has noisy fields?

achintya-7 commented 1 year ago

@achintya-7 can you please share the screenshot with an example that has noisy fields?

Ok, Sure. Is there any Keploy example repo which I can refer. Or I can try mock data from a get all db function.

nehagup commented 1 year ago

@achintya-7 can you please share the screenshot with an example that has noisy fields?

Ok, Sure. Is there any Keploy example repo which I can refer. Or I can try mock data from a get all db function.

You can take simple url shorter application in go-samples. In that we have added timestamp that is a noisy field.

achintya-7 commented 1 year ago

Ok, I will test that out.

keploy / keploy