refactor: rename panel components (NASA-AMMOS#62)

- Makes use of components more clear
- Add e2e tests for panels
- Add e2e test results folder to prettier ignore

Author: camargo

.prettierignore

@@ -1,6 +1,7 @@
 .svelte-kit/**
-static/**
 build/**
+e2e-test-results/**
 node_modules/**
 src/css/utilities.css
+static/**
 unit-test-results/**

e2e-tests/fixtures/Plan.ts

@@ -5,22 +5,32 @@ import { SchedulingGoals } from './SchedulingGoals.js';
 
 export class Plan {
   activitiesNavButton: Locator;
-  activityFormComponent: Locator;
-  activityTableComponent: Locator;
-  activityTypesComponent: Locator;
+  activityTable: Locator;
   appError: Locator;
   constraintsNavButton: Locator;
+  gridMenu: Locator;
+  gridMenuButton: Locator;
+  gridMenuItem: (name: string) => Locator;
+  panelActivityForm: Locator;
+  panelActivityTypes: Locator;
+  panelConstraintViolations: Locator;
+  panelConstraints: Locator;
+  panelExpansion: Locator;
+  panelScheduling: Locator;
+  panelSimulation: Locator;
+  panelTimelineForm: Locator;
+  panelViewEditor: Locator;
+  panelViews: Locator;
   planTitle: Locator;
   scheduleButton: Locator;
-  schedulingComponent: Locator;
   schedulingGoalDifferenceBadge: Locator;
   schedulingGoalEnabledCheckbox: Locator;
   schedulingGoalListItemSelector: string;
   schedulingGoalNewButton: Locator;
   schedulingNavButton: Locator;
   schedulingStatusSelector: (status: string) => string;
   simulationNavButton: Locator;
-  timelineComponent: Locator;
+  timeline: Locator;
   viewNavButton: Locator;
 
   constructor(public page: Page, public plans: Plans, public schedulingGoals: SchedulingGoals) {
@@ -60,38 +70,56 @@ export class Plan {
     await this.page.waitForSelector(this.schedulingStatusSelector('Complete'), { state: 'visible', strict: true });
   }
 
+  async showPanel(name: string) {
+    await expect(this.gridMenu).not.toBeVisible();
+    await this.gridMenuButton.first().click();
+    await this.gridMenu.waitFor({ state: 'visible' });
+    await this.gridMenuItem(name).click();
+  }
+
   async showSchedulingLayout() {
     await this.schedulingNavButton.click();
-    await this.schedulingComponent.waitFor({ state: 'visible' });
-    await this.timelineComponent.waitFor({ state: 'visible' });
-    await this.activityTableComponent.waitFor({ state: 'visible' });
-    await this.activityFormComponent.waitFor({ state: 'visible' });
-    await expect(this.schedulingComponent).toBeVisible();
-    await expect(this.timelineComponent).toBeVisible();
-    await expect(this.activityTableComponent).toBeVisible();
-    await expect(this.activityFormComponent).toBeVisible();
+    await this.panelScheduling.waitFor({ state: 'visible' });
+    await this.timeline.waitFor({ state: 'visible' });
+    await this.activityTable.waitFor({ state: 'visible' });
+    await this.panelActivityForm.waitFor({ state: 'visible' });
+    await expect(this.panelScheduling).toBeVisible();
+    await expect(this.timeline).toBeVisible();
+    await expect(this.activityTable).toBeVisible();
+    await expect(this.panelActivityForm).toBeVisible();
     await expect(this.schedulingNavButton).toHaveClass(/selected/);
   }
 
   updatePage(page: Page): void {
     this.activitiesNavButton = page.locator(`.nav-button:has-text("Activities")`);
-    this.activityFormComponent = page.locator('[data-component-name="ActivityForm"]');
-    this.activityTableComponent = page.locator('[data-component-name="ActivityTable"]');
-    this.activityTypesComponent = page.locator('[data-component-name="ActivityTypes"]');
+    this.activityTable = page.locator('[data-component-name="ActivityTable"]');
     this.appError = page.locator('.app-error');
     this.constraintsNavButton = page.locator(`.nav-button:has-text("Constraints")`);
+    this.gridMenu = page.locator('.grid-menu > .menu > .menu-slot');
+    this.gridMenuButton = page.locator('.grid-menu');
+    this.gridMenuItem = (name: string) =>
+      page.locator(`.grid-menu > .menu > .menu-slot > .menu-item:has-text("${name}")`);
     this.page = page;
+    this.panelActivityForm = page.locator('[data-component-name="ActivityFormPanel"]');
+    this.panelActivityTypes = page.locator('[data-component-name="ActivityTypesPanel"]');
+    this.panelConstraintViolations = page.locator('[data-component-name="ConstraintViolationsPanel"]');
+    this.panelConstraints = page.locator('[data-component-name="ConstraintsPanel"]');
+    this.panelExpansion = page.locator('[data-component-name="ExpansionPanel"]');
+    this.panelScheduling = page.locator('[data-component-name="SchedulingPanel"]');
+    this.panelSimulation = page.locator('[data-component-name="SimulationPanel"]');
+    this.panelTimelineForm = page.locator('[data-component-name="TimelineFormPanel"]');
+    this.panelViewEditor = page.locator('[data-component-name="ViewEditorPanel"]');
+    this.panelViews = page.locator('[data-component-name="ViewsPanel"]');
     this.planTitle = page.locator(`.plan-title:has-text("${this.plans.planName}")`);
     this.scheduleButton = page.locator('.status-badge > .title:has-text("Schedule")');
-    this.schedulingComponent = page.locator('[data-component-name="Scheduling"]');
     this.schedulingGoalDifferenceBadge = page.locator('.difference-badge');
     this.schedulingGoalEnabledCheckbox = page.locator(
       `.scheduling-goal:has-text("${this.schedulingGoals.goalName}") >> input[type="checkbox"]`,
     );
     this.schedulingGoalNewButton = page.locator(`button[name="new-scheduling-goal"]`);
     this.schedulingNavButton = page.locator(`.nav-button:has-text("Scheduling")`);
     this.simulationNavButton = page.locator(`.nav-button:has-text("Simulation")`);
-    this.timelineComponent = page.locator('[data-component-name="Timeline"]');
+    this.timeline = page.locator('[data-component-name="Timeline"]');
     this.viewNavButton = page.locator(`.nav-button:has-text("View")`);
   }
 }

e2e-tests/tests/plan.test.ts

@@ -40,10 +40,58 @@ test.describe.serial('Plan', () => {
   });
 
   test('Initially the View layout should be displayed', async () => {
-    await expect(plan.activityFormComponent).toBeVisible();
-    await expect(plan.activityTableComponent).toBeVisible();
-    await expect(plan.activityTypesComponent).toBeVisible();
-    await expect(plan.timelineComponent).toBeVisible();
+    await expect(plan.panelActivityForm).toBeVisible();
+    await expect(plan.activityTable).toBeVisible();
+    await expect(plan.panelActivityTypes).toBeVisible();
+    await expect(plan.timeline).toBeVisible();
     await expect(plan.viewNavButton).toHaveClass(/selected/);
   });
+
+  test(`Clicking on 'Constraints' in the grid menu should show the constraints panel`, async () => {
+    await expect(plan.panelConstraints).not.toBeVisible();
+    await plan.showPanel('Constraints');
+    await expect(plan.panelConstraints).toBeVisible();
+  });
+
+  test(`Clicking on 'Constraint Violations' in the grid menu should show the constraint violations panel`, async () => {
+    await expect(plan.panelConstraintViolations).not.toBeVisible();
+    await plan.showPanel('Constraint Violations');
+    await expect(plan.panelConstraintViolations).toBeVisible();
+  });
+
+  test(`Clicking on 'Expansion' in the grid menu should show the expansion panel`, async () => {
+    await expect(plan.panelExpansion).not.toBeVisible();
+    await plan.showPanel('Expansion');
+    await expect(plan.panelExpansion).toBeVisible();
+  });
+
+  test(`Clicking on 'Scheduling' in the grid menu should show the scheduling panel`, async () => {
+    await expect(plan.panelScheduling).not.toBeVisible();
+    await plan.showPanel('Scheduling');
+    await expect(plan.panelScheduling).toBeVisible();
+  });
+
+  test(`Clicking on 'Simulation' in the grid menu should show the simulation panel`, async () => {
+    await expect(plan.panelSimulation).not.toBeVisible();
+    await plan.showPanel('Simulation');
+    await expect(plan.panelSimulation).toBeVisible();
+  });
+
+  test(`Clicking on 'Timeline' in the grid menu should show the timeline form panel`, async () => {
+    await expect(plan.panelTimelineForm).not.toBeVisible();
+    await plan.showPanel('Timeline');
+    await expect(plan.panelTimelineForm).toBeVisible();
+  });
+
+  test(`Clicking on 'Views' in the grid menu should show the views panel`, async () => {
+    await expect(plan.panelViews).not.toBeVisible();
+    await plan.showPanel('Views');
+    await expect(plan.panelViews).toBeVisible();
+  });
+
+  test(`Clicking on 'View Editor' in the grid menu should show the view editor panel`, async () => {
+    await expect(plan.panelViewEditor).not.toBeVisible();
+    await plan.showPanel('View Editor');
+    await expect(plan.panelViewEditor).toBeVisible();
+  });
 });

src/components/activity/ActivityForm.svelte src/components/activity/ActivityFormPanel.svelte

@@ -20,43 +20,43 @@
   <i class="bi bi-chevron-down" style="font-size: 12px;" />
 
   <Menu bind:this={gridMenu}>
-    <MenuItem on:click={() => updateGridComponent('ActivityTypes')}>
+    <MenuItem on:click={() => updateGridComponent('ActivityTypesPanel')}>
       <i class="bi bi-book" />
       Activity Types
     </MenuItem>
-    <MenuItem on:click={() => updateGridComponent('ConstraintsGrid')}>
+    <MenuItem on:click={() => updateGridComponent('ConstraintsPanel')}>
       <i class="bi bi-braces-asterisk" />
       Constraints
     </MenuItem>
-    <MenuItem on:click={() => updateGridComponent('ConstraintViolations')}>
+    <MenuItem on:click={() => updateGridComponent('ConstraintViolationsPanel')}>
       <i class="bi bi-file-earmark-excel" />
       Constraint Violations
     </MenuItem>
-    <MenuItem on:click={() => updateGridComponent('Expansion')}>
+    <MenuItem on:click={() => updateGridComponent('ExpansionPanel')}>
       <i class="bi bi-code-square" />
       Expansion
     </MenuItem>
-    <MenuItem on:click={() => updateGridComponent('Scheduling')}>
+    <MenuItem on:click={() => updateGridComponent('SchedulingPanel')}>
       <i class="bi bi-calendar3" />
       Scheduling
     </MenuItem>
-    <MenuItem on:click={() => updateGridComponent('ActivityForm')}>
+    <MenuItem on:click={() => updateGridComponent('ActivityFormPanel')}>
       <i class="si si-activity" />
       Selected Activity
     </MenuItem>
-    <MenuItem on:click={() => updateGridComponent('Simulation')}>
+    <MenuItem on:click={() => updateGridComponent('SimulationPanel')}>
       <i class="bi bi-gear-wide-connected" />
       Simulation
     </MenuItem>
-    <MenuItem on:click={() => updateGridComponent('TimelineForm')}>
+    <MenuItem on:click={() => updateGridComponent('TimelineFormPanel')}>
       <i class="bi bi-calendar2-range" />
       Timeline
     </MenuItem>
-    <MenuItem on:click={() => updateGridComponent('Views')}>
+    <MenuItem on:click={() => updateGridComponent('ViewsPanel')}>
       <i class="bi bi-columns" />
       Views
     </MenuItem>
-    <MenuItem on:click={() => updateGridComponent('ViewEditor')}>
+    <MenuItem on:click={() => updateGridComponent('ViewEditorPanel')}>
       <i class="bi bi-code" />
       View Editor
     </MenuItem>

src/components/activity/ActivityTypes.svelte src/components/activity/ActivityTypesPanel.svelte

@@ -2,23 +2,23 @@
   import type { Load } from '@sveltejs/kit';
   import { keyBy } from 'lodash-es';
   import { onDestroy, onMount } from 'svelte';
-  import ActivityForm from '../../components/activity/ActivityForm.svelte';
+  import ActivityFormPanel from '../../components/activity/ActivityFormPanel.svelte';
   import ActivityTable from '../../components/activity/ActivityTable.svelte';
-  import ActivityTypes from '../../components/activity/ActivityTypes.svelte';
+  import ActivityTypesPanel from '../../components/activity/ActivityTypesPanel.svelte';
   import Nav from '../../components/app/Nav.svelte';
   import NavButton from '../../components/app/NavButton.svelte';
-  import ConstraintsGrid from '../../components/constraints/ConstraintsGrid.svelte';
-  import ConstraintViolations from '../../components/constraints/ConstraintViolations.svelte';
-  import Expansion from '../../components/expansion/Expansion.svelte';
-  import Scheduling from '../../components/scheduling/Scheduling.svelte';
-  import Simulation from '../../components/simulation/Simulation.svelte';
-  import TimelineForm from '../../components/timeline/form/TimelineForm.svelte';
+  import ConstraintsPanel from '../../components/constraints/ConstraintsPanel.svelte';
+  import ConstraintViolationsPanel from '../../components/constraints/ConstraintViolationsPanel.svelte';
+  import ExpansionPanel from '../../components/expansion/ExpansionPanel.svelte';
+  import SchedulingPanel from '../../components/scheduling/SchedulingPanel.svelte';
+  import SimulationPanel from '../../components/simulation/SimulationPanel.svelte';
+  import TimelineFormPanel from '../../components/timeline/form/TimelineFormPanel.svelte';
   import Timeline from '../../components/timeline/Timeline.svelte';
   import CssGrid from '../../components/ui/CssGrid.svelte';
   import IFrame from '../../components/ui/IFrame.svelte';
   import SplitGrid from '../../components/ui/SplitGrid.svelte';
-  import ViewEditor from '../../components/view/ViewEditor.svelte';
-  import Views from '../../components/view/Views.svelte';
+  import ViewEditorPanel from '../../components/view/ViewEditorPanel.svelte';
+  import ViewsPanel from '../../components/view/ViewsPanel.svelte';
   import { activitiesMap, resetActivityStores } from '../../stores/activities';
   import { checkConstraintsStatus, resetConstraintStores } from '../../stores/constraints';
   import {
@@ -81,19 +81,19 @@
   export let initialView: View | null;
 
   const gridComponentsByName: Record<string, unknown> = {
-    ActivityForm,
+    ActivityFormPanel,
     ActivityTable,
-    ActivityTypes,
-    ConstraintViolations,
-    ConstraintsGrid,
-    Expansion,
+    ActivityTypesPanel,
+    ConstraintViolationsPanel,
+    ConstraintsPanel,
+    ExpansionPanel,
     IFrame,
-    Scheduling,
-    Simulation,
+    SchedulingPanel,
+    SimulationPanel,
     Timeline,
-    TimelineForm,
-    ViewEditor,
-    Views,
+    TimelineFormPanel,
+    ViewEditorPanel,
+    ViewsPanel,
   };
 
   $: if (initialPlan) {

src/components/constraints/ConstraintViolations.svelte src/components/constraints/ConstraintViolationsPanel.svelte

@@ -5,7 +5,7 @@
 export const activitiesGrid: Grid = {
   columnSizes: '1fr 3px 3fr 3px 1fr',
   columns: [
-    { componentName: 'ActivityTypes', id: 1, type: 'component' },
+    { componentName: 'ActivityTypesPanel', id: 1, type: 'component' },
     { id: 2, track: 1, type: 'gutter' },
     {
       id: 3,
@@ -18,7 +18,7 @@ export const activitiesGrid: Grid = {
       type: 'rows',
     },
     { id: 7, track: 3, type: 'gutter' },
-    { componentName: 'ActivityForm', id: 8, type: 'component' },
+    { componentName: 'ActivityFormPanel', id: 8, type: 'component' },
   ],
   gridName: 'Activities',
   id: 0,
@@ -28,7 +28,7 @@ export const activitiesGrid: Grid = {
 export const constraintsGrid: Grid = {
   columnSizes: '1fr 3px 3fr 3px 1fr',
   columns: [
-    { componentName: 'ConstraintsGrid', id: 1, type: 'component' },
+    { componentName: 'ConstraintsPanel', id: 1, type: 'component' },
     { id: 2, track: 1, type: 'gutter' },
     {
       id: 3,
@@ -45,9 +45,9 @@ export const constraintsGrid: Grid = {
       id: 8,
       rowSizes: '1fr 3px 1fr',
       rows: [
-        { componentName: 'ActivityForm', id: 9, type: 'component' },
+        { componentName: 'ActivityFormPanel', id: 9, type: 'component' },
         { id: 10, track: 1, type: 'gutter' },
-        { componentName: 'ConstraintViolations', id: 11, type: 'component' },
+        { componentName: 'ConstraintViolationsPanel', id: 11, type: 'component' },
       ],
       type: 'rows',
     },
@@ -60,7 +60,7 @@ export const constraintsGrid: Grid = {
 export const schedulingGrid: Grid = {
   columnSizes: '1fr 3px 3fr 3px 1fr',
   columns: [
-    { componentName: 'Scheduling', id: 1, type: 'component' },
+    { componentName: 'SchedulingPanel', id: 1, type: 'component' },
     { id: 2, track: 1, type: 'gutter' },
     {
       id: 3,
@@ -73,7 +73,7 @@ export const schedulingGrid: Grid = {
       type: 'rows',
     },
     { id: 7, track: 3, type: 'gutter' },
-    { componentName: 'ActivityForm', id: 8, type: 'component' },
+    { componentName: 'ActivityFormPanel', id: 8, type: 'component' },
   ],
   gridName: 'Scheduling',
   id: 0,
@@ -83,7 +83,7 @@ export const schedulingGrid: Grid = {
 export const simulationGrid: Grid = {
   columnSizes: '1fr 3px 3fr 3px 1fr',
   columns: [
-    { componentName: 'Simulation', id: 1, type: 'component' },
+    { componentName: 'SimulationPanel', id: 1, type: 'component' },
     { id: 2, track: 1, type: 'gutter' },
     {
       id: 3,
@@ -96,7 +96,7 @@ export const simulationGrid: Grid = {
       type: 'rows',
     },
     { id: 7, track: 3, type: 'gutter' },
-    { componentName: 'ActivityForm', id: 8, type: 'component' },
+    { componentName: 'ActivityFormPanel', id: 8, type: 'component' },
   ],
   gridName: 'Simulation',
   id: 0,