1 | import {
|
2 | expect
|
3 | } from 'chai';
|
4 | import setup from '../src/setup';
|
5 | import connect from '../src/connect';
|
6 | import angular from 'angular';
|
7 | import 'angular-mocks';
|
8 | import sinon from 'sinon';
|
9 |
|
10 | describe('Container Connect', () => {
|
11 | let app;
|
12 | let $compile;
|
13 | let $rootScope;
|
14 |
|
15 | function testDirDef() {
|
16 | return {
|
17 | scope: {},
|
18 | link($scope) {
|
19 | return $scope;
|
20 | },
|
21 | template: '<div>hello {{hello}}</div>',
|
22 | };
|
23 | }
|
24 |
|
25 | function testDirInteractDef() {
|
26 | return {
|
27 | scope: {},
|
28 | link($scope) {
|
29 | return $scope;
|
30 | },
|
31 | template: `
|
32 | <div>
|
33 | hello {{hello}}
|
34 | <button ng-click="changeHello()">change hello</button>
|
35 | </div>
|
36 | `,
|
37 | };
|
38 | }
|
39 |
|
40 | function angularInject(html = '<test-dir/>') {
|
41 | angular.mock.module('test');
|
42 | angular.mock.inject((_$compile_, _$rootScope_) => {
|
43 | $compile = _$compile_;
|
44 | $rootScope = _$rootScope_;
|
45 | });
|
46 | const $nuScope = $rootScope.$new(true);
|
47 | const $element = $compile(html)($nuScope);
|
48 | $nuScope.$digest();
|
49 | return $element;
|
50 | }
|
51 |
|
52 | beforeEach(() => {
|
53 | app = setup(angular.module('test', []));
|
54 | });
|
55 |
|
56 | it('should support injecting attributes into directive scope', () => {
|
57 | const wrappedDirDef = connect({
|
58 | mapStateToScope: () => ({
|
59 | hello: 'world',
|
60 | }),
|
61 | mapDispatchToScope: () => {},
|
62 | }, testDirDef);
|
63 | app.directive('testDir', wrappedDirDef);
|
64 |
|
65 | const $element = angularInject();
|
66 | expect($element.html()).to.contain('hello world');
|
67 | });
|
68 |
|
69 | it('should delegate state change in store', (done) => {
|
70 | const containerDirFactory = connect({
|
71 | mapStateToScope: (getState) => ({
|
72 | hello: getState().hello,
|
73 | }),
|
74 | mapDispatchToScope: () => {},
|
75 | }, testDirDef);
|
76 |
|
77 | app.directive('testDir', containerDirFactory);
|
78 |
|
79 | app.config(['ngStoreProvider', (provider) => {
|
80 | provider.setReducers((state, action) => {
|
81 | switch (action.type) {
|
82 | case 'hello':
|
83 | let nuState = state;
|
84 | nuState.hello = action.hello;
|
85 | return nuState;
|
86 | default:
|
87 | return state;
|
88 | }
|
89 | });
|
90 | }]);
|
91 |
|
92 | let storeExposed;
|
93 | app.run(['ngStore', (store) => {
|
94 | storeExposed = store;
|
95 | }]);
|
96 |
|
97 | const $element = angularInject();
|
98 |
|
99 |
|
100 | storeExposed.dispatch({
|
101 | type: 'hello',
|
102 | hello: 'world delegated',
|
103 | });
|
104 | angular.element($element).scope().$digest();
|
105 |
|
106 | window.setTimeout(() => {
|
107 | expect($element.html()).to.contain('world delegated');
|
108 | done();
|
109 | }, 100);
|
110 | });
|
111 |
|
112 | it('should support dispatch in container directive', () => {
|
113 | const containerDirFactory = connect({
|
114 | mapStateToScope: (getState) => ({
|
115 | hello: getState().hello,
|
116 | }),
|
117 | mapDispatchToScope: (dispatch, getState) => ({
|
118 | changeHello: () => {
|
119 | return dispatch({
|
120 | type: 'hello',
|
121 | hello: 'hello dispatch'
|
122 | });
|
123 | }
|
124 | }),
|
125 | }, testDirInteractDef);
|
126 |
|
127 | app.directive('testDir', containerDirFactory);
|
128 |
|
129 | app.config(['ngStoreProvider', (provider) => {
|
130 | provider.setReducers((state, action) => {
|
131 | switch (action.type) {
|
132 | case 'hello':
|
133 | let nuState = state;
|
134 | nuState.hello = action.hello;
|
135 | return nuState;
|
136 | default:
|
137 | return state;
|
138 | }
|
139 | });
|
140 | }]);
|
141 |
|
142 | const $element = angularInject();
|
143 | expect($element.html()).not.to.contain('hello dispatch');
|
144 |
|
145 | $element.find('button')[0].click();
|
146 | expect($element.html()).to.contain('hello dispatch');
|
147 | });
|
148 |
|
149 | });
|