"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const test_utilities_1 = require("../../test-utilities");
const TextBlock_1 = require("../TextBlock");
const Hidden_1 = require("./Hidden");
describe('<Hidden />', () => {
    it('renders its children', () => {
        const text = 'Snowdevil';
        const hidden = test_utilities_1.mountWithContext(<Hidden_1.Hidden below="medium">{text}</Hidden_1.Hidden>);
        expect(hidden).toContainReactText(text);
    });
    it('renders a <div> by default', () => {
        const text = 'Snowdevil';
        const hidden = test_utilities_1.mountWithContext(<Hidden_1.Hidden below="medium">{text}</Hidden_1.Hidden>);
        expect(hidden).toContainReactComponent('div');
    });
    it('renders a <span> when used inside an inline formatting context', () => {
        const text = 'Snowdevil';
        const hiddenTextBlock = test_utilities_1.mountWithContext(<TextBlock_1.TextBlock>
        <Hidden_1.Hidden below="medium">{text}</Hidden_1.Hidden>
      </TextBlock_1.TextBlock>);
        expect(hiddenTextBlock).toContainReactComponent('span');
    });
    describe('above', () => {
        it('applies CSS classes that hides the element above the specified breakpoint', () => {
            const text = 'Snowdevil';
            const hiddenAboveSmall = test_utilities_1.mountWithContext(<Hidden_1.Hidden above="small">{text}</Hidden_1.Hidden>);
            const hiddenAboveMedium = test_utilities_1.mountWithContext(<Hidden_1.Hidden above="medium">{text}</Hidden_1.Hidden>);
            expect(hiddenAboveSmall).toContainReactComponent('div', {
                className: expect.stringContaining('hiddenOnMedium hiddenOnLarge'),
            });
            expect(hiddenAboveMedium).toContainReactComponent('div', {
                className: expect.stringContaining('hiddenOnLarge'),
            });
        });
    });
    describe('below', () => {
        it('applies CSS classes that hides the element below the specified breakpoint', () => {
            const text = 'Snowdevil';
            const hiddenBelowMedium = test_utilities_1.mountWithContext(<Hidden_1.Hidden below="medium">{text}</Hidden_1.Hidden>);
            const hiddenBelowLarge = test_utilities_1.mountWithContext(<Hidden_1.Hidden below="large">{text}</Hidden_1.Hidden>);
            expect(hiddenBelowMedium).toContainReactComponent('div', {
                className: expect.stringContaining('hiddenOnSmall'),
            });
            expect(hiddenBelowLarge).toContainReactComponent('div', {
                className: expect.stringContaining('hiddenOnSmall hiddenOnMedium'),
            });
        });
    });
    describe('below and above combined', () => {
        it('applies CSS classes that hides the element when both below and above is specified', () => {
            const text = 'Snowdevil';
            const hiddenBelowLargeAboveSmall = test_utilities_1.mountWithContext(<Hidden_1.Hidden above="small" below="large">
          {text}
        </Hidden_1.Hidden>);
            const hiddenBelowMediumAboveMedium = test_utilities_1.mountWithContext(<Hidden_1.Hidden above="medium" below="medium">
          {text}
        </Hidden_1.Hidden>);
            expect(hiddenBelowLargeAboveSmall).toContainReactComponent('div', {
                className: expect.stringContaining('hiddenOnMedium'),
            });
            expect(hiddenBelowMediumAboveMedium).toContainReactComponent('div', {
                className: expect.stringContaining('hiddenOnSmall hiddenOnLarge'),
            });
        });
    });
});