@entropic-bond/crud-panel 3.3.3 → 3.4.1

package/lib/crud-panel.spec.js

@@ -1,30 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -57,44 +31,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@testing-library/react");
-var user_event_1 = __importDefault(require("@testing-library/user-event"));
-var entropic_bond_1 = require("entropic-bond");
-var crud_panel_1 = require("./crud-panel");
-var crud_controller_spec_1 = require("./crud-controller.spec");
-var crudLabels = {
+const react_1 = __importStar(require("react"));
+const react_2 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const entropic_bond_1 = require("entropic-bond");
+const crud_panel_1 = require("./crud-panel");
+const crud_controller_spec_1 = require("./crud-controller.spec");
+const crudLabels = {
     addNewDocumentLabel: 'Add new document',
     addButtonLabel: 'Add',
     updateButtonLabel: 'Update',
@@ -102,12 +49,12 @@ var crudLabels = {
     singularDocumentInCollectionCaption: 'Existing document',
     noDocumentsFoundLabel: 'No documents found',
 };
-var testViewPlaceholder = 'Test View Placeholder';
-var editButtonLabel = 'Edit';
-var deleteButtonLabel = 'Delete';
-var cancelButtonCaption = 'Cancel';
-var viewHeader = 'View header';
-var mockData = {
+const testViewPlaceholder = 'Test View Placeholder';
+const editButtonLabel = 'Edit';
+const deleteButtonLabel = 'Delete';
+const cancelButtonCaption = 'Cancel';
+const viewHeader = 'View header';
+const mockData = {
     Test: {
         test1: {
             __className: 'Test',
@@ -121,130 +68,71 @@ var mockData = {
         }
     }
 };
-var TestView = /** @class */ (function (_super) {
-    __extends(TestView, _super);
-    function TestView() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    TestView.prototype.componentDidMount = function () {
-        var _this = this;
-        var controller = this.props.controller;
-        controller.onChange(function (e) {
+class TestView extends react_1.Component {
+    componentDidMount() {
+        const { controller } = this.props;
+        controller.onChange(e => {
             if (e.documentProps)
-                _this.setState(e.documentProps);
+                this.setState(e.documentProps);
         });
-    };
-    TestView.prototype.render = function () {
-        var _a = this.props, controller = _a.controller, onCancel = _a.onCancel, onSubmit = _a.onSubmit, submitButtonCaption = _a.submitButtonCaption;
-        var document = controller.document;
+    }
+    render() {
+        const { controller, onCancel, onSubmit, submitButtonCaption } = this.props;
+        const { document } = controller;
         return (react_1.default.createElement("div", null,
             react_1.default.createElement("h1", null, viewHeader),
-            react_1.default.createElement("input", { placeholder: testViewPlaceholder, value: document.testProp || '', onChange: function (e) { return document.testProp = e.target.value; } }),
-            react_1.default.createElement("button", { onClick: function () { return onSubmit(document); } }, submitButtonCaption),
+            react_1.default.createElement("input", { placeholder: testViewPlaceholder, value: document.testProp || '', onChange: e => document.testProp = e.target.value }),
+            react_1.default.createElement("button", { onClick: () => onSubmit(document) }, submitButtonCaption),
             react_1.default.createElement("button", { onClick: onCancel }, cancelButtonCaption)));
-    };
-    return TestView;
-}(react_1.Component));
-var TestCard = /** @class */ (function (_super) {
-    __extends(TestCard, _super);
-    function TestCard() {
-        return _super !== null && _super.apply(this, arguments) || this;
     }
-    TestCard.prototype.render = function () {
-        var _a = this.props, document = _a.document, onDelete = _a.onDelete, onSelect = _a.onSelect;
+}
+class TestCard extends react_1.Component {
+    render() {
+        const { document, onDelete, onSelect } = this.props;
         return (react_1.default.createElement("div", null,
             react_1.default.createElement("p", null, document === null || document === void 0 ? void 0 : document.testProp),
-            react_1.default.createElement("button", { onClick: function () { return onSelect(document); } }, editButtonLabel),
-            react_1.default.createElement("button", { onClick: function () { return onDelete(document); } }, deleteButtonLabel)));
-    };
-    return TestCard;
-}(react_1.Component));
-describe('Crud Panel', function () {
-    var controller;
-    var notifySpy;
-    var renderResult;
-    var datasource;
-    beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    datasource = new entropic_bond_1.JsonDataSource(JSON.parse(JSON.stringify(mockData)));
-                    entropic_bond_1.Store.useDataSource(datasource);
-                    controller = new crud_controller_spec_1.TestController();
-                    notifySpy = jest.fn();
-                    controller.onChange(notifySpy);
-                    renderResult = (0, react_2.render)(react_1.default.createElement(crud_panel_1.CrudPanel, { controller: controller, labels: crudLabels },
-                        react_1.default.createElement(TestView, null),
-                        react_1.default.createElement(TestCard, null)));
-                    // await datasource.wait()
-                    return [4 /*yield*/, react_2.screen.findByRole('heading')];
-                case 1:
-                    // await datasource.wait()
-                    _a.sent();
-                    return [2 /*return*/];
-            }
-        });
-    }); });
-    it('should show add button', function () {
+            react_1.default.createElement("button", { onClick: () => onSelect(document) }, editButtonLabel),
+            react_1.default.createElement("button", { onClick: () => onDelete(document) }, deleteButtonLabel)));
+    }
+}
+describe('Crud Panel', () => {
+    let controller;
+    let notifySpy;
+    let renderResult;
+    let datasource;
+    beforeEach(() => __awaiter(void 0, void 0, void 0, function* () {
+        datasource = new entropic_bond_1.JsonDataSource(JSON.parse(JSON.stringify(mockData)));
+        entropic_bond_1.Store.useDataSource(datasource);
+        controller = new crud_controller_spec_1.TestController();
+        notifySpy = jest.fn();
+        controller.onChange(notifySpy);
+        renderResult = (0, react_2.render)(react_1.default.createElement(crud_panel_1.CrudPanel, { controller: controller, labels: crudLabels },
+            react_1.default.createElement(TestView, null),
+            react_1.default.createElement(TestCard, null)));
+        // await datasource.wait()
+        yield react_2.screen.findByRole('heading');
+    }));
+    it('should show add button', () => {
         expect(react_2.screen.getByRole('button', { name: crudLabels.addNewDocumentLabel })).toBeInTheDocument();
     });
-    it('should show existing documents', function () {
-        var docs = react_2.screen.getByRole('heading', { name: crudLabels.documentsInCollectionCaption }).nextElementSibling;
+    it('should show existing documents', () => {
+        const docs = react_2.screen.getByRole('heading', { name: crudLabels.documentsInCollectionCaption }).nextElementSibling;
         expect((0, react_2.within)(docs).getByText('Test prop 1')).toBeInTheDocument();
         expect((0, react_2.within)(docs).getByText('Test prop 2')).toBeInTheDocument();
         expect(docs.children.length).toBe(2);
     });
-    it('should show singular when only one existing document', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var deleteButton, heading;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    expect(react_2.screen.queryByText('Test prop 2')).toBeInTheDocument();
-                    deleteButton = react_2.screen.getAllByRole('button', { name: deleteButtonLabel });
-                    return [4 /*yield*/, user_event_1.default.click(deleteButton[1])];
-                case 1:
-                    _a.sent();
-                    return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(notifySpy).toHaveBeenCalled(); })];
-                case 2:
-                    _a.sent();
-                    return [4 /*yield*/, react_2.screen.findByRole('heading', { name: crudLabels.singularDocumentInCollectionCaption })];
-                case 3:
-                    heading = _a.sent();
-                    expect(heading).toBeInTheDocument();
-                    return [2 /*return*/];
-            }
-        });
-    }); });
-    it('should show plural when only one existing document but empty singular caption', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var deleteButton, heading;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    crudLabels.singularDocumentInCollectionCaption = undefined;
-                    expect(react_2.screen.queryByText('Test prop 2')).toBeInTheDocument();
-                    deleteButton = react_2.screen.getAllByRole('button', { name: deleteButtonLabel });
-                    user_event_1.default.click(deleteButton[1]);
-                    return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(notifySpy).toHaveBeenCalled(); })];
-                case 1:
-                    _a.sent();
-                    heading = react_2.screen.getByRole('heading', { name: crudLabels.documentsInCollectionCaption });
-                    expect(heading).toBeInTheDocument();
-                    return [2 /*return*/];
-            }
-        });
-    }); });
-    describe('Accepts children as functions', function () {
-        beforeEach(function () {
+    describe('Accepts children as functions', () => {
+        beforeEach(() => {
             user_event_1.default.setup();
             renderResult.rerender(react_1.default.createElement(crud_panel_1.CrudPanel, { controller: controller, labels: crudLabels },
-                function (props) { return react_1.default.createElement(TestView, __assign({}, props)); },
-                function (props) { return react_1.default.createElement(TestCard, __assign({}, props)); }));
+                props => react_1.default.createElement(TestView, Object.assign({}, props)),
+                props => react_1.default.createElement(TestCard, Object.assign({}, props))));
         });
-        it('should show add button', function () {
+        it('should show add button', () => {
             expect(react_2.screen.getByRole('button', { name: crudLabels.addNewDocumentLabel })).toBeInTheDocument();
         });
-        it('should show existing documents', function () {
-            var docs = react_2.screen.getByRole('heading', { name: crudLabels.documentsInCollectionCaption }).nextElementSibling;
+        it('should show existing documents', () => {
+            const docs = react_2.screen.getByRole('heading', { name: crudLabels.documentsInCollectionCaption }).nextElementSibling;
             expect((0, react_2.within)(docs).getByText('Test prop 1')).toBeInTheDocument();
             expect((0, react_2.within)(docs).getByText('Test prop 2')).toBeInTheDocument();
             expect(docs.children.length).toBe(2);
@@ -252,206 +140,128 @@ describe('Crud Panel', function () {
             expect(react_2.screen.getAllByRole('button', { name: deleteButtonLabel })[0]).toBeInTheDocument();
         });
     });
-    describe('Working with TestView', function () {
-        it('should create an empty document view on add new document button click', function () { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, user_event_1.default.click(react_2.screen.getByRole('button', { name: crudLabels.addNewDocumentLabel }))];
-                    case 1:
-                        _a.sent();
-                        expect(react_2.screen.getByRole('heading', { name: viewHeader })).toBeInTheDocument();
-                        expect(react_2.screen.getByPlaceholderText(testViewPlaceholder)).toHaveDisplayValue('');
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        it('should show detail view with document data on edit button click', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var testDoc, editButton;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        testDoc = mockData.Test.test1;
-                        editButton = react_2.screen.getAllByRole('button', { name: editButtonLabel });
-                        return [4 /*yield*/, user_event_1.default.click(editButton[0])];
-                    case 1:
-                        _a.sent();
-                        expect(react_2.screen.getByRole('heading', { name: viewHeader })).toBeInTheDocument();
-                        expect(react_2.screen.getByDisplayValue(testDoc.testProp)).toBeInTheDocument();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        it('should refresh document list on new document added', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var input, docs, _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0: return [4 /*yield*/, user_event_1.default.click(react_2.screen.getByRole('button', { name: crudLabels.addNewDocumentLabel }))];
-                    case 1:
-                        _b.sent();
-                        return [4 /*yield*/, react_2.screen.findByPlaceholderText(testViewPlaceholder)];
-                    case 2:
-                        input = _b.sent();
-                        return [4 /*yield*/, user_event_1.default.type(input, 'New and fancy Application')];
-                    case 3:
-                        _b.sent();
-                        return [4 /*yield*/, user_event_1.default.click(react_2.screen.getByRole('button', { name: crudLabels.addButtonLabel }))];
-                    case 4:
-                        _b.sent();
-                        docs = react_2.screen.getByRole('heading', { name: crudLabels.documentsInCollectionCaption }).nextElementSibling;
-                        _a = expect;
-                        return [4 /*yield*/, (0, react_2.within)(docs).findByText('New and fancy Application')];
-                    case 5:
-                        _a.apply(void 0, [_b.sent()]).toBeInTheDocument();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
+    describe('Working with TestView', () => {
+        it('should create an empty document view on add new document button click', () => __awaiter(void 0, void 0, void 0, function* () {
+            yield user_event_1.default.click(react_2.screen.getByRole('button', { name: crudLabels.addNewDocumentLabel }));
+            expect(react_2.screen.getByRole('heading', { name: viewHeader })).toBeInTheDocument();
+            expect(react_2.screen.getByPlaceholderText(testViewPlaceholder)).toHaveDisplayValue('');
+        }));
+        it('should show detail view with document data on edit button click', () => __awaiter(void 0, void 0, void 0, function* () {
+            const testDoc = mockData.Test.test1;
+            const editButton = react_2.screen.getAllByRole('button', { name: editButtonLabel });
+            yield user_event_1.default.click(editButton[0]);
+            expect(react_2.screen.getByRole('heading', { name: viewHeader })).toBeInTheDocument();
+            expect(react_2.screen.getByDisplayValue(testDoc.testProp)).toBeInTheDocument();
+        }));
+        it('should refresh document list on new document added', () => __awaiter(void 0, void 0, void 0, function* () {
+            yield user_event_1.default.click(react_2.screen.getByRole('button', { name: crudLabels.addNewDocumentLabel }));
+            const input = yield react_2.screen.findByPlaceholderText(testViewPlaceholder);
+            yield user_event_1.default.type(input, 'New and fancy Application');
+            yield user_event_1.default.click(react_2.screen.getByRole('button', { name: crudLabels.addButtonLabel }));
+            const docs = react_2.screen.getByRole('heading', { name: crudLabels.documentsInCollectionCaption }).nextElementSibling;
+            expect(yield (0, react_2.within)(docs).findByText('New and fancy Application')).toBeInTheDocument();
+        }));
     });
-    describe('Working with detail card buttons', function () {
-        it('should refresh document list on document edited', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var editButton, input, docs, _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        editButton = react_2.screen.getAllByRole('button', { name: editButtonLabel });
-                        return [4 /*yield*/, user_event_1.default.click(editButton[0])];
-                    case 1:
-                        _b.sent();
-                        return [4 /*yield*/, react_2.screen.findByPlaceholderText(testViewPlaceholder)];
-                    case 2:
-                        input = _b.sent();
-                        return [4 /*yield*/, user_event_1.default.click(input)];
-                    case 3:
-                        _b.sent();
-                        return [4 /*yield*/, user_event_1.default.paste(' Edited')];
-                    case 4:
-                        _b.sent();
-                        return [4 /*yield*/, user_event_1.default.click(react_2.screen.getByRole('button', { name: crudLabels.updateButtonLabel }))];
-                    case 5:
-                        _b.sent();
-                        return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(notifySpy).toHaveBeenCalled(); })];
-                    case 6:
-                        _b.sent();
-                        docs = react_2.screen.getByRole('heading', { name: crudLabels.documentsInCollectionCaption }).nextElementSibling;
-                        _a = expect;
-                        return [4 /*yield*/, (0, react_2.within)(docs).findByText('Test prop 1 Edited')];
-                    case 7:
-                        _a.apply(void 0, [_b.sent()]).toBeInTheDocument();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        it('should delete document and remove from the list', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var deleteButton;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        expect(react_2.screen.queryByText('Test prop 2')).toBeInTheDocument();
-                        deleteButton = react_2.screen.getAllByRole('button', { name: deleteButtonLabel });
-                        return [4 /*yield*/, user_event_1.default.click(deleteButton[1])];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(notifySpy).toHaveBeenCalled(); })];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(react_2.screen.queryByText('Test prop 2')).not.toBeInTheDocument(); })];
-                    case 3:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
+    describe('Working with detail card buttons', () => {
+        it('should refresh document list on document edited', () => __awaiter(void 0, void 0, void 0, function* () {
+            const editButton = react_2.screen.getAllByRole('button', { name: editButtonLabel });
+            yield user_event_1.default.click(editButton[0]);
+            const input = yield react_2.screen.findByPlaceholderText(testViewPlaceholder);
+            yield user_event_1.default.click(input);
+            yield user_event_1.default.paste(' Edited');
+            yield user_event_1.default.click(react_2.screen.getByRole('button', { name: crudLabels.updateButtonLabel }));
+            yield (0, react_2.waitFor)(() => expect(notifySpy).toHaveBeenCalled());
+            const docs = react_2.screen.getByRole('heading', { name: crudLabels.documentsInCollectionCaption }).nextElementSibling;
+            expect(yield (0, react_2.within)(docs).findByText('Test prop 1 Edited')).toBeInTheDocument();
+        }));
+        it('should delete document and remove from the list', () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(react_2.screen.queryByText('Test prop 2')).toBeInTheDocument();
+            const deleteButton = react_2.screen.getAllByRole('button', { name: deleteButtonLabel });
+            yield user_event_1.default.click(deleteButton[1]);
+            yield (0, react_2.waitFor)(() => expect(notifySpy).toHaveBeenCalled());
+            yield (0, react_2.waitFor)(() => expect(react_2.screen.queryByText('Test prop 2')).not.toBeInTheDocument());
+        }));
     });
-    describe('Layout behaviour', function () {
-        var itemsView = function () { return react_2.screen.queryByRole('heading', { name: crudLabels.documentsInCollectionCaption }); };
-        var formView = function () { return react_2.screen.queryByRole('heading', { name: viewHeader }); };
-        var addButton = function () { return react_2.screen.getByRole('button', { name: crudLabels.addNewDocumentLabel }); };
-        var renderWith = function (layout) { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                renderResult.rerender(react_1.default.createElement(crud_panel_1.CrudPanel, { controller: controller, labels: crudLabels, layout: layout },
-                    react_1.default.createElement(TestView, null),
-                    function (props) { return (react_1.default.createElement("div", null,
-                        react_1.default.createElement("p", null, props.document.testProp),
-                        react_1.default.createElement("button", { onClick: function () { return props.onSelect(props.document); } }, editButtonLabel),
-                        react_1.default.createElement("button", { onClick: function () { return props.onDelete(props.document); } }, deleteButtonLabel))); }));
-                return [2 /*return*/];
-            });
-        }); };
-        it('should show always collection items when default layout', function () { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        expect(itemsView()).toBeInTheDocument();
-                        expect(formView()).not.toBeInTheDocument();
-                        return [4 /*yield*/, user_event_1.default.click(addButton())];
-                    case 1:
-                        _a.sent();
-                        expect(itemsView()).toBeInTheDocument();
-                        expect(formView()).toBeInTheDocument();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        it('should show always collection items when layout set to itemsAlways', function () { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        renderWith('itemsAlways');
-                        expect(itemsView()).toBeInTheDocument();
-                        expect(formView()).not.toBeInTheDocument();
-                        return [4 /*yield*/, user_event_1.default.click(addButton())];
-                    case 1:
-                        _a.sent();
-                        expect(itemsView()).toBeInTheDocument();
-                        expect(formView()).toBeInTheDocument();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        it('should show always form view and items view when layout set to formAndItems', function () {
+    describe('Layout behaviour', () => {
+        const itemsView = () => react_2.screen.queryByRole('heading', { name: crudLabels.documentsInCollectionCaption });
+        const formView = () => react_2.screen.queryByRole('heading', { name: viewHeader });
+        const addButton = () => react_2.screen.getByRole('button', { name: crudLabels.addNewDocumentLabel });
+        const renderWith = (layout) => __awaiter(void 0, void 0, void 0, function* () {
+            renderResult.rerender(react_1.default.createElement(crud_panel_1.CrudPanel, { controller: controller, labels: crudLabels, layout: layout },
+                react_1.default.createElement(TestView, null),
+                (props) => (react_1.default.createElement("div", null,
+                    react_1.default.createElement("p", null, props.document.testProp),
+                    react_1.default.createElement("button", { onClick: () => props.onSelect(props.document) }, editButtonLabel),
+                    react_1.default.createElement("button", { onClick: () => props.onDelete(props.document) }, deleteButtonLabel)))));
+        });
+        it('should show always collection items when default layout', () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(itemsView()).toBeInTheDocument();
+            expect(formView()).not.toBeInTheDocument();
+            yield user_event_1.default.click(addButton());
+            expect(itemsView()).toBeInTheDocument();
+            expect(formView()).toBeInTheDocument();
+        }));
+        it('should show always collection items when layout set to itemsAlways', () => __awaiter(void 0, void 0, void 0, function* () {
+            renderWith('itemsAlways');
+            expect(itemsView()).toBeInTheDocument();
+            expect(formView()).not.toBeInTheDocument();
+            yield user_event_1.default.click(addButton());
+            expect(itemsView()).toBeInTheDocument();
+            expect(formView()).toBeInTheDocument();
+        }));
+        it('should show always form view and items view when layout set to formAndItems', () => {
             renderWith('formAndItems');
             expect(itemsView()).toBeInTheDocument();
             expect(formView()).toBeInTheDocument();
         });
-        it('should alternate from form view to items view but not both when layout set to formOrItems', function () { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        renderWith('formOrItems');
-                        expect(itemsView()).toBeInTheDocument();
-                        expect(formView()).not.toBeInTheDocument();
-                        return [4 /*yield*/, user_event_1.default.click(addButton())];
-                    case 1:
-                        _a.sent();
-                        expect(itemsView()).not.toBeInTheDocument();
-                        expect(formView()).toBeInTheDocument();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
+        it('should alternate from form view to items view but not both when layout set to formOrItems', () => __awaiter(void 0, void 0, void 0, function* () {
+            renderWith('formOrItems');
+            expect(itemsView()).toBeInTheDocument();
+            expect(formView()).not.toBeInTheDocument();
+            yield user_event_1.default.click(addButton());
+            expect(itemsView()).not.toBeInTheDocument();
+            expect(formView()).toBeInTheDocument();
+        }));
     });
-    describe('Labels', function () {
-        it('should allow to pass labels as a function', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var labels, documentClassName;
-            return __generator(this, function (_a) {
-                labels = function (controller) { return Object.entries(crudLabels)
-                    .reduce(function (prev, _a) {
-                    var key = _a[0], label = _a[1];
-                    prev[key] = "".concat(label, " ").concat(controller.document.className);
-                    return prev;
-                }, {}); };
-                renderResult.rerender(react_1.default.createElement(crud_panel_1.CrudPanel, { controller: controller, labels: labels },
-                    react_1.default.createElement(TestView, null),
-                    function (props) { return (react_1.default.createElement("div", null,
-                        react_1.default.createElement("p", null, props.document.testProp),
-                        react_1.default.createElement("button", { onClick: function () { return props.onSelect(props.document); } }, editButtonLabel),
-                        react_1.default.createElement("button", { onClick: function () { return props.onDelete(props.document); } }, deleteButtonLabel))); }));
-                documentClassName = controller.createDocument().className;
-                expect(react_2.screen.getByText("".concat(crudLabels.addNewDocumentLabel, " ").concat(documentClassName))).toBeInTheDocument();
-                expect(react_2.screen.getByText("".concat(crudLabels.documentsInCollectionCaption, " ").concat(documentClassName))).toBeInTheDocument();
-                return [2 /*return*/];
-            });
-        }); });
+    describe('Labels', () => {
+        it('should show singular when only one existing document', () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(react_2.screen.queryByText('Test prop 2')).toBeInTheDocument();
+            const deleteButton = react_2.screen.getAllByRole('button', { name: deleteButtonLabel });
+            yield user_event_1.default.click(deleteButton[1]);
+            yield (0, react_2.waitFor)(() => expect(notifySpy).toHaveBeenCalled());
+            const heading = yield react_2.screen.findByRole('heading', { name: crudLabels.singularDocumentInCollectionCaption });
+            expect(heading).toBeInTheDocument();
+        }));
+        it('should show plural when only one existing document but empty singular caption', () => __awaiter(void 0, void 0, void 0, function* () {
+            crudLabels.singularDocumentInCollectionCaption = undefined;
+            expect(react_2.screen.queryByText('Test prop 2')).toBeInTheDocument();
+            const deleteButton = react_2.screen.getAllByRole('button', { name: deleteButtonLabel });
+            user_event_1.default.click(deleteButton[1]);
+            yield (0, react_2.waitFor)(() => expect(notifySpy).toHaveBeenCalled());
+            const heading = react_2.screen.getByRole('heading', { name: crudLabels.documentsInCollectionCaption });
+            expect(heading).toBeInTheDocument();
+        }));
+        it('should allow to pass labels as a function', () => __awaiter(void 0, void 0, void 0, function* () {
+            const labels = (controller) => Object.entries(crudLabels)
+                .reduce((prev, [key, label]) => {
+                prev[key] = `${label} ${controller.document.className}`;
+                return prev;
+            }, {});
+            renderResult.rerender(react_1.default.createElement(crud_panel_1.CrudPanel, { controller: controller, labels: labels },
+                react_1.default.createElement(TestView, null),
+                (props) => (react_1.default.createElement("div", null,
+                    react_1.default.createElement("p", null, props.document.testProp),
+                    react_1.default.createElement("button", { onClick: () => props.onSelect(props.document) }, editButtonLabel),
+                    react_1.default.createElement("button", { onClick: () => props.onDelete(props.document) }, deleteButtonLabel)))));
+            const documentClassName = controller.createDocument().className;
+            expect(react_2.screen.getByText(`${crudLabels.addNewDocumentLabel} ${documentClassName}`)).toBeInTheDocument();
+            expect(react_2.screen.getByText(`${crudLabels.documentsInCollectionCaption} ${documentClassName}`)).toBeInTheDocument();
+        }));
+        it('should not throw on undefined labels', () => {
+            expect(() => renderResult.rerender(react_1.default.createElement(crud_panel_1.CrudPanel, { controller: controller, labels: undefined },
+                react_1.default.createElement(TestView, null),
+                react_1.default.createElement(TestCard, null)))).not.toThrow();
+        });
     });
 });
 //# sourceMappingURL=crud-panel.spec.js.map