SONAR-12884 Improve the validation messages when creating a project

2 files changed, 180 insertions, 0 deletions

diff --git a/server/sonar-web/src/main/js/components/common/__tests__/ProjectKeyInput-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/ProjectKeyInput-test.tsx
new file mode 100644
index 00000000000..f8d51f9001b
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/common/__tests__/ProjectKeyInput-test.tsx
@@ -0,0 +1,48 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2020 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import ValidationInput from 'sonar-ui-common/components/controls/ValidationInput';
+import ProjectKeyInput, { ProjectKeyInputProps } from '../ProjectKeyInput';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot('default');
+  expect(shallowRender({ projectKey: 'foo' })).toMatchSnapshot('with value');
+  expect(
+    shallowRender({ help: 'foo.help', label: 'foo.label', placeholder: 'foo.placeholder' })
+  ).toMatchSnapshot('with label, help, and placeholder');
+  expect(shallowRender({ touched: true })).toMatchSnapshot('valid');
+  expect(shallowRender({ touched: true, error: 'bar.baz' })).toMatchSnapshot('invalid');
+  expect(shallowRender({ touched: true, validating: true })).toMatchSnapshot('validating');
+});
+
+it('should not display any status when the key is not defined', () => {
+  const wrapper = shallowRender();
+  const input = wrapper.find(ValidationInput);
+  expect(input.props().isInvalid).toBe(false);
+  expect(input.props().isValid).toBe(false);
+});
+
+function shallowRender(props: Partial<ProjectKeyInputProps> = {}) {
+  return shallow<ProjectKeyInputProps>(
+    <ProjectKeyInput onProjectKeyChange={jest.fn()} touched={false} {...props} />
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ProjectKeyInput-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ProjectKeyInput-test.tsx.snap
new file mode 100644
index 00000000000..4265dc8d667
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ProjectKeyInput-test.tsx.snap
@@ -0,0 +1,132 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly: default 1`] = `
+<ValidationInput
+  className="form-field"
+  description="onboarding.create_project.project_key.description"
+  id="project-key"
+  isInvalid={false}
+  isValid={false}
+  required={false}
+>
+  <input
+    autoFocus={true}
+    className="input-super-large"
+    id="project-key"
+    maxLength={400}
+    minLength={1}
+    onChange={[MockFunction]}
+    type="text"
+  />
+</ValidationInput>
+`;
+
+exports[`should render correctly: invalid 1`] = `
+<ValidationInput
+  className="form-field"
+  description="onboarding.create_project.project_key.description"
+  error="bar.baz"
+  id="project-key"
+  isInvalid={true}
+  isValid={false}
+  required={false}
+>
+  <input
+    autoFocus={true}
+    className="input-super-large is-invalid"
+    id="project-key"
+    maxLength={400}
+    minLength={1}
+    onChange={[MockFunction]}
+    type="text"
+  />
+</ValidationInput>
+`;
+
+exports[`should render correctly: valid 1`] = `
+<ValidationInput
+  className="form-field"
+  description="onboarding.create_project.project_key.description"
+  id="project-key"
+  isInvalid={false}
+  isValid={true}
+  required={false}
+>
+  <input
+    autoFocus={true}
+    className="input-super-large is-valid"
+    id="project-key"
+    maxLength={400}
+    minLength={1}
+    onChange={[MockFunction]}
+    type="text"
+  />
+</ValidationInput>
+`;
+
+exports[`should render correctly: validating 1`] = `
+<ValidationInput
+  className="form-field"
+  description="onboarding.create_project.project_key.description"
+  id="project-key"
+  isInvalid={false}
+  isValid={false}
+  required={false}
+>
+  <input
+    autoFocus={true}
+    className="input-super-large"
+    id="project-key"
+    maxLength={400}
+    minLength={1}
+    onChange={[MockFunction]}
+    type="text"
+  />
+</ValidationInput>
+`;
+
+exports[`should render correctly: with label, help, and placeholder 1`] = `
+<ValidationInput
+  className="form-field"
+  description="onboarding.create_project.project_key.description"
+  help="foo.help"
+  id="project-key"
+  isInvalid={false}
+  isValid={false}
+  label="foo.label"
+  required={true}
+>
+  <input
+    autoFocus={true}
+    className="input-super-large"
+    id="project-key"
+    maxLength={400}
+    minLength={1}
+    onChange={[MockFunction]}
+    placeholder="foo.placeholder"
+    type="text"
+  />
+</ValidationInput>
+`;
+
+exports[`should render correctly: with value 1`] = `
+<ValidationInput
+  className="form-field"
+  description="onboarding.create_project.project_key.description"
+  id="project-key"
+  isInvalid={false}
+  isValid={false}
+  required={false}
+>
+  <input
+    autoFocus={true}
+    className="input-super-large"
+    id="project-key"
+    maxLength={400}
+    minLength={1}
+    onChange={[MockFunction]}
+    type="text"
+    value="foo"
+  />
+</ValidationInput>
+`;