gistfile1.txt

import { Component } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { TestBed } from '@angular/core/testing';
import { mySampleColorDirective } from './my-sample-color-directive';
import * as fromSomething from '../../../shared/reducers/something';
import * as MyActions from '../../../something/actions/';

@Component({
  template: `
    <p [mySampleColorDirective]="{ color: 'blue' }">Color me blue</p>
  `,
})
class TestComponent { }

describe('TestComponent', () => {
  beforeEach((() => {
    TestBed.configureTestingModule({
      declarations: [mySampleColorDirective, TestComponent],
      imports: [
        StoreModule.forRoot({
          ...myReducer
        })
      ],
    }).compileComponents();
  }));

  it('should color the blue paragraph', async () => {
    const fixture = TestBed.createComponent(TestComponent);
    const compiled = fixture.debugElement.nativeElement;
    
    const data = {color: blue};
    const { initialState } = fromSomething;
    const action = new MyActions.SaveData(data);
    const newState = fromRoot.reducers.something(initialState, action);
    
    console.log(newState.color); //this logs out correctly, which is the 'blue'
    
    expect(newState.color).toEqual('blue'); //This works
    
    fixture.detectChanges();

    //The directive makes use of a selector, and the selector doesn't have the updated state
    const div = compiled.querySelector('div');
    await fixture.whenStable();
    fixture.detectChanges();

    expect(div.getAttribute('class')).toEqual('blue'); //This doesn't work
  });
});

-----------------------------------------------------------------------------------------------
Below is what the Selector looks like
-----------------------------------------------------------------------------------------------

import { createFeatureSelector, createSelector } from '@ngrx/store';
import * as fromSomething from '../reducers/something';

export const getSomethingState = createFeatureSelector<fromSomething.State>('something');

export const getColor = createSelector(
  getSomethingState,
  (state): { [key: string]: string } => {
    console.log({state}, 'in selector'); //This shows the initial state, ignores the action that was dispatched in d spec file
    return state.color
  }
  );

Please ignore the inputs, I replaced them with dummy data, everything is correct in the real code. And the first two test are working nicely. The only problem is getting the Selector to react to the updated state.

My assumptions is that there is some sort of lifecycle for the action that I can listen to and run the below code only after the action is fully dispatched and the state is updated.

Below code:

const div = compiled.querySelector('div');
await fixture.whenStable();
fixture.detectChanges();

expect(div.getAttribute('class')).toEqual('blue'); //This doesn't work