Import news loclly from repo insted of from cdn

frontend/app-development/features/overview/components/News/News.test.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
-import { screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
-import { renderWithProviders } from 'app-development/test/testUtils';
-import { APP_DEVELOPMENT_BASENAME, NEWS_EXPIRATION_TIME_IN_DAYS } from 'app-shared/constants';
-import { News } from './News';
+import { render, screen, waitFor } from '@testing-library/react';
 import type { NewsList } from 'app-shared/types/api/NewsList';
 import { textMock } from '@studio/testing/mocks/i18nMock';
-import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
+import { NEWS_EXPIRATION_TIME_IN_DAYS } from 'app-shared/constants';
+
+const mockNewsData = (newsList: NewsList) => {
+  jest.mock('./NewsContent/news.nb.json', () => ({
+    __esModule: true,
+    default: newsList,
+  }));
+};
 
 const formatDate = (date) => {
   const year = date.getFullYear();
@@ -21,6 +25,9 @@ const formatDateToVisualText = (date: string) => {
 };
 
 describe('News', () => {
+  afterEach(() => {
+    jest.resetModules();
+  });
   it('section title is always rendered', async () => {
     const publishDate = new Date();
     const newsList: NewsList = {
@@ -32,7 +39,7 @@ describe('News', () => {
         },
       ],
     };
-    await render(newsList);
+    await renderNews(newsList);
 
     await screen.findByText('title');
   });
@@ -47,7 +54,7 @@ describe('News', () => {
         },
       ],
     };
-    await render(newsList);
+    await renderNews(newsList);
 
     await screen.findByText('title');
     await screen.findByText('News content');
@@ -68,32 +75,14 @@ describe('News', () => {
         },
       ],
     };
-    await render(newsList);
-    await waitForElementToBeRemoved(() =>
-      screen.queryByText(textMock('overview.fetch_news_loading_message')),
-    );
+    await renderNews(newsList);
 
     const noNewsTitle = screen.getByText(textMock('overview.no_news_title'));
     expect(noNewsTitle).toBeInTheDocument();
     const noNewsContent = screen.getByText(textMock('overview.no_news_content'));
     expect(noNewsContent).toBeInTheDocument();
   });
 
-  it('loading spinner is shown while waiting for content', async () => {
-    const newsList: NewsList = {
-      news: [
-        {
-          title: 'title',
-          content: 'News content',
-          date: '2021-01-01',
-        },
-      ],
-    };
-    render(newsList);
-
-    await screen.findByText(textMock('overview.fetch_news_loading_message'));
-  });
-
   it('does not list a news if the date in the news is in the future', async () => {
     const publishDate = new Date();
     publishDate.setDate(publishDate.getDate() + 1);
@@ -106,8 +95,7 @@ describe('News', () => {
         },
       ],
     };
-
-    await render(newsList);
+    await renderNews(newsList);
 
     await waitFor(() => {
       screen.queryByText('News content');
@@ -129,8 +117,7 @@ describe('News', () => {
         },
       ],
     };
-
-    await render(newsList);
+    await renderNews(newsList);
 
     await waitFor(() => {
       screen.queryByText('News content');
@@ -139,32 +126,10 @@ describe('News', () => {
     const news = screen.queryByText('News content');
     expect(news).not.toBeInTheDocument();
   });
-
-  it('error message is shown when content fails to load', async () => {
-    const publishDate = new Date();
-    const newsList: NewsList = {
-      news: [
-        {
-          title: 'title',
-          content: 'News content',
-          date: formatDate(publishDate),
-        },
-      ],
-    };
-    await render(newsList, {
-      getNewsList: jest.fn().mockImplementation(() => Promise.reject()),
-    });
-
-    await screen.findByText(textMock('overview.fetch_news_error_message'));
-  });
 });
 
-const render = async (newsList: NewsList, queries?: Partial<ServicesContextProps>) => {
-  return renderWithProviders(<News />, {
-    startUrl: `${APP_DEVELOPMENT_BASENAME}/my-org/my-app`,
-    queries: {
-      getNewsList: jest.fn().mockImplementation(() => Promise.resolve<NewsList>(newsList)),
-      ...queries,
-    },
-  });
+const renderNews = async (newsList: NewsList) => {
+  mockNewsData(newsList);
+  const { News } = await import('./News');
+  return render(<News />);
 };

frontend/app-development/features/overview/components/News/News.tsx

@@ -1,57 +1,37 @@
 import * as React from 'react';
 import { Card, Heading, Link, Paragraph } from '@digdir/designsystemet-react';
-import { useNewsListQuery } from 'app-development/hooks/queries/useNewsListQuery';
-import { StudioPageError, StudioSpinner } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import classes from './News.module.css';
-import { NEWS_EXPIRATION_TIME_IN_DAYS } from 'app-shared/constants';
 import { gitHubRoadMapUrl } from 'app-shared/ext-urls';
+import newsData from './NewsContent/news.nb.json';
+import { NEWS_EXPIRATION_TIME_IN_DAYS } from 'app-shared/constants';
 
 export const News = () => {
-  const { data: newsList, isPending, isError, isSuccess } = useNewsListQuery();
   const { t } = useTranslation();
   const today = new Date();
 
+  const newsList = newsData.news;
+
   const showNews = (date: string): boolean => {
     const publishDate = new Date(date);
     const publishDatePlus30Days = new Date(publishDate);
     publishDatePlus30Days.setDate(publishDate.getDate() + NEWS_EXPIRATION_TIME_IN_DAYS);
     return publishDate <= today && today <= publishDatePlus30Days;
   };
 
-  const thereAreRelevantNews =
-    isSuccess && newsList.news.filter((news) => showNews(news.date)).length > 0;
+  const thereAreRelevantNews = newsList.filter((news) => showNews(news.date)).length > 0;
 
   const formatDateToText = (date: string) => {
     // Date comes in this format: YYYY-MM-DD
     const [year, month, day] = date.split('-');
     return `${day}.${month}.${year}`;
   };
 
-  if (isPending) {
-    return (
-      <NewsTemplate>
-        <StudioSpinner showSpinnerTitle spinnerTitle={t('overview.fetch_news_loading_message')} />
-      </NewsTemplate>
-    );
-  }
-
-  if (isError) {
-    return (
-      <NewsTemplate>
-        <StudioPageError
-          title={t('overview.news_error_title')}
-          message={t('overview.fetch_news_error_message')}
-        />
-      </NewsTemplate>
-    );
-  }
-
   return (
     <div>
       <NewsTemplate>
         {thereAreRelevantNews ? (
-          newsList.news?.map(({ title, content, date }) => {
+          newsList?.map(({ title, content, date }) => {
             return (
               showNews(date) && (
                 <Card className={classes.newsContent} key={title}>

frontend/app-development/features/overview/components/News/NewsContent/news.nb.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "news.schema.json",
+  "news": [
+    {
+      "date": "2024-08-07",
+      "title": "Prosessverktøyet støtter nå betaling",
+      "content": "Du kan nå legge til betalingssteg i prosessen."
+    },
+    {
+      "date": "2024-07-18",
+      "title": "Vi har fjernet regler for beregninger og betingede visninger",
+      "content": "Verktøyene er utdaterte, så vi har tatt de bort fra Lage-siden. Du kan fortsatt lage regler for beregninger og betingede visninger i koden, men vi anbefaler å heller bruke dynamiske uttrykk."
+    }
+  ]
+}