Feat/615 long provider names

web-app/package.json

@@ -92,7 +92,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/cypress": "^1.1.3",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "^29.5.12",
     "@types/material-ui": "^0.21.12",
     "@types/node": "^20.8.10",
     "@types/react": "^18.2.25",

web-app/public/locales/en/common.json

@@ -18,5 +18,10 @@
     "loading": "Loading...",
     "errors": {
         "generic": "We are unable to complete your request at the moment."
-    }
+    },
+    "others": "others",
+    "apiKey": "API Key",
+    "httpHeader": "HTTP Header",
+    "back": "Back",
+    "and": "and"
 }

web-app/public/locales/en/feeds.json

@@ -16,10 +16,27 @@
     "checkSpelling": "Double check the spelling"
   },
   "errorAndContact": "Please check your internet connection and try again. If the problem persists <1>contact us</1> for for further assistance.",
+  "errorLoadingFeed": "There was an error loading the feed.",
   "form": {
     "addOrUpdateFeed": "Add or Update a Feed",
     "signUp": "Sign up for a Mobility Database account or login to add or update a GTFS feed.",
     "signUpAction": "Sign up for an account",
     "loginSuccess": "You were successfully logged in, you can now add or update a feed."
-  }
+  },
+  "seeFullList": "See full list",
+  "hideFullList": "Hide full list",
+  "producerDownloadUrl": "Producer download URL",
+  "copyDownloadUrl": "Copy download URL",
+  "producerUrlCopied": "Producer url copied to clipboard",
+  "authenticationType": "Authentication type",
+  "registerToDownloadFeed": "Register to download feed",
+  "feedContactEmail": "Feed contact email",
+  "copyFeedContactEmail": "Copy feed contact email",
+  "features": "Features",
+  "unableToDownloadFeed": "Unable to download this feed. If there is a more recent URL forthis feed, <1>please submit it here</1>",
+  "feedHasBeenReplaced": "This feed has been replaced with a different producer URL.{' '}<1> Go to the new feed here</1>.",
+  "downloadLatest": "Download Latest",
+  "seeLicense": "See License",
+  "boundingBoxTitle": "Bounding box from stops.txt",
+  "unableToGenerateBoundingBox": "Unable to generate bounding box."
 }

web-app/src/app/screens/Feed/AssociatedFeeds.tsx

@@ -123,6 +123,7 @@ export default function AssociatedGTFSRTFeeds({
         width={{ xs: '100%' }}
         title={'Related Schedule Feeds'}
         outlineColor={colors.indigo[500]}
+        margin={'0 0 8px'}
       >
         {feeds === undefined && <Typography>Loading...</Typography>}
         {feeds !== undefined && gtfsFeeds?.length === 0 && (

web-app/src/app/screens/Feed/Feed.spec.tsx

@@ -0,0 +1,140 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { formatProvidersSorted, getFeedTitleElement } from '.';
+import {
+  type GTFSFeedType,
+  type GTFSRTFeedType,
+} from '../../services/feeds/utils';
+import { type TFunction } from 'i18next';
+
+const mockFeed: GTFSFeedType = {
+  id: 'mdb-x',
+  data_type: 'gtfs',
+  status: 'active',
+  created_at: undefined,
+  external_ids: [
+    {
+      external_id: 'x',
+      source: 'mdb',
+    },
+  ],
+  provider: 'DPN, AVL, CFL, CFLBus, RGTR, TICE, TRAM',
+  feed_name: 'Aggregated Luxembourg - OpenOV',
+  note: '',
+  feed_contact_email: '',
+  source_info: {
+    producer_url: 'http://fake.zip',
+    authentication_type: 0,
+    authentication_info_url: '',
+    api_key_parameter_name: '',
+    license_url: 'http://fake/LICENSE.TXT',
+  },
+  locations: [
+    {
+      country_code: 'BE',
+    },
+    {
+      country_code: 'DE',
+    },
+    {
+      country_code: 'FR',
+    },
+  ],
+  latest_dataset: {
+    id: '1',
+    hosted_url: 'https://fake.zip',
+    downloaded_at: '2024-07-03T17:38:24.963131Z',
+    hash: 'x',
+  },
+};
+
+const mockFeedOneProvider = {
+  ...mockFeed,
+  provider: 'AVL',
+};
+
+const mockFeedRT: GTFSRTFeedType = {
+  id: 'mdb-x',
+  data_type: 'gtfs_rt',
+  status: 'active',
+  external_ids: [
+    {
+      external_id: 'x',
+      source: 'mdb',
+    },
+  ],
+  provider:
+    'SeaLink Pine Harbour, Waikato Regional Council, Pavlovich Transport Solutions, AT Metro',
+  feed_name: 'Auckland Transport Developer',
+  note: '',
+  feed_contact_email: '',
+  source_info: {
+    producer_url: 'https://api.fake/vehiclelocations',
+    authentication_type: 2,
+    authentication_info_url: 'https://fake.govt.nz/',
+    api_key_parameter_name: 'sub',
+    license_url: 'https://fake/',
+  },
+  locations: [
+    {
+      country_code: 'NZ',
+    },
+  ],
+  entity_types: ['vp'],
+  feed_references: ['mdb-y'],
+};
+
+describe('Feed page', () => {
+  afterEach(cleanup);
+
+  it('should format the providers correctly', () => {
+    const formattedProviders = formatProvidersSorted(mockFeed?.provider ?? '');
+    expect(formattedProviders).toEqual([
+      'AVL',
+      'CFL',
+      'CFLBus',
+      'DPN',
+      'RGTR',
+      'TICE',
+      'TRAM',
+    ]);
+  });
+
+  it('should format the page title correctly when there are more than one and gtfs', () => {
+    const mockT = jest.fn((key) => key) as unknown as TFunction<
+      'feeds',
+      undefined
+    >;
+    const formattedProviders = formatProvidersSorted(mockFeed?.provider ?? '');
+    render(getFeedTitleElement(formattedProviders, mockFeed, mockT));
+    expect(screen.getByText('AVL')).toBeTruthy();
+    expect(screen.getByText('+6 common:others')).toBeTruthy();
+  });
+
+  it('should format the page title correctly when there are more than one and gtfs_rt', () => {
+    const mockT = jest.fn((key) => key) as unknown as TFunction<
+      'feeds',
+      undefined
+    >;
+    const formattedProviders = formatProvidersSorted(
+      mockFeedRT?.provider ?? '',
+    );
+    render(getFeedTitleElement(formattedProviders, mockFeedRT, mockT));
+    expect(
+      screen.getByText('AT Metro - Auckland Transport Developer'),
+    ).toBeTruthy();
+    expect(screen.getByText('+3 common:others')).toBeTruthy();
+  });
+
+  it('should format the page title correctly when there is only one provider', () => {
+    const mockT = jest.fn((key) => key) as unknown as TFunction<
+      'feeds',
+      undefined
+    >;
+    const formattedProviders = formatProvidersSorted(
+      mockFeedOneProvider?.provider ?? '',
+    );
+    render(getFeedTitleElement(formattedProviders, mockFeedOneProvider, mockT));
+    expect(screen.getByText('AVL')).toBeTruthy();
+    expect(screen.queryByText('+')).toBeNull();
+  });
+});