test: [M3-7409] - Add GDPR agreement e2e (#10033)

* Add GDPR e2e test

* Small cleanup

* Feedback + testing gdpr state

* Changeset

* Cleanup

packages/manager/.changeset/pr-10033-tests-1704470547191.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+GDPR agreement e2e test ([#10033](https://github.com/linode/manager/pull/10033))

packages/manager/cypress/e2e/core/general/gdpr-agreement.spec.ts

@@ -0,0 +1,128 @@
+import { ui } from 'support/ui';
+import { fbtClick, getClick } from 'support/helpers';
+import { regionFactory } from '@src/factories';
+import { randomString, randomLabel } from 'support/util/random';
+import { mockGetRegions } from 'support/intercepts/regions';
+import { mockGetAccountAgreements } from 'support/intercepts/account';
+
+import type { Region } from '@linode/api-v4';
+
+const mockRegions: Region[] = [
+  regionFactory.build({
+    capabilities: ['Linodes'],
+    country: 'fr',
+    id: 'fr-par',
+    label: 'Paris, FR',
+  }),
+  regionFactory.build({
+    capabilities: ['Linodes'],
+    country: 'sg',
+    id: 'ap-south',
+    label: 'Singapore, SG',
+  }),
+  regionFactory.build({
+    capabilities: ['Linodes'],
+    country: 'us',
+    id: 'us-east',
+    label: 'Newark, NJ',
+  }),
+  regionFactory.build({
+    capabilities: ['Linodes'],
+    country: 'us',
+    id: 'us-central',
+    label: 'Dallas, TX',
+  }),
+  regionFactory.build({
+    capabilities: ['Linodes'],
+    country: 'gb',
+    id: 'eu-west',
+    label: 'London, UK',
+  }),
+];
+
+describe('GDPR agreement', () => {
+  it('displays the GDPR agreement based on region, if user has not agreed yet', () => {
+    mockGetRegions(mockRegions).as('getRegions');
+    mockGetAccountAgreements({
+      privacy_policy: false,
+      eu_model: false,
+    }).as('getAgreements');
+
+    cy.visitWithLogin('/linodes/create');
+    cy.wait(['@getAgreements', '@getRegions']);
+
+    // Paris should have the agreement
+    ui.regionSelect.find().click();
+    ui.regionSelect.findItemByRegionId('fr-par').click();
+    cy.get('[data-testid="eu-agreement-checkbox"]').should('be.visible');
+
+    // London should have the agreement
+    ui.regionSelect.find().click();
+    ui.regionSelect.findItemByRegionId('eu-west').click();
+    cy.get('[data-testid="eu-agreement-checkbox"]').should('be.visible');
+
+    // Newark should not have the agreement
+    ui.regionSelect.find().click();
+    ui.regionSelect.findItemByRegionId('us-east').click();
+    cy.get('[data-testid="eu-agreement-checkbox"]').should('not.exist');
+  });
+
+  it('does not display the GDPR agreement based on any region, if user has already agreed', () => {
+    mockGetRegions(mockRegions).as('getRegions');
+    mockGetAccountAgreements({
+      privacy_policy: false,
+      eu_model: true,
+    }).as('getAgreements');
+
+    cy.visitWithLogin('/linodes/create');
+    cy.wait(['@getAgreements', '@getRegions']);
+
+    // Paris should not have the agreement
+    ui.regionSelect.find().click();
+    ui.regionSelect.findItemByRegionId('fr-par').click();
+    cy.get('[data-testid="eu-agreement-checkbox"]').should('not.exist');
+
+    // London should not have the agreement
+    ui.regionSelect.find().click();
+    ui.regionSelect.findItemByRegionId('eu-west').click();
+    cy.get('[data-testid="eu-agreement-checkbox"]').should('not.exist');
+
+    // Newark should not have the agreement
+    ui.regionSelect.find().click();
+    ui.regionSelect.findItemByRegionId('us-east').click();
+    cy.get('[data-testid="eu-agreement-checkbox"]').should('not.exist');
+  });
+
+  it('needs the agreement checked to validate the form', () => {
+    mockGetRegions(mockRegions).as('getRegions');
+    mockGetAccountAgreements({
+      privacy_policy: false,
+      eu_model: false,
+    }).as('getAgreements');
+    const rootpass = randomString(32);
+    const linodeLabel = randomLabel();
+
+    cy.visitWithLogin('/linodes/create');
+    cy.wait(['@getAgreements', '@getRegions']);
+
+    // Paris should have the agreement
+    ui.regionSelect.find().click();
+    ui.regionSelect.findItemByRegionId('fr-par').click();
+    cy.get('[data-testid="eu-agreement-checkbox"]').should('be.visible');
+
+    // Fill out the form
+    fbtClick('Shared CPU');
+    getClick('[id="g6-nanode-1"]');
+    getClick('#linode-label').clear().type(linodeLabel);
+    cy.get('#root-password').type(rootpass);
+
+    // expect the button to be disabled
+    cy.get('[data-qa-deploy-linode="true"]').should('be.disabled');
+
+    // check the agreement
+    getClick('[data-testid="eu-agreement-checkbox"]');
+
+    // expect the button to be enabled
+    cy.get('[data-qa-deploy-linode="true"]').should('not.be.disabled');
+  });
+});

packages/manager/cypress/e2e/core/linodes/create-linode.spec.ts

@@ -26,11 +26,6 @@ import {
 } from 'support/intercepts/linodes';
 
 import type { Region } from '@linode/api-v4';
-import {
-  mockAppendFeatureFlags,
-  mockGetFeatureFlagClientstream,
-} from 'support/intercepts/feature-flags';
-import { makeFeatureFlagData } from 'support/util/feature-flags';
 
 const mockRegions: Region[] = [
   regionFactory.build({

packages/manager/cypress/support/intercepts/account.ts

@@ -11,14 +11,15 @@ import { makeResponse } from 'support/util/response';
 import type {
   Account,
   AccountSettings,
+  Agreements,
   CancelAccount,
   EntityTransfer,
+  Grants,
   Invoice,
   InvoiceItem,
   Payment,
   PaymentMethod,
   User,
-  Grants,
 } from '@linode/api-v4';
 
 /**
@@ -451,3 +452,19 @@ export const mockCancelAccountError = (
     makeErrorResponse(errorMessage, status)
   );
 };
+
+/**
+ * Intercepts GET request to fetch the account agreements and mocks the response.
+ *
+ *
+ * @returns Cypress chainable.
+ */
+export const mockGetAccountAgreements = (
+  agreements: Agreements
+): Cypress.Chainable<null> => {
+  return cy.intercept(
+    'GET',
+    apiMatcher(`account/agreements`),
+    makeResponse(agreements)
+  );
+};

packages/manager/src/features/Account/Agreements/EUAgreementCheckbox.tsx

@@ -47,8 +47,17 @@ export const EUAgreementCheckbox = (props: Props) => {
       display="flex"
       flexDirection="row"
     >
-      <Checkbox checked={checked} onChange={onChange} sx={checkboxStyle} />
-      <Typography style={{ marginLeft: 4 }}>
+      <Checkbox
+        checked={checked}
+        id="gdpr-checkbox"
+        onChange={onChange}
+        sx={checkboxStyle}
+      />
+      <Typography
+        component="label"
+        htmlFor="gdpr-checkbox"
+        style={{ marginLeft: 4 }}
+      >
         I have read and agree to the{' '}
         <Link to="https://www.linode.com/legal-privacy/">
           Linode Privacy Policy