TypeScript core.MockMatchMedia类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@angular/flex-layout/core.MockMatchMedia类的典型用法代码示例。如果您正苦于以下问题：TypeScript MockMatchMedia类的具体用法？TypeScript MockMatchMedia怎么用？TypeScript MockMatchMedia使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。

在下文中一共展示了MockMatchMedia类的2个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: describe

describe('style directive', () => {
  let fixture: ComponentFixture<any>;
  let matchMedia: MockMatchMedia;
  let styler: StyleUtils;
  let createTestComponent = (template) => {
    fixture = makeCreateTestComponent(() => TestStyleComponent)(template);

    inject([MatchMedia, StyleUtils], (_matchMedia: MockMatchMedia, _styler: StyleUtils) => {
      matchMedia = _matchMedia;
      styler = _styler;
    })();
  };

  beforeEach(() => {
    jasmine.addMatchers(customMatchers);

    // Configure testbed to prepare services
    TestBed.configureTestingModule({
      imports: [CommonModule, CoreModule],
      declarations: [TestStyleComponent, LayoutDirective, StyleDirective],
      providers: [MockMatchMediaProvider]
    });
  });

  [
    {mq: 'xs', styleStr: "{'font-size': '15px'}", styleObj: {'font-size': '15px'}},
    {mq: 'sm', styleStr: "{'font-size': '16px'}", styleObj: {'font-size': '16px'}},
    {mq: 'md', styleStr: "{'font-size': '17px'}", styleObj: {'font-size': '17px'}},
    {mq: 'lg', styleStr: "{'font-size': '18px'}", styleObj: {'font-size': '18px'}}
  ]
  .forEach(testData => {
    it(`should apply '${testData.styleStr}' with '${testData.mq}' media query`, () => {
      createTestComponent(`
        <div [ngStyle.${testData.mq}]="${testData.styleStr}">
        </div>
    `);
      matchMedia.activate(testData.mq);
      expectNativeEl(fixture).toHaveStyle(testData.styleObj, styler);
    });
  });

  it('should merge with default inline styles', () => {
    createTestComponent(`
        <div style="color: blue" [ngStyle.xs]="{'font-size.px': '15'}">
        </div>
    `);
    expectNativeEl(fixture).toHaveStyle({color: 'blue'}, styler);
    matchMedia.activate('xs');
    expectNativeEl(fixture).toHaveStyle({color: 'blue', 'font-size': '15px'}, styler);
  });

  it('should support raw-string notations', () => {
    createTestComponent(`
        <div
            style="color: blue"
            ngStyle.xs="font-size: 15px; background-color: #fc2929;" >
        </div>
    `);
    expectNativeEl(fixture).toHaveStyle({color: 'blue'}, styler);
    matchMedia.activate('xs');

    expectNativeEl(fixture).toHaveStyle({
      'color': 'blue',
      'font-size': '15px'
    }, styler);

    // TODO(CaerusKaru): the Domino server impl. does not process colors correctly
    const backgroundColor = styler.lookupStyle(fixture.debugElement.children[0].nativeElement,
      'background-color');
    const hasBackgroundRaw = backgroundColor === '#fc2929';
    const hasBackgroundFormat = backgroundColor === 'rgb(252, 41, 41)';
    const hasBackground = hasBackgroundFormat || hasBackgroundRaw;

    expect(hasBackground).toBe(true);
  });

  it('should allow more than one responsive breakpoint on one element', () => {
    createTestComponent(`
      <div fxLayout
        [ngStyle]="{'font-size': '10px;', 'margin-left' : '13px'}"
        [ngStyle.xs]="{'font-size': '16px'}"
        [ngStyle.md]="{'font-size': '12px'}">
      </div>
    `);

    fixture.detectChanges();

    matchMedia.activate('xs');
    expectNativeEl(fixture).toHaveStyle({'display': 'flex'}, styler);
    expectNativeEl(fixture).toHaveStyle({'font-size': '16px'}, styler);
    expectNativeEl(fixture).not.toHaveStyle({'font-size': '12px'}, styler);

    matchMedia.activate('md');
    expectNativeEl(fixture).not.toHaveStyle({'font-size': '16px'}, styler);
    expectNativeEl(fixture).toHaveStyle({'font-size': '12px'}, styler);

    matchMedia.activate('lg');
    expectNativeEl(fixture).not.toHaveStyle({'font-size': '12px'}, styler);
    expectNativeEl(fixture).not.toHaveStyle({'font-size': '16px'}, styler);
    expectNativeEl(fixture).toHaveStyle({'font-size': '10px'}, styler);  // original is gone
//.........这里部分代码省略.........

开发者ID:marffox，项目名称:flex-layout，代码行数:101，代码来源:style.spec.ts

示例2: it

  it('should allow more than one responsive breakpoint on one element', () => {
    createTestComponent(`
      <div fxLayout
        [ngStyle]="{'font-size': '10px;', 'margin-left' : '13px'}"
        [ngStyle.xs]="{'font-size': '16px'}"
        [ngStyle.md]="{'font-size': '12px'}">
      </div>
    `);

    fixture.detectChanges();

    matchMedia.activate('xs');
    expectNativeEl(fixture).toHaveStyle({'display': 'flex'}, styler);
    expectNativeEl(fixture).toHaveStyle({'font-size': '16px'}, styler);
    expectNativeEl(fixture).not.toHaveStyle({'font-size': '12px'}, styler);

    matchMedia.activate('md');
    expectNativeEl(fixture).not.toHaveStyle({'font-size': '16px'}, styler);
    expectNativeEl(fixture).toHaveStyle({'font-size': '12px'}, styler);

    matchMedia.activate('lg');
    expectNativeEl(fixture).not.toHaveStyle({'font-size': '12px'}, styler);
    expectNativeEl(fixture).not.toHaveStyle({'font-size': '16px'}, styler);
    expectNativeEl(fixture).toHaveStyle({'font-size': '10px'}, styler);  // original is gone
    expectNativeEl(fixture).toHaveStyle({'margin-left': '13px'}, styler);   // portion remains

  });

开发者ID:marffox，项目名称:flex-layout，代码行数:27，代码来源:style.spec.ts

注：本文中的@angular/flex-layout/core.MockMatchMedia类示例整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。