ci: add step for testing the app (#5)

Author: idoshamun

.circleci/config.yml

@@ -73,6 +73,29 @@ jobs:
           name: Deploy
           command: gcloud app deploy
           working_directory: api/build
+  app_build:
+    docker:
+      - image: circleci/node:14.15.0
+    steps:
+      - checkout
+      - restore_cache:
+          key: app-dependency-cache-{{ checksum "app/package-lock.json" }}
+      - run:
+          name: Install dependencies
+          command: npm install
+          working_directory: app
+      - save_cache:
+          key: app-dependency-cache-{{ checksum "app/package-lock.json" }}
+          paths:
+            - ./app/node_modules
+      - run:
+          name: Test
+          command: npm run test -- --ci --reporters=default --reporters=jest-junit --runInBand
+          working_directory: app
+          environment:
+            - JEST_JUNIT_OUTPUT_DIR: ./test-results
+      - store_test_results:
+          path: ./app/test-results
 workflows:
   build:
     jobs:
@@ -91,3 +114,4 @@ workflows:
             branches:
               only:
                 - main
+      - app_build

app/__mocks__/svgrMock.ts

@@ -0,0 +1 @@
+export default 'div';

app/__tests__/buttons/BaseButton.tsx

@@ -0,0 +1,56 @@
+import { render, RenderResult, screen } from '@testing-library/preact';
+import React, { HTMLAttributes } from 'react';
+import BaseButton, {
+  BaseButtonProps,
+} from '../../components/buttons/BaseButton';
+import { primaryStyle } from '../../components/buttons/PrimaryButton';
+import ShareIcon from '../../icons/share.svg';
+
+const renderComponent = <
+  C extends HTMLElement = HTMLButtonElement,
+  P = HTMLAttributes<C>
+>(
+  props: Partial<BaseButtonProps & P> = {},
+): RenderResult => {
+  return render(<BaseButton {...primaryStyle()} {...props} />);
+};
+
+it('should render children', async () => {
+  renderComponent({ children: 'Button' });
+  expect(await screen.findByText('Button')).toBeInTheDocument();
+});
+
+it('should render icon', async () => {
+  renderComponent({ icon: <ShareIcon data-testid="icon" /> });
+  expect(await screen.findByTestId('icon')).toBeInTheDocument();
+});
+
+it('should render right icon', async () => {
+  renderComponent({ rightIcon: <ShareIcon data-testid="icon" /> });
+  expect(await screen.findByTestId('icon')).toBeInTheDocument();
+});
+
+it('should render loader and set aria-busy when loading', async () => {
+  renderComponent({ children: 'Button', loading: true });
+  expect(await screen.findByText('Button')).toHaveStyle({
+    visibility: 'hidden',
+  });
+  expect(await screen.findByRole('button')).toHaveAttribute(
+    'aria-busy',
+    'true',
+  );
+  expect(await screen.findByTestId('buttonLoader')).toBeInTheDocument();
+});
+
+it('should set aria-pressed when pressed is true', async () => {
+  renderComponent({ children: 'Button', pressed: true });
+  expect(await screen.findByRole('button')).toHaveAttribute(
+    'aria-pressed',
+    'true',
+  );
+});
+
+it('should render the button as an anchor element', async () => {
+  renderComponent({ children: 'Button', tag: 'a', href: 'https://daily.dev' });
+  expect(await screen.findByRole('link')).toBeInTheDocument();
+});

app/icons/share.svg

@@ -0,0 +1,15 @@
+module.exports = {
+  roots: ['<rootDir>'],
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  setupFilesAfterEnv: ['./__tests__/setup.ts'],
+  testPathIgnorePatterns: [
+    './.next/',
+    './node_modules/',
+    '<rootDir>/__tests__/setup.ts',
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  moduleNameMapper: {
+    '\\.svg': '<rootDir>/__mocks__/svgrMock.ts',
+  },
+  snapshotSerializers: ['@emotion/jest/serializer'],
+};

app/icons/twitter_color.svg

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import Link from 'next/link';
 import styled from '@emotion/styled';
-import { typoTitle1 } from '../styles/typography';
+import { typoFootnote, typoTitle1 } from '../styles/typography';
 import rem from '../macros/rem.macro';
 import PrimaryButton from '../components/buttons/PrimaryButton';
 import SecondaryButton from '../components/buttons/SecondaryButton';
@@ -19,6 +19,13 @@ const Title = styled.h1`
   ${typoTitle1}
 `;
 
+const Credit = styled.a`
+  align-self: center;
+  color: var(--theme-label-tertiary);
+  text-decoration: underline;
+  ${typoFootnote}
+`;
+
 export default function Index(): ReactElement {
   return (
     <Main>
@@ -33,6 +40,9 @@ export default function Index(): ReactElement {
           Leaderboard please... 🍿
         </SecondaryButton>
       </Link>
+      <Credit href="https://app.daily.dev/?ref=buzzwordquiz">
+        Made with ❤️ by daily.dev
+      </Credit>
     </Main>
   );
 }