trendmicro-frontend / tonic-ui

Tonic UI is a UI component library for React, built with Emotion and Styled System. It is designed to be easy to use and easy to customize.
https://trendmicro-frontend.github.io/tonic-ui
MIT License
125 stars 28 forks source link

test: enhance test coverage across packages (0620) #879

Closed cheton closed 2 months ago

codesandbox[bot] commented 2 months ago

Review or Edit in CodeSandbox

Open the branch in Web EditorVS CodeInsiders
Open Preview

codesandbox-ci[bot] commented 2 months ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

cheton commented 2 months ago

@CodiumAI-Agent /review

CodiumAI-Agent commented 2 months ago

PR Reviewer Guide 🔍

⏱️ Estimated effort to review [1-5] 3
🧪 Relevant tests Yes
🔒 Security concerns No
⚡ Key issues to review Possible Bug:
The deletion of global.window in the canUseDOM test could potentially affect other tests if they run concurrently or if the restoration of global.window fails. Consider using a more isolated approach for mocking or stubbing window.
Redundancy:
The tests for getOwnerWindow and getOwnerDocument might be redundant if these functions are simple wrappers around native DOM properties. Review if these tests add significant value or if they could be simplified.
trendmicro-frontend-bot commented 2 months ago

Tonic UI Demo

codecov[bot] commented 2 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 74.83%. Comparing base (70ad9ae) to head (1a07971).

Additional details and impacted files ```diff @@ Coverage Diff @@ ## v2 #879 +/- ## ========================================== + Coverage 73.69% 74.83% +1.14% ========================================== Files 375 375 Lines 6140 6140 ========================================== + Hits 4525 4595 +70 + Misses 1615 1545 -70 ``` | [Flag](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/879/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | Coverage Δ | | |---|---|---| | [codemod](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/879/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `74.28% <ø> (ø)` | | | [react](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/879/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `72.43% <ø> (+0.69%)` | :arrow_up: | | [react-base](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/879/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `100.00% <ø> (ø)` | | | [react-hooks](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/879/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `87.59% <ø> (ø)` | | | [styled-system](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/879/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `93.42% <ø> (ø)` | | | [theme](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/879/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `100.00% <ø> (ø)` | | | [utils](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/879/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `89.14% <100.00%> (+18.85%)` | :arrow_up: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

cheton commented 2 months ago

@CodiumAI-Agent /ask Are there any improvements can be made to the test of "isHTMLElement"? I want to verify a test case where a node is an Element, but not instance of HTMLElement.

export const isElement = (el) => {
  return (
    el !== null &&
    el !== undefined &&
    typeof el === 'object' &&
    'nodeType' in el &&
    el.nodeType === Node.ELEMENT_NODE
  );
};

export const isHTMLElement = (el) => {
  if (!isElement(el)) {
    return false;
  }

  const win = el.ownerDocument.defaultView ?? window;
  return el instanceof win.HTMLElement;
};
CodiumAI-Agent commented 2 months ago

Ask

Are there any improvements can be made to the test of isHTMLElement? I want to verify a test case where a node is an Element, but not instance of HTMLElement.

Answer:

To improve the test coverage for isHTMLElement, you can add a test case to verify a scenario where a node is an Element but not an instance of HTMLElement. This can be done by creating an SVG element, which is an instance of Element but not HTMLElement.

Here's how you can add this test case:

describe('isHTMLElement', () => {
  it('should return true for a valid HTML element', () => {
    const element = createMockElement('div');
    expect(isHTMLElement(element)).toBe(true);
  });

  it('should return false for a text node', () => {
    const textNode = document.createTextNode('text');
    expect(isHTMLElement(textNode)).toBe(false);
  });

  it('should return false for non-HTML element values', () => {
    expect(isHTMLElement(null)).toBe(false);
    expect(isHTMLElement(undefined)).toBe(false);
    expect(isHTMLElement('string')).toBe(false);
    expect(isHTMLElement(123)).toBe(false);
    expect(isHTMLElement(true)).toBe(false);
    expect(isHTMLElement({})).toBe(false);
    expect(isHTMLElement([])).toBe(false);
  });

  it('should return false for an SVG element', () => {
    const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    expect(isHTMLElement(svgElement)).toBe(false);
  });
});

In this new test case, document.createElementNS is used to create an SVG element, which is an instance of Element but not HTMLElement. This ensures that the isHTMLElement function correctly identifies it as not being an HTMLElement.