More tests

Author: joeattardi

jest-setup.ts

@@ -1 +1,5 @@
 import '@testing-library/jest-dom';
+
+global.afterEach(() => {
+  document.body.replaceChildren();
+});

src/db.ts

@@ -1,4 +1,4 @@
-import { GroupMessage, Emoji, GroupKey } from 'emojibase';
+import { GroupMessage, Emoji } from 'emojibase';
 import { EmojiRecord, Category, CategoryKey } from './types';
 
 import { caseInsensitiveIncludes } from './util';

src/i18n/lang-en.js src/i18n/lang-en.ts

@@ -34,6 +34,6 @@ const defaultOptions: Partial<PickerOptions> = {
   custom: []
 };
 
-export function getOptions(options: Partial<PickerOptions>): PickerOptions {
+export function getOptions(options: Partial<PickerOptions> = {}): PickerOptions {
   return { ...defaultOptions, ...options } as PickerOptions;
 }

src/options.ts

@@ -16,8 +16,8 @@ type DependencyMapping = {
   pickerId: string;
 };
 
-type ViewConstructor<T extends View> = new (...args: any[]) => T;
-type ViewConstructorParameters<T extends View> = ConstructorParameters<ViewConstructor<T>>;
+export type ViewConstructor<T extends View> = new (...args: any[]) => T;
+export type ViewConstructorParameters<T extends View> = ConstructorParameters<ViewConstructor<T>>;
 
 export class ViewFactory {
   private events: Events<AppEvent>;

src/viewFactory.ts

@@ -15,6 +15,8 @@ const focusEventOptions = { scroll: 'animate', focus: 'button', performFocus: tr
 export class CategoryTab extends View {
   private category: Category;
   private icon: string;
+  
+  isActive = false;
 
   constructor({ category, icon }: CategoryTabOptions) {
     super({ template, classes });
@@ -36,21 +38,27 @@ export class CategoryTab extends View {
     super.initialize();
   }
 
-  async render(): Promise<HTMLElement> {
-    return super.render({
+  renderSync(): HTMLElement {
+    super.renderSync({
       category: this.category,
       icon: this.icon
     });
+
+    this.ui.button.ariaSelected = 'false';
+
+    return this.el;
   }
 
   setActive(isActive: boolean, changeFocus = true) {
+    this.isActive = isActive;
     this.ui.button.classList.toggle(classes.categoryButtonActive, isActive);
     if (changeFocus) {
       this.setFocused(isActive);
     }
   }
 
   private setFocused(isFocused: boolean) {
+    this.ui.button.ariaSelected = isFocused.toString();
     if (isFocused) {
       this.ui.button.tabIndex = 0;
       this.ui.button.focus();
@@ -59,7 +67,9 @@ export class CategoryTab extends View {
     }
   }
 
-  selectCategory() {
-    this.events.emit('category:select', this.category.key, focusEventOptions);
+  private selectCategory() {
+    if (!this.isActive) {
+      this.events.emit('category:select', this.category.key, focusEventOptions);
+    }
   }
 }

src/views/CategoryTab.ts

@@ -50,7 +50,7 @@ export class CategoryTabs extends View {
       this.viewFactory.create(CategoryTab, { category, icon: categoryIcons[category.key] }));
 
     await super.render({
-      tabs: await Promise.all(this.tabViews.map(view => view.render()))
+      tabs: this.tabViews.map(view => view.renderSync())
     });
 
     return this.el;

src/views/CategoryTabs.ts

@@ -0,0 +1,75 @@
+import userEvent from '@testing-library/user-event';
+import { fireEvent } from '@testing-library/dom';
+import { testViewSync } from '../../../testHelpers/testView';
+
+import { Events } from '../../events';
+import { AppEvent } from '../../AppEvents';
+
+import { CategoryTab } from '../CategoryTab';
+import { Category } from '../../types';
+
+describe('CategoryTab', () => {
+  const category: Category = {
+    key: 'smileys-emotion',
+    message: 'Smileys & Emotion',
+    order: 0
+  };
+
+  const events = new Events<AppEvent>();
+  const emitSpy = jest.spyOn(events, 'emit');
+
+  const icon = 'fa-face-smile';
+
+  afterEach(() => {
+    emitSpy.mockReset();
+  });
+
+  function renderTab() {
+    return testViewSync(CategoryTab, [{ category, icon }], { events });
+  }
+
+  test('renders a category tab', () => {
+    const tab = renderTab();
+
+    const button = tab.ui.button;
+    expect(button).toHaveAttribute('data-category', 'smileys-emotion');
+    expect(button).toHaveAttribute('title', 'Smileys & Emotion');
+    expect(button).toHaveAttribute('tabindex', '-1');
+  });
+
+  test('toggles the active status', () => {
+    const tab = renderTab();
+    const button = tab.ui.button;
+    expect(button.ariaSelected).toBe('false');
+
+    // By default it should make the tab focusable and set aria-selected to true
+    tab.setActive(true);
+    expect(button.ariaSelected).toBe('true');
+    expect(button.tabIndex).toBe(0);
+
+    // Deactivation should reset tabindex and aria-selected
+    tab.setActive(false);
+    expect(button.ariaSelected).toBe('false');
+    expect(button.tabIndex).toBe(-1);
+
+    // Setting active without focus (like when scrolling) should not change tabindex or aria-selected
+    tab.setActive(true, false);
+    expect(button.ariaSelected).toBe('false');
+  });
+
+  test('emits a category:select event when clicked', () => {
+    const tab = renderTab();
+    const button = tab.ui.button;
+
+    userEvent.click(button);
+    expect(events.emit).toHaveBeenCalledWith('category:select', 'smileys-emotion', expect.anything());
+  });
+
+  test('emits a category:select event when focused', () => {
+    const tab = renderTab();
+    const button = tab.ui.button;
+
+    fireEvent.focus(button);
+    expect(events.emit).toHaveBeenCalledWith('category:select', 'smileys-emotion', expect.anything());
+  });
+});

src/views/__tests__/CategoryTab.test.ts

@@ -1,25 +1,62 @@
-import { screen } from '@testing-library/dom';
+import { fireEvent } from '@testing-library/dom';
 
 import { Emoji } from '../Emoji';
-import { renderSyncToBody } from '../view';
+import { testViewSync } from '../../../testHelpers/testView';
 
-import NativeRenderer from '../../renderers/native';
+import { Events } from '../../events';
+import { AppEvent } from '../../AppEvents';
+import { CategoryKey } from '../../types';
 
 describe('Emoji', () => {
+  const emojiData = {
+    emoji: '😎',
+    label: 'smile'
+  };
+
+  const events = new Events<AppEvent>();
+  const emitSpy = jest.spyOn(events, 'emit');
+
+  function renderEmoji(category?: CategoryKey) {
+    return testViewSync(Emoji, [{ emoji: emojiData, category }], {
+      events
+    });
+  }
+
+  afterEach(() => {
+    emitSpy.mockReset();
+  });
+
   test('renders an emoji', async () => {
-    const emojiData = {
-      emoji: '😎',
-      label: 'smile'
-    };
+    const { el } = renderEmoji();
+    expect(el).toHaveTextContent('😎');
+    expect(el).toHaveAttribute('title', 'smile');
+    expect(el).toHaveAttribute('data-emoji', '😎');
+  });
+
+  test('emits focus:change event when the emoji receives focus and there is a category', () => {
+    const { el } = renderEmoji('smileys-emotion');
+    fireEvent.focus(el);
+    expect(events.emit).toHaveBeenCalledWith('focus:change', 'smileys-emotion');
+  });
+
+  test('does not emit focus:change event if there is no category set', () => {
+    const { el } = renderEmoji();
+    fireEvent.focus(el);
+    expect(events.emit).not.toHaveBeenCalled();
+  });
 
-    const emoji = new Emoji({ emoji: emojiData });
-    emoji.setRenderer(new NativeRenderer());
+  test('activates/deactivates focus', () => {
+    const emoji = renderEmoji();
+    expect(emoji.el).toHaveAttribute('tabindex', '-1');
 
-    renderSyncToBody(emoji);
+    emoji.activateFocus();
+    expect(document.activeElement).not.toBe(emoji.el);
+    expect(emoji.el).toHaveAttribute('tabindex', '0');
 
-    const button = screen.getByRole('button');
-    expect(button).toHaveTextContent('😎');
-    expect(button).toHaveAttribute('title', 'smile');
-    expect(button).toHaveAttribute('data-emoji', '😎');
+    emoji.deactivateFocus();
+    expect(emoji.el).toHaveAttribute('tabindex', '-1');
+    
+    emoji.activateFocus(true);
+    expect(document.activeElement).toBe(emoji.el);
   });
 });

src/views/__tests__/Emoji.test.ts

@@ -216,11 +216,3 @@ export abstract class View {
     return `.${className}`;
   }
 }
-
-export function renderSyncToBody(view: View) {
-  document.body.appendChild(view.renderSync());
-}
-
-export async function renderToBody(view: View) {
-  document.body.appendChild(await view.render());
-}

src/views/view.ts

@@ -0,0 +1,52 @@
+import { ViewConstructor, ViewConstructorParameters, ViewFactory } from '../src/viewFactory';
+import { View } from '../src/views/view';
+
+import { Events } from '../src/events';
+import { AppEvent } from '../src/AppEvents';
+import { Bundle } from '../src/i18n';
+import NativeRenderer from '../src/renderers/native';
+import { Database } from '../src/db';
+
+import { getOptions } from '../src/options';
+
+jest.mock('../src/db');
+
+const defaultDependencies = {
+  events: new Events<AppEvent>(),
+  i18n: new Bundle(),
+  renderer: new NativeRenderer(),
+  options: getOptions({ i18n: {} }),
+  emojiData: Promise.resolve(new Database()),
+  customEmojis: [],
+  pickerId: 'test-picker'
+};
+
+function createTestView<T extends View>(
+  constructor: ViewConstructor<T>, 
+  args: ViewConstructorParameters<T>,
+  dependencies = {}
+) {
+  const factory = new ViewFactory({ ...defaultDependencies, ...dependencies });
+  const view = factory.create(constructor, ...args);
+  return view;
+}
+
+export async function testView<T extends View>(
+  constructor: ViewConstructor<T>,
+  args: ViewConstructorParameters<T>,
+  dependencies = {}
+) {
+  const view = createTestView(constructor, args, dependencies);
+  document.body.appendChild(await view.render());
+  return view;
+}
+
+export function testViewSync<T extends View>(
+  constructor: ViewConstructor<T>,
+  args: ViewConstructorParameters<T>,
+  dependencies = {}
+) {
+  const view = createTestView(constructor, args, dependencies);
+  document.body.appendChild(view.renderSync());
+  return view;
+}