@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
200 lines (199 loc) • 8.03 kB
JavaScript
;
var _FloatingLayer = require("@enact/ui/FloatingLayer");
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _Alert = require("../Alert");
var _Button = _interopRequireDefault(require("../../Button"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
describe('Alert', function () {
test('should be rendered opened if open is set to true', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
open: true
})
}));
var alert = _react.screen.getByRole('alert');
expect(alert).toBeInTheDocument();
});
test('should not be rendered if open is set to false', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {})
}));
var alert = _react.screen.queryByRole('alert');
expect(alert).toBeNull();
});
test('should render title', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.AlertBase, {
open: true,
title: "alert title"
})
}));
var alert = _react.screen.getByRole('alert');
var expected = 'alert title';
expect(alert).toHaveTextContent(expected);
});
test('should render content', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.AlertBase, {
open: true,
title: "alert title",
children: 'alert message'
})
}));
var alert = _react.screen.getByRole('alert');
var actual = alert.textContent;
var expected = 'alert message';
expect(actual).toContain(expected);
});
test('should render to empty string if children is not set', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.AlertBase, {
open: true,
title: "alert title"
})
}));
var alert = _react.screen.getByRole('alert');
var actual = alert.querySelector('#undefined_content').hasChildNodes();
expect(actual).toBeFalsy();
});
test('should have `icon` className if `type` prop is set to `icon`', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Alert.Alert, {
open: true,
title: "alert title",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("image", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.AlertImage, {
src: "testIconImage.png",
type: "icon"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("buttons", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "yes"
})
})]
})
}));
var image = _react.screen.getAllByRole('img')[0];
var expectedClass = 'icon';
expect(image).toHaveClass(expectedClass);
});
test('should have `thumbnail` className if `type` prop is set to `thumbnail`', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Alert.Alert, {
open: true,
title: "alert title",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("image", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.AlertImage, {
src: "testThumbnailImage.png",
type: "thumbnail"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("buttons", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "yes"
})
})]
})
}));
var image = _react.screen.getAllByRole('img')[0];
var expectedClass = 'thumbnail';
expect(image).toHaveClass(expectedClass);
});
});
describe('AlertOverlay specs', function () {
test('should be rendered opened if open is set to true', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
open: true,
type: "overlay"
})
}));
var alert = _react.screen.getByRole('alert');
expect(alert).toBeInTheDocument();
});
test('should not be rendered if open is set to false', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
type: "overlay"
})
}));
var alert = _react.screen.queryByRole('alert');
expect(alert).toBeNull();
});
test('should render content', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Alert.Alert, {
open: true,
type: "overlay",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: "this is alert overlay."
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("buttons", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "yes"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "yes"
})]
})]
})
}));
var alert = _react.screen.getByRole('alert');
var actual = alert.textContent;
var expected = 'this is alert overlay.';
expect(actual).toContain(expected);
});
test('should render to empty string if children is not set', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.AlertBase, {
open: true,
type: "overlay"
})
}));
var alert = _react.screen.getByRole('alert');
var actual = alert.querySelector('#undefined_content').hasChildNodes();
expect(actual).toBeFalsy();
});
test('should have `icon` classname if `type` prop is set to `icon`', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Alert.Alert, {
open: true,
type: "overlay",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("image", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.AlertImage, {
src: "testIconImage.png",
type: "icon"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("buttons", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "yes"
})
})]
})
}));
var image = _react.screen.getAllByRole('img')[0];
var expectedClass = 'icon';
expect(image).toHaveClass(expectedClass);
});
test('should have `icon` classname if `type` prop is set to `thumbnail`', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Alert.Alert, {
open: true,
type: "overlay",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("image", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.AlertImage, {
src: "testThumbnailImage.png",
type: "thumbnail"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("buttons", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
children: "yes"
})
})]
})
}));
var image = _react.screen.getAllByRole('img')[0];
var expectedClass = 'thumbnail';
expect(image).toHaveClass(expectedClass);
});
});