feat: e2e & admin UI updates

.gitignore

@@ -19,6 +19,7 @@ node_modules
 
 dist
 /.env
+/.env.*
 /data
 /rctf.d/*
 !/rctf.d/.keep
@@ -39,3 +40,5 @@ $RECYCLE.BIN
 
 # coverage
 coverage
+
+test-results

packages/client/.gitignore

@@ -0,0 +1,8 @@
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+*.env

packages/client/package.json

@@ -24,6 +24,7 @@
     "@babel/preset-react": "7.16.0",
     "@babel/preset-typescript": "7.16.0",
     "@emotion/jest": "11.5.0",
+    "@playwright/test": "1.50.1",
     "@prefresh/babel-plugin": "0.4.1",
     "@prefresh/webpack": "3.3.2",
     "@reach/auto-id": "0.16.0",
@@ -39,6 +40,7 @@
     "@testing-library/preact": "2.0.1",
     "@testing-library/user-event": "13.5.0",
     "@theme-ui/preset-base": "0.9.1",
+    "@types/node": "16.11.6",
     "@types/react": "17.0.33",
     "@types/webpack-env": "1.16.3",
     "babel-loader": "8.2.3",

packages/client/playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from '@playwright/test'
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    trace: 'on-first-retry',
+
+    baseURL: 'http://localhost:8080',
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+    ignoreHTTPSErrors: true,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+
+  timeout: 30000,
+})

packages/client/src/components/admin/problem.js

@@ -229,137 +229,154 @@ const Problem = ({ classes, problem, update: updateClient }) => {
     <Fragment>
       <div className={`frame ${classes.frame}`}>
         <div className='frame__body'>
-          <form onSubmit={handleUpdate}>
-            <div className='row u-no-padding'>
-              <div className={`col-6 ${classes.header}`}>
-                <input
-                  autoComplete='off'
-                  autoCorrect='off'
-                  required
-                  className='form-group-input input-small'
-                  placeholder='Category'
-                  value={category}
-                  onChange={handleCategoryChange}
-                />
-                <input
-                  autoComplete='off'
-                  autoCorrect='off'
-                  required
-                  className='form-group-input input-small'
-                  placeholder='Problem Name'
-                  value={name}
-                  onChange={handleNameChange}
-                />
-                <div className='form-ext-control form-ext-checkbox'>
-                  <input
-                    id={`chall-${problem.id}-tiebreak-eligible`}
-                    type='checkbox'
-                    className='form-ext-input'
-                    checked={tiebreakEligible}
-                    onChange={handleTiebreakEligibleChange}
+          <form onSubmit={handleUpdate} style={{ marginTop: '1em' }}>
+            <div
+              className={`frame ${classes.frame}`}
+              style={{ boxShadow: 'none' }}
+            >
+              <div className='frame__body'>
+                {/* Section: Basic Info */}
+                <div className='row u-no-padding'>
+                  <div className='col-6'>
+                    <label>Category</label>
+                    <input
+                      className='form-group-input input-small'
+                      placeholder='Category'
+                      value={category}
+                      onChange={handleCategoryChange}
+                      required
+                    />
+                    <label>Problem Name</label>
+                    <input
+                      className='form-group-input input-small'
+                      placeholder='Problem Name'
+                      value={name}
+                      onChange={handleNameChange}
+                      required
+                    />
+                    <label>Author</label>
+                    <input
+                      className='form-group-input input-small'
+                      placeholder='Author'
+                      value={author}
+                      onChange={handleAuthorChange}
+                      required
+                    />
+                  </div>
+
+                  <div className='col-6'>
+                    <label>Minimum Points</label>
+                    <input
+                      type='number'
+                      className='form-group-input input-small'
+                      value={minPoints}
+                      onChange={handleMinPointsChange}
+                      required
+                    />
+                    <label>Maximum Points</label>
+                    <input
+                      type='number'
+                      className='form-group-input input-small'
+                      value={maxPoints}
+                      onChange={handleMaxPointsChange}
+                      required
+                    />
+                    <div
+                      className='form-ext-control form-ext-checkbox'
+                      style={{ marginTop: '1em' }}
+                    >
+                      <input
+                        id={`chall-${problem.id}-tiebreak-eligible`}
+                        type='checkbox'
+                        className='form-ext-input'
+                        checked={tiebreakEligible}
+                        onChange={handleTiebreakEligibleChange}
+                      />
+                      <label
+                        htmlFor={`chall-${problem.id}-tiebreak-eligible`}
+                        className='form-ext-label'
+                      >
+                        Eligible for tiebreaks?
+                      </label>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Section: Description */}
+                <div className='input-control' style={{ marginTop: '1em' }}>
+                  <label>Description</label>
+                  <textarea
+                    placeholder='Describe the problem'
+                    value={description}
+                    onChange={handleDescriptionChange}
+                    required
+                    className='form-group-input input-small'
                   />
-                  <label
-                    htmlFor={`chall-${problem.id}-tiebreak-eligible`}
-                    className='form-ext-label'
-                  >
-                    Eligible for tiebreaks?
-                  </label>
                 </div>
-              </div>
-              <div className={`col-6 ${classes.header}`}>
-                <input
-                  autoComplete='off'
-                  autoCorrect='off'
-                  required
-                  className='form-group-input input-small'
-                  placeholder='Author'
-                  value={author}
-                  onChange={handleAuthorChange}
-                />
-                <input
-                  className='form-group-input input-small'
-                  type='number'
-                  required
-                  value={minPoints}
-                  onChange={handleMinPointsChange}
-                />
-                <input
-                  className='form-group-input input-small'
-                  type='number'
-                  required
-                  value={maxPoints}
-                  onChange={handleMaxPointsChange}
-                />
-              </div>
-            </div>
 
-            <div className='content-no-padding u-center'>
-              <div className={`divider ${classes.divider}`} />
-            </div>
+                {/* Section: Flag */}
+                <div className='input-control'>
+                  <label>Flag</label>
+                  <input
+                    placeholder='Flag'
+                    value={flag}
+                    onChange={handleFlagChange}
+                    className='form-group-input input-small'
+                    required
+                  />
+                </div>
 
-            <textarea
-              autoComplete='off'
-              autoCorrect='off'
-              placeholder='Description'
-              value={description}
-              onChange={handleDescriptionChange}
-            />
-            <div className='input-control'>
-              <input
-                autoComplete='off'
-                autoCorrect='off'
-                required
-                className='form-group-input input-small'
-                placeholder='Flag'
-                value={flag}
-                onChange={handleFlagChange}
-              />
-            </div>
+                {/* Section: Files */}
+                <div style={{ marginTop: '1em' }}>
+                  <label>Challenge Files</label>
+                  <input
+                    type='file'
+                    multiple
+                    onChange={handleFileUpload}
+                    className='form-group-input input-small'
+                  />
+                  {problem.files.length > 0 && (
+                    <div>
+                      <p
+                        className={`frame__subtitle u-no-margin ${classes.downloadsHeader}`}
+                      >
+                        Existing Files
+                      </p>
+                      <div className='tag-container'>
+                        {problem.files.map(file => (
+                          <div className={`tag ${classes.tag}`} key={file.url}>
+                            <a download href={file.url}>
+                              {file.name}
+                            </a>
+                            <div
+                              className='tag tag--delete'
+                              style='margin: 0; margin-left: 3px'
+                              onClick={handleRemoveFile(file)}
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
 
-            {problem.files.length !== 0 && (
-              <div>
-                <p
-                  className={`frame__subtitle u-no-margin ${classes.downloadsHeader}`}
+                {/* Section: Actions */}
+                <div
+                  className={`form-section ${classes.controls}`}
+                  style={{ marginTop: '1.5em' }}
                 >
-                  Downloads
-                </p>
-                <div className='tag-container'>
-                  {problem.files.map(file => {
-                    return (
-                      <div className={`tag ${classes.tag}`} key={file.url}>
-                        <a download href={file.url}>
-                          {file.name}
-                        </a>
-                        <div
-                          className='tag tag--delete'
-                          style='margin: 0; margin-left: 3px'
-                          onClick={handleRemoveFile(file)}
-                        />
-                      </div>
-                    )
-                  })}
+                  <button type='submit' className='btn-small btn-info'>
+                    Update Challenge
+                  </button>
+                  <button
+                    type='button'
+                    className='btn-small btn-danger'
+                    onClick={openDeleteModal}
+                  >
+                    Delete Challenge
+                  </button>
                 </div>
               </div>
-            )}
-
-            <div className='input-control'>
-              <input
-                className='form-group-input input-small'
-                type='file'
-                multiple
-                onChange={handleFileUpload}
-              />
-            </div>
-
-            <div className={`form-section ${classes.controls}`}>
-              <button className='btn-small btn-info'>Update</button>
-              <button
-                className='btn-small btn-danger'
-                onClick={openDeleteModal}
-                type='button'
-              >
-                Delete
-              </button>
             </div>
           </form>
         </div>

packages/client/testConfig.ts

@@ -0,0 +1,31 @@
+import dotenv from 'dotenv'
+
+dotenv.config({ path: '.env.test' })
+
+const testConfig = {
+  baseUrl: process.env.BASE_URL || 'http://localhost:8080',
+  ctfName: process.env.NAME,
+  homeContent: process.env.HOME_CONTENT,
+  loginToken: process.env.LOGIN_TOKEN,
+  divisions: process.env.DIVISIONS ? JSON.parse(process.env.DIVISIONS) : {},
+
+  testChal: process.env.TEST_CHAL,
+  testChalAns: process.env.TEST_CHAL_ANSWER || '',
+
+  testRegEmail: process.env.TEST_REG_EMAIL || '',
+  testRegName: process.env.TEST_REG_NAME || '',
+
+  testUpdateEmail: process.env.TEST_UPDATE_EMAIL || '',
+  testUpdateName: process.env.TEST_UPDATE_NAME || '',
+
+  testNewEmail: process.env.TEST_NEW_MEMBER || '',
+
+  testNewChalName: process.env.TEST_NEW_CHAL_NAME || '',
+  testNewChalAuthor: process.env.TEST_NEW_CHAL_AUTHOR || '',
+  testNewChalDes: process.env.TEST_NEW_CHAL_DES || '',
+  testNewChalFlag: process.env.TEST_NEW_CHAL_FLAG || '',
+
+  regularUserToken: process.env.REGULAR_USER_TOKEN || '',
+}
+
+export default testConfig