텍스트 비교

두 텍스트 파일의 차이점을 찾아보세요

실시간 편집

공백 변경 숨기기

변경 없는 행 숨기기

줄바꿈 비활성화

레이아웃

비교 단위

텍스트 스타일

구문 강조

Diffchecker Desktop 가장 안전하게 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>
    `);
  });
});