volto-aemet 1.0.0-alpha.0

package/src/components/Aemet/WeatherCurrent.test.jsx

@@ -0,0 +1,282 @@
+/**
+ * Unit tests for WeatherCurrent.jsx view component.
+ * @module components/Aemet/WeatherCurrent.test
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { useWeatherData, getWeatherIcon } from './Weather.js';
+import WeatherCurrent from './WeatherCurrent.jsx';
+
+// ---------------------------------------------------------------------------
+// Mocks (hoisted by babel-jest before imports)
+// ---------------------------------------------------------------------------
+
+jest.mock('./Weather.js', () => ({
+  weatherMessages: {
+    minimumMaximum: {
+      id: 'minimum_maximum',
+      defaultMessage: 'Minimum-Maximum',
+    },
+    currentDay: { id: 'current_day', defaultMessage: 'Current day' },
+    currentLocation: {
+      id: 'current_location',
+      defaultMessage: 'Current location',
+    },
+    currentTemperature: {
+      id: 'current_temperature',
+      defaultMessage: 'Current temperature',
+    },
+    currentTime: { id: 'current_time', defaultMessage: 'Current time' },
+    loadingCurrent: {
+      id: 'loading_weather_forecast',
+      defaultMessage: 'Loading weather forecast...',
+    },
+    weatherNotAvailable: {
+      id: 'not_available',
+      defaultMessage: 'Not available',
+    },
+    weatherDescription: {
+      id: 'weather_description',
+      defaultMessage: 'Weather description',
+    },
+  },
+  getWeatherIcon: jest.fn(() => 'mocked-icon.png'),
+  useWeatherData: jest.fn(),
+}));
+
+jest.mock('@plone/volto/components/theme/Image/Image', () => {
+  const MockImage = ({ src, alt }) => <img src={src} alt={alt} />;
+  return MockImage;
+});
+
+// Fix moment to a predictable point in time so clock assertions are stable.
+jest.mock('moment', () => {
+  const fixedTime = {
+    format: jest.fn((pattern) => {
+      if (pattern === 'HH:mm') return '14:30';
+      if (pattern === 'ddd') return 'Fri';
+      if (pattern === 'YYYY-MM-DD') return '2024-01-15';
+      return '';
+    }),
+  };
+  return jest.fn(() => fixedTime);
+});
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const MOCK_DAY = {
+  currentHour: '14',
+  date: '2024-01-15',
+  name: 'Fuenlabrada',
+  provinceName: 'Madrid',
+  skyStateDescription: 'Clear sky',
+  skyStateText: '11',
+  minTemp: '18',
+  maxTemp: '33',
+  timePeriod: '12-18',
+};
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const renderComponent = () =>
+  render(
+    <IntlProvider locale="en" messages={{}}>
+      <WeatherCurrent />
+    </IntlProvider>,
+  );
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('WeatherCurrent', () => {
+  afterEach(() => {
+    // clearAllMocks preserves mock implementations (including the moment factory)
+    // while still resetting call counts. resetAllMocks would strip the
+    // jest.fn(() => fixedTime) factory, making moment() return undefined.
+    jest.clearAllMocks();
+  });
+
+  // -------------------------------------------------------------------------
+  describe('loading state', () => {
+    it('shows the loading message when isLoading is true', () => {
+      useWeatherData.mockReturnValue({ forecast: [], isLoading: true });
+      renderComponent();
+      expect(screen.getByText(/Loading weather forecast/i)).toBeInTheDocument();
+    });
+
+    it('shows the loading message when forecast array is empty', () => {
+      useWeatherData.mockReturnValue({ forecast: [], isLoading: false });
+      renderComponent();
+      expect(screen.getByText(/Loading weather forecast/i)).toBeInTheDocument();
+    });
+
+    it('does not render the forecast card while loading', () => {
+      useWeatherData.mockReturnValue({ forecast: [], isLoading: true });
+      const { container } = renderComponent();
+      expect(
+        container.querySelector('.weather-current-card'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  describe('data state', () => {
+    beforeEach(() => {
+      useWeatherData.mockReturnValue({
+        forecast: [MOCK_DAY],
+        isLoading: false,
+      });
+    });
+
+    it('does not show the loading message when data is available', () => {
+      renderComponent();
+      expect(
+        screen.queryByText(/Loading weather forecast/i),
+      ).not.toBeInTheDocument();
+    });
+
+    it('renders the current time in HH:mm format', () => {
+      renderComponent();
+      expect(screen.getByText('14:30')).toBeInTheDocument();
+    });
+
+    it('renders the day abbreviation in uppercase', () => {
+      renderComponent();
+      expect(screen.getByText('FRI')).toBeInTheDocument();
+    });
+
+    it('renders the name', () => {
+      renderComponent();
+      expect(screen.getByText(/Fuenlabrada/)).toBeInTheDocument();
+    });
+
+    it('renders the province name', () => {
+      renderComponent();
+      expect(screen.getByText(/Madrid/)).toBeInTheDocument();
+    });
+
+    it('renders the temperature range (min-max)', () => {
+      renderComponent();
+      expect(screen.getByText('18-33\u00ba')).toBeInTheDocument();
+    });
+
+    it('renders the maximum temperature', () => {
+      renderComponent();
+      expect(screen.getByText('33\u00ba')).toBeInTheDocument();
+    });
+
+    it('renders the weather icon with sky state description as alt text', () => {
+      renderComponent();
+      expect(screen.getByRole('img')).toHaveAttribute('alt', 'Clear sky');
+    });
+
+    it('sets the sky state description as the icon wrapper title', () => {
+      const { container } = renderComponent();
+      expect(container.querySelector('.weather-current-icon')).toHaveAttribute(
+        'title',
+        'Clear sky',
+      );
+    });
+
+    it('calls getWeatherIcon with the correct sky state text', () => {
+      renderComponent();
+      expect(getWeatherIcon).toHaveBeenCalledWith('11');
+    });
+
+    it('sets the currentTime title on the time span', () => {
+      const { container } = renderComponent();
+      expect(container.querySelector('.weather-current-time')).toHaveAttribute(
+        'title',
+        'Current time',
+      );
+    });
+
+    it('sets the currentDay title on the day span', () => {
+      const { container } = renderComponent();
+      expect(container.querySelector('.weather-current-day')).toHaveAttribute(
+        'title',
+        'Current day',
+      );
+    });
+
+    it('sets the currentLocation title on the city div', () => {
+      const { container } = renderComponent();
+      expect(container.querySelector('.weather-current-city')).toHaveAttribute(
+        'title',
+        'Current location',
+      );
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  describe('fallbacks', () => {
+    it('still renders province when name is missing', () => {
+      useWeatherData.mockReturnValue({
+        forecast: [{ ...MOCK_DAY, name: '' }],
+        isLoading: false,
+      });
+      const { container } = renderComponent();
+      expect(
+        container.querySelector('.weather-current-city').textContent,
+      ).toContain('Madrid');
+    });
+
+    it('still renders name when provinceName is missing', () => {
+      useWeatherData.mockReturnValue({
+        forecast: [{ ...MOCK_DAY, provinceName: '' }],
+        isLoading: false,
+      });
+      const { container } = renderComponent();
+      expect(
+        container.querySelector('.weather-current-city').textContent,
+      ).toContain('Fuenlabrada');
+    });
+
+    it('uses the weatherDescription default message as icon title when skyStateDescription is absent', () => {
+      useWeatherData.mockReturnValue({
+        forecast: [{ ...MOCK_DAY, skyStateDescription: '' }],
+        isLoading: false,
+      });
+      const { container } = renderComponent();
+      expect(container.querySelector('.weather-current-icon')).toHaveAttribute(
+        'title',
+        'Weather description',
+      );
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  describe('clock timer', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+      useWeatherData.mockReturnValue({
+        forecast: [MOCK_DAY],
+        isLoading: false,
+      });
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('registers a 60-second interval for the live clock', () => {
+      const spy = jest.spyOn(global, 'setInterval');
+      renderComponent();
+      expect(spy).toHaveBeenCalledWith(expect.any(Function), 60000);
+    });
+
+    it('clears the interval on unmount to prevent memory leaks', () => {
+      const clearSpy = jest.spyOn(global, 'clearInterval');
+      const { unmount } = renderComponent();
+      unmount();
+      expect(clearSpy).toHaveBeenCalled();
+    });
+  });
+});

package/src/components/Aemet/index.js

@@ -0,0 +1,9 @@
+/**
+ * Index file for Aemet component.
+ * @module components/Aemet
+ */
+
+import WeatherCurrent from './WeatherCurrent.jsx';
+
+export { getWeatherIcon, useWeatherData, weatherMessages } from './Weather.js';
+export default WeatherCurrent;

package/src/components/Blocks/AemetWeatherCurrent/View.jsx

@@ -0,0 +1,11 @@
+/**
+ * Aemet Weather Current View mode.
+ */
+import React from 'react';
+import WeatherCurrent from 'volto-aemet/components/Aemet';
+
+const AemetWeatherCurrentView = (props) => {
+  return <WeatherCurrent />;
+};
+
+export default AemetWeatherCurrentView;

package/src/components/Blocks/AemetWeatherForecast/Edit.jsx

@@ -0,0 +1,72 @@
+/**
+ * Aemet Weather Forecast Edit mode.
+ */
+import React from 'react';
+import cx from 'classnames';
+import messages from './messages';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import { useIntl } from 'react-intl';
+
+const AemetWeatherForecastEdit = (props) => {
+  const {
+    block,
+    data,
+    style,
+    className,
+    blocksConfig,
+    selected,
+    onChangeBlock,
+    navRoot,
+    contentType,
+    blocksErrors,
+  } = props;
+  const intl = useIntl();
+
+  const schema = blocksConfig['aemetWeatherForecast'].blockSchema({
+    props,
+    intl,
+  });
+
+  return (
+    <>
+      <div style={style} className={cx('block handson', { className })}>
+        <div className="block-inner-container">
+          <iframe
+            name="iframe_aemet_id33044"
+            title={intl.formatMessage(messages.aemetWeatherForecastBlock)}
+            width="100%"
+            height="100%"
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabindex="0"
+            id="iframe_aemet_id33044"
+            src={`https://www.aemet.es/es/eltiempo/prediccion/municipios/mostrarwidget/${data.province || 'sevilla'}-id${data.location_id || '41091'}?w=g4p011100001ohmffffffx4f86d9t95b6e9r1s8n2`}
+            frameborder="0"
+            scrolling="no"
+          ></iframe>
+        </div>
+      </div>
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+          block={block}
+          blocksConfig={blocksConfig}
+          navRoot={navRoot}
+          contentType={contentType}
+          errors={blocksErrors}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default AemetWeatherForecastEdit;

package/src/components/Blocks/AemetWeatherForecast/View.jsx

@@ -0,0 +1,32 @@
+/**
+ * Aemet Weather Forecast View mode.
+ */
+import React from 'react';
+import { useIntl } from 'react-intl';
+import cx from 'classnames';
+import messages from './messages';
+
+const AemetWeatherForecastView = (props) => {
+  const intl = useIntl();
+  const { data, style, className } = props;
+  return (
+    <div style={style} className={cx('block handson', { className })}>
+      <div className="block-inner-container">
+        <iframe
+          name="iframe_aemet_id33044"
+          title={intl.formatMessage(messages.aemetWeatherForecastBlock)}
+          width="100%"
+          height="100%"
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+          tabindex="0"
+          id="iframe_aemet_id33044"
+          src={`https://www.aemet.es/es/eltiempo/prediccion/municipios/mostrarwidget/${data.province || 'sevilla'}-id${data.location_id || '41091'}?w=g4p011100001ohmffffffx4f86d9t95b6e9r1s8n2`}
+          frameborder="0"
+          scrolling="no"
+        ></iframe>
+      </div>
+    </div>
+  );
+};
+
+export default AemetWeatherForecastView;

package/src/components/Blocks/AemetWeatherForecast/messages.js

@@ -0,0 +1,36 @@
+/**
+ * Aemet Weather Forecast Messages.
+ */
+
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  aemetWeatherForecastBlock: {
+    id: 'AEMET Weather Forecast',
+    defaultMessage: 'AEMET Weather Forecast',
+  },
+  locationID: {
+    id: 'Location ID',
+    defaultMessage: 'Location ID',
+  },
+  locationIDHelp: {
+    id: "The Location ID of the AEMET service, for example '41091' to Sevilla location ID.",
+    defaultMessage:
+      "The Location ID of the AEMET service, for example '41091' to Sevilla location ID.",
+  },
+  province: {
+    id: 'Province',
+    defaultMessage: 'Province',
+  },
+  provinceHelp: {
+    id: 'The name of the province of the location (in lowercase) of the AEMET service.',
+    defaultMessage:
+      'The name of the province of the location (in lowercase) of the AEMET service.',
+  },
+  defaultFieldset: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+});
+
+export default messages;

package/src/components/Blocks/AemetWeatherForecast/schema.js

@@ -0,0 +1,37 @@
+/**
+ * Aemet Weather Forecast Schema.
+ */
+
+import messages from './messages';
+
+export function AemetWeatherForecastSchema({ props, intl }) {
+  const schema = {
+    title: intl.formatMessage(messages.aemetWeatherForecastBlock),
+    block: 'aemetWeatherForecast',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: intl.formatMessage(messages.defaultFieldset),
+        fields: ['province', 'location_id'],
+      },
+    ],
+
+    properties: {
+      province: {
+        title: intl.formatMessage(messages.province),
+        description: intl.formatMessage(messages.provinceHelp),
+        widget: 'text',
+      },
+      location_id: {
+        title: intl.formatMessage(messages.locationID),
+        description: intl.formatMessage(messages.locationIDHelp),
+        widget: 'text',
+      },
+    },
+
+    required: ['province', 'location_id'],
+  };
+
+  return schema;
+}

package/src/config/blocks.ts

@@ -0,0 +1,70 @@
+/**
+ * Blocks configuration.
+ * @module blocks
+ */
+
+import type { ConfigType } from '@plone/registry';
+
+// AEMET Weather Current Block
+import AemetWeatherCurrentView from 'volto-aemet/components/Blocks/AemetWeatherCurrent/View';
+
+// AEMET Weather Forecast Block
+import AemetWeatherForecastEdit from 'volto-aemet/components/Blocks/AemetWeatherForecast/Edit';
+import AemetWeatherForecastView from 'volto-aemet/components/Blocks/AemetWeatherForecast/View';
+import { AemetWeatherForecastSchema } from 'volto-aemet/components/Blocks/AemetWeatherForecast/schema';
+
+// Icons
+import aemetSVG from 'volto-aemet/icons/aemet-logo.svg';
+
+export default function install(config: ConfigType) {
+  // Add the new block to the group block order
+  config.blocks.groupBlocksOrder = [
+    ...config.blocks.groupBlocksOrder,
+    {
+      id: 'aemetWeatherForecast',
+      title: 'AEMET Weather Forecast',
+    },
+    {
+      id: 'aemetWeatherCurrent',
+      title: 'AEMET Weather Current',
+    },
+  ];
+
+  // AEMET Weather Current Block Config
+  (config.blocks.blocksConfig as any).aemetWeatherCurrent = {
+    id: 'aemetWeatherCurrent',
+    title: 'AEMET Weather Current',
+    group: 'media',
+    icon: aemetSVG,
+    view: AemetWeatherCurrentView,
+    // edit: undefined,
+    // blockSchema: undefined,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  // AEMET Weather Forecast Block Config
+  (config.blocks.blocksConfig as any).aemetWeatherForecast = {
+    id: 'aemetWeatherForecast',
+    title: 'AEMET Weather Forecast',
+    group: 'media',
+    icon: aemetSVG,
+    view: AemetWeatherForecastView,
+    edit: AemetWeatherForecastEdit,
+    blockSchema: AemetWeatherForecastSchema,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  return config;
+}

package/src/config/settings.ts

@@ -0,0 +1,16 @@
+/**
+ * AEMET Settings.
+ * @module settings
+ */
+
+import type { ConfigType } from '@plone/registry';
+import aemetIconSVG from 'volto-aemet/icons/aemet-logo.svg';
+
+export default function install(config: ConfigType) {
+  // Add the icon for the AEMET settings control panel
+  config.settings.controlPanelsIcons = {
+    ...config.settings.controlPanelsIcons,
+    'aemet-settings': aemetIconSVG,
+  };
+  return config;
+}