@enact/ui/Routable/tests/Router-specs.js

A collection of simplified unstyled cross-platform UI components for Enact

"use strict";

require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _Route = _interopRequireDefault(require("../Route"));
var _Router = require("../Router");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
/* eslint no-console: ["error", { allow: ["warn", "error"] }], react/jsx-no-bind: off */

describe('Router', function () {
  var View = function View() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {});
  };

  // the internal representation of
  // <Router>
  // 	<Route path="app" component={View}>
  // 		<Route path="home" component={View} />
  // 		<Route path="settings" component={View} />
  // 	</Route>
  // 	<Route path="admin" component={View} />
  // </Router>
  var routes = {
    app: {
      $component: View,
      $props: {},
      home: {
        $component: View,
        $props: {}
      },
      settings: {
        $component: View,
        $props: {}
      }
    },
    admin: {
      $component: View,
      $props: {}
    }
  };
  test('should render a single component matching the {path}', function () {
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Router.RouterBase, {
      routes: routes,
      path: "/app"
    }));
    var view = _react.screen.getByRole('button');
    expect(view).toBeInTheDocument();
  });
  test('should render an array of components matching the {path}', function () {
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Router.RouterBase, {
      routes: routes,
      path: "/app/home"
    }));
    var view = _react.screen.getAllByRole('button');
    var expected = 2;
    expect(view.length).toBe(expected);
  });
  test('should render an array of components matching the {path} as an array', function () {
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Router.RouterBase, {
      routes: routes,
      path: ['app', 'home']
    }));
    var view = _react.screen.getAllByRole('button');
    var expected = 2;
    expect(view.length).toBe(expected);
  });
  test('should render no children if {path} does not exist in {routes}', function () {
    // Modify the console spy to silence error output with
    // an empty mock implementation
    console.error.mockImplementation();
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Router.RouterBase, {
      routes: routes,
      path: "/help"
    }));
    var view = _react.screen.queryByRole('button');
    expect(view).toBeNull();
  });
  test('should render children into {component}', function () {
    var component = function component(props) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "data-testid": "div1",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          "data-testid": "div2",
          children: props.children
        })
      });
    };
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Router.Router, {
      routes: routes,
      path: "/app/settings",
      component: component
    }));
    var secondDiv = _react.screen.getByTestId('div2');
    var expected = 2;
    var actual = secondDiv.childElementCount;
    expect(actual).toBe(expected);
  });
  test('should render an array of components matching the {path} using JSX routes', function () {
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Router.Router, {
      path: "/app/home",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Route["default"], {
        path: "app",
        component: View,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
          path: "home",
          component: View
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
          path: "settings",
          component: View
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
        path: "admin",
        component: View
      })]
    }));
    var view = _react.screen.getAllByRole('button');
    var expected = 2;
    var actual = view.length;
    expect(actual).toBe(expected);
  });
  test('should render a different component when the routes change for the same {path}', function () {
    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Router.Router, {
        path: "/app",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Route["default"], {
          path: "app",
          component: View,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
            path: "home",
            component: View
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
            path: "settings",
            component: View
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
          path: "admin",
          component: View
        })]
      })),
      rerender = _render.rerender;
    var NewView = function NewView() {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        "data-testid": "span"
      });
    };
    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Router.Router, {
      path: "/app",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
        path: "app",
        component: NewView,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
          path: "app",
          component: NewView
        })
      })
    }));
    var view = _react.screen.getByTestId('span');
    expect(view).toBeInTheDocument();
  });
  test('should render nothing for an invalid path', function () {
    // Modify the console spy to silence error output with
    // an empty mock implementation
    console.error.mockImplementation();
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Router.Router, {
      path: "/does/not/exist",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Route["default"], {
        path: "app",
        component: View,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
          path: "home",
          component: View
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
          path: "settings",
          component: View
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
        path: "admin",
        component: View
      })]
    }));
    var view = _react.screen.queryByRole('button');
    expect(view).toBeNull();
  });
  test('should render nothing for a partially valid path', function () {
    // Modify the console spy to silence error output with
    // an empty mock implementation
    console.error.mockImplementation();
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Router.Router, {
      path: "/app/home/other",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Route["default"], {
        path: "app",
        component: View,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
          path: "home",
          component: View
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
          path: "settings",
          component: View
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Route["default"], {
        path: "admin",
        component: View
      })]
    }));
    var view = _react.screen.queryByRole('button');
    expect(view).toBeNull();
  });
});