Writing more UI tests (with guidance) #1000

jywarren · 2019-04-08T21:13:38Z

We need more UI tests to protect and stabilize the UI behaviors of the demo, so that we know when refactors and new features break things. This will build overall stability in the system and let us do more advanced work without chasing bugs. Bugs are natural! No worries! But we can catch them before they get published using more tests.

Our UI tests can be found here: https://github.com/publiclab/image-sequencer/tree/main/test/ui/spec

Instead of testing core functions with unit tests, they set up an HTML environment and simulate someone actually using the buttons and UI.

So in one of these test files, or a new one, we should be able to begin interacting with a full Sequencer UI, by selecting things in the Add Modules select, clicking buttons with $('.btn .uniqueClass').trigger('click'); (or something like that) and then using assertions to test that things really happened, something like this:

    expect($('.step').length).toBe(10); // number of steps shown has changed

This way, we can have more confidence in the UI not breaking. We'd love help with this! I know @harshithpabbati asked a bit about how this might work. Want to try it out?

Once we have one simple test like this, we can use it as a model to add more like it, and get to higher test coverage of our UI code!

The text was updated successfully, but these errors were encountered:

jywarren · 2019-04-08T21:18:12Z

For example, we should be able to input settings using something like $('.step .step-2 input.brightness').val(24) --

But first, we'll need to add more unique CSS classnames so that we can make calls like that in jQuery. Right now, they're too generic:

<div class="panel-body cal collapse in">
            <div class="row step">
                <div class="col-md-4 details">
                  <h3><span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span></h3>
                  <div class="cal collapse in"><p><i>Change the contrast of the image by given value</i></p></div>
                <div class="row" name="contrast">
                    <div class="det cal collapse in">
                           <label for="contrast">contrast for the new image, typically -100 to 100</label>
                           <input class="form-control target" type="range" name="contrast" value="70" placeholder="" min="-100" max="100" step="1">

vibhorgupta-gh · 2019-04-08T23:29:00Z

I'd like to take this up. This would be kind of a quest, adding UI tests as we go deeper into implementing more features for IS. Would like to start with some basic tests

jywarren · 2019-04-08T23:46:19Z

:-) great! And love the idea of a test-quest! You might like this fun project i once did: http://pxlqst.com/test (https://github.com/jywarren/pxlqst)

…

On Mon, Apr 8, 2019 at 7:29 PM Vibhor Gupta ***@***.***> wrote: I'd like to take this up. This would be kind of a quest, adding UI tests as we go deeper into implementing more features for IS. Would like to start with some basic tests — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1000 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ-Jioj6j7ws-PraIvb1iYK8g4AgLks5ve9C8gaJpZM4cjH8N> .

vibhorgupta-gh · 2019-04-08T23:50:12Z

Nice! I'll get on with improving some tests I already wrote while setting up the UI testing harness.
Rendering of buttons and steps should be a nice starting point.

Also, apologies for shamelessly plugging in my proposal, but trying to make it as comprehensive as possible. What are the chances I'll get reviewed, should I submit one in a couple of hours? It's early morning here, trying to churn it out as fast as I can. Thanks!

@jywarren

jywarren · 2019-04-09T00:43:29Z

It's very close to the deadline - we will read it for sure, but not sure if it'll be in time to file a revision! But thank you!!!

…

On Mon, Apr 8, 2019 at 7:50 PM Vibhor Gupta ***@***.***> wrote: Nice! I'll get on with improving some tests I already wrote while setting up the UI testing harness. Rendering of buttons and steps should be a nice starting point. Also, apologies for shamelessly plugging in my proposal, but trying to make it as comprehensive as possible. What are the chances I'll get reviewed, should I submit one in a couple of hours? Thanks! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1000 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ-Po1uL4LEhfllLZklngs5YuBRbhks5ve9W0gaJpZM4cjH8N> .

harshkhandeparkar · 2019-04-09T05:27:45Z

Hi. Can someone help with the testing of the $step method? See #833 for reference

@publiclab/is-reviewers @jywarren

Divy123 · 2019-04-09T09:57:07Z

Hi Harsh! I want to work on UI testing and would love to look into!!

vibhorgupta-gh · 2019-04-09T16:05:31Z

@jywarren again, apologies for the plug, I sent over the commentable link to my proposal to you on Gitter. My proposal on publiclab.org says I'll be notified via mail once my proposal gets published. It is way too late for reviews, but the link is on Gitter for your reference. Thanks!

rishabhshuklax · 2019-08-30T16:56:05Z

I would love to work on this issue

harshkhandeparkar · 2019-08-30T16:56:43Z

sure go ahead

Divy123 · 2019-08-30T16:57:41Z

Yes please go ahead! I would love to collaborate on this.

…

On Fri 30 Aug, 2019, 10:26 PM Rishabh Shukla, ***@***.***> wrote: I would love to work on this issue — You are receiving this because you are on a team that was mentioned. Reply to this email directly, view it on GitHub <#1000?email_source=notifications&email_token=AHOHJL6RFD4HPNUUM7BXUWDQHFGKPA5CNFSM4HEMP4G2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5SGOIA#issuecomment-526673696>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHOHJL7KO2SQCM4QJ7YDG3TQHFGKPANCNFSM4HEMP4GQ> .

jywarren · 2019-08-30T17:28:30Z

Much ❤️ to you all!!!

Shall we make a checklist of UI actions that could be tested for?

clicking Add Step and confirming a new box appears, and a new image appears -

image-sequencer/test/ui-2/test/clear_and_delete_step.test.js

Lines 13 to 56 in b7eb9cf

    
           test('Resize Module is added', async () => { 
        
             await page.waitForSelector('.step'); 
        
             const Length = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             await page.click('[data-value=\'resize\']'); 
        
             const Length1 = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             expect(Length).toBe(1); 
        
             expect(Length1).toBe(2); 
        
           }, timeout); 
        
           test('Brightness Module is added', async () => { 
        
             await page.click('[data-value=\'brightness\']'); 
        
             const Length2 = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             expect(Length2).toBe(3); 
        
           }, timeout); 
        
           test('Contrast Module is added', async () => { 
        
             await page.click('[data-value=\'contrast\']'); 
        
             const Length3 = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             expect(Length3).toBe(4); 
        
           }, timeout); 
        
           test('Saturation Module is added', async () => { 
        
             await page.click('[data-value=\'saturation\']'); 
        
             const Length4 = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             expect(Length4).toBe(5); 
        
           }, timeout); 
        
           test('Rotate Module is added', async () => { 
        
             await page.click('[data-value=\'rotate\']'); 
        
             const Length5 = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             expect(Length5).toBe(6); 
        
           }, timeout); 
        
           test('Crop Module is added', async () => { 
        
             await page.click('[data-value=\'crop\']'); 
        
             const Length6 = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             expect(Length6).toBe(7); 
        
           }, timeout);

Add Step for various modules -

image-sequencer/test/ui-2/test/clear_and_delete_step.test.js

Lines 13 to 56 in b7eb9cf

    
           test('Resize Module is added', async () => { 
        
             await page.waitForSelector('.step'); 
        
             const Length = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             await page.click('[data-value=\'resize\']'); 
        
             const Length1 = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             expect(Length).toBe(1); 
        
             expect(Length1).toBe(2); 
        
           }, timeout); 
        
           test('Brightness Module is added', async () => { 
        
             await page.click('[data-value=\'brightness\']'); 
        
             const Length2 = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             expect(Length2).toBe(3); 
        
           }, timeout); 
        
           test('Contrast Module is added', async () => { 
        
             await page.click('[data-value=\'contrast\']'); 
        
             const Length3 = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             expect(Length3).toBe(4); 
        
           }, timeout); 
        
           test('Saturation Module is added', async () => { 
        
             await page.click('[data-value=\'saturation\']'); 
        
             const Length4 = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             expect(Length4).toBe(5); 
        
           }, timeout); 
        
           test('Rotate Module is added', async () => { 
        
             await page.click('[data-value=\'rotate\']'); 
        
             const Length5 = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             expect(Length5).toBe(6); 
        
           }, timeout); 
        
           test('Crop Module is added', async () => { 
        
             await page.click('[data-value=\'crop\']'); 
        
             const Length6 = await page.evaluate(() => document.querySelectorAll('.step').length); 
        
             expect(Length6).toBe(7); 
        
           }, timeout);

Clicking Delete Step removes the image https://github.com/publiclab/image-sequencer/blob/main/test/ui-2/test/clear_and_delete_step.test.js#L58
Clicking Insert Step adds a new box, and modifies the image

These could be largely independent from the UI implementation as long as the add step, delete step, insert step elements have standard classnames!

(update: checked boxes above)

jywarren · 2019-08-30T17:29:41Z

Also updated location of existing UI tests! https://github.com/publiclab/image-sequencer/tree/main/test/ui/spec

jywarren · 2019-08-30T17:32:11Z

Here is the most likely section for the listed tests above!

image-sequencer/test/ui/spec/defaultHtmlSequencerUi.spec.js

Lines 27 to 41 in 3741d67

    
           it('select step ui', function() { 
        
             expect(defaultHtmlSequencerUi.selectNewStepUi).toHaveBeenCalled(); 
        
           }); 
        
           it('add step ui', function() { 
        
             expect(defaultHtmlSequencerUi.addStepUi).toHaveBeenCalled(); 
        
           }); 
        
           it('remove step ui', function() { 
        
             expect(defaultHtmlSequencerUi.removeStepUi).toHaveBeenCalled(); 
        
           }); 
        
           it('import options from url', function() { 
        
             expect(defaultHtmlSequencerUi.importStepsFromUrlHash).toHaveBeenCalled(); 
        
           });

Note that we are not yet testing click events and such. I think the tests are just really minimal stubs, confirming that the UI was set up, but not testing that it works, is that right?

Also:

steps included via URL hash are correctly parsed and added (many variants of this, see

image-sequencer/test/ui/spec/urlHash.spec.js

Line 1 in 257113a

describe('URL manipulation methods', function() {

)

Divy123 · 2019-09-01T12:42:05Z

As I discussed with Pranshu, he suggested that testing with Jest along with puppeteer is a good way to proceed here.
What do you think @jywarren , @blurry-x-face ?

jywarren · 2019-09-01T20:02:39Z

Hi! I'm not against a weighing of pros/cons to switching test libraries, but is there a problem with the current test setup that you're interested in addressing by switching?

re #1000

jywarren · 2019-09-01T20:11:33Z

Gaah! I accidentally committed to main branch here, i'm sorry:

fb452f7

However, you can see a very clear UI test that is only 3 lines, for the quick selector! cc @harshithpabbati @Divy123 @rexagod @blurry-x-face

jywarren · 2019-09-01T20:12:03Z

I apologize for the mistake, i'll revert it as soon as it fails, but will open it in a new PR.

jywarren · 2019-09-01T20:38:51Z

Reverted, now working on it at: #1242

To address #1238, which Harsh identified, it would be something like:

  it('allows changing brightness value using input and Apply button', function() {
    $("[data-value='brightness']").click();
    var brightnessImage1 = $('.step:last img')[0].src;
    $('.step:last input.form-control').val('25%'); // change the value
    $('.step:last .btn-save').click(); // apply the change
    var brightnessImage2 = $('.step:last img')[0].src;
    expect(brightnessImage1).not.toEqual(brightnessImage2);
  });

jywarren · 2019-09-01T20:40:21Z

Does this makes sense to you all? cc @publiclab/is-reviewers Thanks!

rishabhshuklax · 2019-09-02T20:37:14Z

Hi! I'm not against a weighing of pros/cons to switching test libraries, but is there a problem with the current test setup that you're interested in addressing by switching?

Actually jest is a more maintained testing library but I will look through jasmine.

Thanks @jywarren
cc: @Divy123

vaibhavmatta · 2019-10-15T15:05:36Z

@jywarren I am claiming it now. Let us work on it together.! The UI needs to be stable. Will make a PR for this super soon.
Thanks

re #1000

jywarren · 2020-07-12T20:01:44Z

Closing this in favor of #1369 now!

jywarren added help wanted testing UI labels Apr 8, 2019

jywarren added this to the Core improvements milestone May 25, 2019

jywarren mentioned this issue Sep 1, 2019

contrast slider and apply buttons broken in main branch UI #1238

Closed

jywarren added a commit that referenced this issue Sep 1, 2019

add UI test for quick selector add step

fb452f7

re #1000

jywarren mentioned this issue Sep 1, 2019

Basic UI tests -- initial one for quick selector add step #1242

Closed

jywarren added a commit that referenced this issue Dec 16, 2019

add UI test for quick selector add step

801d153

re #1000

keshav234156 mentioned this issue Dec 18, 2019

Jest testing & test for add step #1366

Merged

5 tasks

This was referenced Jul 12, 2020

Bump to v3.6.0 for new npm release #1695

Merged

Writing more Jest UI tests and making UI more stable #1369

Open

jywarren closed this as completed Jul 12, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Writing more UI tests (with guidance) #1000

Writing more UI tests (with guidance) #1000

jywarren commented Apr 8, 2019 •

edited

Loading

jywarren commented Apr 8, 2019

vibhorgupta-gh commented Apr 8, 2019

jywarren commented Apr 8, 2019 via email

vibhorgupta-gh commented Apr 8, 2019 •

edited

Loading

jywarren commented Apr 9, 2019 via email

harshkhandeparkar commented Apr 9, 2019

Divy123 commented Apr 9, 2019

vibhorgupta-gh commented Apr 9, 2019

rishabhshuklax commented Aug 30, 2019

harshkhandeparkar commented Aug 30, 2019

Divy123 commented Aug 30, 2019 via email

jywarren commented Aug 30, 2019 •

edited

Loading

jywarren commented Aug 30, 2019

jywarren commented Aug 30, 2019

Divy123 commented Sep 1, 2019

jywarren commented Sep 1, 2019

jywarren commented Sep 1, 2019

jywarren commented Sep 1, 2019

jywarren commented Sep 1, 2019

jywarren commented Sep 1, 2019

rishabhshuklax commented Sep 2, 2019

vaibhavmatta commented Oct 15, 2019

jywarren commented Jul 12, 2020

Writing more UI tests (with guidance) #1000

Writing more UI tests (with guidance) #1000

Comments

jywarren commented Apr 8, 2019 • edited Loading

jywarren commented Apr 8, 2019

vibhorgupta-gh commented Apr 8, 2019

jywarren commented Apr 8, 2019 via email

vibhorgupta-gh commented Apr 8, 2019 • edited Loading

jywarren commented Apr 9, 2019 via email

harshkhandeparkar commented Apr 9, 2019

Divy123 commented Apr 9, 2019

vibhorgupta-gh commented Apr 9, 2019

rishabhshuklax commented Aug 30, 2019

harshkhandeparkar commented Aug 30, 2019

Divy123 commented Aug 30, 2019 via email

jywarren commented Aug 30, 2019 • edited Loading

jywarren commented Aug 30, 2019

jywarren commented Aug 30, 2019

Divy123 commented Sep 1, 2019

jywarren commented Sep 1, 2019

jywarren commented Sep 1, 2019

jywarren commented Sep 1, 2019

jywarren commented Sep 1, 2019

jywarren commented Sep 1, 2019

rishabhshuklax commented Sep 2, 2019

vaibhavmatta commented Oct 15, 2019

jywarren commented Jul 12, 2020

jywarren commented Apr 8, 2019 •

edited

Loading

vibhorgupta-gh commented Apr 8, 2019 •

edited

Loading

jywarren commented Aug 30, 2019 •

edited

Loading