@instructure/ui-react-utils/es/__new-tests__/DeterministicIdContext.test.js

A React utility library made by Instructure Inc.

var _dec, _class, _TestComponent, _div, _WrapperComponent2, _div2, _div3, _div4;
/*
 * The MIT License (MIT)
 *
 * Copyright (c) 2015 - present Instructure, Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

import { Component } from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { withDeterministicId, DeterministicIdContextProvider } from '../DeterministicIdContext';
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
let TestComponent = (_dec = withDeterministicId(), _dec(_class = (_TestComponent = class TestComponent extends Component {
  render() {
    return _jsx("div", {
      "data-testid": "test-component",
      id: this.props.deterministicId(),
      children: this.props.children
    });
  }
}, _TestComponent.displayName = "TestComponent", _TestComponent)) || _class);
class WrapperComponent extends Component {
  render() {
    return _div || (_div = _jsx("div", {
      children: _jsx(TestComponent, {})
    }));
  }
}
WrapperComponent.displayName = "WrapperComponent";
const uniqueIds = el => {
  const idList = Array.from(el.children).map(child => child.id);
  return new Set(idList).size === idList.length;
};
describe('DeterministicIdContext', () => {
  it('can be found and tested with ReactTestUtils', () => {
    render(_WrapperComponent2 || (_WrapperComponent2 = _jsx(WrapperComponent, {})));
    const testComponent = screen.getByTestId('test-component');
    expect(testComponent).toBeInTheDocument();
    expect(testComponent.id).toBeDefined();
  });
  it('should generate unique ids without Provider wrapper', () => {
    render(_div2 || (_div2 = _jsxs("div", {
      "data-testid": "test-components",
      children: [_jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {})]
    })));
    const el = screen.getByTestId('test-components');
    expect(uniqueIds(el)).toBe(true);
  });
  it('should generate unique ids when components are rendered both out and inside of provider', () => {
    render(_div3 || (_div3 = _jsxs("div", {
      "data-testid": "test-components",
      children: [_jsxs(DeterministicIdContextProvider, {
        children: [_jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {})]
      }), _jsx(TestComponent, {}), _jsx(TestComponent, {})]
    })));
    const el = screen.getByTestId('test-components');
    expect(uniqueIds(el)).toBe(true);
  });
  it('should generate unique ids with provider only', () => {
    const Wrapper = ({
      children
    }) => {
      return _jsx(DeterministicIdContextProvider, {
        children: _jsx("div", {
          "data-testid": "wrapper",
          children: children
        })
      });
    };
    const children = [];
    for (let i = 0; i < 10; i++) {
      children.push(_jsx(TestComponent, {}, i));
    }
    render(_jsx(Wrapper, {
      children: children
    }));
    const el = screen.getByTestId('wrapper');
    expect(uniqueIds(el)).toBe(true);
  });
  it('should use a global object for ID counter', () => {
    const instUIInstanceCounter = '__INSTUI_GLOBAL_INSTANCE_COUNTER__';
    const counterValue = 345;
    globalThis[instUIInstanceCounter].set('TestComponent', counterValue);
    render(_div4 || (_div4 = _jsxs("div", {
      "data-testid": "test-components",
      children: [_jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {}), _jsx(TestComponent, {})]
    })));
    const instanceCounter = globalThis[instUIInstanceCounter];
    expect(instanceCounter.get('TestComponent')).toBe(counterValue + 5);
  });
});