Deploy

components/widget/component.jsx

@@ -167,7 +167,9 @@ class Widget extends PureComponent {
         }}
         onClick={() => onClickWidget(this.props)}
       >
-        {showPlaceholder && <img src={placeholderImageURL} alt="widget" />}
+        {showPlaceholder && (
+          <img data-cy="indonesia-img" src={placeholderImageURL} alt="widget" />
+        )}
         {!showPlaceholder && (
           <>
             <WidgetHeader

components/widgets/fires/burned-area-cumulative/index.js

@@ -98,7 +98,7 @@ const defaultConfig = {
     fires: 3,
   },
   settings: {
-    dataset: 'modis',
+    dataset: 'modis_burned_area',
     firesThreshold: 0,
   },
   sentences: {
@@ -151,10 +151,12 @@ export default {
   refetchKeys: ['dataset'],
   getWidget: (widgetSettings) => {
     // called when settings changes
-    if (widgetSettings?.dataset !== 'modis_burned_area') {
+    if (!widgetSettings || !widgetSettings.dataset) {
+      return defaultConfig;
+    }
+    if (widgetSettings.dataset !== 'modis_burned_area') {
       return firesAlertsCumulative;
     }
-
     return defaultConfig;
   },
 };

components/widgets/fires/burned-area-ranked/index.js

@@ -118,7 +118,7 @@ const defaultConfig = {
     page: 0,
     period: 'week',
     weeks: 4,
-    dataset: 'modis',
+    dataset: 'modis_burned_area',
     layerStartDate: null,
     layerEndDate: null,
     firesThreshold: 0,
@@ -163,10 +163,12 @@ export default {
   refetchKeys: ['dataset'],
   getWidget: (widgetSettings) => {
     // called when settings changes
-    if (widgetSettings?.dataset !== 'modis_burned_area') {
+    if (!widgetSettings || !widgetSettings.dataset) {
+      return defaultConfig;
+    }
+    if (widgetSettings.dataset !== 'modis_burned_area') {
       return firesRanked;
     }
-
     return defaultConfig;
   },
 };

components/widgets/fires/burned-area/index.js

@@ -86,7 +86,7 @@ export default {
     fires: 1,
   },
   settings: {
-    dataset: 'modis',
+    dataset: 'modis_burned_area',
     firesThreshold: 0,
   },
   sentences: {

components/widgets/fires/fire-alerts-simple/index.js

@@ -108,7 +108,7 @@ export default {
   },
   // initial settings
   settings: {
-    dataset: 'modis',
+    dataset: 'viirs',
   },
   getData: async (params) => {
     const { VIIRS } = await handleGfwParamsMeta(params);

components/widgets/fires/fires-alerts-cumulative/index.js

@@ -61,7 +61,7 @@ export default {
     fires: 2,
   },
   settings: {
-    dataset: 'modis',
+    dataset: 'viirs',
     confidence: 'h',
   },
   sentences: {

components/widgets/fires/fires-alerts-historical-daily/index.js

@@ -32,7 +32,7 @@ export default {
   colors: 'fires',
   metaKey: 'widget_fire_alert_location',
   settings: {
-    dataset: 'modis',
+    dataset: 'viirs',
   },
   datasets: [
     {

components/widgets/fires/fires-alerts-historical-weekly/index.js

@@ -62,7 +62,7 @@ export default {
   colors: 'fires',
   metaKey: 'widget_fire_alert_location',
   settings: {
-    dataset: 'modis',
+    dataset: 'viirs',
     minDate: '2000-01-01',
     confidence: '',
   },

components/widgets/fires/fires-alerts-historical/index.js

@@ -61,7 +61,7 @@ export default {
   colors: 'fires',
   metaKey: 'widget_fire_alert_location',
   settings: {
-    dataset: 'modis',
+    dataset: 'viirs',
     minDate: '2000-01-01',
     confidence: '',
   },

components/widgets/fires/fires-alerts/index.js

@@ -94,7 +94,7 @@ const defaultConfig = {
     fires: 1,
   },
   settings: {
-    dataset: 'modis',
+    dataset: 'viirs',
     confidence: 'h',
   },
   sentences: {

components/widgets/fires/fires-ranked/index.js

@@ -101,7 +101,7 @@ export default {
     page: 0,
     period: 'week',
     weeks: 4,
-    dataset: 'modis',
+    dataset: 'viirs',
     layerStartDate: null,
     layerEndDate: null,
   },

components/widgets/fires/fires-within/index.js

@@ -75,7 +75,7 @@ export default {
   settings: {
     period: 'week',
     weeks: 13,
-    dataset: 'modis',
+    dataset: 'viirs',
     confidence: 'h',
   },
   settingsBtnConfig: {

cypress.config.js

@@ -0,0 +1,37 @@
+const { defineConfig } = require('cypress');
+const createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
+const preprocessor = require('@badeball/cypress-cucumber-preprocessor');
+const createEsbuildPlugin = require('@badeball/cypress-cucumber-preprocessor/esbuild');
+
+async function setupNodeEvents(on, config) {
+  await preprocessor.addCucumberPreprocessorPlugin(on, config);
+
+  config.env = {
+    ...process.env,
+    ...config.env,
+  };
+
+  on(
+    'file:preprocessor',
+    createBundler({
+      plugins: [createEsbuildPlugin.default(config)],
+    })
+  );
+
+  // Make sure to return the config object as it might have been modified by the plugin.
+  return config;
+}
+
+module.exports = defineConfig({
+  defaultCommandTimeout: 100000,
+  viewportWidth: 1200,
+  responseTimeout: 100000,
+  video: false,
+  e2e: {
+    specPattern: '**/*.feature',
+    supportFile: 'cypress/support/e2e.js',
+    setupNodeEvents,
+    baseUrl: 'http://localhost:3000',
+    scrollBehavior: 'center',
+  },
+});

cypress/api/navigation-api.js

@@ -0,0 +1,12 @@
+const goToDashboardFromHome = () => {
+  cy.visit('/');
+  cy.get('a.nav-link').contains('Dashboard').click();
+};
+
+const selectCountryOnDashboard = (countryName) => {
+  cy.get('button.arrow-btn').click();
+  cy.get('input#dropdown-input').type(countryName);
+  cy.get('#dropdown-item-0').click();
+};
+
+export { goToDashboardFromHome, selectCountryOnDashboard };

cypress/e2e/features/_example.feature

@@ -0,0 +1,4 @@
+Feature: duckduckgo.com
+  Scenario: visiting the frontpage
+    When I visit duckduckgo.com
+    Then I should see a search bar

cypress/e2e/features/_example.js

@@ -0,0 +1,13 @@
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor';
+
+When('I visit duckduckgo.com', () => {
+  cy.visit('https://www.duckduckgo.com');
+});
+
+Then('I should see a search bar', () => {
+  cy.get('input#searchbox_input').should(
+    'have.attr',
+    'placeholder',
+    'Search the web without being tracked'
+  );
+});

cypress/e2e/features/treeCoverLossIndonesia.feature

@@ -0,0 +1,5 @@
+Feature: Showing Primary Forest Loss image for Indonesia instead the real widget
+  Scenario: An user tries to see Indonesia Primary Forest Loss widget
+    When I visit Dashboard
+    And I select Indonesia
+    Then I should see an image of Indonesia Primary Forest Loss 

cypress/e2e/features/treeCoverLossIndonesia.js

@@ -0,0 +1,17 @@
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor';
+import {
+  goToDashboardFromHome,
+  selectCountryOnDashboard,
+} from '../../api/navigation-api';
+
+When('I visit Dashboard', () => {
+  goToDashboardFromHome();
+});
+
+When('I select Indonesia', () => {
+  selectCountryOnDashboard('Indonesia');
+});
+
+Then('I should see an image of Indonesia Primary Forest Loss', () => {
+  cy.get('[data-cy="indonesia-img"').should('exist');
+});