Setup deployment

.github/workflows/ci.yml

@@ -0,0 +1,91 @@
+name: Continuous Integration
+
+on: push
+
+jobs:
+  build_test:
+    name: Build and Run Jest Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - name: Install Dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Run Tests
+        run: npm run test:coverage -- --runInBand
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          flags: jest
+          token: ${{ secrets.CODECOV_TOKEN }}
+  cypress:
+    runs-on: ubuntu-latest
+    strategy:
+      # when one test fails, DO NOT cancel the other
+      # containers, because this will kill Cypress processes
+      # leaving the Dashboard hanging ...
+      # https://github.com/cypress-io/github-action/issues/48
+      fail-fast: false
+      matrix:
+        # run 3 copies of the current job in parallel
+        containers: [1, 2, 3]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: cypress-io/github-action@v6
+        with:
+          start: npm start
+          wait-on: 'http://localhost:8080'
+          # only record the results to dashboard.cypress.io if CYPRESS_RECORD_KEY is set
+          record: ${{ !!secrets.CYPRESS_RECORD_KEY }}
+          # only do parallel if we have a record key
+          parallel: ${{ !!secrets.CYPRESS_RECORD_KEY }}
+        env:
+          # pass the Dashboard record key as an environment variable
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          # pass GitHub token to allow accurately detecting a build vs a re-run build
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # turn on code coverage when running npm start
+          # so far we've been using a webpack coverage-istanbul-loader for this
+          # but there has been work on using the code coverage support in the browser directly,
+          # which should be much faster
+          CODE_COVERAGE: true
+          # Also turn on the code coverage tasks in cypress itself, these are disabled
+          # by default.
+          CYPRESS_coverage: true
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          flags: cypress
+          token: ${{ secrets.CODECOV_TOKEN }}
+  s3-deploy:
+    name: S3 Deploy
+    needs:
+      - build_test
+      - cypress
+    runs-on: ubuntu-latest
+    environment:
+      name: ${{ github.ref_type == 'branch' && 'branches' || 'versions' }}
+      url: https://models-resources.concord.org/codap-day-length-plugin-3/${{ steps.s3-deploy.outputs.deployPath }}/index.html
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - name: Install Dependencies
+        run: npm ci
+        env:
+          # skip installing cypress since it isn't needed for just building
+          # This decreases the deploy time quite a bit
+          CYPRESS_INSTALL_BINARY: 0
+      - uses: concord-consortium/s3-deploy-action@v1
+        id: s3-deploy
+        with:
+          bucket: models-resources
+          prefix: codap-day-length-plugin-3
+          awsAccessKeyId: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          awsSecretAccessKey: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          # Parameters to GHActions have to be strings, so a regular yaml array cannot
+          # be used. Instead the `|` turns the following lines into a string
+          topBranches: |
+            ["main"]

.github/workflows/release.yml

@@ -0,0 +1,24 @@
+name: Release
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: The git tag for the version to use for index.html
+        required: true
+env:
+  BUCKET: models-resources
+  PREFIX: codap-day-length-plugin-3
+  SRC_FILE: index-top.html
+  DEST_FILE: index.html
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - run: >
+          aws s3 cp
+          s3://${{ env.BUCKET }}/${{ env.PREFIX }}/version/${{ github.event.inputs.version }}/${{ env.SRC_FILE }}
+          s3://${{ env.BUCKET }}/${{ env.PREFIX }}/${{ env.DEST_FILE }}
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_DEFAULT_REGION: us-east-1

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

cypress/e2e/workspace.test.ts

@@ -7,7 +7,8 @@ context("Test the overall app", () => {
 
   describe("Desktop functionalities", () => {
     it("renders with text", () => {
-      ae.getApp().should("have.text", "Hello World");
+      // Check if the text includes "Location"
+      ae.getApp().should("contain.text", "Location");
     });
   });
 });

cypress/support/elements/app-elements.ts

@@ -1,5 +1,5 @@
 export const AppElements = {
   getApp() {
-    return cy.get(".app");
+    return cy.get(".App");
   }
 };

package.json

@@ -24,7 +24,7 @@
     ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "\\.(css|less|sass)$": "identity-obj-proxy"
+      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
     },
     "moduleFileExtensions": [
       "ts",

src/test/setupTests.ts

@@ -1 +1,11 @@
 import "@testing-library/jest-dom";
+import $ from "jquery";
+
+declare global {
+  interface Window {
+    $: typeof $;
+    jQuery: typeof $;
+  }
+}
+
+window.$ = window.jQuery = $;

src/utils/daylight-utils.test.ts

@@ -0,0 +1,19 @@
+import { getSunrayAngleInDegrees } from "./daylight-utils"
+
+describe("getSunrayAngleInDegrees", () => {
+  it("should return the correct sunray angle in degrees", () => {
+    const dayNum = 172;
+    const earthTilt = 23.5;
+    const lat = 37.7749;
+    const result = getSunrayAngleInDegrees(dayNum, earthTilt, lat);
+    expect(result).toBeCloseTo(75.7251);
+  });
+
+  it("should return the correct sunray angle in degrees (90deg case)", () => {
+    const dayNum = 171;
+    const earthTilt = 23.5;
+    const lat = 23.5;
+    const result = getSunrayAngleInDegrees(dayNum, earthTilt, lat);
+    expect(result).toBeCloseTo(90);
+  });
+});