From 7f869370e0a64b79038b32282e64e2ac507b9321 Mon Sep 17 00:00:00 2001
From: Bart van den Aardweg
Date: Fri, 26 Mar 2021 15:20:18 +0100
Subject: [PATCH 1/6] test: start on image tests
---
src/image/__tests__/Image.test.tsx | 69 +++++++++++++++++++++++
src/image/__tests__/getImageProps.test.ts | 59 +++++++++++++++++++
2 files changed, 128 insertions(+)
create mode 100644 src/image/__tests__/Image.test.tsx
create mode 100644 src/image/__tests__/getImageProps.test.ts
diff --git a/src/image/__tests__/Image.test.tsx b/src/image/__tests__/Image.test.tsx
new file mode 100644
index 0000000..4557173
--- /dev/null
+++ b/src/image/__tests__/Image.test.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { cleanup, render, act, screen, waitFor } from '@testing-library/react';
+
+import { Image } from '../Image';
+
+const storyblokImage =
+ 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg';
+
+describe('[image] Image', () => {
+ afterEach(() => {
+ cleanup();
+ jest.restoreAllMocks();
+ });
+
+ it('should render an image with the src to load', async () => {
+ act(() => {
+ render();
+ });
+
+ expect(screen.getByAltText('')).toHaveStyle('opacity: 1');
+
+ expect(screen.getByAltText('flowers')).not.toHaveAttribute('src');
+ expect(screen.getByAltText('flowers')).toHaveAttribute('data-src');
+ });
+
+ it('should let native loading handle loading if supported', async () => {
+ global.HTMLImageElement.prototype.loading = 'lazy';
+
+ act(() => {
+ render();
+ });
+
+ expect(screen.getByAltText('flowers')).toHaveAttribute('src');
+ });
+
+ it('should create io as loading fallback', async () => {
+ const observe = jest.fn();
+ const unobserve = jest.fn();
+ const disconnect = jest.fn();
+
+ delete global.window.location;
+ global.window = Object.create(window);
+ global.window.IntersectionObserver = jest.fn(() => ({
+ observe,
+ unobserve,
+ disconnect,
+ })) as any;
+
+ act(() => {
+ render();
+ });
+
+ await waitFor(() =>
+ expect(screen.getByAltText('flowers')).toHaveAttribute('src'),
+ );
+
+ expect(observe).toHaveBeenCalled();
+ });
+
+ it('should render null if src is not a storyblok asset', async () => {
+ jest.spyOn(console, 'error').mockImplementation(jest.fn());
+
+ act(() => {
+ render();
+ });
+
+ expect(screen.queryByTestId('img')).toBeNull();
+ });
+});
diff --git a/src/image/__tests__/getImageProps.test.ts b/src/image/__tests__/getImageProps.test.ts
new file mode 100644
index 0000000..f155d1b
--- /dev/null
+++ b/src/image/__tests__/getImageProps.test.ts
@@ -0,0 +1,59 @@
+import { getImageProps } from '../getImageProps';
+
+const storyblokImage =
+ 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg';
+
+describe('[image] getImageProps', () => {
+ it('should return normal src if fixed and fluid not set', async () => {
+ const props = getImageProps(storyblokImage);
+
+ expect(props.src).toBeDefined();
+ expect(props.width).toBe(3310);
+ expect(props.height).toBe(2192);
+ });
+
+ it('should optimize props for fixed', async () => {
+ const props = getImageProps(storyblokImage, { fixed: [200, 200] });
+
+ expect(props.src).toBeDefined();
+ expect(props.srcSet).toContain(' 1x');
+ expect(props.srcSet).toContain(' 2x');
+ expect(props.srcSet).toContain(' 3x');
+ expect(props.width).toBe(3310);
+ expect(props.height).toBe(2192);
+ });
+
+ it('should optimize props for fluid', async () => {
+ const props = getImageProps(storyblokImage, { fluid: 1080 });
+
+ expect(props.src).toBeDefined();
+ expect(props.sizes).toBeDefined();
+ expect(props.srcSet).toMatch(/(.*\dw.*){5}/gim);
+ expect(props.width).toBe(3310);
+ expect(props.height).toBe(2192);
+ });
+
+ it('should not put fluid sizes that are larger than original', async () => {
+ const props = getImageProps(storyblokImage, { fluid: 5000 });
+
+ expect(props.srcSet).toMatch(/(.*\dw.*){3}/gim);
+ });
+
+ it('should support width and height fluid', async () => {
+ const props = getImageProps(storyblokImage, { fluid: [1920, 1080] });
+
+ expect(props.srcSet).toContain('x1080');
+ });
+
+ it('should not set smart filter if configured', async () => {
+ const props = getImageProps(storyblokImage, { smart: false });
+
+ expect(props.src).not.toContain('/smart');
+ });
+
+ it('should return empty props if no src', async () => {
+ const props = getImageProps('');
+
+ expect(props).toMatchObject({});
+ });
+});
From e165ceb9fc67c2c5e4c8b756a76350189de87e8f Mon Sep 17 00:00:00 2001
From: Bart van den Aardweg
Date: Mon, 29 Mar 2021 00:06:47 +0200
Subject: [PATCH 2/6] test(image): tests for io, picture, helpers
---
src/image/Picture.tsx | 10 +-
src/image/__tests__/Image.test.tsx | 61 +++++--
src/image/__tests__/Picture.test.tsx | 53 ++++++
.../createIntersectionObserver.test.tsx | 156 ++++++++++++++++++
src/image/__tests__/helpers.test.tsx | 75 +++++++++
src/image/createIntersectionObserver.ts | 1 +
6 files changed, 336 insertions(+), 20 deletions(-)
create mode 100644 src/image/__tests__/Picture.test.tsx
create mode 100644 src/image/__tests__/createIntersectionObserver.test.tsx
create mode 100644 src/image/__tests__/helpers.test.tsx
diff --git a/src/image/Picture.tsx b/src/image/Picture.tsx
index 0f340b1..adfc488 100644
--- a/src/image/Picture.tsx
+++ b/src/image/Picture.tsx
@@ -52,13 +52,9 @@ export const Picture = forwardRef(
) => {
const splitSrc = src?.split('/f/');
const webpSrc = `${splitSrc[0]}/filters:format(webp)/f/${splitSrc[1]}`;
- let webpSrcset = srcSet || webpSrc;
-
- if (webpSrcset) {
- webpSrcset = webpSrcset
- .replace(/\/filters:(.*)\/f\//gm, '/filters:$1:format(webp)/f/')
- .replace(/\/(?!filters:)([^/]*)\/f\//gm, '/$1/filters:format(webp)/f/');
- }
+ const webpSrcset = (srcSet || webpSrc)
+ .replace(/\/filters:(.*)\/f\//gm, '/filters:$1:format(webp)/f/')
+ .replace(/\/(?!filters:)([^/]*)\/f\//gm, '/$1/filters:format(webp)/f/');
return (
---
From fb9031b9fc739a631379b57bf72a8c41c423e5fe Mon Sep 17 00:00:00 2001
From: Doeke Leeuwis
Date: Tue, 27 Apr 2021 09:35:38 +0200
Subject: [PATCH 6/6] docs(readme): adjusted logo size
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index b1e1276..20900c5 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-
+
@storyofams/storyblok-toolkit