Add tests for admin pages

src/auth.ts

@@ -37,6 +37,8 @@ export async function isAuthenticated(): Promise<boolean> {
     });
     return true;
   } catch (err) {
+    // remove the cookie since it's invalid
+    deleteTokenCookie();
     return false;
   }
 }

src/components/AdminSidebar/AdminSidebar.tsx

@@ -1,21 +1,20 @@
 import * as React from "react";
-import { Link } from "react-router-dom";
 import "./AdminSidebar.scss";
 import AdminSidebarLink from "../AdminSidebarLink";
 
-export interface AdminSiderbarProps {
+export interface AdminSidebarProps {
   path: string;
 }
-export interface AdminSiderbarState {}
+export interface AdminSidebarState {}
 
-class AdminSidebar extends React.Component<AdminSiderbarProps, AdminSiderbarState> {
+class AdminSidebar extends React.Component<AdminSidebarProps, AdminSidebarState> {
   render() {
     const { path } = this.props;
     return (
       <div className="admin-sidebar">
         <AdminSidebarLink to="/admin" path={path}>Home</AdminSidebarLink>
         <AdminSidebarLink to="/admin/events" path={path}>Events</AdminSidebarLink>
-        <AdminSidebarLink to="/admin/logout" path={path}>Logout</AdminSidebarLink>
+        <AdminSidebarLink id="admin-sidebar-logout" to="/admin/logout" path={path}>Logout</AdminSidebarLink>
       </div>
     );
   }

src/components/AdminSidebarLink/AdminSidebarLink.tsx

@@ -5,16 +5,17 @@ import "./AdminSidebarLink.scss";
 export interface AdminSidebarLinkProps {
   to: string;
   path: string;
+  id?: string;
 }
 export interface AdminSidebarLinkState {}
 
 class AdminSidebarLink extends React.Component<AdminSidebarLinkProps, AdminSidebarLinkState> {
   render() {
-    const { to, path, children } = this.props;
+    const { to, path, children, id } = this.props;
     const activeClass = to === path ? "active" : "";
 
     return (
-      <Link to={to} className={`admin-sidebar-link ${activeClass}`}>
+      <Link id={id} to={to} className={`admin-sidebar-link ${activeClass}`}>
         { children }
       </Link>
     );

src/pages/AdminLoginPage/AdminLoginPage.tsx

@@ -105,14 +105,14 @@ class AdminLoginPage extends React.Component<AdminLoginPageProps, AdminLoginPage
         <Helmet>
           <link rel="canonical" href="https://sik.ayy.fi/admin/login" />
         </Helmet>
-        <form onSubmit={this.handleSubmit}>
+        <form className="admin-login-form" onSubmit={this.handleSubmit}>
           <label>Username
-            <input type="text" name="username" value={username} onChange={this.handleUserNameChange} />
+            <input id="login-username" type="text" name="username" value={username} onChange={this.handleUserNameChange} />
           </label>
           <label>Password
-            <input type="password" name="password" value={password} onChange={this.handlePasswordChange} />
+            <input id="login-password" type="password" name="password" value={password} onChange={this.handlePasswordChange} />
           </label>
-          <input type="submit" />
+          <input id="login-submit" type="submit" />
         </form>
         { this.renderError() }
       </div>

tests/testcafe/admin.test.ts

@@ -3,7 +3,7 @@
  * This file is used by TestCafé to run end-to-end tests with chrome against the site.
  * Tests are grouped into fixtures and fixtures into files.
  */
-import { Selector } from "testcafe";
+import { Selector, ClientFunction } from "testcafe";
 
 fixture`Admin page renders and functions correctly`.page("http://localhost:3000/admin");
 
@@ -15,3 +15,56 @@ test("Header contains text \"Admin panel\"", async t => {
   await t.expect(header.textContent)
          .contains("Admin panel");
 });
+
+fixture`Admin login page functions correctly`.page("http://localhost:3000/admin/login");
+
+test("Login form exists", async t => {
+  /**
+   * Test if the page contains a form.
+   */
+  const form = Selector("form.admin-login-form");
+  await t.expect(form.exists).ok();
+});
+
+test("User can log in with default credentials", async t => {
+  /**
+   * Test if the user can log in with default credentials.
+   */
+  const USERNAME = "admin";
+  const PASSWORD = "password123";
+
+  await t.typeText(Selector("#login-username"), USERNAME);
+  await t.typeText(Selector("#login-password"), PASSWORD);
+  await t.click(Selector("#login-submit"));
+
+  const frontPage = Selector(".admin-front-page");
+  await t.expect(frontPage.exists).ok();
+});
+
+test("User can log out and is redirected to login", async t => {
+  /**
+   * Test if the user can log out.
+   */
+  await t.click(Selector("#login-submit"));
+
+  const logout = Selector("#admin-sidebar-logout");
+  await t.click(logout);
+
+  const loginForm = Selector("form.admin-login-form");
+  await t.expect(loginForm.exists).ok();
+});
+
+test("User is redirected to login when JWT token is invalid", async t => {
+  /**
+   * Test if the user is redirected to login when JWT token is invalid.
+   */
+  const TOKEN = "FOOBAR";
+  const setCookie = ClientFunction(() => {
+    document.cookie = `jwt=${TOKEN}`;
+  });
+
+  await t.navigateTo("/admin/events");
+
+  const loginForm = Selector("form.admin-login-form");
+  await t.expect(loginForm.exists).ok();
+});