From eb8d57a37baaff5ea3ee183f52c25d860f4e5e37 Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Mon, 14 Mar 2022 11:40:50 +0100 Subject: [PATCH] Relation: add tests --- .../tests/__snapshots__/index.test.js.snap | 291 ++++++++++++++++++ .../CellContent/Relation/tests/index.test.js | 80 +++++ 2 files changed, 371 insertions(+) create mode 100644 packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/tests/__snapshots__/index.test.js.snap create mode 100644 packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/tests/index.test.js diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/tests/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..793fddf747 --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/tests/__snapshots__/index.test.js.snap @@ -0,0 +1,291 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DynamicTabe / Cellcontent / Relation renders and matches the snapshot 1`] = ` +.c11 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.c5 { + background: #f6f6f9; + padding: 4px; + border-radius: 4px; + min-width: 20px; +} + +.c6 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c7 { + color: #666687; + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; +} + +.c4 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; +} + +.c9 { + padding-left: 8px; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c0 svg { + height: 12px; + width: 12px; +} + +.c0 svg > g, +.c0 svg path { + fill: #ffffff; +} + +.c0[aria-disabled='true'] { + pointer-events: none; +} + +.c0:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c0:focus-visible { + outline: none; +} + +.c0:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid transparent; + background: transparent; +} + +.c1 .c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c1 .c3 { + color: #ffffff; +} + +.c1[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c1[aria-disabled='true'] .c3 { + color: #666687; +} + +.c1[aria-disabled='true'] svg > g, +.c1[aria-disabled='true'] svg path { + fill: #666687; +} + +.c1[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c1[aria-disabled='true']:active .c3 { + color: #666687; +} + +.c1[aria-disabled='true']:active svg > g, +.c1[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c1:hover { + background-color: #f6f6f9; +} + +.c1:active { + border: 1px solid undefined; + background: undefined; +} + +.c1 .c3 { + color: #32324d; +} + +.c1 svg > g, +.c1 svg path { + fill: #8e8ea9; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c10 svg { + height: 4px; + width: 6px; +} + +.c2 { + padding: 4px 12px; +} + +
+ +
+

+

+

+
+`; diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/tests/index.test.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/tests/index.test.js new file mode 100644 index 0000000000..9318b9c486 --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/tests/index.test.js @@ -0,0 +1,80 @@ +import React from 'react'; +import { render, fireEvent, screen, waitFor } from '@testing-library/react'; +import { ThemeProvider, lightTheme } from '@strapi/design-system'; +import { IntlProvider } from 'react-intl'; +import { QueryClientProvider, QueryClient } from 'react-query'; + +import { axiosInstance } from '../../../../../../core/utils'; +import Relation from '../index'; + +jest.spyOn(axiosInstance, 'get').mockResolvedValue({ + data: { + results: [ + { + id: 1, + name: 'relation entity 1', + }, + ], + + pagination: { + total: 1, + }, + }, +}); + +const DEFAULT_PROPS_FIXTURE = { + fieldSchema: { + type: 'relation', + relation: 'manyToMany', + target: 'api::category.category', + }, + queryInfos: { + endPoint: 'collection-types/api::address.address', + }, + metadatas: { + mainField: { + name: 'name', + schema: { + type: 'string', + }, + }, + }, + value: { + count: 1, + }, + name: 'categories.name', + rowId: 1, +}; + +const ComponentFixture = () => { + const queryClient = new QueryClient(); + + return ( + + + + + + + + ); +}; + +describe('DynamicTabe / Cellcontent / Relation', () => { + it('renders and matches the snapshot', async () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + expect(axiosInstance.get).toHaveBeenCalledTimes(0); + }); + + it('fetches relation entities once the menu is opened', async () => { + const { container } = render(); + const button = container.querySelector('[type=button]'); + + fireEvent(button, new MouseEvent('mousedown', { bubbles: true })); + + expect(screen.getByText('The relations are loading')).toBeInTheDocument(); + expect(axiosInstance.get).toHaveBeenCalledTimes(1); + await waitFor(() => expect(screen.getByText('relation entity 1')).toBeInTheDocument()); + }); +});