Tests improvements (#145)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-helsinki-headless-cms",
-  "version": "1.0.0-alpha239",
+  "version": "1.0.0-alpha241",
   "description": "React components for displaying Headless CMS content according to guidelines set by HDS",
   "main": "cjs/index.js",
   "module": "index.js",

src/apollo/navigation/__tests__/Navigation.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { render, screen, waitFor } from '../../../common/utils/testingLibrary';
+import { server } from '../../../mocks/server';
+import { CmsEndpoint } from '../../../storybook-common/constants';
+import { getApolloConfig } from '../../../tests/apolloConfig';
+import { Navigation } from '../Navigation';
+
+// Establish API mocking before all tests.
+beforeAll(() => {
+  server.listen();
+});
+
+afterEach(() => {
+  jest.resetAllMocks();
+});
+
+describe('apollo navigation component', () => {
+  it('renders navigation with gql data', async () => {
+    render(
+      <Navigation
+        onTitleClick={() => {}}
+        menuName="Hobbies Helsinki Header FI"
+      />,
+      null,
+      {
+        ...getApolloConfig(CmsEndpoint.hobbies),
+      },
+    );
+
+    // wait data to load
+    await waitFor(() => {
+      expect(screen.queryByText('English')).toBeInTheDocument();
+    });
+
+    // there should be 3 language navigation items
+    expect(screen.getByText('English')).toBeInTheDocument();
+    expect(screen.getByText('Suomi')).toBeInTheDocument();
+    expect(screen.getByText('Svenska')).toBeInTheDocument();
+
+    // there should be 2 links Haku and Ajankohtaista generated by component
+    expect(screen.getByRole('link', { name: 'Haku' })).toHaveAttribute(
+      'href',
+      '/haku',
+    );
+    expect(screen.getByRole('link', { name: 'Ajankohtaista' })).toHaveAttribute(
+      'href',
+      '/artikkelit',
+    );
+    expect(screen.getAllByRole('link').length).toBe(5);
+  });
+});

src/apollo/notification/__tests__/Notification.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { render, screen, waitFor } from '../../../common/utils/testingLibrary';
+import { server } from '../../../mocks/server';
+import { CmsEndpoint } from '../../../storybook-common/constants';
+import { getApolloConfig } from '../../../tests/apolloConfig';
+import { Notification } from '../Notification';
+
+// Establish API mocking before all tests.
+beforeAll(() => {
+  server.listen();
+});
+
+afterEach(() => {
+  jest.resetAllMocks();
+});
+
+describe('apollo Notification component', () => {
+  it('renders notification with gql data', async () => {
+    render(<Notification />, null, {
+      ...getApolloConfig(CmsEndpoint.hobbies),
+    });
+
+    // wait data to load
+    await waitFor(() => {
+      expect(screen.queryByText('Test notification')).toBeInTheDocument();
+    });
+
+    // there should be title, content and link text in the notification
+    expect(screen.getByText('Test notification')).toBeInTheDocument();
+    expect(
+      screen.getByText('This is a test notification content'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('link', {
+        name: 'Read more. Opens in a new tab. Opens a different website.',
+      }),
+    ).toHaveAttribute('href', 'https://hel.fi');
+  });
+});

src/mocks/handlers.ts

@@ -1,5 +1,15 @@
 import { queryPage } from './queries/cms/page';
 import { queryEventList } from './queries/linkedEvents/eventList';
 import { queryEventsByIds } from './queries/linkedEvents/eventsByIds';
+import { queryLanguages } from './queries/cms/languages';
+import { queryMenu } from './queries/cms/menu';
+import { queryNotification } from './queries/cms/notification';
 
-export const handlers = [queryEventList(), queryEventsByIds(), queryPage()];
+export const handlers = [
+  queryEventList(),
+  queryEventsByIds(),
+  queryPage(),
+  queryLanguages(),
+  queryMenu(),
+  queryNotification(),
+];

src/mocks/queries/cms/languages.ts

@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { graphql } from 'msw';
+
+import languages from '../../responses/cms/languages/hobbies-languages.json';
+import { LanguagesDocument } from '../../../apollo';
+
+export const queryLanguages = () =>
+  graphql.query(LanguagesDocument, (req, res, ctx) => res(ctx.data(languages)));

src/mocks/queries/cms/menu.ts

@@ -0,0 +1,13 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { graphql } from 'msw';
+
+import data from '../../responses/cms/menus/hobbies-menu-fi.json';
+import { MenuDocument } from '../../../apollo';
+
+export const queryMenu = () =>
+  graphql.query(MenuDocument, (req, res, ctx) => {
+    if (req.variables.id === data.menu.name) {
+      return res(ctx.data(data));
+    }
+    return null;
+  });

src/mocks/queries/cms/notification.ts

@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { graphql } from 'msw';
+
+import data from '../../responses/cms/notifications/hobbies-notification-en.json';
+import { NotificationDocument } from '../../../common/headlessService/__generated__';
+
+export const queryNotification = () =>
+  graphql.query(NotificationDocument, (req, res, ctx) => res(ctx.data(data)));

src/mocks/responses/cms/languages/hobbies-languages.json

@@ -0,0 +1,31 @@
+{
+  "languages": [
+    {
+      "code": "FI",
+      "homeUrl": "https://harrastus.hkih.stage.geniem.io/fi/",
+      "id": "TGFuZ3VhZ2U6Zmk=",
+      "locale": "fi",
+      "name": "Suomi",
+      "slug": "fi",
+      "__typename": "Language"
+    },
+    {
+      "code": "EN",
+      "homeUrl": "https://harrastus.hkih.stage.geniem.io/en/",
+      "id": "TGFuZ3VhZ2U6ZW4=",
+      "locale": "en_US",
+      "name": "English",
+      "slug": "en",
+      "__typename": "Language"
+    },
+    {
+      "code": "SV",
+      "homeUrl": "https://harrastus.hkih.stage.geniem.io/sv/",
+      "id": "TGFuZ3VhZ2U6c3Y=",
+      "locale": "sv_SE",
+      "name": "Svenska",
+      "slug": "sv",
+      "__typename": "Language"
+    }
+  ]
+}

src/mocks/responses/cms/menus/hobbies-menu-fi.json

@@ -0,0 +1,29 @@
+{
+  "menu": {
+    "name": "Hobbies Helsinki Header FI",
+    "menuItems": {
+      "nodes": [
+        {
+          "parentId": null,
+          "id": "cG9zdDo5MA==",
+          "target": null,
+          "title": null,
+          "order": 1,
+          "path": "/haku",
+          "label": "Haku",
+          "connectedNode": null
+        },
+        {
+          "parentId": null,
+          "id": "cG9zdDoyMTA=",
+          "target": null,
+          "title": null,
+          "order": 2,
+          "path": "/artikkelit",
+          "label": "Ajankohtaista",
+          "connectedNode": null
+        }
+      ]
+    }
+  }
+}

src/mocks/responses/cms/notifications/hobbies-notification-en.json

@@ -0,0 +1,11 @@
+{
+  "notification": {
+    "content": "This is a test notification content",
+    "endDate": "",
+    "level": "info",
+    "linkText": "Read more",
+    "linkUrl": "https://hel.fi",
+    "startDate": "",
+    "title": "Test notification"
+  }
+}