github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/utils/Links.test.tsx (about)

     1  /*This file is part of kuberpult.
     2  
     3  Kuberpult is free software: you can redistribute it and/or modify
     4  it under the terms of the Expat(MIT) License as published by
     5  the Free Software Foundation.
     6  
     7  Kuberpult is distributed in the hope that it will be useful,
     8  but WITHOUT ANY WARRANTY; without even the implied warranty of
     9  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    10  MIT License for more details.
    11  
    12  You should have received a copy of the MIT License
    13  along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
    14  
    15  Copyright 2023 freiheit.com*/
    16  import { render } from '@testing-library/react';
    17  import React from 'react';
    18  import {
    19      ArgoAppEnvLink,
    20      ArgoAppLink,
    21      ArgoTeamLink,
    22      DisplayManifestLink,
    23      DisplaySourceLink,
    24      DisplayCommitHistoryLink,
    25      KuberpultGitHubLink,
    26  } from './Links';
    27  import { GetFrontendConfigResponse_ArgoCD } from '../../api/api';
    28  import { UpdateFrontendConfig } from './store';
    29  import { elementQuerySelectorSafe } from '../../setupTests';
    30  
    31  const setupArgoCd = (baseUrl: string | undefined, namespace: string) => {
    32      const argo: GetFrontendConfigResponse_ArgoCD | undefined = baseUrl
    33          ? {
    34                baseUrl: baseUrl,
    35                namespace: namespace,
    36            }
    37          : undefined;
    38      UpdateFrontendConfig.set({
    39          configs: {
    40              argoCd: argo,
    41              authConfig: undefined,
    42              kuberpultVersion: 'dontcare',
    43              manifestRepoUrl: 'dontcare',
    44              sourceRepoUrl: 'mysource',
    45              branch: 'dontcare',
    46          },
    47      });
    48  };
    49  
    50  describe('ArgoTeamLink', () => {
    51      const cases: {
    52          name: string;
    53          team: string | undefined;
    54          baseUrl: string | undefined;
    55          namespace: string;
    56      }[] = [
    57          {
    58              name: 'with team, without url',
    59              team: 'foo',
    60              baseUrl: undefined,
    61              namespace: 'tools',
    62          },
    63          {
    64              name: 'with team, with url',
    65              team: 'foo',
    66              baseUrl: 'https://example.com/argo/',
    67              namespace: 'tools',
    68          },
    69          {
    70              name: 'without team, with url',
    71              team: undefined,
    72              baseUrl: 'https://example.com/argo/',
    73              namespace: 'tools',
    74          },
    75      ];
    76      describe.each(cases)('Renders properly', (testcase) => {
    77          const getNode = () => <ArgoTeamLink team={testcase.team} />;
    78          const getWrapper = () => render(getNode());
    79          it(testcase.name, () => {
    80              //given
    81              setupArgoCd(testcase.baseUrl, testcase.namespace);
    82              getWrapper();
    83              // when
    84              // then
    85              expect(document.body).toMatchSnapshot();
    86          });
    87      });
    88  });
    89  
    90  describe('ArgoAppEnvLink', () => {
    91      const cases: {
    92          name: string;
    93          app: string;
    94          env: string;
    95          baseUrl: string | undefined;
    96          namespace: string;
    97      }[] = [
    98          {
    99              name: ' without url',
   100              app: 'foo',
   101              env: 'dev',
   102              baseUrl: undefined,
   103              namespace: 'tools',
   104          },
   105          {
   106              name: ' with url',
   107              app: 'foo',
   108              env: 'dev',
   109              baseUrl: 'https://example.com/argo/',
   110              namespace: 'tools',
   111          },
   112      ];
   113      describe.each(cases)('Renders properly', (testcase) => {
   114          const getNode = () => <ArgoAppEnvLink app={testcase.app} env={testcase.env} namespace={testcase.namespace} />;
   115          const getWrapper = () => render(getNode());
   116          it(testcase.name, () => {
   117              //given
   118              setupArgoCd(testcase.baseUrl, testcase.namespace);
   119              getWrapper();
   120              // when
   121              // then
   122              expect(document.body).toMatchSnapshot();
   123          });
   124      });
   125  });
   126  
   127  describe('ArgoAppLink', () => {
   128      const cases: {
   129          name: string;
   130          app: string;
   131          baseUrl: string | undefined;
   132          namespace: string;
   133      }[] = [
   134          {
   135              name: 'without url',
   136              app: 'foo',
   137              baseUrl: undefined,
   138              namespace: 'tools',
   139          },
   140          {
   141              name: 'with url',
   142              app: 'foo',
   143              baseUrl: 'https://example.com/argo/',
   144              namespace: 'tools',
   145          },
   146      ];
   147      describe.each(cases)('Renders properly', (testcase) => {
   148          const getNode = () => <ArgoAppLink app={testcase.app} />;
   149          const getWrapper = () => render(getNode());
   150          it(testcase.name, () => {
   151              //given
   152              setupArgoCd(testcase.baseUrl, testcase.namespace);
   153              getWrapper();
   154              // when
   155              // then
   156              expect(document.body).toMatchSnapshot();
   157          });
   158      });
   159  });
   160  
   161  const setupSourceRepo = (baseUrl: string) => {
   162      UpdateFrontendConfig.set({
   163          configs: {
   164              argoCd: undefined,
   165              authConfig: undefined,
   166              kuberpultVersion: 'kuberpult',
   167              manifestRepoUrl: 'mymanifest',
   168              sourceRepoUrl: baseUrl,
   169              branch: 'main',
   170          },
   171      });
   172  };
   173  
   174  const setupManifestRepo = (baseUrl: string) => {
   175      UpdateFrontendConfig.set({
   176          configs: {
   177              argoCd: undefined,
   178              authConfig: undefined,
   179              kuberpultVersion: 'kuberpult',
   180              manifestRepoUrl: baseUrl,
   181              sourceRepoUrl: 'mysource',
   182              branch: 'main',
   183          },
   184      });
   185  };
   186  
   187  describe('DisplayManifestLink', () => {
   188      const cases: {
   189          name: string;
   190          displayVersion: string;
   191          version: number;
   192          app: string;
   193          sourceRepo: string;
   194          expectedLink: string | undefined;
   195      }[] = [
   196          {
   197              name: 'Test with displayVersion',
   198              displayVersion: '1',
   199              version: 1,
   200              app: 'foo',
   201              sourceRepo: 'https://example.com/testing/{dir}/{branch}',
   202              expectedLink: 'https://example.com/testing/applications/foo/releases/1/main',
   203          },
   204          {
   205              name: 'Test without DisplayVersion',
   206              displayVersion: '',
   207              version: 1,
   208              app: 'foo',
   209              sourceRepo: 'https://example.com/testing/{branch}/{dir}',
   210              expectedLink: 'https://example.com/testing/main/applications/foo/releases/1',
   211          },
   212          {
   213              name: 'Test without repo link should render nothing',
   214              displayVersion: '1',
   215              version: 1,
   216              app: 'foo',
   217              sourceRepo: '',
   218              expectedLink: undefined,
   219          },
   220          {
   221              name: 'Test with undeployVersion should render nothing',
   222              displayVersion: '1',
   223              version: 0,
   224              app: 'foo',
   225              sourceRepo: 'https://example.com/testing',
   226              expectedLink: undefined,
   227          },
   228      ];
   229  
   230      describe.each(cases)('RendersProperly', (testcase) => {
   231          const getNode = () => (
   232              <DisplayManifestLink
   233                  displayString={testcase.displayVersion}
   234                  version={testcase.version}
   235                  app={testcase.app}
   236              />
   237          );
   238          const getWrapper = () => render(getNode());
   239          it(testcase.name, () => {
   240              setupManifestRepo(testcase.sourceRepo);
   241              const { container } = getWrapper();
   242  
   243              if (testcase.expectedLink) {
   244                  // Either render the link:
   245                  const aElem = elementQuerySelectorSafe(container, 'a');
   246                  expect(aElem.attributes.getNamedItem('href')?.value).toBe(testcase.expectedLink);
   247              } else {
   248                  // or render nothing:
   249                  expect(document.body.textContent).toBe('');
   250              }
   251          });
   252      });
   253  });
   254  
   255  describe('DisplaySourceLink', () => {
   256      const cases: {
   257          name: string;
   258          displayVersion: string;
   259          commitId: string;
   260          sourceRepo: string;
   261          expectedLink: string | undefined;
   262      }[] = [
   263          {
   264              name: 'Test with displayVersion',
   265              displayVersion: '1',
   266              commitId: '123',
   267              sourceRepo: 'https://example.com/testing/{commit}/{branch}',
   268              expectedLink: 'https://example.com/testing/123/main',
   269          },
   270          {
   271              name: 'Test without DisplayVersion',
   272              displayVersion: '',
   273              commitId: '123',
   274              sourceRepo: 'https://example.com/testing/{branch}/{commit}',
   275              expectedLink: 'https://example.com/testing/main/123',
   276          },
   277          {
   278              name: 'Test without repo link should render nothing',
   279              displayVersion: '1',
   280              commitId: '123',
   281              sourceRepo: '',
   282              expectedLink: undefined,
   283          },
   284      ];
   285  
   286      describe.each(cases)('RendersProperly', (testcase) => {
   287          const getNode = () => (
   288              <DisplaySourceLink displayString={testcase.displayVersion} commitId={testcase.commitId} />
   289          );
   290          const getWrapper = () => render(getNode());
   291          it(testcase.name, () => {
   292              setupSourceRepo(testcase.sourceRepo);
   293              const { container } = getWrapper();
   294  
   295              if (testcase.expectedLink) {
   296                  // Either render the link:
   297                  const aElem = elementQuerySelectorSafe(container, 'a');
   298                  expect(aElem.attributes.getNamedItem('href')?.value).toBe(testcase.expectedLink);
   299              } else {
   300                  // or render nothing:
   301                  expect(document.body.textContent).toBe('');
   302              }
   303          });
   304      });
   305  });
   306  
   307  describe('DisplayCommitHistoryLink', () => {
   308      const cases: {
   309          name: string;
   310          commitId: string;
   311          expectedLink: string | undefined;
   312      }[] = [
   313          {
   314              name: 'Test with displayString',
   315              commitId: '123',
   316              expectedLink: '/ui/commits/123',
   317          },
   318          {
   319              name: 'Test Without commit should render nothing',
   320              commitId: '',
   321              expectedLink: undefined,
   322          },
   323      ];
   324  
   325      describe.each(cases)('RendersProperly', (testcase) => {
   326          const getNode = () => <DisplayCommitHistoryLink displayString={''} commitId={testcase.commitId} />;
   327          const getWrapper = () => render(getNode());
   328          it(testcase.name, () => {
   329              const { container } = getWrapper();
   330  
   331              if (testcase.expectedLink) {
   332                  // Either render the link:
   333                  const aElem = elementQuerySelectorSafe(container, 'a');
   334                  expect(aElem.attributes.getNamedItem('href')?.value).toBe(testcase.expectedLink);
   335              } else {
   336                  // or render nothing:
   337                  expect(document.body.textContent).toBe('');
   338              }
   339          });
   340      });
   341  });
   342  
   343  describe('KuberpultGitHubLink', () => {
   344      const cases: {
   345          version: string;
   346          expectedLink: string;
   347      }[] = [
   348          {
   349              version: 'v2.6.0',
   350              expectedLink: 'https://github.com/freiheit-com/kuberpult/blob/v2.6.0/README.md',
   351          },
   352          {
   353              version: 'v6.6.6',
   354              expectedLink: 'https://github.com/freiheit-com/kuberpult/blob/v6.6.6/README.md',
   355          },
   356      ];
   357      describe.each(cases)('Renders properly', (testcase) => {
   358          const getNode = () => <KuberpultGitHubLink version={testcase.version} />;
   359          const getWrapper = () => render(getNode());
   360          it(testcase.version, () => {
   361              //given
   362              const { container } = getWrapper();
   363              // when
   364              const aElem = elementQuerySelectorSafe(container, 'a');
   365              // then
   366              expect(aElem.attributes.getNamedItem('href')?.value).toBe(testcase.expectedLink);
   367          });
   368      });
   369  });