Merge branch 'develop' into fix/410-search-bar-map-tint

.eslintignore

@@ -6,7 +6,7 @@ cypress/
 # Build directory
 docker/
 build/
+./src/serviceWorker
 
 # Unused files
 Legend.js
-TypeToggle.js

.eslintrc.json

@@ -2,7 +2,9 @@
  "extends": [
  "eslint:recommended",
  "plugin:react/recommended",
- "prettier"
+ "prettier",
+ "plugin:react/jsx-runtime",
+ "plugin:react-hooks/recommended"
  ],
  "rules": {
  "react/prop-types": 0,

.github/FUNDING.yml

@@ -0,0 +1,14 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: phlask-ecosystem
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/betasite.yml

@@ -25,7 +25,7 @@ jobs:
  run: |
  echo Build started on `date`
  echo Building the webapp...
- docker-compose run prod_build
+ docker compose run prod_build
  echo Build completed on `date`
  echo Pushing the webapp to S3...
  aws s3 sync docker/build s3://beta.phlask.me --acl public-read --delete

.github/workflows/build_testsite.yml

@@ -19,7 +19,7 @@ jobs:
  run: |
  echo Build started on `date`
  echo Building the webapp...
- docker-compose run prod_build
+ docker compose run prod_build
  echo Build completed on `date`
  echo Pushing the webapp to S3...
  aws s3 sync docker/build s3://test.phlask.me/${GITHUB_SHA} --acl public-read --delete

.github/workflows/cypress_testing.yml

@@ -0,0 +1,19 @@
+name: Cypress Tests
+
+on: [workflow_call]
+
+jobs:
+ desktop:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/setup-node@v4
+ with:
+ node-version: 16
+ - name: Checkout
+ uses: actions/checkout@v4
+ - name: Cypress run
+ uses: cypress-io/github-action@v6
+ with:
+ start: yarn start:cypress
+ browser: chrome
+ spec: cypress/e2e/desktop/*.cy.js

.github/workflows/prodsite.yml

@@ -25,7 +25,7 @@ jobs:
  run: |
  echo Build started on `date`
  echo Building the webapp...
- docker-compose run prod_build
+ docker compose run prod_build
  echo Build completed on `date`
  echo Pushing the webapp to S3...
  aws s3 sync docker/build s3://phlask.me --acl public-read --delete

.github/workflows/testsite.yml

@@ -13,3 +13,5 @@ jobs:
  needs: build
  uses: ./.github/workflows/lighthouse_testing.yml
  secrets: inherit
+ cypress-testing:
+ uses: ./.github/workflows/cypress_testing.yml

.gitignore

@@ -31,5 +31,4 @@ resources/
 .env
 
 # testing
-cypress/videos/
 newrelic_agent.log

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
- "editor.acceptSuggestionOnEnter": "on"
+ "editor.acceptSuggestionOnEnter": "on",
+ "[javascript]": {
+ "editor.defaultFormatter": "vscode.typescript-language-features"
+ }
 }

README.md

@@ -15,7 +15,7 @@ Code behind the PHLASK Web Map
 │ ├── fixtures <-- Fixtures for mocked out data
 │ └── integration <-- Source files for unit tests
 ├── cypress.json
-├── docker-compose.yml
+├── docker compose.yml
 ├── package-lock.json
 ├── package.json
 ├── public
@@ -79,7 +79,7 @@ Note that `core hours per month` means each core on your codespace consumes inde
 
 1. Clone this repo: `git clone [email protected]:phlask/phlask-map.git`
 1. Navigate to the root of the cloned repo: `cd phlask-map`
-1. Build the container with docker-compose: `docker-compose build app`.
+1. Build the container with docker compose: `docker compose build app`.
 
  Note: this may take awhile. In the past this has taken ~5 minutes. If this step takes longer than 10 minutes, kill the process and try again. Final output should look like this:
 
@@ -89,7 +89,7 @@ Note that `core hours per month` means each core on your codespace consumes inde
  => => writing image sha256:c98c...
  ```
 
-1. Run the container with docker-compose: `docker-compose up app`
+1. Run the container with docker compose: `docker compose up app`
 
  Note: this may take awhile. Once the application is up, output similar to this should be printed out to the console:
 

cypress.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+ e2e: {
+ "watchForFileChanges": false,
+ "specPattern": "cypress/e2e/desktop/*.cy.{js,jsx,ts,tsx}",
+ "baseUrl": "http://localhost:3000",
+ "video": true
+ },
+})

cypress.mobile.config.js

@@ -0,0 +1,16 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+ e2e: {
+ "watchForFileChanges": false,
+ "specPattern": "cypress/e2e/mobile/*.cy.{js,jsx,ts,tsx}",
+ "baseUrl": "http://localhost:3000",
+ "video": true,
+ "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1",
+ },
+ // reporter: 'junit',
+ // reporterOptions: {
+ // mochaFile: 'results/my-test-output.xml',
+ // toConsole: true,
+ // },
+})

cypress/.gitignore

@@ -0,0 +1,2 @@
+videos/
+screenshots/

cypress/e2e/desktop/crowdsourcing.cy.js

@@ -0,0 +1,51 @@
+// TODO
+// Add expected fail cases
+
+// For each resource type, test submitting a site with the following scenarios
+// All tap information
+// A submission with only one of each optional field for each resource type
+describe("crowdsourcing form", () => {
+ beforeEach(() => {
+ cy.visit("/");
+
+ // Load the contribution menu
+ cy.get('[data-cy=button-contribute-menu]').click()
+ });
+
+ it("should successfully submit a water site for testing", () => {
+ // Load the form
+ cy.get('[data-cy=button-contribute-water]').click()
+
+ cy.get('input[name="name"]').type("Cypress Test Name", {force: true})
+ cy.get('input[name="address-textbox"').type("City Hall Room 708, Philadelphia, PA 19107, USA")
+ cy.get('input[name="website"]').type("cypress.test")
+ cy.get('textarea[name="description"]').type("Cypress Test Description")
+ cy.get('div[id="entry"]').click({force: true})
+ cy.get('li[data-value="Open access"]').click()
+ cy.get('svg[data-testid="ExpandMoreIcon"]').click()
+ cy.get('input[name="drinkingFountain"]').click({force: true})
+ cy.get('input[name="sink"]').click()
+ cy.get('input[name="sodaMachine"]').click()
+ cy.get('input[name="waterCooler"]').click()
+ cy.get('svg[data-testid="ExpandMoreIcon"]').click({force: true})
+ cy.get('svg[data-testid="ArrowForwardIosIcon"]').click()
+ cy.get('input[name="handicapAccessible"]').click()
+ cy.get('input[name="waterVesselNeeded"]').click()
+ cy.get('textarea[name="guidelines"]').type("Cypress Test")
+ // TODO Uncomment this and validate the post-submission screen content once
+ // we have implemented a mechanism to ensure tests do not actually send data to our live DB.
+ // cy.get('input[type="submit').click()
+ });
+
+ it("should successfully submit a food site for testing", () => {
+ // TODO
+ });
+
+ it("should successfully submit a foraging site for testing", () => {
+ // TODO
+ });
+
+ it("should successfully submit a bathroom site for testing", () => {
+ // TODO
+ });
+});

cypress/e2e/desktop/filters.cy.js

@@ -0,0 +1,36 @@
+// TODO
+// Add expected fail cases
+
+// For each resource type, test each filter permutation and confirm only the expected number of taps appear.
+describe('filters', () => {
+ beforeEach(() => {
+ cy.visit('/');
+ // Load the form
+
+ // Load the filter menu
+ cy.get('[data-cy=button-filter-menu]').click();
+ });
+
+ it('should successfully show a result for each water site filter permutation', () => {
+ // TODO Add an approach to test all possible filter permutations
+ // Currently limiting this test to a single filtering permutation as a starting point
+
+ cy.get('[data-cy="filter-option-Drinking fountain"]').click();
+ cy.get('[data-cy="filter-option-ADA accessible"]').click();
+ cy.get('[data-cy="filter-option-Open Access"]').click();
+ // Close the filter menu
+ cy.get('[data-cy=button-filter-menu]').click();
+ });
+
+ it('should successfully show a result for each food site filter permutation', () => {
+ // TODO
+ });
+
+ it('should successfully show a result for each foraging site filter permutation', () => {
+ // TODO
+ });
+
+ it('should successfully show a result for each bathroom site filter permutation', () => {
+ // TODO
+ });
+});

cypress/e2e/desktop/menuNavigation.cy.js

@@ -0,0 +1,29 @@
+// TODO
+// Add expected fail cases
+
+// For each resource type, test each filter permutation and confirm only the expected number of taps appear.
+describe('menu navigation', () => {
+ beforeEach(() => {
+ cy.visit('/');
+ // Load the sidebar
+
+ // Open the sidebar menu
+ cy.get('[data-cy=head-sidebar-button]').click();
+ });
+
+ it('should successfully show about us content', () => {
+ // Click the about us sidebar button
+ cy.get('[data-cy=sidebar-about-button]').click();
+
+ cy.get('[data-cy=about-header]').should('have.text', 'About PHLASK');
+ });
+
+ it('should successfully show the join team content', () => {
+ // TODO
+ });
+
+ it('should successfully show the contact form and send feedback', () => {
+ // TODO
+ // Make form submission send to a test destination for validation
+ });
+});

cypress/e2e/desktop/search.cy.js

@@ -0,0 +1,20 @@
+describe('search', () => {
+ beforeEach(() => {
+ cy.visit('/');
+ });
+
+ it('should successfully show a search result and center the map at the search location', () => {
+ // Use a query that should not move or cease to exist for a long time for consistent test results (ex- Philly City Hall)
+ // Load the search bar
+ cy.get('[data-cy=button-search]').click();
+
+ cy.get('input[placeholder="Search for Resources near..."]').type(
+ '30th Street Station, Market Street, Philadelphia, PA'
+ );
+ cy.get(
+ 'span:contains("30th Street Station, Market Street, Philadelphia, PA, USA")'
+ ).click();
+ // Not a perfect approach since it assumes the use of GMaps creating a link tied to the updated map center
+ cy.get('a[href*="39\\.956837\\,\\-75\\.182233"]').should('exist');
+ });
+});

cypress/e2e/desktop/siteInfo.cy.js

@@ -0,0 +1,44 @@
+// TODO
+// Add expected fail cases
+
+// For each resource type, test each site detail permutation and confirm only the expected number of taps appear.
+describe('site info', () => {
+ beforeEach(() => {
+ cy.visit('/');
+ });
+
+ it('should successfully display a water site', () => {
+ // Load a sample water site.
+ // This is currently using live data, but should be updated to make use of test data.
+ cy.get('[title=data-cy-1]').click();
+ cy.get('[data-cy=tap-organization-name]').should(
+ 'have.text',
+ 'Test Organization'
+ );
+ });
+
+ it('should successfully display a food site', () => {
+ // Switch to food view
+ cy.get('[data-cy=button-resource-type-menu]').click()
+ cy.get('[data-cy=button-FOOD-data-selector]').click()
+ cy.get('[data-cy=button-resource-type-menu]').click()
+
+ // Load a sample food site
+ // This is currently using live data, but should be updated to make use of test data.
+ cy.get('[title=data-cy-1]').click();
+ cy.get('[title=data-cy-2]').click();
+
+ cy.get('[data-cy=tap-organization-name]').should(
+ 'have.text',
+ 'Test Organization'
+ );
+ });
+
+ it('should successfully display a foraging site', () => {
+ // TODO
+ });
+
+ it('should successfully display a bathroom site', () => {
+ // TODO
+ });
+});

cypress/e2e/mobile/crowdsourcing.cy.js

@@ -0,0 +1,29 @@
+// TODO
+// Add expected fail cases
+
+// For each resource type, test submitting a site with the following scenarios
+// All tap information
+// A submission with only one of each optional field for each resource type
+
+describe("crowdsourcing form", () => {
+ beforeEach(() => {
+ cy.visit("/");
+ // Load the form
+ });
+
+ it("should successfully submit a water site for testing", () => {
+ // TODO
+ });
+
+ it("should successfully submit a food site for testing", () => {
+ // TODO
+ });
+
+ it("should successfully submit a foraging site for testing", () => {
+ // TODO
+ });
+
+ it("should successfully submit a bathroom site for testing", () => {
+ // TODO
+ });
+});