Merge pull request #62 from add2cal/dev

Dev

README.md

@@ -1,7 +1,7 @@
 ![Add to Calendar Button React Wrapper](https://github.com/add2cal/add-to-calendar-button-react/blob/main/assets/readme-header.png?raw=true)
 
 ![Version](https://img.shields.io/npm/v/add-to-calendar-button-react?style=for-the-badge&label=Version)
-[![Parent Script Version](https://img.shields.io/badge/Parent%20Script%20Version-v2.5.4-blue?style=for-the-badge)](https://github.com/add2cal/add-to-calendar-button)
+[![Parent Script Version](https://img.shields.io/badge/Parent%20Script%20Version-v2.5.6-blue?style=for-the-badge)](https://github.com/add2cal/add-to-calendar-button)
 [![npm bundle size](https://img.shields.io/bundlephobia/minzip/add-to-calendar-button-react?style=for-the-badge)](https://www.npmjs.com/package/add-to-calendar-button-react)
 [![npm Installations](https://img.shields.io/npm/dt/add-to-calendar-button-react?label=npm%20Installations&style=for-the-badge)](https://www.npmjs.com/package/add-to-calendar-button-react)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "add-to-calendar-button-react",
-  "version": "2.5.4",
+  "version": "2.5.5",
   "engines": {
     "node": ">=16.18.1",
     "npm": ">=8.19.2"
@@ -63,7 +63,8 @@
     "build": "vite build && tsc --emitDeclarationOnly",
     "test": "vitest",
     "test:coverage": "vitest --coverage",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
   },
   "devDependencies": {
     "@testing-library/react": "^14.1.2",
@@ -92,6 +93,6 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "add-to-calendar-button": "^2.5.5"
+    "add-to-calendar-button": "^2.5.6"
   }
 }

src/AddToCalendarButton.tsx

@@ -90,6 +90,7 @@ export type AddToCalendarButtonProps = {
   proxy?: boolean;
   forceOverlay?: boolean;
   instance?: number;
+  dev?: boolean;
 };
 
 const AddToCalendarButton = (props: AddToCalendarButtonProps) => {

src/index.ts

@@ -1,5 +1,8 @@
 import AddToCalendarButton from './AddToCalendarButton';
 import type { AddToCalendarButtonProps } from './AddToCalendarButton';
+import { atcb_action } from 'add-to-calendar-button';
+import type { ATCBActionEventConfig } from 'add-to-calendar-button';
 
-export { AddToCalendarButton };
+export { AddToCalendarButton, atcb_action };
 export type AddToCalendarButtonType = AddToCalendarButtonProps;
+export type AddToCalendarActionType = ATCBActionEventConfig;

tests/mocks.ts

@@ -2,6 +2,7 @@ export const defaultProps = {
   name: 'Test',
   startDate: '2055-02-25',
   options: ['Google', 'iCal'],
+  timeZone: 'America/Los_Angeles',
 };
 
 export const invalidOptionsPropValue = ['Googling'];

tests/unit/basic.test.tsx

@@ -1,26 +1,41 @@
 import React from 'react';
 import { expect, test } from 'vitest';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { defaultProps } from '../mocks';
-import { AddToCalendarButton } from '../../src/index';
+import { AddToCalendarButton, atcb_action, AddToCalendarButtonType, AddToCalendarActionType } from '../../src/index';
 
 test('is imported and mounted', () => {
   expect(AddToCalendarButton).toBeTruthy();
 
-  const component = render(<AddToCalendarButton {...defaultProps} />);
+  const component = render(<AddToCalendarButton debug {...defaultProps as AddToCalendarButtonType} />);
 
   expect(component).toBeTruthy();
   expect(component.container.querySelector('add-to-calendar-button')).toBeTruthy();
 });
 
 test('is rerendered based on prop', async () => {
-  const { rerender } = render(<AddToCalendarButton lightMode="dark" {...defaultProps} />);
+  const { rerender } = render(<AddToCalendarButton debug lightMode="dark" {...defaultProps as AddToCalendarButtonType} />);
 
   expect(document.querySelector('.atcb-dark')).toBeTruthy();
   expect(document.querySelector('.atcb-light')).toBeFalsy();
 
-  rerender(<AddToCalendarButton lightMode="light" {...defaultProps} />);
+  rerender(<AddToCalendarButton lightMode="light" {...defaultProps as AddToCalendarButtonType} />);
 
   expect(document.querySelector('.atcb-light')).toBeTruthy();
   expect(document.querySelector('.atcb-dark')).toBeFalsy();
 });
+
+test('is rendered via atcb_action', async () => {
+  // create container div
+  const wrapper = render(<div id="my-container"><button id="my-default-button"></button></div>);
+  // ... and test for it
+  const buttonElement = wrapper.container.querySelector('#my-default-button');
+  expect(buttonElement).toBeTruthy();
+
+  // test atcb_action
+  if (buttonElement) atcb_action(defaultProps as AddToCalendarActionType, buttonElement as HTMLElement);
+
+  await waitFor(() => {
+    expect(wrapper.container.querySelector('[atcb-button-id="my-default-button"]')).toBeTruthy();
+  });
+});

tests/unit/props_validation/value.test.tsx

@@ -1,14 +1,21 @@
 import React from 'react';
 import { expect, test, describe, vi } from 'vitest';
-import { AddToCalendarButton } from '../../../src/index';
+import { AddToCalendarButton, AddToCalendarButtonType } from '../../../src/index';
 import { render } from '@testing-library/react';
 import { defaultProps, invalidOptionsPropValue } from '../../mocks';
 
 describe('props value validation', () => {
   test('throws error with invalid `option` prop value', () => {
     const spy = vi.spyOn(global.console, 'error');
 
-    render(<AddToCalendarButton name={defaultProps.name} debug startDate={defaultProps.startDate} options={invalidOptionsPropValue} />);
+    const config = {
+      name: defaultProps.name,
+      startDate: defaultProps.startDate,
+      options: invalidOptionsPropValue,
+      debug: true
+    } as AddToCalendarButtonType;
+
+    render(<AddToCalendarButton {...config} />);
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(Array.isArray(spy.mock.lastCall) ? spy.mock.lastCall.join() : '').toContain(`invalid option [${invalidOptionsPropValue.join().toLowerCase()}]`);
@@ -17,7 +24,7 @@ describe('props value validation', () => {
   test('throws error with endDate before startDate', () => {
     const spy = vi.spyOn(global.console, 'error');
 
-    render(<AddToCalendarButton {...defaultProps} debug startTime="14:00" endDate="2055-02-25" endTime="13:00" />);
+    render(<AddToCalendarButton {...defaultProps as AddToCalendarButtonType} debug startTime="14:00" endDate="2055-02-25" endTime="13:00" />);
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(Array.isArray(spy.mock.lastCall) ? spy.mock.lastCall.join() : '').toContain('end date before start date');
@@ -26,7 +33,7 @@ describe('props value validation', () => {
   test('throws error with invalid timezone', () => {
     const spy = vi.spyOn(global.console, 'error');
 
-    render(<AddToCalendarButton {...defaultProps} debug startTime="14:00" endDate="2055-02-25" endTime="15:00" timeZone="Mars/FantasyCity" />);
+    render(<AddToCalendarButton {...defaultProps as AddToCalendarButtonType} debug startTime="14:00" endDate="2055-02-25" endTime="15:00" timeZone="Mars/FantasyCity" />);
 
     expect(spy).toHaveBeenCalledTimes(2); // 2 times, because the timeZones lib will also throw an error here.
     expect(Array.isArray(spy.mock.lastCall) ? spy.mock.lastCall.join() : '').toContain('invalid time zone given');