TypeScript store.Store類代碼示例

describe('Filter', () => {
  let store: Store;

  beforeEach(async(() => {
    TestBed.configureTestingModule({ imports: [NgxsModule.forRoot([FilterState])] }).compileComponents();
    store = TestBed.get(Store);
  }));

  it('it should set location', () => {
    store.dispatch(new SetLocation({ latitude: 10, longitude: 10 }));
    store.selectOnce(state => state.filter.location).subscribe(location => {
      expect(location.latitude).toBe(10);
      expect(location.longitude).toBe(10);
    });
  });

  it('it should set distance', () => {
    store.dispatch(new SetDistance(100));
    store.selectOnce(state => state.filter.distance).subscribe(distance => {
      expect(distance).toBe(100);
    });
  });

  it('it should set rating', () => {
    store.dispatch(new SetRating(5));
    store.selectOnce(state => state.filter.rating).subscribe(rating => {
      expect(rating).toBe(5);
    });
  });

  it('it should set reviews', () => {
    store.dispatch(new SetReviews(50));
    store.selectOnce(state => state.filter.reviews).subscribe(reviews => {
      expect(reviews).toBe(50);
    });
  });
});

describe('panelComponent', () => {
  let component: PanelComponent;
  let fixture: ComponentFixture<PanelComponent>;
  const FakeAuthService = {
    authState: of({ uid: 1 })
  } as any;

  const fakeToolsService = jasmine.createSpyObj('ToolsService', [
    'init',
    'joinRoom',
    'sendCommand'
  ]);
  const fakeCaptionService = jasmine.createSpyObj('fakeCaptionService', [
    'initFireStore',
    'getCaptionList',
    'getAreaPosition',
    'getCustomCSS'
  ]);
  let store: Store;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [PanelComponent],
      imports: [
        HttpClientTestingModule,
        NgxsModule.forRoot([EnvironmentState, CaptionItemsState])
      ],
      providers: [
        { provide: AuthService, useValue: FakeAuthService },
        { provide: ToolsService, useValue: fakeToolsService },
        { provide: CaptionService, useValue: fakeCaptionService }
      ]
    }).compileComponents();
    store = TestBed.get(Store);
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(PanelComponent);
    component = fixture.componentInstance;
    fakeCaptionService.getCaptionList.and.returnValue(of([]));
    fakeCaptionService.getAreaPosition.and.returnValue(of([]));
    fakeCaptionService.getCustomCSS.and.returnValue(of([]));
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should send a message', () => {
    spyOn(component, 'buildCommand').and.returnValue({});
    component.sendMessage('', '');
    expect(fakeToolsService.sendCommand).toHaveBeenCalled();
  });

  it('should build a command model', () => {
    component.areaPosition = {
      startX: 0,
      startY: 0,
      maxHeight: 0,
      maxWidth: 0
    };
    spyOn(component, 'getRandomNumber').and.callFake(
      (startNumber, maxNumber) => startNumber
    );
    const inputValue = 'test';
    const outputValue = {
      command: 'message',
      message: inputValue,
      className: `fz1 `,
      style: {
        left: `0px`,
        top: `0px`,
        transform: `rotate(-45deg)`
      }
    };
    expect(component.buildCommand(inputValue, '')).toEqual(outputValue);
  });

  it('should return number', () => {
    spyOn(Math, 'random').and.returnValue(0.5);
    expect(component.getRandomNumber(1, 10)).toBe(6);
  });

  it('should dispatch AddCaption', () => {
    const item = {};
    spyOn(store, 'dispatch');
    component.addCaption(item);
    expect(store.dispatch).toHaveBeenCalledWith(new AddCaption(item));
  });

  it('should dispatch saveCaption', () => {
    const item = {};
    spyOn(store, 'dispatch');
    component.saveCaption(item);
    expect(store.dispatch).toHaveBeenCalledWith(new UpdateCaption(item));
  });

  it('should dispatch removeCaption', () => {
    const item = { id: 1 };
//.........這裏部分代碼省略.........

  ngxsOnInit({ dispatch }: StateContext<SiteSettingsConfigStateModel>) {
    concat(
      this.appStateService.getInitialState('', 'siteSettingsConfig').pipe(take(1)),
      this.actions$.pipe(ofActionSuccessful(UserLoginAction), switchMap(() => {
        return this.appStateService.getInitialState('', 'siteSettingsConfig').pipe(take(1));
      }))
    )
    .subscribe({
      next: (siteSettingsConfig: SiteSettingsConfigResponse) => {
        dispatch(new InitSiteSettingsConfigAction(siteSettingsConfig));
      },
      error: (error) => console.error(error)
    });

    // Listen for language change
    this.store.select(SiteSettingsState.getCurrentSiteLanguage).pipe(
      pairwise(),
      filter(([prevLang, lang]) => !!prevLang && !!lang && prevLang !== lang),
      switchMap(([, language]) => this.appStateService.getLocaleSettings(language, 'siteSettingsConfig').pipe(take(1)))
    ).subscribe((siteSettingsConfig: SiteSettingsConfigResponse) => {
      dispatch(new InitSiteSettingsConfigAction(siteSettingsConfig));
    });
  }

  ngOnInit() {
    this.productGroups$ = combineLatest(
      this.store.select(SiteSectionsState.getCurrentSiteShopSections),
      this.store.select(SectionTagsState.getCurrentSiteTags),
      this.store.select(SectionEntriesState.getCurrentSiteEntries),
      this.store.select(ShopProductsState.getCurrentSiteProducts)
    ).pipe(
      map(([sections, tags, entries, products]: [SiteSectionStateModel[], SectionTagsInterface[], SectionEntry[], any]) => {
        let leftOverProducts = [...products];

        // 1. Add entry data to products
        let productData: any[] = entries.reduce((_productData, entry) => {

          leftOverProducts = leftOverProducts.reduce((_prodRef, product, idx) => {
            const attributes = entry.content && entry.content.cartAttributes ? entry.content.cartAttributes.split(/,\s*/i) : [];
            const name = entry.content && entry.content.cartTitle || '';

            if (product.uniqid === entry.uniqid) {

              if ((attributes.length === 0 && product.name === name) ||
                  attributes.map(attribute => name + (name.length ? ' ' : '') + attribute).indexOf(product.name) > -1) {
                _productData.push({
                  ...product,
                  entry: entry  // make this more precise, we don't need all the properties of entry here
                });
              } else {
                // Ignore any products with this ID and not matching attributes, because they're "deleted"
              }

            } else {
              _prodRef.push(product);
            }

            return _prodRef;
          }, []);

          return _productData;
        }, []);

        // 2. Group products according to entry location in Sections and Tags
        const groups = sections.reduce((_groups, section) => {
          let sectionProducts, sectionTagProducts;

          [sectionProducts, sectionTagProducts, productData] = productData
            .reduce(([_groupProducts, _sectionTagProducts, leftOverProductData], product) => {
              if (product.entry.sectionName === section.name) {

                if ((!product.entry.tags || product.entry.tags.tag.length === 0)) {
                  _groupProducts.push(product);
                } else {
                  _sectionTagProducts.push(product);
                }

              } else {
                leftOverProductData.push(product);
              }

              return [_groupProducts, _sectionTagProducts, leftOverProductData];
            }, [[], [], []]);

          // Add section as entry group
          const sectionTags = tags.find(tag => tag['@attributes'].name === section.name && tag.tag.length > 0);
          _groups.push({
            isTag: false,
            name: section.name,
            title: section.title,
            products: sectionProducts,
            hasProducts: sectionTags && sectionTagProducts.length > 0
          });

          if (sectionTags) {
            const tagGroups = [...sectionTags.tag]
              .sort((tagA, tagB) => tagA.order - tagB.order)
              .map(tag => {
                const tagProducts = sectionTagProducts.filter((product) => {
                  return product.entry.tags.tag.some(entryTag => entryTag === tag['@value']);
                });

                return {
                  isTag: true,
                  name: tag['@attributes'].name,
                  title: tag['@value'],
                  products: tagProducts,
                  hasProducts: tagProducts.length > 0
                };
              });

              return [..._groups, ...tagGroups];
          }

          return _groups;
        }, []);

        // if (leftOverProducts.length > 0 && isDevMode()) {
        //   groups.push({
        //     title: 'No section',
        //     products: leftOverProducts
        //   });
        // }

//.........這裏部分代碼省略.........

 updateProducts(field: string, value, id: string) {
   this.store.dispatch(new UpdateShopProductAction(id, {field, value}));
 }

 @Action(UnauthorizedAccessAction)
 unauthorized(ctx: StateContext<SessionStateModel>, {payload}: UnauthorizedAccessAction) {
     this.store.dispatch([new OpenLoginDialogAction(payload)]);
 }

 ngxsOnInit(ctx: StateContext<SessionStateModel>) {
     this.store.dispatch(new CheckCredentialsAction());
 }

 openSidenav() {
   this.store.dispatch(new layout.OpenSidenav());
 }

 updateComponentFocus(isFocused) {
   this.store.dispatch(new UpdateInputFocus(isFocused));
 }

 public ngOnInit() {
   this.store.dispatch(new CounterStateChangeAction());
 }