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.