比较文本

查找两个文本文件之间的差异

实时编辑器

隐藏空白更改

折叠未更改行

关闭换行

视图

比对精度

文本样式

语法高亮

Diffchecker Desktop 运行Diffchecker最安全的方式。获取Diffchecker桌面应用：您的差异永远不会离开您的电脑！获取桌面版

icon spec test diff

创建于前天差异过期 4周后

0 删除

行
总计
删除

字符
总计
删除

要继续使用此功能，请升级到 Diffchecker Pro 查看价格

79 行

121 添加

行
总计
添加

字符
总计
添加

要继续使用此功能，请升级到 Diffchecker Pro 查看价格

195 行

import { newSpecPage } from 'jest-stencil-runner';

import { Icon } from '../icon';

describe('icon', () => {

it('renders', async () => {

const { root } = await newSpecPage({

components: [Icon],

html: '<ion-icon></ion-icon>',

});

expect(root).toEqualHtml(`

<ion-icon class="md" role="img">

<mock:shadow-root>

</div>

</mock:shadow-root>

</ion-icon>

`);

});

it('renders rtl with aria-hidden', async () => {

const { root } = await newSpecPage({

components: [Icon],

direction: 'rtl',

html: `<ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>`,

});

expect(root).toEqualHtml(`

<ion-icon class="md flip-rtl icon-rtl" name="chevron-forward" role="img" aria-hidden="true">

<mock:shadow-root>

</div>

</mock:shadow-root>

</ion-icon>

`);

});

it('renders custom aria-label', async () => {

const { root } = await newSpecPage({

components: [Icon],

html: `<ion-icon name="star" aria-label="custom label"></ion-icon>`,

});

expect(root).toEqualHtml(`

<ion-icon class="md" name="star" role="img" aria-label="custom label">

<mock:shadow-root>

</div>

</mock:shadow-root>

</ion-icon>

`);

});

it('renders custom label after changing source', async () => {

const page = await newSpecPage({

components: [Icon],

html: `<ion-icon name="chevron-forward" aria-label="custom label"></ion-icon>`,

});

const icon = page.root;

expect(icon).toEqualHtml(`

<ion-icon class="flip-rtl md" name="chevron-forward" role="img" aria-label="custom label">

<mock:shadow-root>

</div>

</mock:shadow-root>

</ion-icon>

`);

if (icon) {

icon.name = 'trash';

}

await page.waitForChanges();

expect(icon).toEqualHtml(`

<ion-icon class="md" name="trash" role="img" aria-label="custom label">

<mock:shadow-root>

</div>

</mock:shadow-root>

</ion-icon>

`);

});

it('svgContent=true: renders svg without slot', async () => {

const page = await newSpecPage({

components: [Icon],

html: `<ion-icon aria-hidden="true" part="close-icon" class="close-icon"></ion-icon>`,

});

const icon = page.root as any;

const instance = page.rootInstance as any;

instance.svgContent = '<svg><circle cx="50" cy="50" r="40"/></svg>';

await page.waitForChanges();

const shadowRoot = icon.shadowRoot;

const iconInner = shadowRoot?.querySelector('.icon-inner');

// Should have no slot

const slot = iconInner?.querySelector('slot');

expect(slot).toBeNull();

// SVG should be a direct child of icon-inner,

// not nested in another div

expect(iconInner?.children.length).toBe(1);

const firstChild = iconInner?.children[0];

expect((firstChild as any)?.tagName?.toLowerCase()).toBe('svg');

expect(firstChild?.querySelector('circle')).not.toBeNull();

});

it('svgContent=false: renders slot for custom content', async () => {

const page = await newSpecPage({

components: [Icon],

html: `<ion-icon aria-hidden="true" part="close-icon" class="close-icon"></ion-icon>`,

});

const icon = page.root as any;

const shadowRoot = icon.shadowRoot;

const iconInner = shadowRoot?.querySelector('.icon-inner');

const slot = iconInner?.querySelector('slot');

const svg = iconInner?.querySelector('svg');

expect(slot).not.toBeNull();

expect(svg).toBeNull();

});

it('renders slotted font icon (Font Awesome)', async () => {

const { root } = await newSpecPage({

components: [Icon],

html: `

<ion-icon>

</ion-icon>

});

expect(root).toEqualHtml(`

<ion-icon class="md" role="img">

<mock:shadow-root>

</div>

</mock:shadow-root>

</ion-icon>

`);

});

it('renders slotted font icon with color', async () => {

const { root } = await newSpecPage({

components: [Icon],

html: `

<ion-icon color="primary">

</ion-icon>

});

expect(root).toEqualHtml(`

<ion-icon class="md ion-color ion-color-primary" color="primary" role="img">

<mock:shadow-root>

</div>

</mock:shadow-root>

</ion-icon>

`);

});

it('renders slotted font icon with custom style', async () => {

const { root } = await newSpecPage({

components: [Icon],

html: `

<ion-icon style="font-size: 48px">

</ion-icon>

});

expect(root).toEqualHtml(`

<ion-icon class="md" role="img" style="font-size: 48px">

<mock:shadow-root>

</div>

</mock:shadow-root>

</ion-icon>

`);

});

已保存差异

原始文本

打开文件

import { newSpecPage } from 'jest-stencil-runner';
import { Icon } from '../icon';

describe('icon', () => {
  it('renders', async () => {
    const { root } = await newSpecPage({
      components: [Icon],
      html: '<ion-icon></ion-icon>',
    });
    expect(root).toEqualHtml(`
      <ion-icon class="md" role="img">
        <mock:shadow-root>
          <div class="icon-inner"></div>
        </mock:shadow-root>
      </ion-icon>
    `);
  });

it('renders rtl with aria-hidden', async () => {
    const { root } = await newSpecPage({
      components: [Icon],
      direction: 'rtl',
      html: `<ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>`,
    });

expect(root).toEqualHtml(`
      <ion-icon class="md flip-rtl icon-rtl" name="chevron-forward" role="img" aria-hidden="true">
        <mock:shadow-root>
          <div class="icon-inner"></div>
        </mock:shadow-root>
      </ion-icon>
    `);
  });

it('renders custom aria-label', async () => {
    const { root } = await newSpecPage({
      components: [Icon],
      html: `<ion-icon name="star" aria-label="custom label"></ion-icon>`,
    });

expect(root).toEqualHtml(`
      <ion-icon class="md" name="star" role="img" aria-label="custom label">
        <mock:shadow-root>
          <div class="icon-inner"></div>
        </mock:shadow-root>
      </ion-icon>
    `);
  });

it('renders custom label after changing source', async () => {
    const page = await newSpecPage({
      components: [Icon],
      html: `<ion-icon name="chevron-forward" aria-label="custom label"></ion-icon>`,
    });

const icon = page.root;

expect(icon).toEqualHtml(`
      <ion-icon class="flip-rtl md" name="chevron-forward" role="img" aria-label="custom label">
        <mock:shadow-root>
          <div class="icon-inner"></div>
        </mock:shadow-root>
      </ion-icon>
    `);

if (icon) {
      icon.name = 'trash';
    }
    await page.waitForChanges();

expect(icon).toEqualHtml(`
      <ion-icon class="md" name="trash" role="img" aria-label="custom label">
        <mock:shadow-root>
          <div class="icon-inner"></div>
        </mock:shadow-root>
      </ion-icon>
    `);
  });
});

更改后文本

打开文件

import { newSpecPage } from 'jest-stencil-runner';
import { Icon } from '../icon';

describe('icon', () => {
  it('renders', async () => {
    const { root } = await newSpecPage({
      components: [Icon],
      html: '<ion-icon></ion-icon>',
    });
    expect(root).toEqualHtml(`
      <ion-icon class="md" role="img">
        <mock:shadow-root>
          <div class="icon-inner">
            <slot></slot>
          </div>
        </mock:shadow-root>
      </ion-icon>
    `);
  });

expect(root).toEqualHtml(`
      <ion-icon class="md flip-rtl icon-rtl" name="chevron-forward" role="img" aria-hidden="true">
        <mock:shadow-root>
          <div class="icon-inner">
            <slot></slot>
          </div>
        </mock:shadow-root>
      </ion-icon>
    `);
  });

it('renders custom aria-label', async () => {
    const { root } = await newSpecPage({
      components: [Icon],
      html: `<ion-icon name="star" aria-label="custom label"></ion-icon>`,
    });

expect(root).toEqualHtml(`
      <ion-icon class="md" name="star" role="img" aria-label="custom label">
        <mock:shadow-root>
          <div class="icon-inner">
            <slot></slot>
          </div>
        </mock:shadow-root>
      </ion-icon>
    `);
  });

const icon = page.root;

expect(icon).toEqualHtml(`
      <ion-icon class="flip-rtl md" name="chevron-forward" role="img" aria-label="custom label">
        <mock:shadow-root>
          <div class="icon-inner">
            <slot></slot>
          </div>
        </mock:shadow-root>
      </ion-icon>
    `);

if (icon) {
      icon.name = 'trash';
    }
    await page.waitForChanges();

expect(icon).toEqualHtml(`
      <ion-icon class="md" name="trash" role="img" aria-label="custom label">
        <mock:shadow-root>
          <div class="icon-inner">
            <slot></slot>
          </div>
        </mock:shadow-root>
      </ion-icon>
    `);
  });

it('svgContent=true: renders svg without slot', async () => {
    const page = await newSpecPage({
      components: [Icon],
      html: `<ion-icon aria-hidden="true" part="close-icon" class="close-icon"></ion-icon>`,
    });

const icon = page.root as any;
    const instance = page.rootInstance as any;
    instance.svgContent = '<svg><circle cx="50" cy="50" r="40"/></svg>';
    await page.waitForChanges();

const shadowRoot = icon.shadowRoot;
    const iconInner = shadowRoot?.querySelector('.icon-inner');

// Should have no slot
    const slot = iconInner?.querySelector('slot');
    expect(slot).toBeNull();

// SVG should be a direct child of icon-inner,
    // not nested in another div
    expect(iconInner?.children.length).toBe(1);
    const firstChild = iconInner?.children[0];
    expect((firstChild as any)?.tagName?.toLowerCase()).toBe('svg');
    expect(firstChild?.querySelector('circle')).not.toBeNull();
  });

it('svgContent=false: renders slot for custom content', async () => {
    const page = await newSpecPage({
      components: [Icon],
      html: `<ion-icon aria-hidden="true" part="close-icon" class="close-icon"></ion-icon>`,
    });

const icon = page.root as any;
    const shadowRoot = icon.shadowRoot;
    const iconInner = shadowRoot?.querySelector('.icon-inner');
    const slot = iconInner?.querySelector('slot');
    const svg = iconInner?.querySelector('svg');

expect(slot).not.toBeNull();
    expect(svg).toBeNull();
  });

it('renders slotted font icon (Font Awesome)', async () => {
    const { root } = await newSpecPage({
      components: [Icon],
      html: `
        <ion-icon>
          <i class="fa fa-home"></i>
        </ion-icon>
      `,
    });
    expect(root).toEqualHtml(`
      <ion-icon class="md" role="img">
        <mock:shadow-root>
          <div class="icon-inner">
            <slot></slot>
          </div>
        </mock:shadow-root>
        <i class="fa fa-home"></i>
      </ion-icon>
    `);
  });

it('renders slotted font icon with color', async () => {
    const { root } = await newSpecPage({
      components: [Icon],
      html: `
        <ion-icon color="primary">
          <i class="fa fa-heart"></i>
        </ion-icon>
      `,
    });
    expect(root).toEqualHtml(`
      <ion-icon class="md ion-color ion-color-primary" color="primary" role="img">
        <mock:shadow-root>
          <div class="icon-inner">
            <slot></slot>
          </div>
        </mock:shadow-root>
        <i class="fa fa-heart"></i>
      </ion-icon>
    `);
  });

it('renders slotted font icon with custom style', async () => {
    const { root } = await newSpecPage({
      components: [Icon],
      html: `
        <ion-icon style="font-size: 48px">
          <i class="fa fa-star"></i>
        </ion-icon>
      `,
    });
    expect(root).toEqualHtml(`
      <ion-icon class="md" role="img" style="font-size: 48px">
        <mock:shadow-root>
          <div class="icon-inner">
            <slot></slot>
          </div>
        </mock:shadow-root>
        <i class="fa fa-star"></i>
      </ion-icon>
    `);
  });
});