Writing more Jest UI tests and making UI more stable

[keshav234156]

With #1366 we were able to set up a basic browser-based UI test and it works flawlessly. So lets build more tests and make the UI stable.
Test yet to be built:

• (Reserved For GCI ) Clicking add step adds a new box and a different image(add tests for bottom step button #1387 )
• Clicking clear step button clear all the step
• Clicking Delete Step removes the image(Fixed within Blend new #1499 )
• (Reserved For GCI ) Select a module to have all the modules with the correct name(we faced issues when modules have which is undefined in the past ).
• Insert step works as expected.
• Input types(range,text etc) of all the modules are correct-
  we need to fix this before we can write test on it
• add a UI test for the test which check that all the modules the default options are displayed(FIX: Histogram module selected value not displayed #1510 )

• insert step button tested Writing more UI tests (with guidance) #1000 (comment)
• contrast slider and apply buttons broken in main branch UI #1238 (comment) - via @harshkhandeparkar in contrast slider and apply buttons broken in main branch UI #1238 - If you click on the step collapse btn and if you have multiple steps, clicking on the load-image step collapses something totally different. After some time, all the collapse btns break.

[keshav234156]

cc:-@jywarren @harshkhandeparkar we can add more tests as we go along the way but these are most basic set of tests that are needed.

[jywarren]

This is FANTASTIC!!!! Thanks!!! If we write the tests generically enough, using simple classnames, then the new UI Harsh has been working on could be run against the same set of tests! This would be amazing. Let's keep this in mind and Harsh, maybe try to get your classnames to match so that your UI work passes these tests too?

…

On Wed, Dec 18, 2019, 2:13 PM keshav234156 ***@***.***> wrote: ***@***.*** <https://github.com/jywarren> @harshkhandeparkar <https://github.com/HarshKhandeparkar> we can add more tests as we go along the way but these are most basic set of tests that are needed. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1369?email_source=notifications&email_token=AAAF6J4ISDEMOIBAWUERI3DQZJY5TA5CNFSM4J4PXBKKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHHFLFI#issuecomment-567170453>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J7B3UZAQNPPABOUJKDQZJY5TANCNFSM4J4PXBKA> .

[ataata107]

I am new here and would love to work on this.

[jywarren]

we'd love your help!!! Which would you like to try? Go ahead and open a pull request with the new test; start with something simple and then keep building on it!

…

On Wed, Dec 18, 2019, 4:38 PM Shazeb Ata ***@***.***> wrote: I am new here and would love to work on this. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1369?email_source=notifications&email_token=AAAF6J4N3INWM5SIS7EB7ZTQZKJ7DA5CNFSM4J4PXBKKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHHSSPY#issuecomment-567224639>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J7HEFRWUMWOCL7ARY3QZKJ7DANCNFSM4J4PXBKA> .

[ataata107]

I will start with the basic ones like clear step button and remove step button and would start building from it. Thanks for the opportunity.

[SidharthBansal]

I have published this on gci dashboard

[SidharthBansal]

Thanks Keshav

[harshkhandeparkar]

@jywarren sure. The new UI will just be less messy and it is coming together really well. I think I do not need to add the E2E tests which would require headless browsers. I will just add the unit tests with perhaps a virtual DOM. Is that ok? We can use the tests we are developing here, there.

We won't have to migrate anything, we can just copy the dist from there and use grunt here.

[pythongiant]

describe('Add step', () => {
  test('length is increased', async () => {
    	await page.waitForSelector('.step');
    const previousLength = await page.evaluate(() => document.querySelectorAll('.step').length);
    await page.click('[data-value=\'brightness\']');
    const previousLength1 = await page.evaluate(() => document.querySelectorAll('.step').length);
    expect(previousLength).toBe(1);
    expect(previousLength1).toBe(2);
  }, timeout);
});

Doesnt this check if a new step is added? @keshav234156 i am just a beginner sorry if i am missing something.

[pythongiant]

I would like to work on clear step test, Thanks

[keshav234156]

@pythongiant This piece of code tests that when the radio button is clicked a new step is added and length is increased . In the GCI task, you have test when we select a value from the dropdown and click ADD STEP a new is added and src of the previous step is different from src of the present step. @ataata107 is already working on the Clear step.

[pythongiant]

Thanks for the explaination @keshav234156 i must have skipped @ataata107 comment by mistake. Sorry bout that. Can i work on delete one?

[keshav234156]

@pythongiant It's easy.I will help you here .
with $("[data-value='blur']").click() You would be able to set dropdown value to blur
with $("#add-step-btn").click() you can click ADD STEP button

Now just check that length has increased as done above
and check src of both step is different

[rcya1]

I am currently working on the 4th one (Select a module dropdown having the correct names). I claimed the corresponding task on the GCI dashboard.

[keshav234156]

@pythongiant Are you still stuck? Feel free to ask any doubt related to the task.
@Ryan10145 great!!!

[pythongiant]

@keshav234156 we are talking about this button right?

[keshav234156]

@pythongiant No,This is Add step button of insert Button.We are talking of ADD STEPbutton at the bottom.

[pythongiant]

this one then?

[keshav234156]

@pythongiant Yes

[rcya1]

Due to holiday celebrations and other commitments, I wasn't able to work on this for the last few days like I thought I would be able to. I also won't be able to work on it in the near future, so I am giving up the task and leaving it up for anyone to claim. Sorry for the unfortunate news.

[ataata107]

@pythongiant Are you working on the delete step?

[pythongiant]

Nope @ataata107

[ataata107]

Ok I will start working on it

[jywarren]

Hi all, this is coming along really well and I wanted to thank everyone for your help. This is doing a huge amount to stabilize our project!

[jywarren]

Noting Apply button test is ready in #1579, and maybe we need to update what still needs tests?

[jywarren]

One could be - a test of which steps get refreshed when we modify things. To ensure that only those tests that are "after" a change get refreshed; i think i've seen some unnecessary step reruns in manual testing.

Others we could test for?

[jywarren]

Noting a few that've been observed and we should test for in Jest:

• insert step button tested Writing more UI tests (with guidance) #1000 (comment)
• contrast slider and apply buttons broken in main branch UI #1238 (comment) - via @harshkhandeparkar in contrast slider and apply buttons broken in main branch UI #1238 - If you click on the step collapse btn and if you have multiple steps, clicking on the load-image step collapses something totally different. After some time, all the collapse btns break.

Others we want to copy in here?

[jywarren]

Maybe we should check in on whether some of these tests have been written and could be checked off?