Implement RAC Style Library into Aurora

.gitignore

@@ -10,3 +10,8 @@ local_settings.py
 db.sqlite3
 media
 config.py
+
+# BackstopJS
+/node_modules
+backstop_data/html_report/
+bitmaps_test/

README.md

@@ -34,7 +34,7 @@ $ docker-compose exec web import_sample_data
 
 If you'd like to transfer your own bags, note that bags must be serialized as either a TAR (compressed or uncompressed) or ZIP file.
 
-If you'er using S3 storage (see [Transferring digital records](#transferring-digital-records)), you'll need to upload a bag to an S3 bucket configured as an upload bucket for one of your organizations. 
+If you're using Amazon S3 storage (see [Transferring digital records](#transferring-digital-records)), you'll need to upload a bag to an S3 bucket configured as an upload bucket for one of your organizations. 
 
 If you're using local storage you can then transfer those bags by SFTPing them into the local container using the credentials below:
 - Protocol: `SFTP`
@@ -100,30 +100,25 @@ At a high level, transfers are processed as follows:
 - Relevant PREMIS rights statements are assigned to transfers (see Organization
   Management section for details).
 
-### Disabling S3 Storage
+### Disabling Amazon S3 Storage
 
-By default, Aurora is configured to use [Amazon S3](https://aws.amazon.com/s3/) to
-store uploaded and validated transfers.
+By default, Aurora is configured to use [Amazon S3](https://aws.amazon.com/s3/) to store uploaded and validated transfers.
 
-If you don't want to use S3, you can configure Aurora to use the local file system
-instead:
+If you don't want to use S3, you can configure Aurora to use the local file system instead:
 
 1. Set the `S3_USE` config value to `False`.
 2. Ensure that the `TRANSFER_UPLOADS_ROOT` is properly set and that the filepath
    specified there exists and is writable by Aurora.s
 
 ## API
 
-Aurora comes with a RESTful API, built using the Django Rest Framework. In addition to interacting with the API via your favorite command-line client, you can also use the browsable API interface available in the application.
+Aurora comes with a RESTful API, built using the Django Rest Framework, accessible via any command-line client.
 
 ### Authentication
 
 #### Using OAuth
 
-In order to make requests against the Aurora API when using an OAuth provider, you
-will first need to add an application to your OAuth provider, then make a request
-against the provider's token endpoint using the client credentials flow. The token
-returned from the provider should then be attached as a Bearer token to requests.
+In order to make requests against the Aurora API when using an OAuth provider, you will first need to add an application to your OAuth provider, then make a request against the provider's token endpoint using the client credentials flow. The token returned from the provider should then be attached as a Bearer token to requests.
 
 The [`ElectronBonder` library](https://github.com/RockefellerArchiveCenter/electronbonder)
 contains code which demonstrates this flow (see the `authorize_oauth` method in
@@ -153,10 +148,23 @@ contains code which demonstrates this flow (see the `authorize` method in
 
 ## Django Admin Configuration
 
-Aurora comes with the default [Django admin site](https://docs.djangoproject.com/en/1.11/ref/contrib/admin/). Only users with superuser privileges are able to view this interface, which can be accessed by clicking on the profile menu and selecting "Administration".
+Aurora comes with the default [Django admin site](https://docs.djangoproject.com/en/1.11/ref/contrib/admin/). Only users with superuser privileges are able to view this interface, available via the "Admin" navigation menu.
 
 In addition to allowing for the manual creation and deletion of certain objects, this interface also allows authorized users to edit system values which are used by the application, including the human-readable strings associated with Bag Log Codes. Care should be taken when making changes in the Django admin interface, particularly the creation or deletion of objects, since they can have unintended consequences.
 
+## Visual Regression Testing
+
+The repository includes [BackstopJS](https://github.com/garris/BackstopJS) to test visual changes to the site by comparing a set of reference images for different screen sizes. Anytime the CSS styles are changed, use BackstopJS to test locally:
+
+1. Follow the [installation instructions](#installation) to run the Aurora app locally.
+2. Add sample data and accessions by running: `docker compose exec web python manage.py loaddata complete`
+3. With Aurora running in Docker, open another terminal and run the BackstopJS tests: `yarn backstop-test`.
+4. Review the results in the browser and look at the diff of any failed tests.
+5. To update the reference image files with the results of the last test images use: `yarn backstop-approve`. Subsequent tests will be compared against these updated reference files.
+6. Commit any updated reference images to the repository so that future tests will be compared against the most recent images.
+
+To add or update reference images, edit the scenarios in `backstop.json` and run `yarn backstop-reference`.
+
 ## Contributing
 
 Aurora is an open source project and we welcome contributions! If you want to fix a bug, or have an idea of how to enhance the application, the process looks like this:

aurora/settings.py

@@ -83,13 +83,14 @@
 WSGI_APPLICATION = "aurora.wsgi.application"
 
 REST_FRAMEWORK = {
-    "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.PageNumberPagination",
-    "PAGE_SIZE": 50,
     "DEFAULT_AUTHENTICATION_CLASSES": (
         # "rest_framework_jwt.authentication.JSONWebTokenAuthentication",
         "bag_transfer.authentication.CognitoAppAuthentication",
         "rest_framework.authentication.SessionAuthentication",
     ),
+    'DEFAULT_RENDERER_CLASSES': (
+        'rest_framework.renderers.JSONRenderer',
+    )
 }
 
 # Database
@@ -164,10 +165,10 @@
 
 # Content Security Policy
 CSP_DEFAULT_SRC = ("'self'", 'https://rockarch.matomo.cloud/')
-CSP_IMG_SRC = ("'self'")
-CSP_STYLE_SRC = ("'self'", "'unsafe-inline'", 'https://cdnjs.cloudflare.com/', 'https://fonts.googleapis.com/')
-CSP_SCRIPT_SRC = ("'self'", "'unsafe-inline'", "'unsafe-eval'", 'https://cdnjs.cloudflare.com/', 'https://oss.maxcdn.com/', 'https://cdn.matomo.cloud/', 'https://cdn.datatables.net/')
-CSP_FONT_SRC = ("'self'", 'https://fonts.gstatic.com', 'https://cdnjs.cloudflare.com/')
+CSP_IMG_SRC = ("'self'", 'https://assets.rockarch.org/')
+CSP_STYLE_SRC = ("'self'", "'unsafe-inline'", 'https://assets.rockarch.org/')
+CSP_SCRIPT_SRC = ("'self'", "'unsafe-inline'", "'unsafe-eval'", 'https://cdn.matomo.cloud/', 'https://cdn.datatables.net/')
+CSP_FONT_SRC = ("'self'", 'https://assets.rockarch.org/')
 
 # Transfer settings
 S3_USE = config.S3_USE
@@ -227,27 +228,6 @@
 # Matomo Analytics configs
 MTM_ID = config.MTM_ID
 
-# List of colors used in dashboard for record types
-RECORD_TYPE_COLORS = [
-    "#f56954",
-    "#00a65a",
-    "#f39c12",
-    "#00c0ef",
-    "#3c8dbc",
-    "#d2d6de",
-    "#f56954",
-    "#00a65a",
-    "#f39c12",
-    "#00c0ef",
-    "#3c8dbc",
-    "#d2d6de",
-    "#f56954",
-    "#00a65a",
-    "#f39c12",
-    "#00c0ef",
-    "#3c8dbc",
-    "#d2d6de",
-]
 
 DEFAULT_AUTO_FIELD = 'django.db.models.AutoField'
 

backstop.json

@@ -0,0 +1,166 @@
+{
+  "id": "backstop_default",
+  "viewports": [
+    {
+      "label": "phone",
+      "width": 320,
+      "height": 480
+    },
+    {
+      "label": "tablet",
+      "width": 1024,
+      "height": 768
+    },
+    {
+      "label": "desktop",
+      "width": 1920,
+      "height": 1080
+    }
+  ],
+  "onBeforeScript": "puppet/onBefore.js",
+  "onReadyScript": "puppet/onReady.js",
+  "scenarios": [
+    {
+    "label": "Login",
+    "url": "http://localhost:8000/login/"
+    },
+    {
+      "label": "Reset Password",
+      "url": "http://localhost:8000/reset-password/"
+    },
+    {
+      "label": "Dashboard",
+      "url": "http://localhost:8000/app/",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "All Transfers",
+      "url": "http://localhost:8000/app/transfers/",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Transfer Detail",
+      "url": "http://localhost:8000/app/transfers/2",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Appraise",
+      "url": "http://localhost:8000/app/appraise/",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Appraise Modal",
+      "url": "http://localhost:8000/app/appraise/",
+      "clickSelector": ".appraisal-note",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Accessioning Queue",
+      "url": "http://localhost:8000/app/accession/",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Saved Accessions",
+      "url": "http://localhost:8000/app/accession/saved",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Accession Details",
+      "url": "http://localhost:8000/app/accession/3",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Organizations",
+      "url": "http://localhost:8000/app/orgs",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Add Organization",
+      "url": "http://localhost:8000/app/orgs/add",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Organization Admin",
+      "url": "http://localhost:8000/app/orgs/1",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Organization Admin Modal",
+      "url": "http://localhost:8000/app/orgs/1",
+      "clickSelector": ".object-delete-button",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Organization Admin Transfer Settings",
+      "url": "http://localhost:8000/app/orgs/1",
+      "clickSelector": "#show-transfer-settings",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Edit BagIt Profile",
+      "url": "http://localhost:8000/app/bagit-profiles/1/edit/",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "View BagIt Profile",
+      "url": "http://localhost:8000/app/bagit-profiles/1/",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Edit Rights",
+      "url": "http://localhost:8000/app/rights/1/edit",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "View Rights",
+      "url": "http://localhost:8000/app/rights/1/",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Users",
+      "url": "http://localhost:8000/app/users/",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Add User",
+      "url": "http://localhost:8000/app/users/add/",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "User Details",
+      "url": "http://localhost:8000/app/users/5/",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Edit User",
+      "url": "http://localhost:8000/app/users/5/edit/",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "User Profile",
+      "url": "http://localhost:8000/app/users/1/",
+      "onBeforeScript": "puppet/login.js"
+    },
+    {
+      "label": "Change Password",
+      "url": "http://localhost:8000/app/users/change-password/",
+      "onBeforeScript": "puppet/login.js"
+    }
+  ],
+  "paths": {
+    "bitmaps_reference": "backstop_data/bitmaps_reference",
+    "bitmaps_test": "backstop_data/bitmaps_test",
+    "engine_scripts": "backstop_data/engine_scripts",
+    "html_report": "backstop_data/html_report",
+    "ci_report": "backstop_data/ci_report"
+  },
+  "report": ["browser"],
+  "engine": "puppeteer",
+  "engineOptions": {
+    "args": ["--no-sandbox"]
+  },
+  "asyncCaptureLimit": 1,
+  "asyncCompareLimit": 50,
+  "debug": false,
+  "debugWindow": false
+}

backstop_data/engine_scripts/cookies.json

@@ -0,0 +1,14 @@
+[
+  {
+    "domain": ".www.yourdomain.com",
+    "path": "/",
+    "name": "yourCookieName",
+    "value": "yourCookieValue",
+    "expirationDate": 1798790400,
+    "hostOnly": false,
+    "httpOnly": false,
+    "secure": false,
+    "session": false,
+    "sameSite": "Lax"
+  }
+]

backstop_data/engine_scripts/playwright/clickAndHoverHelper.js

@@ -0,0 +1,43 @@
+module.exports = async (page, scenario) => {
+  const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
+  const clickSelector = scenario.clickSelectors || scenario.clickSelector;
+  const keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
+  const scrollToSelector = scenario.scrollToSelector;
+  const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+  if (keyPressSelector) {
+    for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
+      await page.waitForSelector(keyPressSelectorItem.selector);
+      await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
+    }
+  }
+
+  if (hoverSelector) {
+    for (const hoverSelectorIndex of [].concat(hoverSelector)) {
+      await page.waitForSelector(hoverSelectorIndex);
+      await page.hover(hoverSelectorIndex);
+    }
+  }
+
+  if (clickSelector) {
+    for (const clickSelectorIndex of [].concat(clickSelector)) {
+      await page.waitForSelector(clickSelectorIndex);
+      await page.click(clickSelectorIndex);
+    }
+  }
+
+  if (postInteractionWait) {
+    if (parseInt(postInteractionWait) > 0) {
+      await page.waitForTimeout(postInteractionWait);
+    } else {
+      await page.waitForSelector(postInteractionWait);
+    }
+  }
+
+  if (scrollToSelector) {
+    await page.waitForSelector(scrollToSelector);
+    await page.evaluate(scrollToSelector => {
+      document.querySelector(scrollToSelector).scrollIntoView();
+    }, scrollToSelector);
+  }
+};

backstop_data/engine_scripts/playwright/interceptImages.js

@@ -0,0 +1,31 @@
+/**
+ * INTERCEPT IMAGES
+ * Listen to all requests. If a request matches IMAGE_URL_RE
+ * then stub the image with data from IMAGE_STUB_URL
+ *
+ * Use this in an onBefore script E.G.
+  ```
+  module.exports = async function(page, scenario) {
+    require('./interceptImages')(page, scenario);
+  }
+  ```
+ *
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const IMAGE_URL_RE = /\.gif|\.jpg|\.png/i;
+const IMAGE_STUB_URL = path.resolve(__dirname, '../../imageStub.jpg');
+const IMAGE_DATA_BUFFER = fs.readFileSync(IMAGE_STUB_URL);
+const HEADERS_STUB = {};
+
+module.exports = async function (page, scenario) {
+  page.route(IMAGE_URL_RE, route => {
+    route.fulfill({
+      body: IMAGE_DATA_BUFFER,
+      headers: HEADERS_STUB,
+      status: 200
+    });
+  });
+};