adding unit tests (#7581)

* unit tests

* working

* fixing tests

* add popover test

* remove comments

* remove comments

---------

Co-authored-by: katiegoines <[email protected]>

Author: katieklein

jest.config.js

@@ -15,11 +15,13 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   moduleNameMapper: {
     '\\.(css|less|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
+    '@docsearch/css(.*)': '<rootDir>/src/__mocks__/styleMock.js',
     '@/components/(.*)': '<rootDir>/src/components/$1',
     '@/constants/(.*)': '<rootDir>/src/constants/$1',
     '@/utils/(.*)': '<rootDir>/src/utils/$1',
     '@/data/(.*)': '<rootDir>/src/data/$1',
-    '@/directory/(.*)': '<rootDir>/src/directory/$1'
+    '@/directory/(.*)': '<rootDir>/src/directory/$1',
+    '@/themes/(.*)': '<rootDir>/src/themes/$1'
   },
   transformIgnorePatterns: ['node_modules/(?!variables/.*)']
 };

src/components/Accordion/__tests__/Accordion.test.tsx

@@ -46,25 +46,39 @@ describe('Accordion', () => {
     expect(bodyText).toBeInTheDocument();
   });
 
-  it('should expand Accordion when heading is clicked', async () => {
+  it('should toggle Accordion when heading is clicked', async () => {
     render(component);
     const accordionHeading = screen.getByText('Accordion component example');
+    const detailsEl = await screen.getByRole('group');
+    const text = await screen.getByText(content);
     userEvent.click(accordionHeading);
 
     await waitFor(() => {
-      expect(screen.getByText(content)).toBeInTheDocument();
-      expect(screen.getByText(content)).toBeVisible();
+      expect(text).toBeVisible();
+      expect(detailsEl).toHaveAttribute('open');
+    });
+
+    userEvent.click(accordionHeading);
+    await waitFor(() => {
+      expect(text).not.toBeVisible();
+      expect(detailsEl).not.toHaveAttribute('open');
     });
   });
 
   it('should collapse Accordion when close button is clicked', async () => {
     render(component);
-    await screen.getByText(content);
+    const accordionHeading = screen.getByText('Accordion component example');
+    userEvent.click(accordionHeading);
+    const detailsEl = await screen.getByRole('group');
+    expect(detailsEl).toHaveAttribute('open');
+
+    const text = await screen.getByText(content);
     const closeButton = screen.getByRole('button');
     userEvent.click(closeButton);
 
     await waitFor(() => {
-      expect(screen.getByText(content)).not.toBeVisible();
+      expect(text).not.toBeVisible();
+      expect(detailsEl).not.toHaveAttribute('open');
     });
   });
 

src/components/FeatureFlags/__tests__/FeatureFlags.test.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import FeatureFlags from '../index';
+import FeatureFlagSummary from '../FeatureFlagSummary';
+
+describe('FeatureFlags', () => {
+  it('should render the FeatureFlags component', async () => {
+    render(<FeatureFlags></FeatureFlags>);
+    const element = await screen.findByRole('heading', { name: 'appSync' });
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should render the FeatureFlagSummary component', async () => {
+    const flag = {
+      description:
+        'Changes the permission format to grant access to graphql operations instead of appsync control plane operations',
+      type: 'Feature',
+      valueType: 'Boolean',
+      versionAdded: '4.42.0',
+      deprecationDate: 'May 1st 2021',
+      values: [
+        {
+          value: 'true',
+          description: 'Creates IAM policies to allow Query/Mutations',
+          defaultNewProject: true,
+          defaultExistingProject: false
+        },
+        {
+          value: 'false',
+          description:
+            'Uses previous policy format which allows control plane access to AppSync',
+          defaultNewProject: false,
+          defaultExistingProject: true
+        }
+      ]
+    };
+
+    const component = (
+      <FeatureFlagSummary
+        key={`feature-flag-summary-${1}`}
+        name={'generateGraphQLPermissions'}
+        feature={flag}
+      />
+    );
+    render(component);
+    const element = await screen.findByRole('link', {
+      name: 'generateGraphQLPermissions'
+    });
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should render the FeatureFlagSummary component without description if one doesn"t exist on the flag', async () => {
+    const flag = {
+      type: 'Feature',
+      valueType: 'Boolean',
+      versionAdded: '4.42.0',
+      deprecationDate: 'May 1st 2021',
+      values: [
+        {
+          value: 'true',
+          description: 'Creates IAM policies to allow Query/Mutations',
+          defaultNewProject: true,
+          defaultExistingProject: false
+        },
+        {
+          value: 'false',
+          description:
+            'Uses previous policy format which allows control plane access to AppSync',
+          defaultNewProject: false,
+          defaultExistingProject: true
+        }
+      ]
+    };
+
+    const component = (
+      <FeatureFlagSummary
+        key={`feature-flag-summary-${1}`}
+        name={'generateGraphQLPermissions'}
+        feature={flag}
+      />
+    );
+    render(component);
+    const element = await screen.findByRole('heading', {
+      name: 'generateGraphQLPermissions'
+    });
+    expect(element.nextElementSibling?.tagName).not.toBe('P');
+  });
+});

src/components/FeatureLists/__tests__/FeatureLists.test.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { FeatureList, FeatureItem, PlatformFeatureList } from '../index';
+
+const routerMock = {
+  __esModule: true,
+  useRouter: () => {
+    return {
+      query: { platform: 'react' },
+      pathname: '/gen1/',
+      asPath: '/gen1/'
+    };
+  }
+};
+
+jest.mock('next/router', () => routerMock);
+
+describe('FeatureLists', () => {
+  const featureListComponent = (
+    <FeatureList heading="Deploy" level={2}>
+      <FeatureItem
+        linkText="SSR/SSG/ISR hosting support"
+        href="/react/deploy-and-host/hosting/"
+      >
+        Deploy apps in Next.js, Nuxt.js, Gatsby, React, Vue, Angular (and more)
+        by simply connecting your Git repository.
+      </FeatureItem>
+    </FeatureList>
+  );
+
+  it('should render the FeatureList component', async () => {
+    render(featureListComponent);
+
+    const heading = await screen.findByRole('heading', { name: 'Deploy' });
+
+    expect(heading).toBeInTheDocument();
+    expect(heading.tagName).toBe('H2');
+  });
+
+  it('should render the FeatureItem component', async () => {
+    render(featureListComponent);
+
+    const link = await screen.findByRole('link', {
+      name: 'SSR/SSG/ISR hosting support'
+    });
+
+    expect(link).toBeInTheDocument();
+  });
+
+  it('should render the PlatformFeatureList component', async () => {
+    render(<PlatformFeatureList platform="react" />);
+
+    const link = await screen.findByRole('link', {
+      name: 'Simple configuration'
+    });
+
+    const heading = await screen.findByRole('heading', {
+      name: 'Features for React'
+    });
+
+    expect(link).toBeInTheDocument();
+    expect(heading).toBeInTheDocument();
+  });
+});

src/components/Feedback/__tests__/index.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as trackModule from '../../../utils/track';
 
-jest.mock('next/router', () => ({
+const router = jest.mock('next/router', () => ({
   useRouter() {
     return {
       route: '/',
@@ -19,6 +19,8 @@ jest.mock('../../../utils/track', () => ({
 }));
 
 describe('Feedback', () => {
+  const component = <Feedback router={router} />;
+
   it('should render component with thumbs up and thumbs down button', () => {
     const component = <Feedback />;
 
@@ -32,27 +34,22 @@ describe('Feedback', () => {
   });
 
   it('should show response text when No is clicked', async () => {
-    const component = <Feedback />;
-
     render(component);
 
-    const thumbsDownButton = screen.getByText('No');
-    const feedbackComponent = screen.getByText('Was this page helpful?');
-    const feedbackText = screen.getByText('Can you provide more details?');
+    const thumbsDownButton = screen.getByRole('button', { name: 'No' });
 
     expect(thumbsDownButton).toBeInTheDocument();
 
-    userEvent.click(feedbackComponent);
+    userEvent.click(thumbsDownButton);
+    const response = screen.getByRole('link');
 
     await waitFor(() => {
-      expect(feedbackText).toBeVisible();
+      expect(response.textContent).toBe('File an issue on GitHub');
     });
   });
 
   it('should call trackFeedbackSubmission request when either button is clicked', async () => {
     jest.spyOn(trackModule, 'trackFeedbackSubmission');
-    const component = <Feedback />;
-
     render(component);
     const thumbsDownButton = screen.getByText('No');
     userEvent.click(thumbsDownButton);

src/components/FrameworkGrid/__tests__/FrameworkGrid.test.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { FrameworkGrid } from '../index';
+
+const routerMock = {
+  __esModule: true,
+  useRouter: () => {
+    return {
+      query: { platform: 'react' },
+      pathname: '/gen1/',
+      asPath: '/gen1/'
+    };
+  }
+};
+
+jest.mock('next/router', () => routerMock);
+
+describe('FrameworkGrid', () => {
+  const component = <FrameworkGrid currentKey="react" />;
+
+  it('should render the FrameworkGrid component', async () => {
+    render(component);
+    const framework = await screen.findByRole('link', { name: 'React' });
+    expect(framework).toBeInTheDocument();
+  });
+
+  it('should highlight icon of the currentKey', async () => {
+    render(component);
+    const framework = await screen.findByRole('link', { name: 'React' });
+    expect(framework.classList).toContain('framework-grid__link--current');
+  });
+});