Merge pull request #4691 from wri/chore/e2e-tests-FLAG-769

[FLAG-769 ] Revisiting Cypress

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

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');
+});