|
@@ -1237,7 +1237,7 @@ Add them in a "spec" subfolder relative to the file under test and the filename
|
|
|
|
|
|
|
|
someFile.js <- File under test
|
|
someFile.js <- File under test
|
|
|
├── spec/
|
|
├── spec/
|
|
|
- │ ├── someFileSpec.js <- File containing tests
|
|
|
|
|
|
|
+ │ ├── someFileSpec.js <- File containing tests
|
|
|
|
|
|
|
|
Run all the tests once with:
|
|
Run all the tests once with:
|
|
|
|
|
|
|
@@ -1249,9 +1249,11 @@ Optionally to use Karma and headless chrome for the tests you can run
|
|
|
|
|
|
|
|
See ```desktop/core/src/desktop/js/spec/karma.config.js``` for various options
|
|
See ```desktop/core/src/desktop/js/spec/karma.config.js``` for various options
|
|
|
|
|
|
|
|
-#### Testing KO components
|
|
|
|
|
|
|
+#### Testing KO components and bindings
|
|
|
|
|
|
|
|
-jasmineSetup provides utilities to test knockout components using jsdom. A simple example:
|
|
|
|
|
|
|
+jasmineSetup provides utilities to test knockout components and bindings using jsdom.
|
|
|
|
|
+
|
|
|
|
|
+An example of component test:
|
|
|
|
|
|
|
|
```
|
|
```
|
|
|
import { koSetup } from 'spec/jasmineSetup';
|
|
import { koSetup } from 'spec/jasmineSetup';
|
|
@@ -1261,26 +1263,51 @@ describe('ko.someComponent.js', () => {
|
|
|
|
|
|
|
|
it('should render component', async () => {
|
|
it('should render component', async () => {
|
|
|
const someParams = {}
|
|
const someParams = {}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
const wrapper = await setup.renderComponent('someComponent', someParams);
|
|
const wrapper = await setup.renderComponent('someComponent', someParams);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
expect(wrapper.querySelector('[data-test="'some-test-id'"]')).toBeTruthy();
|
|
expect(wrapper.querySelector('[data-test="'some-test-id'"]')).toBeTruthy();
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
it('should change after observable update', async () => {
|
|
it('should change after observable update', async () => {
|
|
|
const someParams = { visible: ko.observable(false) };
|
|
const someParams = { visible: ko.observable(false) };
|
|
|
const wrapper = await setup.renderComponent('someComponent', someParams);
|
|
const wrapper = await setup.renderComponent('someComponent', someParams);
|
|
|
- expect(wrapper.querySelector('[data-test="some-test-id"]').style['display']).toEqual('none');
|
|
|
|
|
-
|
|
|
|
|
- someParams.visible(true);
|
|
|
|
|
|
|
+ expect(wrapper.querySelector('[data-test="some-test-id"]').style['display']).toEqual('none');
|
|
|
|
|
+
|
|
|
|
|
+ someParams.visible(true); // Or trigger some event on an elmement etc.
|
|
|
await setup.waitForKoUpdate(); // Waits for re-render
|
|
await setup.waitForKoUpdate(); // Waits for re-render
|
|
|
|
|
|
|
|
expect(wrapper.querySelector('[data-test="some-test-id"]').style['display']).toEqual('inline-block');
|
|
expect(wrapper.querySelector('[data-test="some-test-id"]').style['display']).toEqual('inline-block');
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+An example of a binding test:
|
|
|
|
|
|
|
|
|
|
+```
|
|
|
|
|
+import ko from 'knockout';
|
|
|
|
|
+import { koSetup } from 'spec/jasmineSetup';
|
|
|
|
|
+import '../ko.myBinding';
|
|
|
|
|
|
|
|
-```
|
|
|
|
|
|
|
+describe('ko.myBinding.js', () => {
|
|
|
|
|
+ const setup = koSetup();
|
|
|
|
|
+
|
|
|
|
|
+ it('should toggle observable', async () => {
|
|
|
|
|
+ const viewModel = { testObservable: ko.observable(false) };
|
|
|
|
|
+ const wrapper = await setup.renderKo(
|
|
|
|
|
+ '<div class="click-test" data-bind="myBinding: testObservable"></div>',
|
|
|
|
|
+ viewModel
|
|
|
|
|
+ );
|
|
|
|
|
+
|
|
|
|
|
+ expect(viewModel.testObservable()).toBeFalsy();
|
|
|
|
|
+
|
|
|
|
|
+ wrapper.querySelector('.click-test').click();
|
|
|
|
|
+ await setup.waitForKoUpdate();
|
|
|
|
|
+
|
|
|
|
|
+ expect(viewModel.testObservable()).toBeTruthy();
|
|
|
|
|
+ });
|
|
|
|
|
+});
|
|
|
|
|
+```
|
|
|
|
|
|
|
|
|
|
|
|
|
### Special environment variables
|
|
### Special environment variables
|