[ENH] Aligned assessment tool workflow UI elements

components/category-select-table.vue

@@ -2,9 +2,9 @@
 
     <div>
 
-        <b-row class="no-padding-row">
+        <b-row>
 
-            <b-col cols="12" class="no-padding-col">
+            <b-col cols="12">
                 <b-table
                     outlined
                     selectable

components/category-toolgroup.vue

@@ -1,18 +1,17 @@
 <template>
-    <div>
-        <b-row>
-            <b-col cols="6">
+    <b-row>
+        <b-col cols="4">
+            <b-row>
                 <v-select
                     v-if="tableRows.length > 0"
                     data-cy="toolgroup-select"
                     :options="toolTerms"
                     outlined
                     @input="selectTool"
-                    :selectable="(option) => !getSelectedTools.some(el => el.identifier.includes(option.identifier))" />
-            </b-col>
-        </b-row>
-        <b-row>
-            <b-col>
+                    :selectable="(option) => !getSelectedTools.some(el => el.identifier.includes(option.identifier))"
+                    class="aligned-element" />
+            </b-row>
+            <b-row>
                 <b-table
                     v-if="getSelectedTools.length > 0"
                     data-cy="assessment-tool-table"
@@ -26,22 +25,21 @@
                     @row-selected="highlightRow"
                     :tbody-tr-class="styleTableRow"
                     thead-class="hidden" />
-
-            </b-col>
-            <b-col>
-                <b-table
-                    v-if="tableRows.length > 0"
-                    data-cy="assessment-column-table"
-                    outlined
-                    head-variant="dark"
-                    :items="tableRows"
-                    selected-variant=""
-                    thead-class="hidden"
-                    @row-clicked="mapColumn"
-                    :tbody-tr-class="styleRow" />
-            </b-col>
-        </b-row>
-    </div>
+            </b-row>
+        </b-col>
+        <b-col cols="8" class="margin-top">
+            <b-table
+                v-if="tableRows.length > 0"
+                data-cy="assessment-column-table"
+                outlined
+                head-variant="dark"
+                :items="tableRows"
+                selected-variant=""
+                thead-class="hidden"
+                @row-clicked="mapColumn"
+                :tbody-tr-class="styleRow" />
+        </b-col>
+    </b-row>
 </template>
 
 <script>
@@ -123,5 +121,11 @@
 .selected-tool {
     background-color: red !important;
 }
+.margin-top {
+    margin-top: 66px;
+}
+.aligned-element {
+    flex: 1;
+}
 
 </style>

cypress.config.js

@@ -6,6 +6,8 @@ const fs = require("fs");
 module.exports = defineConfig({
 
     e2e: {
+        viewportHeight: 1080,
+        viewportWidth: 1920,
 
         baseUrl: "http://localhost:3000",
 

cypress/e2e/app/simple-e2etest.cy.js

@@ -13,11 +13,7 @@ describe("End to end test using a simple UI path through the app", () => {
     ];
 
     beforeEach(() => {
-
-        // Standard setup for annotation tool testing
-        cy.appSetup();
-
-        // 2. Open the index page
+        // 1. Open the index page
         cy.visit("/");
     });
 

cypress/e2e/page/annotation-pagetests.cy.js

@@ -8,12 +8,6 @@ describe("tests on annotation page ui with programmatic state loading and store
         // NOTE: Add more dataset json files here via 'require'
     ];
 
-    beforeEach(() => {
-
-        // Standard app setup
-        cy.appSetup();
-    });
-
     datasets.forEach((p_dataset) => {
 
         context("Annotation page tests with " + p_dataset.description + " data", () => {

cypress/e2e/page/categorization-pagetests.cy.js

@@ -9,12 +9,6 @@ describe("Tests on categorization page ui via programmatic state loading and sto
         // NOTE: Add more dataset json files here via 'require'
     ];
 
-    beforeEach(() => {
-
-        // Standard app setup
-        cy.appSetup();
-    });
-
     datasets.forEach((p_dataset) => {
 
         context("Categorization page tests with " + p_dataset.description + " data", () => {

cypress/e2e/page/download-pagetests.cy.js

@@ -9,12 +9,6 @@ describe("tests on download page ui via programmatic state loading and store int
         // NOTE: Add more dataset json files here via 'require'
     ];
 
-    beforeEach(() => {
-
-        // Standard app setup
-        cy.appSetup();
-    });
-
     datasets.forEach((p_dataset) => {
 
         context("download page tests with " + p_dataset.description + " data", () => {

cypress/e2e/page/index-pagetests.cy.js

@@ -12,12 +12,6 @@ describe("Tests on the index page via store interaction", () => {
         // NOTE: Add more dataset json files here via 'require'
     ];
 
-    beforeEach(() => {
-
-        // Standard app setup
-        cy.appSetup();
-    });
-
     datasets.forEach((p_dataset) => {
 
         context("index page with " + p_dataset.description + " data", () => {

cypress/support/commands.js

@@ -26,16 +26,6 @@
 
 // Standard setup functionality for each collection of tests
 // NOTE: In the future we will likely want to parametrize this for different
-// test setups (i.e. testing across different viewport sizes).
-Cypress.Commands.add("appSetup", () => {
-
-    // Standard setup for annotation tool testing
-
-    // A. Set viewport size
-    // NOTE: Standard 13-inch laptop screen to start, but this can be expanded
-    cy.viewport("macbook-13");
-});
-
 Cypress.Commands.add("assertButtonStatus", (p_buttonName, p_enabled) => {
 
     let chainer = ( p_enabled ) ? "not.have.class" : "have.class";

pages/categorization.vue

@@ -34,11 +34,7 @@
             </b-col>
 
         </b-row>
-        <b-row>
-            <b-col cols="12">
-                <categoryToolgroup />
-            </b-col>
-        </b-row>
+        <categoryToolgroup />
 
     </b-container>
 

test_contributions.md

@@ -22,7 +22,6 @@ TBD
   - `context` is a container function used to group different kinds of tests within the file and also is used to describe that context
   - `it` defines the individual, specific test you are writing
 *3.* Both `describe` and `context` can contain `beforeEach` functions that will be run before every `context` or before every `it`, respectively
-  - Use the `appSetup` function in your `beforeEach` for the `describe` function. This calls a set of common app configuration commands.
 *4.* Writing individual tests
   - Tests contain three primary sections: setup, action, and assert. They can be repeated as needed depending on the complexity of the test. But a good guideline to follow is to keep tests as simople as possible.
   - It is possible to work with multiple datasets for one test file. The paradigm that has been setup can be seen, for example, in `annotation-pagetests.cy.js`. The idea is that you utilize json files in the `fixtures` folder that describe each dataset and can use functions `datasetMeetsTestCriteria` and `loadAppState` to reflect both the data needs of your test and the dataset that's being used for the test.