tethysplatform · jakeymac · Feb 4, 2025 · Feb 6, 2025 · Feb 6, 2025 · Feb 6, 2025
diff --git a/.github/workflows/tethys.yml b/.github/workflows/tethys.yml
@@ -92,6 +92,42 @@ jobs:
           conda activate tethys
           coveralls --service=github
 
+  frontend-tests:
+    name: Frontend Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Set Up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Set Up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.12'
+
+      - name: Install Tethys and Dependencies
+        run: |
+
+          bash scripts/install_tethys.sh --partial-tethys-install meds -n tethys -s $PWD -x -d 5.1 --python-version 3.12
+          . ~/miniconda/etc/profile.d/conda.sh
+          conda activate tethys
+          python -m pip install --upgrade pip
+
+      - name: Install Dependencies
+        run: npm install  
+        working-directory: tests/js_tests
+
+      - name: Run Tests
+        run: |
+          . ~/miniconda/etc/profile.d/conda.sh
+          conda activate tethys
+          npm test
+        working-directory: tests/js_tests
+
   docker-build:
     name: Docker Build (${{ matrix.platform }}, ${{ matrix.django-version }}, ${{ matrix.python-version }})
     runs-on: ${{ matrix.platform }}

diff --git a/.gitignore b/.gitignore
@@ -36,3 +36,7 @@ tethys_portal/_version.py
 # Required for docs build
 git-lfs-*/*
 conda.recipe/meta.yaml
+
+jest_coverage/
+package-lock.json
+tests/js_tests/rendered_templates
diff --git a/tests/js_tests/.babelrc b/tests/js_tests/.babelrc
@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env"]
+}
diff --git a/tests/js_tests/__mocks__/cesium.js b/tests/js_tests/__mocks__/cesium.js
@@ -0,0 +1,46 @@
+module.exports = {
+    Viewer: jest.fn().mockImplementation(() => ({
+      scene: {
+        globe: {},
+        primitives: { add: jest.fn() },
+      },
+      camera: {
+        setView: jest.fn(),
+        flyTo: jest.fn(),
+        lookAt: jest.fn(),
+        lookAtTransform: jest.fn(),
+        viewBoundingSphere: jest.fn(),
+      },
+      imageryLayers: { addImageryProvider: jest.fn() },
+      terrainProvider: jest.fn(),
+      entities: { add: jest.fn() },
+      clock: {},
+      dataSources: { add: jest.fn() },
+      trackedEntity: null,
+    })),
+    Ion: { defaultAccessToken: "mock_token" },
+    ClockViewModel: jest.fn(),
+    WebMapServiceImageryProvider: jest.fn(),
+    JulianDate: {
+      fromIso8601: jest.fn(),
+      toIso8601: jest.fn(),
+    },
+    GeoJsonDataSource: {
+      load: jest.fn(),
+    },
+    CzmlDataSource: {
+      load: jest.fn(),
+    },
+    TimeIntervalCollection: {
+      fromIso8601DateArray: jest.fn(),
+    },
+    Cartesian3: jest.fn(),
+    Color: jest.fn(),
+    HorizontalOrigin: {},
+    VerticalOrigin: {},
+    PointGraphics: jest.fn(),
+    Material: {
+      fromType: jest.fn(),
+    },
+  };
+
diff --git a/tests/js_tests/gizmos/datatable_view.test.js b/tests/js_tests/gizmos/datatable_view.test.js
@@ -0,0 +1,63 @@
+import { execSync } from "child_process";
+import fs from "fs";
+import path from "path";
+const { screen } = require("@testing-library/dom");
+
+import $ from "jquery";
+
+import DataTable from "datatables.net";
+$.fn.DataTable = DataTable;
+
+import TETHYS_DATATABLE_VIEW from "../../../tethys_gizmos/static/tethys_gizmos/js/datatable_view.js";
+
+global.TETHYS_DATATABLE_VIEW = TETHYS_DATATABLE_VIEW;
+
+global.Node = window.Node;
+global.Option = window.Option || function Option() {};
+
+let renderedHtml = '';
+
+const DATATABLE_VIEW_ID = "test_datatable_view_id";
+    
+beforeAll(() => {
+    const templateName = "tethys_gizmos/gizmos/datatable_view.html";
+    const context = JSON.stringify({
+        title: "Testing the datatable view gizmo",
+        id: DATATABLE_VIEW_ID,
+
+        column_names: ["Column 1", "Column 2", "Column 3"],
+        rows: [
+            ["Row 1 Column 1", "Row 1 Column 2", "Row 1 Column 3"],
+            ["Row 2 Column 1", "Row 2 Column 2", "Row 2 Column 3"],
+            ["Row 3 Column 1", "Row 3 Column 2", "Row 3 Column 3"],
+        ]
+
+    });
+
+    execSync(`python render_template.py ${templateName} '${context}' `, { stdio: "inherit" });
+
+    const outputPath = path.resolve("./rendered_templates/test_datatable_view_output.html");
+    renderedHtml = fs.readFileSync(outputPath, "utf8");
+});
+
+beforeEach(() => {
+    document.body.innerHTML = renderedHtml;
+
+    // Initialize datatable view
+    TETHYS_DATATABLE_VIEW.initTableView(".data_table_gizmo_view");
+});
+
+test("Gizmo renders correctly", () => {
+    expect(screen.getByText("Column 1")).toBeInTheDocument();
+    expect(screen.getByText("Column 2")).toBeInTheDocument();
+    expect(screen.getByText("Column 3")).toBeInTheDocument();
+    expect(screen.getByText("Row 1 Column 1")).toBeInTheDocument();
+    expect(screen.getByText("Row 1 Column 2")).toBeInTheDocument();
+    expect(screen.getByText("Row 1 Column 3")).toBeInTheDocument();
+});
+
+test("Datatable is initialized", () => {
+    const dataTable = document.querySelector(".data_table_gizmo_view");
+    expect(dataTable).toHaveClass("dataTable");
+});
+
diff --git a/tests/js_tests/gizmos/range_slider.test.js b/tests/js_tests/gizmos/range_slider.test.js
@@ -0,0 +1,57 @@
+import { execSync } from "child_process";
+import fs from "fs";
+import path from "path";
+import { screen, fireEvent } from "@testing-library/dom";
+import "@testing-library/jest-dom";
+import $ from "jquery";
+
+import TETHYS_RANGE_SLIDER from "../../../tethys_gizmos/static/tethys_gizmos/js/range_slider.js";
+
+global.TETHYS_RANGE_SLIDER = TETHYS_RANGE_SLIDER;
+
+let renderedHtml = "";
+const RANGE_SLIDER_ID = "test-range-slider";
+
+beforeAll(() => {
+    const templateName = "tethys_gizmos/gizmos/range_slider.html";
+    const context = JSON.stringify({
+        name: RANGE_SLIDER_ID,
+        display_text: "Select Range",
+        min: 0,
+        max: 100,
+        step: 5,
+        initial: 50,
+    });
+
+    // Render the template with the context
+    execSync(`python render_template.py ${templateName} '${context}' `, { stdio: "inherit" });
+
+    const outputPath = path.resolve("./rendered_templates/test_range_slider_output.html");
+
+    // Read the rendered HTML
+    renderedHtml = fs.readFileSync(outputPath, "utf8");
+});
+
+beforeEach(() => {
+    document.body.innerHTML = renderedHtml;
+
+    // Initialize range slider and add event listeners
+    TETHYS_RANGE_SLIDER.init_range_sliders();
+});
+
+test("Gizmo renders correctly", () => {
+    expect(screen.getByLabelText("Select Range")).toBeInTheDocument();
+    expect(screen.getByRole("slider")).toBeInTheDocument();
+});
+
+test("Range slider updates display text", () => {
+    const rangeSliderInput = document.getElementById(RANGE_SLIDER_ID);
+    const rangeSliderDisplay = rangeSliderInput.nextElementSibling;
+
+    // Test for initial value
+    expect(rangeSliderDisplay).toHaveTextContent("50");
+
+    // Test for updated value with input
+    fireEvent.input(rangeSliderInput, { target: { value: 75 } });
+    expect(rangeSliderDisplay).toHaveTextContent("75");
+});
diff --git a/tests/js_tests/gizmos/select_input.test.js b/tests/js_tests/gizmos/select_input.test.js
@@ -0,0 +1,64 @@
+import { execSync } from "child_process";
+import path from "path";
+import fs from "fs";
+
+const { screen } = require("@testing-library/dom");
+import userEvent from "@testing-library/user-event";
+
+import TETHYS_SELECT_INPUT from "../../../tethys_gizmos/static/tethys_gizmos/js/select_input.js";
+
+import $ from "jquery";
+global.$ = $;
+global.jQuery = $;
+
+$.fn.select2 = jest.fn().mockImplementation(function () {
+    return this;
+});
+
+let renderedHtml = "";
+
+beforeAll(() => {
+    const templateName = "tethys_gizmos/gizmos/select_input.html";
+    const context = JSON.stringify({
+        title: "Testing the select input gizmo",
+        id: "test_select_input_id",
+        options: [
+            ["Option 1", "option1"],
+            ["Option 2", "option2"],
+            ["Option 3", "option3"],
+        ],
+        initial: "option2",
+        display_text: "Choose an Option",
+        name: "test_selector"
+    });
+
+    execSync(`python render_template.py ${templateName} '${context}'`, { stdio: "inherit" });
+    const outputPath = path.resolve("./rendered_templates/test_select_input_output.html");
+    renderedHtml = fs.readFileSync(outputPath, "utf8");
+})
+
+beforeEach(() => {
+    document.body.innerHTML = renderedHtml;
+    TETHYS_SELECT_INPUT.initSelectInput(".tethys-select2");
+});
+
+test("Gizmo renders correctly", () => {
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+    expect(screen.getByText("Option 3")).toBeInTheDocument();
+});
+
+test("The initially selected value is visible to the user", () => {
+    const select = screen.getByLabelText("Choose an Option");
+    expect(select).toHaveDisplayValue("Option 2");
+});
+
+
+test("User can select a different option", async () => {
+    const user = userEvent.setup();
+    const select = screen.getByLabelText("Choose an Option");
+
+    await user.selectOptions(select, "option3");
+
+    expect(select).toHaveDisplayValue("Option 3");
+});
diff --git a/tests/js_tests/gizmos/slide_sheet.test.js b/tests/js_tests/gizmos/slide_sheet.test.js
@@ -0,0 +1,87 @@
+import { execSync } from "child_process";
+import fs from "fs";
+import path from "path";
+const { screen, fireEvent } = require("@testing-library/dom");
+
+import SLIDE_SHEET from "../../../tethys_gizmos/static/tethys_gizmos/js/slide_sheet.js"
+
+window.SLIDE_SHEET = SLIDE_SHEET;
+
+let renderedHtml = '';
+
+const SLIDE_SHEET_ID = "test_slide_sheet_id"
+
+function simulateShowClassStyling() {
+    // Simulate the CSS class 'show' to display or hide the slide sheet
+    // To be used in the tests any time a slide sheet is opened or closed 
+    // manually or with a simulated button press
+    document.querySelectorAll('.slide-sheet').forEach((element) => {
+        if (element.classList.contains('show')) {
+            element.style.display = 'block';
+        }
+        else {
+            element.style.display = 'none';
+        }
+    });
+}
+
+beforeAll(() => {
+    // Render the template using Python script with a provided context
+    const templateName = "tethys_gizmos/gizmos/slide_sheet.html";
+    const context = JSON.stringify({
+        title: "Testing the slide sheet gizmo",
+        id: SLIDE_SHEET_ID,
+        content_template: "test_template.html"
+    });
+    execSync(`python render_template.py ${templateName} '${context}' `, { stdio: "inherit" });
+    // Read the rendered HTML file
+    const outputPath = path.resolve("./rendered_templates/test_slide_sheet_output.html");
+    renderedHtml = fs.readFileSync(outputPath, "utf8");
+})
+
+beforeEach(() => {
+    // Set up the document body with the rendered HTML before each test runs
+    document.body.innerHTML = renderedHtml;
+});
+
+test("Gizmo renders correctly", () => {
+    const sheet = document.getElementById(SLIDE_SHEET_ID);
+    expect(sheet).toBeInTheDocument();
+    expect(sheet).toHaveClass("slide-sheet");
+});
+
+test("Clicking the open button should show the slide sheet", async () => {
+    const sheet = document.getElementById(SLIDE_SHEET_ID);
+    // Make sure the sheet is not visible to start off
+    expect(sheet).not.toBeVisible();
+    // Add a button to open the slide sheet
+    const button = document.createElement("button");
+    button.className = "btn-open";
+    button.textContent = "Open Slide Sheet";
+    document.body.appendChild(button);
+    // Add an event listener to the button to open the slide sheet
+    const openButton = screen.getByText("Open Slide Sheet");
+    openButton.addEventListener("click", () => {
+        SLIDE_SHEET.open(SLIDE_SHEET_ID);
+    });
+    fireEvent.click(openButton);
+    simulateShowClassStyling();
+    // Check that the slide sheet is now visible
+    expect(sheet).toBeVisible();
+});
+
+
+test("Clicking the close button should hide the slide sheet", async () => {
+    // Open the slide sheet first
+    SLIDE_SHEET.open(SLIDE_SHEET_ID);
+    simulateShowClassStyling();
+    const sheet = document.getElementById(SLIDE_SHEET_ID);
+    // Make sure the sheet is visible to start off
+    expect(sheet).toBeVisible();
+    // Now close it
+    const closeButton = document.querySelector(".btn-close");
+    fireEvent.click(closeButton); 
+    simulateShowClassStyling();
+    // Check that the sheet is no longer visible
+    expect(sheet).not.toBeVisible();
+});