From 76db12db2b6128557e0b20268ddaf880da571fd9 Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Fri, 11 Feb 2022 00:43:23 +0100
Subject: [PATCH] fix: add regression tests for feature toggle validation
 (#695)

---
 .../feature-toggle/feature.spec.js            | 34 +++++++++++++++++++
 frontend/src/component/common/Input/Input.tsx |  2 ++
 frontend/src/testIds.js                       |  3 ++
 3 files changed, 39 insertions(+)

diff --git a/frontend/cypress/integration/feature-toggle/feature.spec.js b/frontend/cypress/integration/feature-toggle/feature.spec.js
index 487016af0f..4446d50a25 100644
--- a/frontend/cypress/integration/feature-toggle/feature.spec.js
+++ b/frontend/cypress/integration/feature-toggle/feature.spec.js
@@ -94,6 +94,40 @@ describe('feature toggle', () => {
         cy.url().should('include', featureToggleName);
     });
 
+    it('Gives an error if a toggle exists with the same name', () => {
+        cy.get('[data-test=NAVIGATE_TO_CREATE_FEATURE').click();
+
+        cy.intercept('POST', '/api/admin/projects/default/features').as(
+            'createFeature'
+        );
+
+        cy.get("[data-test='CF_NAME_ID'").type(featureToggleName);
+        cy.get("[data-test='CF_DESC_ID'").type('hellowrdada');
+
+        cy.get("[data-test='CF_CREATE_BTN_ID']").click();
+
+        cy.get("[data-test='INPUT_ERROR_TEXT']").contains(
+            'A feature with this name already exists'
+        );
+    });
+
+    it('Gives an error if a toggle name is url unsafe', () => {
+        cy.get('[data-test=NAVIGATE_TO_CREATE_FEATURE').click();
+
+        cy.intercept('POST', '/api/admin/projects/default/features').as(
+            'createFeature'
+        );
+
+        cy.get("[data-test='CF_NAME_ID'").type('featureToggleUnsafe####$#//');
+        cy.get("[data-test='CF_DESC_ID'").type('hellowrdada');
+
+        cy.get("[data-test='CF_CREATE_BTN_ID']").click();
+
+        cy.get("[data-test='INPUT_ERROR_TEXT']").contains(
+            `"name" must be URL friendly`
+        );
+    });
+
     it('Can add a gradual rollout strategy to the development environment', () => {
         cy.wait(500);
         cy.visit(`/projects/default/features/${featureToggleName}/strategies`);
diff --git a/frontend/src/component/common/Input/Input.tsx b/frontend/src/component/common/Input/Input.tsx
index 827951d435..9a3bd661c3 100644
--- a/frontend/src/component/common/Input/Input.tsx
+++ b/frontend/src/component/common/Input/Input.tsx
@@ -1,4 +1,5 @@
 import { TextField } from '@material-ui/core';
+import { INPUT_ERROR_TEXT } from '../../../testIds';
 import { useStyles } from './Input.styles.ts';
 
 interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -41,6 +42,7 @@ const Input = ({
                 value={value}
                 onChange={onChange}
                 FormHelperTextProps={{
+                    ['data-test']: INPUT_ERROR_TEXT,
                     classes: {
                         root: styles.helperText,
                     },
diff --git a/frontend/src/testIds.js b/frontend/src/testIds.js
index e72fb77e77..4595c0a487 100644
--- a/frontend/src/testIds.js
+++ b/frontend/src/testIds.js
@@ -39,3 +39,6 @@ export const ADD_TO_STRATEGY_INPUT_LIST = 'ADD_TO_STRATEGY_INPUT_LIST';
 
 /* SPLASH */
 export const CLOSE_SPLASH = 'CLOSE_SPLASH';
+
+/* GENERAL */
+export const INPUT_ERROR_TEXT = 'INPUT_ERROR_TEXT';