| 154 | // handling side effects on event emission |
| 155 | |
| 156 | @Component({ |
| 157 | template: ` |
| 158 | <input placeholder="username" #username /> |
| 159 | <input type="password" placeholder="password" #password /> |
| 160 | <button |
| 161 | (click)=" |
| 162 | actions.login({ |
| 163 | username: username.value, |
| 164 | password: password.value |
| 165 | }) |
| 166 | " |
| 167 | > |
| 168 | Login |
| 169 | </button> |
| 170 | `, |
| 171 | standalone: true, |
| 172 | }) |
| 173 | class Login2Component { |
| 174 | actions = rxActions<{ login: { username: string; password: string } }>(); |
| 175 | |
| 176 | private loginEffect = this.actions.onLogin( |
| 177 | (credentials$) => |
| 178 | credentials$.pipe( |
| 179 | exhaustMap((credentials) => this.service.login(credentials)) |
| 180 | ), |
| 181 | () => this.doc.defaultView.alert('successfully logged in') |
| 182 | ); |
| 183 | constructor( |
| 184 | private service: AuthService, |
| 185 | @Inject(DOCUMENT) private doc: Document |
| 186 | ) {} |
| 187 | } |
| 188 | |
| 189 | describe('handling side effects on event emission', () => { |
| 190 | let fixture: ComponentFixture<Login2Component>; |