chore(data-cy): add test attributes for test automation [XT-1188]

2024-03-19 09:03:36 +13:00 · 2024-03-19 09:03:36 +13:00 · eea5543c61
parent bd3440bf3c
commit eea5543c61
16 changed files with 28 additions and 3 deletions
--- a/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.html
+++ b/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.html
@ -97,7 +97,7 @@
      </div>

      <div class="table-responsive">
-        <table class="table-hover nowrap-cells table">
+        <table class="table-hover nowrap-cells table" data-cy="k8sNamespace-namespaceTable">
          <thead>
            <tr>
              <th class="dropdown">
--- a/app/kubernetes/views/deploy/deploy.html
+++ b/app/kubernetes/views/deploy/deploy.html
@ -49,6 +49,7 @@
                      ng-model="ctrl.formValues.Namespace"
                      ng-change="ctrl.onChangeNamespace()"
                      ng-options="namespace.Name as namespace.Name for namespace in ctrl.namespaces"
+                      data-cy="k8sAppCreate-nsSelect"
                    ></select>
                    <span ng-if="ctrl.formValues.namespace_toggle && ctrl.state.BuildMethod !== ctrl.BuildMethods.HELM" class="small text-muted pt-[7px]"
                      >Namespaces specified in the manifest will be used</span
--- a/app/kubernetes/views/resource-pools/resourcePools.html
+++ b/app/kubernetes/views/resource-pools/resourcePools.html
@ -13,7 +13,6 @@
        remove-action="ctrl.removeAction"
        refresh-callback="ctrl.getResourcePools"
        endpoint="ctrl.endpoint"
-        data-cy="k8sNamespace-namespaceTable"
      ></kubernetes-resource-pools-datatable>
    </div>
  </div>
--- a/app/react/components/ImageConfigFieldset/InputSearch.tsx
+++ b/app/react/components/ImageConfigFieldset/InputSearch.tsx
@ -34,6 +34,7 @@ export function InputSearch({
      onChange={onChange}
      placeholder={placeholder}
      inputId={inputId}
+      data-cy="component-imageConfigInputSearch"
    />
  );
 }
--- a/app/react/components/datatables/Datatable.tsx
+++ b/app/react/components/datatables/Datatable.tsx
@ -171,6 +171,7 @@ export function Datatable<D extends DefaultType>({
  return (
    <Table.Container noWidget={noWidget} aria-label={title}>
      <DatatableHeader
+        data-cy={dataCy}
        onSearchChange={handleSearchBarChange}
        searchValue={settings.search}
        title={title}
--- a/app/react/components/datatables/DatatableHeader.tsx
+++ b/app/react/components/datatables/DatatableHeader.tsx
@ -14,6 +14,7 @@ type Props = {
  renderTableActions?(): ReactNode;
  description?: ReactNode;
  titleId?: string;
+  'data-cy'?: string;
 };

 export function DatatableHeader({
@ -25,12 +26,19 @@ export function DatatableHeader({
  titleIcon,
  description,
  titleId,
+  'data-cy': dataCy,
 }: Props) {
  if (!title) {
    return null;
  }

-  const searchBar = <SearchBar value={searchValue} onChange={onSearchChange} />;
+  const searchBar = (
+    <SearchBar
+      value={searchValue}
+      onChange={onSearchChange}
+      data-cy={`${dataCy}-searchInput`}
+    />
+  );
  const tableActions = !!renderTableActions && (
    <Table.Actions>{renderTableActions()}</Table.Actions>
  );
--- a/app/react/components/form-components/AutocompleteSelect/AutocompleteSelect.tsx
+++ b/app/react/components/form-components/AutocompleteSelect/AutocompleteSelect.tsx
@ -23,6 +23,7 @@ export function AutocompleteSelect({
  searchResults,
  readOnly,
  inputId,
+  'data-cy': dataCy,
 }: {
  value: string;
  /**
@ -35,6 +36,7 @@ export function AutocompleteSelect({
  searchResults?: Option<string>[];
  readOnly?: boolean;
  inputId: string;
+  'data-cy': string;
 }) {
  const [searchTerm, setSearchTerm] = useDebounce(value, onChange);
  const [selected, setSelected] = useState(false);
@ -53,6 +55,7 @@ export function AutocompleteSelect({
        placeholder={placeholder}
        readOnly={readOnly}
        id={inputId}
+        data-cy={dataCy}
        autoComplete="off"
      />
      {!selected && searchResults && searchResults.length > 0 && (
--- a/app/react/kubernetes/DeployView/StackName/StackName.tsx
+++ b/app/react/kubernetes/DeployView/StackName/StackName.tsx
@ -71,6 +71,7 @@ export function StackName({
            onChange={setStackName}
            placeholder="e.g. myStack"
            inputId="stack_name"
+            data-cy="component-stackNameInput"
          />
        </div>
      </div>
--- a/app/react/portainer/gitops/ComposePathField/ComposePathField.tsx
+++ b/app/react/portainer/gitops/ComposePathField/ComposePathField.tsx
@ -66,6 +66,7 @@ export function ComposePathField({
              placeholder={isCompose ? 'docker-compose.yml' : 'manifest.yml'}
              model={model}
              inputId="stack_repository_path"
+              data-cy="component-gitPathInput"
              createdFromCustomTemplateId={createdFromCustomTemplateId}
            />
          ) : (
@ -76,6 +77,7 @@ export function ComposePathField({
              }}
              placeholder={isCompose ? 'docker-compose.yml' : 'manifest.yml'}
              id="stack_repository_path"
+              data-cy="component-gitPathInput"
            />
          )}
        </FormControl>
--- a/app/react/portainer/gitops/ComposePathField/PathSelector.tsx
+++ b/app/react/portainer/gitops/ComposePathField/PathSelector.tsx
@ -13,6 +13,7 @@ export function PathSelector({
  dirOnly,
  readOnly,
  inputId,
+  'data-cy': dataCy,
  createdFromCustomTemplateId,
 }: {
  value: string;
@ -22,6 +23,7 @@ export function PathSelector({
  dirOnly?: boolean;
  readOnly?: boolean;
  inputId: string;
+  'data-cy': string;
  createdFromCustomTemplateId?: number;
 }) {
  const creds = getAuthentication(model);
@ -50,6 +52,7 @@ export function PathSelector({
      placeholder={placeholder}
      readOnly={readOnly}
      inputId={inputId}
+      data-cy={dataCy}
    />
  );
 }
--- a/app/react/portainer/gitops/RefField/RefField.tsx
+++ b/app/react/portainer/gitops/RefField/RefField.tsx
@ -75,6 +75,7 @@ export function RefField({
        value={inputValue}
        onChange={(e) => updateInputValue(e.target.value)}
        placeholder="refs/heads/main"
+        data-cy="component-gitRefInput"
      />
    </Wrapper>
  );
--- a/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
+++ b/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
@ -187,6 +187,7 @@ export function RelativePathFieldset({
                      readOnly={isEditing}
                      dirOnly
                      inputId="per_device_configs_path_input"
+                      data-cy="component-perDeviceConfigsPathInput"
                    />
                  </FormControl>
                </div>
--- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/HelmSection.tsx
+++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/HelmSection.tsx
@ -28,6 +28,7 @@ export function HelmSection() {
        <Field
          as={Input}
          id="helm-repo-url"
+          data-cy="helm-repo-url"
          name={name}
          placeholder="https://charts.bitnami.com/bitnami"
        />
--- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeConfigSection.tsx
+++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeConfigSection.tsx
@ -38,6 +38,7 @@ export function KubeConfigSection() {
          value={value}
          options={options}
          onChange={(value) => value && setValue(value)}
+          inputId="kubeconfig-expiry-select"
        />
      </FormControl>
    </FormSection>
--- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx
+++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx
@ -61,6 +61,7 @@ export function KubeSettingsPanel({ settings }: { settings: Settings }) {
                    isLoading={mutation.isLoading}
                    loadingText="Saving"
                    className="!ml-0"
+                    data-cy="save-kubernetes-settings-button"
                  >
                    Save Kubernetes settings
                  </LoadingButton>
--- a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx
@ -52,6 +52,7 @@ export function TeamMembersList({ users, roles, disabled, teamId }: Props) {
  return (
    <RowProvider context={rowContext}>
      <Datatable<User>
+        data-cy="team-members-table"
        dataset={users}
        columns={columns}
        titleIcon={Users}