@blaze-cms/react-page-builder 0.146.0-alpha.51 → 0.146.0-alpha.56

package/tests/unit/src/variants/LiveBlogList/LiveBlogList.test.js

@@ -0,0 +1,121 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import dayjs from 'dayjs';
+import LiveBlogList from '../../../../../src/variants/LiveBlogList/LiveBlogList';
+import { LONG_TEXT, SHORT_TEXT } from './constants';
+
+describe('LiveBlogList', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('short content: uses date and hides toggle button', async () => {
+    jest.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockReturnValue(200);
+    const dateProps = { date: '2025-04-15T11:26:03.863Z' };
+
+    const { container } = render(
+      <LiveBlogList {...dateProps}>
+        <h2>Short item</h2>
+        <p>{SHORT_TEXT}</p>
+      </LiveBlogList>
+    );
+
+    const contentElement = container.querySelector('.live-blog-content');
+    expect(contentElement).toBeInTheDocument();
+    expect(container.querySelector('.live-blog-toggle')).not.toBeInTheDocument();
+    const displayedDate = container.querySelector('.live-blog-date');
+
+    expect(displayedDate).toBeInTheDocument();
+    expect(displayedDate.textContent).not.toBe('');
+  });
+
+  it('long content: shows toggle button and lets you expand and collapse', async () => {
+    jest.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockReturnValue(500);
+    const dateProps = { date: '2025-04-15T15:51:59.303Z' };
+
+    const { container } = render(
+      <LiveBlogList {...dateProps}>
+        <h3>The day so far</h3>
+        <div>{LONG_TEXT}</div>
+      </LiveBlogList>
+    );
+
+    const toggleButton = await screen.findByRole('button', { name: /show more/i });
+    expect(toggleButton).toBeInTheDocument();
+    const contentElement = container.querySelector('.live-blog-content');
+    expect(contentElement).toHaveClass('collapsed');
+
+    fireEvent.click(toggleButton);
+    await waitFor(() => {
+      expect(contentElement).not.toHaveClass('collapsed');
+      expect(toggleButton.textContent).toMatch(/show less/i);
+    });
+
+    fireEvent.click(toggleButton);
+    await waitFor(() => {
+      expect(contentElement).toHaveClass('collapsed');
+      expect(toggleButton.textContent).toMatch(/show more/i);
+    });
+
+    const displayedDate = container.querySelector('.live-blog-date');
+    expect(displayedDate).toBeInTheDocument();
+    expect(displayedDate.textContent).not.toBe('');
+  });
+
+  it('if date less than 1 day ago, shows relative time', () => {
+    const recentDate = '2025-04-15T15:52:00.000Z';
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(new Date('2025-04-16T10:00:00.000Z'));
+
+    const { container } = render(
+      <LiveBlogList date={recentDate}>
+        <p>Less than 1 day old content</p>
+      </LiveBlogList>
+    );
+
+    const dateElement = container.querySelector('.live-blog-date');
+    expect(dateElement).toBeInTheDocument();
+    expect(dateElement.textContent).toMatch(/ago/i);
+    jest.useRealTimers();
+  });
+
+  it('if older than a day but within a year, shows date in DD MMM format', () => {
+    const fewDaysOld = '2025-04-09T00:00:00.000Z';
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(new Date('2025-04-16T10:00:00.000Z'));
+
+    const { container } = render(
+      <LiveBlogList date={fewDaysOld}>
+        <p>Older than 1 day but less than a year</p>
+      </LiveBlogList>
+    );
+
+    const dateElement = container.querySelector('.live-blog-date--date');
+    expect(dateElement).toBeInTheDocument();
+    const expectedDate = dayjs(fewDaysOld).format('DD MMM');
+    expect(dateElement.textContent).toBe(expectedDate);
+    jest.useRealTimers();
+  });
+
+  it('if older than a year, shows date in DD MMM YYYY format', () => {
+    const oldDate = '2023-03-15T00:00:00.000Z';
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(new Date('2025-04-16T10:00:00.000Z'));
+
+    const { container } = render(
+      <LiveBlogList date={oldDate}>
+        <p>More than 1 year old content</p>
+      </LiveBlogList>
+    );
+
+    const dateElement = container.querySelector('.live-blog-date');
+    expect(dateElement).toBeInTheDocument();
+    const expectedDate = dayjs(oldDate).format('DD MMM YYYY');
+    expect(dateElement.textContent).toBe(expectedDate);
+    jest.useRealTimers();
+  });
+});

package/tests/unit/src/variants/LiveBlogList/constants.js

@@ -0,0 +1,10 @@
+const LONG_TEXT = `
+    In case you’re just joining us, here’s a recap of the latest news and global market moves since the European market open. (You can see the earlier round-up here)
+    Europe’s main indexes started on a surprisingly positive note at the start of trading, as markets seemed to recover some ground from the tariff sell-off, even as it became clear that Trump had applied 145% tariffs on Chinese goods
+    Mining giants, supported in part by growing appetite for safe haven assets like gold, were leading the FTSE 100 – including Fresnillo, Glencore, and Anglo American
+    There was also some optimism emanating from the UK GDP figures, which showed the economy expanding by more than expected in February at 0.5%
+`;
+
+const SHORT_TEXT = `Winners of the 2022 World Superyacht Awards have been revealed. From the newly crowned Motor Yacht of the Year to the prestigious Voyagers Award, find out which yachts...`;
+
+export { LONG_TEXT, SHORT_TEXT };