aurelia / testing

Simplifies the testing of UI components by providing an elegant, fluent interface for arranging test setups along with a number of runtime debug/test helpers.
MIT License
40 stars 27 forks source link

Tests using ComponentTester.manuallyHandleLifecycle() can cause unrelated tests to fail #95

Open that-crazy-fox opened 4 years ago

that-crazy-fox commented 4 years ago

I'm submitting a bug report

Please tell us about your environment:

Current behavior: When using ComponentTester with .manuallyHandleLifecycle() (as shown in the documentation), if the test does not call .bind() or .attached(), it can cause failures for subsequent tests. This seems to be caused by ComponentTester's _prepareLifecycle() method, which alters the View prototype's .bind and .attached properties. If the .bind and .attached methods of ComponentTester are not called, View.prototype will never be restored to its original behavior, causing subsequent tests to fail if they depend on the .bind and .attached methods of View.

Steps to reproduce

  1. Create my-component.js and my-component.html

    //my-component.js
    export class MyComponentCustomElement {
    constructor() {
        this.myProperty = "created";
    }
    
    bind() {
        this.myProperty = "bound";
    }
    
    attached() {
        this.myProperty = "attached";
    }
    }
    <!--my-component.html-->
    <template>
    </template>
  2. Create a test suite for my-component (I'm using Jasmine here)
    
    //my-component.spec.js
    import { StageComponent } from 'aurelia-testing';
    import { bootstrap } from 'aurelia-bootstrapper';

describe('My Component', () => { let componentTester;

beforeEach(() => {
    componentTester = StageComponent
        .withResources('my-component')
        .inView('<my-component></my-component>')
        .boundTo({});
});

afterEach(() => {
    componentTester.dispose();
});

it('should manually handle partial lifecycles', done => {
    componentTester.manuallyHandleLifecycle().create(bootstrap)
        .then(() => {
            expect(componentTester.viewModel.myProperty).toBe('created');
        })
        .then(() => componentTester.bind())
        .then(() => {
            expect(componentTester.viewModel.myProperty).toBe('bound');
        })
        .then(done)
        .catch(reason => {
            fail(reason);
            done();
        });
});

it('should manually handle full lifecycles', done => {
    componentTester.manuallyHandleLifecycle().create(bootstrap)
        .then(() => componentTester.bind())
        .then(() => componentTester.attached())
        .then(() => {
            expect(componentTester.viewModel.myProperty).toBe("attached");
        })
        .then(done)
        .catch(reason => {
            fail(reason);
            done();
        });
});

});


3. Run the tests. The first test will pass and the second test will fail. If the test runner executes tests in a random order, and the second test is executed first, both tests will pass.

This behavior is also observed when a lifecycle Promise is rejected, as this causes the rest of the Promise chain to be skipped.

**Expected/desired behavior:**
<!--
If the current behavior is a bug, please provide the steps to reproduce and, if possible, a minimal demo of the
problem along with a runnable gist, if possible.
To create a runnable gist, go to https://gist.run/?id=7542e061bc940cde506b&sha=6821c521a6c7bae6f59a36fb8628ecd1032b2d10
Then click "Fork to Public Gist".
Create your gist, then finally click "Update Gist." Include a link to the gist.run below.
-->
Both tests should pass, regardless of their execution order. When ComponentTester.dispose() is called, I expect all changes it made to the environment to be reset. I expect View objects to have their original function. Additionally, when a test fails due to a rejected Promise, I expect other tests to be unaffected.