Изменение переменной компонента в угловом тесте влияет на другие тесты

Question

В моем тесте я импортирую файл JSON, чтобы установить фиктивное значение (которое обычно передается моему компоненту как @Input()).

У меня сложилось впечатление, что угловые тесты будут сбрасывать переменные компонента перед каждым тестом, если используется beforeEach; поэтому изменение значения переменной компонента внутри одного теста не должно влиять на другие тесты в том же тестовом стенде.

Однако я обнаружил, что при изменении значения переменной в тесте оно не сбрасывается beforeEach до запуска следующего теста.

mock_board.json

{
   "board": {
     "type": "Archived"
   }  
}

component.spec.ts

import * as MockBoard from '../mock_board.json';
...

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture(MyComponent);

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ...
      ],
      declarations: [
        MyComponent
      ],
      providers: [
       ...
      ],
      schemas: [ NO_ERRORS_SCHEMA ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    component.board = MockBoard['board'];
    fixture.detectChanges();
  });

  it('should display title if board type is `Progress`', () => {
    component.board.type = 'Progress';

    ... // expectation here
  });

  it('should change the UI if board data changes', () => {
    console.log(component.board.type); // expected 'Archived' but returns 'Progress'
  });

  ...

Как я могу гарантировать, что переменные компонентов всегда сбрасываются обратно к исходным перед каждым тестом?

---

EDIT

Мне удалось воспроизвести ошибку в StackBlitz здесь .

Во втором тесте установите значение следующим образом:

component.board.type = 'Progress';

приводит к сбою следующего теста, тогда как весь объект переписывается так:

component.board = { id: 1, type: 'Progress' };

заставляет пройти следующий тест.

Есть идеи?!

Answer 1

Из вашего StackBlitz (и многих операторов журнала!) Кажется, что при изменении значения в component.board оно также изменяло значение в data. Это имеет смысл, поскольку присваивание в методе beforeEach (component.board = data;) будет просто присваивать component.board тот же указатель, что и data. Тогда изменение одного изменит другое.

Чтобы обойти это, вы должны, как отмечают некоторые комментарии, клонировать объект data, а не назначать его напрямую. Вы можете сделать это, используя JSON.parse(JSON.stringify(MockBoard['board'])), как указано Jelle , или использовать что-то вроде метода clone Лодаша (cloneDeep для более сложных объектов).

Вот обновленный StackBlitz , который можно использовать для сравнения с исходным кодом.