@centreon/ui 24.11.13 → 24.11.14

package/src/components/CrudPage/CrudPage.cypress.spec.tsx

@@ -1,559 +0,0 @@
-import { FormControlLabel, Switch, Typography } from '@mui/material';
-import { Provider, atom, createStore, useAtom, useSetAtom } from 'jotai';
-import { identity, isNil, prop } from 'ramda';
-import { ChangeEvent, useEffect } from 'react';
-import { CrudPage } from '.';
-import {
-  Column,
-  ColumnType,
-  Method,
-  SnackbarProvider,
-  TestQueryProvider
-} from '../..';
-import { CrudPageRoot } from './CrudPageRoot';
-import { CrudPageRootProps } from './models';
-
-interface Item {
-  id: number;
-  name: string;
-  description: string;
-  subItems: Array<{ id: number; name: string }>;
-}
-
-interface Filters {
-  hasDescription: boolean;
-  isEven: boolean;
-}
-
-const generateItems = (count: number) =>
-  Array(count)
-    .fill(0)
-    .map((_, idx) => ({
-      id: idx,
-      name: `Item ${idx}`,
-      description: `Description ${idx}`,
-      subItems: [{ id: 1, name: 'SubItem' }]
-    }));
-
-const filtersAtom = atom<Filters>({
-  hasDescription: true,
-  isEven: false
-});
-
-const Filters = () => {
-  const [filters, setFilters] = useAtom(filtersAtom);
-
-  const change =
-    (property: string) => (event: ChangeEvent<HTMLInputElement>) => {
-      setFilters((current) => ({
-        ...current,
-        [property]: event.target.checked
-      }));
-    };
-
-  return (
-    <>
-      <FormControlLabel
-        control={
-          <Switch
-            checked={filters.hasDescription}
-            onChange={change('hasDescription')}
-          />
-        }
-        label="Has description"
-      />
-      <FormControlLabel
-        control={
-          <Switch checked={filters.isEven} onChange={change('isEven')} />
-        }
-        label="Is even"
-      />
-    </>
-  );
-};
-
-const getSearchParameters = ({ filters }) => ({
-  conditions: [
-    {
-      field: 'hasDescription',
-      values: {
-        $in: filters.hasDescription
-      }
-    },
-    {
-      field: 'isEven',
-      values: {
-        $in: filters.isEven
-      }
-    }
-  ]
-});
-
-const labels = {
-  title: 'Items',
-  welcome: {
-    title: 'Welcome to the items page',
-    description: 'This page handles item'
-  },
-  actions: {
-    create: 'Create item'
-  },
-  listing: {
-    search: 'Search'
-  }
-};
-
-const columns: Array<Column> = [
-  {
-    type: ColumnType.string,
-    id: 'name',
-    label: 'Name',
-    getFormattedString: prop('name'),
-    displaySubItemsCaret: true
-  },
-  {
-    type: ColumnType.string,
-    id: 'description',
-    label: 'Description',
-    getFormattedString: prop('description')
-  }
-];
-
-const defaultProps: CrudPageRootProps<Item, Filters, Item, Item> = {
-  baseEndpoint: '/listing',
-  queryKeyName: 'listing',
-  filtersAtom,
-  getSearchParameters,
-  labels,
-  columns,
-  filters: <Filters />,
-  form: {
-    getItem: {
-      baseEndpoint: (id) => `/item/${id}`,
-      adapter: identity,
-      itemQueryKey: 'item'
-    },
-    Form: ({ initialValues }) => {
-      const [askBeforeCloseForm, setAskBeforeCloseFormModal] = useAtom(
-        CrudPage.askBeforeCloseFormModalAtom
-      );
-      const setOpenFormModal = useSetAtom(CrudPage.openFormModalAtom);
-
-      useEffect(() => {
-        if (!askBeforeCloseForm) {
-          return;
-        }
-
-        setOpenFormModal(null);
-        setAskBeforeCloseFormModal(false);
-      }, [askBeforeCloseForm]);
-
-      return (
-        <Typography>
-          This is a placeholder for the form
-          <br />
-          Initial values: {JSON.stringify(initialValues)}
-        </Typography>
-      );
-    },
-    labels: {
-      add: {
-        title: 'Add item',
-        cancel: 'Cancel',
-        confirm: 'Add'
-      },
-      update: {
-        title: 'Update item',
-        cancel: 'Cancel',
-        confirm: 'Update'
-      }
-    }
-  },
-  deleteItem: {
-    deleteEndpoint: (item) =>
-      !isNil(item?.parent)
-        ? `/listing/${item?.parent?.id}/subItems/${item?.id}`
-        : `/listing/${item?.id}`,
-    labels: {
-      successMessage: (item) =>
-        !isNil(item?.parent) ? 'Sub item deleted' : 'Item deleted',
-      confirm: 'Delete',
-      cancel: 'Cancel',
-      title: (item) =>
-        !isNil(item?.parent) ? 'Delete sub item' : 'Delete item',
-      description: (item) =>
-        !isNil(item?.parent) ? (
-          <Typography>
-            The sub item <strong>{item?.name}</strong> from the item{' '}
-            <strong>{item?.parent?.name}</strong> will be deleted
-          </Typography>
-        ) : (
-          <Typography>
-            The item <strong>{item?.name}</strong> will be deleted
-          </Typography>
-        )
-    }
-  }
-};
-
-const listing = {
-  result: generateItems(30),
-  meta: {
-    page: 1,
-    total: 60,
-    limit: 30
-  }
-};
-
-const emptyListing = {
-  result: [],
-  meta: {
-    page: 1,
-    total: 0,
-    limit: 30
-  }
-};
-
-const initialize = (props: CrudPageRootProps<Item, Filters, Item, Item>) => {
-  cy.interceptAPIRequest({
-    alias: 'getEmptyListing',
-    method: Method.GET,
-    path: '**/empty-listing**',
-    response: emptyListing
-  });
-
-  cy.interceptAPIRequest({
-    alias: 'getListing',
-    method: Method.GET,
-    path: '**/listing**',
-    response: listing
-  });
-
-  cy.interceptAPIRequest({
-    alias: 'getListing',
-    method: Method.GET,
-    path: '**/listing**',
-    response: listing
-  });
-
-  cy.interceptAPIRequest({
-    alias: 'deleteItem',
-    method: Method.DELETE,
-    path: '**/listing/1',
-    response: {}
-  });
-
-  cy.interceptAPIRequest({
-    alias: 'deleteSubItem',
-    method: Method.DELETE,
-    path: '**/listing/0/subItems/1',
-    response: {}
-  });
-
-  cy.interceptAPIRequest({
-    alias: 'getItem',
-    method: Method.GET,
-    path: '**/item/0',
-    response: generateItems(1)[0]
-  });
-
-  const store = createStore();
-
-  cy.mount({
-    Component: (
-      <div style={{ height: '95vh' }}>
-        <Provider store={store}>
-          <SnackbarProvider>
-            <TestQueryProvider>
-              <CrudPageRoot {...props} />
-            </TestQueryProvider>
-          </SnackbarProvider>
-        </Provider>
-      </div>
-    )
-  });
-};
-
-describe('CrudPage', () => {
-  it('displays a welcome message when no data are retrieved', () => {
-    initialize({
-      ...defaultProps,
-      queryKeyName: 'empty-listing',
-      baseEndpoint: '/empty-listing'
-    });
-
-    cy.waitForRequest('@getEmptyListing');
-
-    cy.contains('Welcome to the items page').should('be.visible');
-    cy.contains('This page handles item').should('be.visible');
-    cy.contains('Items').should('be.visible');
-    cy.get('button').contains('Create item').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('opens the form modal when no data are retrieved and the corresponding button is clicked', () => {
-    initialize({
-      ...defaultProps,
-      queryKeyName: 'empty-listing',
-      baseEndpoint: '/empty-listing'
-    });
-
-    cy.waitForRequest('@getEmptyListing');
-
-    cy.contains('Welcome to the items page').should('be.visible');
-    cy.contains('This page handles item').should('be.visible');
-    cy.contains('Items').should('be.visible');
-    cy.get('button').contains('Create item').click();
-
-    cy.contains('Add item').should('be.visible');
-    cy.contains('This is a placeholder for the form').should('be.visible');
-    cy.contains('Initial values:').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays items when items are retrieved', () => {
-    initialize(defaultProps);
-
-    cy.waitForRequest('@getListing').then(({ request }) => {
-      const { searchParams } = request.url;
-
-      expect(searchParams.get('page')).equal('1');
-      expect(searchParams.get('limit')).equal('10');
-      expect(searchParams.get('sort_by')).equal('{"name":"asc"}');
-      expect(searchParams.get('search')).equal(
-        '{"$and":[{"$or":[{"name":{"$rg":""}}]},{"$and":[{"$or":[{"hasDescription":{"$in":true}}]},{"$or":[{"isEven":{"$in":false}}]}]}]}'
-      );
-    });
-
-    cy.contains('Items').should('be.visible');
-    cy.get('button').contains('Create item').should('be.visible');
-    cy.contains('Item 0').should('be.visible');
-    cy.contains('Description 0').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('sends a request when filters and search are updated', () => {
-    initialize(defaultProps);
-
-    cy.findAllByTestId('Search').eq(1).type('simple search');
-    cy.findByLabelText('filters').click();
-    cy.findByLabelText('Has description').click();
-    cy.findByLabelText('Is even').click();
-
-    cy.findAllByTestId('Search').eq(1).should('have.value', 'simple search');
-
-    cy.findByLabelText('filters').click();
-
-    cy.findByLabelText('Has description').should('not.exist');
-
-    cy.wait(500);
-
-    cy.waitForRequest('@getListing').then(({ request }) => {
-      const { searchParams } = request.url;
-
-      expect(searchParams.get('search')).equal(
-        '{"$and":[{"$or":[{"name":{"$rg":"simple search"}}]},{"$and":[{"$or":[{"hasDescription":{"$in":false}}]},{"$or":[{"isEven":{"$in":true}}]}]}]}'
-      );
-    });
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the add modal when data are retrieved and the corresponding is clicked', () => {
-    initialize(defaultProps);
-
-    cy.waitForRequest('@getListing');
-
-    cy.contains('Create item').click();
-
-    cy.contains('Add item').should('be.visible');
-    cy.contains('This is a placeholder for the form').should('be.visible');
-    cy.contains('Initial values:').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  describe('Delete with advanced labels', () => {
-    it('deletes an item when items are retrieved and the corresponding button is clicked', () => {
-      initialize(defaultProps);
-
-      cy.findByTestId('delete-1').click();
-
-      cy.contains('Delete item').should('be.visible');
-      cy.contains('The item Item 1 will be deleted').should('be.visible');
-
-      cy.get('button').contains('Delete').click();
-
-      cy.waitForRequest('@deleteItem');
-
-      cy.contains('Item deleted').should('be.visible');
-
-      cy.makeSnapshot();
-    });
-
-    it('deletes a sub-item when items are retrieved and the corresponding button is clicked', () => {
-      initialize({
-        ...defaultProps,
-        subItems: {
-          canCheckSubItems: false,
-          enable: true,
-          getRowProperty: () => 'subItems',
-          labelExpand: 'Expand',
-          labelCollapse: 'Collapse'
-        }
-      });
-
-      cy.findByTestId('Expand 0').click();
-      cy.findByTestId('delete-0-1').click();
-
-      cy.contains('Delete sub item').should('be.visible');
-      cy.contains(
-        'The sub item SubItem from the item Item 0 will be deleted'
-      ).should('be.visible');
-
-      cy.get('button').contains('Delete').click();
-
-      cy.waitForRequest('@deleteSubItem');
-
-      cy.contains('Sub item deleted').should('be.visible');
-
-      cy.makeSnapshot();
-    });
-  });
-
-  describe('Delete with basic labels', () => {
-    it('deletes an item when items are retrieved and the corresponding button is clicked', () => {
-      initialize({
-        ...defaultProps,
-        deleteItem: {
-          ...defaultProps.deleteItem,
-          labels: {
-            title: 'Title',
-            successMessage: 'This is a success',
-            description: 'A small description',
-            cancel: 'Cancel',
-            confirm: 'Delete'
-          }
-        }
-      });
-
-      cy.findByTestId('delete-1').click();
-
-      cy.contains('Title').should('be.visible');
-      cy.contains('A small description').should('be.visible');
-
-      cy.get('button').contains('Delete').click();
-
-      cy.waitForRequest('@deleteItem');
-
-      cy.contains('This is a success').should('be.visible');
-
-      cy.makeSnapshot();
-    });
-
-    it('deletes a sub-item when items are retrieved and the corresponding button is clicked', () => {
-      initialize({
-        ...defaultProps,
-        subItems: {
-          canCheckSubItems: false,
-          enable: true,
-          getRowProperty: () => 'subItems',
-          labelExpand: 'Expand',
-          labelCollapse: 'Collapse'
-        },
-        deleteItem: {
-          ...defaultProps.deleteItem,
-          labels: {
-            title: 'Title',
-            successMessage: 'This is a success',
-            description: 'A small description',
-            cancel: 'Cancel',
-            confirm: 'Delete'
-          }
-        }
-      });
-
-      cy.findByTestId('Expand 0').click();
-      cy.findByTestId('delete-0-1').click();
-
-      cy.contains('Title').should('be.visible');
-      cy.contains('A small description').should('be.visible');
-
-      cy.get('button').contains('Delete').click();
-
-      cy.waitForRequest('@deleteSubItem');
-
-      cy.contains('This is a success').should('be.visible');
-
-      cy.makeSnapshot();
-    });
-  });
-
-  it('cannot delete a sub-item when items are retrieved and the corresponding button is clicked', () => {
-    initialize({
-      ...defaultProps,
-      subItems: {
-        canDeleteSubItems: false,
-        canCheckSubItems: false,
-        enable: true,
-        getRowProperty: () => 'subItems',
-        labelExpand: 'Expand',
-        labelCollapse: 'Collapse'
-      },
-      deleteItem: {
-        ...defaultProps.deleteItem,
-        labels: {
-          title: 'Title',
-          successMessage: 'This is a success',
-          description: 'A small description',
-          cancel: 'Cancel',
-          confirm: 'Delete'
-        }
-      }
-    });
-
-    cy.findByTestId('Expand 0').click();
-    cy.findByTestId('delete-0-1').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('opens the update form when the corresponding button is clicked', () => {
-    initialize(defaultProps);
-
-    cy.findByTestId('edit-0').click();
-
-    cy.waitForRequest('@getItem');
-
-    cy.contains('Update item').should('be.visible');
-    cy.contains('This is a placeholder for the form').should('be.visible');
-    cy.contains(
-      'Initial values: {"id":0,"name":"Item 0","description":"Description 0","subItems":[{"id":1,"name":"SubItem"}]}'
-    ).should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('closes the update form when the update ubtton is clicked and the corresponding button is clicked', () => {
-    initialize(defaultProps);
-
-    cy.findByTestId('edit-0').click();
-
-    cy.waitForRequest('@getItem');
-
-    cy.contains('Update item').should('be.visible');
-    cy.contains('This is a placeholder for the form').should('be.visible');
-    cy.contains(
-      'Initial values: {"id":0,"name":"Item 0","description":"Description 0","subItems":[{"id":1,"name":"SubItem"}]}'
-    ).should('be.visible');
-
-    cy.findByLabelText('close').click();
-
-    cy.contains('Update item').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-});