COPDS-924 Mandatory inputs not required if all options are made unava…

…ilable by constraints
ecmwf-projects · Apr 21, 2023 · 2b4dd80 · 2b4dd80
1 parent cb4378d
commit 2b4dd80
Show file tree

Hide file tree

Showing 23 changed files with 1,154 additions and 371 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -9,14 +9,13 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: '16.x'
           registry-url: 'https://npm.pkg.github.com'
           scope: '@ecmwf-projects'
       - run: yarn install --frozen-lockfile
-      - run: yarn test
       - run: yarn build
       - run: yarn publish
         env:

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -6,7 +6,7 @@ jobs:
   unit-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: '16.x'
@@ -17,8 +17,8 @@ jobs:
   component-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Cypress run
-        uses: cypress-io/github-action@v4
+        uses: cypress-io/github-action@v5
         with:
           command: yarn test:components:ci
diff --git a/.gitignore b/.gitignore
@@ -102,3 +102,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# Cypress
+cypress/videos
diff --git a/.nycrc.json b/.nycrc.json
@@ -0,0 +1,7 @@
+{
+  "all": true,
+  "extends": "@istanbuljs/nyc-config-typescript",
+  "check-coverage": true,
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["cypress/**/*.*", "**/*.d.ts", "**/*.cy.tsx", "**/*.cy.ts"]
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.1.0] 2023-04-21
+
+## Added
+
+- ability to bypass the `required` attribute for `StringListArrayWidget`, `StringListWidget`, `StringChoiceWidget`, and `ExclusiveGroupWidget` children.
+
 ## [5.0.2] - 2023-04-18
 
 ## Fixed

diff --git a/__tests__/factories.ts b/__tests__/factories.ts
@@ -55,7 +55,7 @@ export const getStringListArrayWidgetConfiguration = () => {
       ],
       id: 1
     },
-    help: 'Please, consult the product user guide in the documentation section for more information on these variables.',
+    help: null,
     label: 'Variable',
     name: 'variable',
     required: true,
@@ -119,7 +119,7 @@ export const getStringListWidgetConfiguration = () => {
         'monthly_averaged_reanalysis_by_hour_of_day'
       ]
     },
-    help: 'Monthly averaged reanalysis data are produced by averaging all daily data. Monthly averages by hour of day constitute the average over all data within the calendar month for every hour (UTC) of the day.',
+    help: null,
     label: 'Product type',
     name: 'product_type',
     required: true,

diff --git a/cypress.config.ts b/cypress.config.ts
@@ -1,10 +1,20 @@
 import { defineConfig } from 'cypress'
 
 export default defineConfig({
+  env: {
+    codeCoverage: { exclude: 'cypress/**/*.*' }
+  },
+  video: false,
   component: {
     devServer: {
       framework: 'react',
       bundler: 'vite'
+    },
+    screenshotOnRunFailure: true,
+    setupNodeEvents(on, config) {
+      require('@cypress/code-coverage/task')(on, config)
+
+      return config
     }
   }
 })
diff --git a/cypress/component/ExclusiveGroupWidget.cy.tsx b/cypress/component/ExclusiveGroupWidget.cy.tsx
@@ -37,7 +37,7 @@ describe('<ExclusiveGroupWidget/>', () => {
     const configuration = {
       type: 'ExclusiveGroupWidget' as const,
       label: 'Generic selections',
-      help: 'Select one choice from the widgets below',
+      help: null,
       name: 'checkbox_groups',
       children: ['variable', 'surface_help'],
       details: {
@@ -55,17 +55,15 @@ describe('<ExclusiveGroupWidget/>', () => {
 
     cy.viewport(800, 600)
     cy.mount(
-      <TooltipProvider>
-        <Form handleSubmit={stubbedHandleSubmit}>
-          <ExclusiveGroupWidget
-            configuration={configuration}
-            childrenGetter={getExclusiveGroupChildren(
-              formConfiguration,
-              'checkbox_groups'
-            )}
-          />
-        </Form>
-      </TooltipProvider>
+      <Form handleSubmit={stubbedHandleSubmit}>
+        <ExclusiveGroupWidget
+          configuration={configuration}
+          childrenGetter={getExclusiveGroupChildren(
+            formConfiguration,
+            'checkbox_groups'
+          )}
+        />
+      </Form>
     ).then(({ rerender }) => {
       cy.findByLabelText('Lake shape factor').click()
       cy.findByLabelText('Soil temperature level 3').click()
@@ -108,7 +106,7 @@ describe('<ExclusiveGroupWidget/>', () => {
     const configuration = {
       type: 'ExclusiveGroupWidget' as const,
       label: 'Generic selections',
-      help: 'Select one choice from the widgets below',
+      help: null,
       name: 'checkbox_groups',
       children: ['product_type', 'surface_help'],
       details: {
@@ -136,17 +134,15 @@ describe('<ExclusiveGroupWidget/>', () => {
 
     cy.viewport(984, 597)
     cy.mount(
-      <TooltipProvider>
-        <Form handleSubmit={stubbedHandleSubmit}>
-          <ExclusiveGroupWidget
-            configuration={configuration}
-            childrenGetter={getExclusiveGroupChildren(
-              formConfiguration,
-              'checkbox_groups'
-            )}
-          />
-        </Form>
-      </TooltipProvider>
+      <Form handleSubmit={stubbedHandleSubmit}>
+        <ExclusiveGroupWidget
+          configuration={configuration}
+          childrenGetter={getExclusiveGroupChildren(
+            formConfiguration,
+            'checkbox_groups'
+          )}
+        />
+      </Form>
     )
 
     cy.findByLabelText('Monthly averaged reanalysis').click()
@@ -163,7 +159,7 @@ describe('<ExclusiveGroupWidget/>', () => {
     const configuration = {
       type: 'ExclusiveGroupWidget' as const,
       label: 'Generic selections',
-      help: 'Select one choice from the widgets below',
+      help: null,
       name: 'checkbox_groups',
       children: ['product_type', 'variable'],
       details: {
@@ -178,15 +174,13 @@ describe('<ExclusiveGroupWidget/>', () => {
     ]
 
     cy.mount(
-      <TooltipProvider>
-        <ExclusiveGroupWidget
-          configuration={configuration}
-          childrenGetter={getExclusiveGroupChildren(
-            formConfiguration,
-            'checkbox_groups'
-          )}
-        />
-      </TooltipProvider>
+      <ExclusiveGroupWidget
+        configuration={configuration}
+        childrenGetter={getExclusiveGroupChildren(
+          formConfiguration,
+          'checkbox_groups'
+        )}
+      />
     )
 
     cy.findByLabelText('Skin temperature')
@@ -196,7 +190,7 @@ describe('<ExclusiveGroupWidget/>', () => {
     const configuration = {
       type: 'ExclusiveGroupWidget' as const,
       label: 'Geographical area',
-      help: 'Select one choice from the widgets below',
+      help: null,
       name: 'area_group',
       children: ['global', 'area'],
       details: {
@@ -217,6 +211,7 @@ describe('<ExclusiveGroupWidget/>', () => {
       },
       {
         ...getGeographicExtentWidgetConfiguration(),
+        help: null,
         label: 'Sub-region extraction'
       }
     ]
@@ -225,17 +220,15 @@ describe('<ExclusiveGroupWidget/>', () => {
 
     cy.viewport(1200, 900)
     cy.mount(
-      <TooltipProvider>
-        <Form handleSubmit={stubbedHandleSubmit}>
-          <ExclusiveGroupWidget
-            configuration={configuration}
-            childrenGetter={getExclusiveGroupChildren(
-              formConfiguration,
-              'area_group'
-            )}
-          />
-        </Form>
-      </TooltipProvider>
+      <Form handleSubmit={stubbedHandleSubmit}>
+        <ExclusiveGroupWidget
+          configuration={configuration}
+          childrenGetter={getExclusiveGroupChildren(
+            formConfiguration,
+            'area_group'
+          )}
+        />
+      </Form>
     )
 
     cy.findByLabelText('Sub-region extraction').should(
@@ -267,7 +260,7 @@ describe('<ExclusiveGroupWidget/>', () => {
     const configuration = {
       type: 'ExclusiveGroupWidget' as const,
       label: 'Generic selections',
-      help: 'Select one choice from the widgets below',
+      help: null,
       name: 'checkbox_groups',
       children: ['format', 'surface_help'],
       details: {
@@ -285,17 +278,15 @@ describe('<ExclusiveGroupWidget/>', () => {
 
     cy.viewport(800, 600)
     cy.mount(
-      <TooltipProvider>
-        <Form handleSubmit={stubbedHandleSubmit}>
-          <ExclusiveGroupWidget
-            configuration={configuration}
-            childrenGetter={getExclusiveGroupChildren(
-              formConfiguration,
-              'checkbox_groups'
-            )}
-          />
-        </Form>
-      </TooltipProvider>
+      <Form handleSubmit={stubbedHandleSubmit}>
+        <ExclusiveGroupWidget
+          configuration={configuration}
+          childrenGetter={getExclusiveGroupChildren(
+            formConfiguration,
+            'checkbox_groups'
+          )}
+        />
+      </Form>
     )
 
     cy.findByLabelText('NetCDF (experimental)').click()
@@ -311,7 +302,7 @@ describe('<ExclusiveGroupWidget/>', () => {
     const thisExclusive = {
       type: 'ExclusiveGroupWidget' as const,
       label: 'This exclusive',
-      help: 'This exclusive',
+      help: null,
       name: 'this_exclusive',
       children: ['format', 'surface_help'],
       details: {
@@ -322,7 +313,7 @@ describe('<ExclusiveGroupWidget/>', () => {
     const otherExclusive = {
       type: 'ExclusiveGroupWidget' as const,
       label: 'Other exclusive',
-      help: 'Other exclusive',
+      help: null,
       name: 'other_exclusive',
       children: ['product_type'],
       details: {
@@ -368,25 +359,23 @@ describe('<ExclusiveGroupWidget/>', () => {
 
     cy.viewport(800, 600)
     cy.mount(
-      <TooltipProvider>
-        <Form handleSubmit={stubbedHandleSubmit}>
-          <ExclusiveGroupWidget
-            configuration={thisExclusive}
-            childrenGetter={getExclusiveGroupChildren(
-              formConfiguration,
-              'this_exclusive'
-            )}
-          />
-
-          <ExclusiveGroupWidget
-            configuration={otherExclusive}
-            childrenGetter={getExclusiveGroupChildren(
-              formConfiguration,
-              'other_exclusive'
-            )}
-          />
-        </Form>
-      </TooltipProvider>
+      <Form handleSubmit={stubbedHandleSubmit}>
+        <ExclusiveGroupWidget
+          configuration={thisExclusive}
+          childrenGetter={getExclusiveGroupChildren(
+            formConfiguration,
+            'this_exclusive'
+          )}
+        />
+
+        <ExclusiveGroupWidget
+          configuration={otherExclusive}
+          childrenGetter={getExclusiveGroupChildren(
+            formConfiguration,
+            'other_exclusive'
+          )}
+        />
+      </Form>
     )
 
     cy.findByLabelText(/netcdf/i)
@@ -400,4 +389,48 @@ describe('<ExclusiveGroupWidget/>', () => {
       ['product_type', 'monthly_averaged_reanalysis']
     ])
   })
+
+  it('bypasses the required attribute if all options are made unavailable by constraints', () => {
+    const configuration = {
+      type: 'ExclusiveGroupWidget' as const,
+      label: 'Generic selections',
+      help: null,
+      name: 'checkbox_groups',
+      children: ['product_type', 'variable', 'format'],
+      details: {
+        default: 'product_type'
+      }
+    }
+
+    const formConfiguration = [
+      configuration,
+      getStringListWidgetConfiguration(),
+      getStringListArrayWidgetConfiguration(),
+      getStringChoiceWidgetConfiguration()
+    ]
+
+    const stubbedHandleSubmit = cy.stub().as('stubbedHandleSubmit')
+
+    cy.mount(
+      <Form handleSubmit={stubbedHandleSubmit}>
+        <ExclusiveGroupWidget
+          configuration={configuration}
+          childrenGetter={getExclusiveGroupChildren(
+            formConfiguration,
+            'checkbox_groups',
+            { product_type: [], variable: [], format: [] },
+            { bypassRequiredForConstraints: true }
+          )}
+        />
+      </Form>
+    )
+
+    cy.findByText('submit').click()
+
+    cy.get('@stubbedHandleSubmit').should('have.been.calledOnceWith', [
+      ['bypassRequired', 'product_type'],
+      ['bypassRequired', 'variable'],
+      ['bypassRequired', 'format']
+    ])
+  })
 })