@instructure/ui-editable 10.19.2-snapshot-3 → 10.19.2-snapshot-4

package/lib/InPlaceEdit/__new-tests__/InPlaceEdit.test.js

@@ -1,225 +0,0 @@
-"use strict";
-
-var _react = require("@testing-library/react");
-var _vitest = require("vitest");
-require("@testing-library/jest-dom");
-var _index = require("../index");
-var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _div;
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2018 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-const VIEWER_TEXT = 'viewer-text';
-const EDIT_BUTTON_TEXT = 'edit-button-text';
-const renderViewer = () => _div || (_div = (0, _jsxRuntime.jsx)("div", {
-  children: VIEWER_TEXT
-}));
-const renderEditor = ({
-  editorRef,
-  onBlur
-}) => {
-  return (0, _jsxRuntime.jsx)("input", {
-    "data-testid": "input-editor",
-    ref: editorRef,
-    onBlur: onBlur,
-    defaultValue: "textvalue",
-    "aria-label": "Editor"
-  });
-};
-const renderEditButton = props => {
-  const elementRef = props.elementRef;
-  const onClick = props.onClick,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    isVisible = props.isVisible,
-    readOnly = props.readOnly;
-  return _index.InPlaceEdit.renderDefaultEditButton({
-    isVisible,
-    readOnly,
-    label: EDIT_BUTTON_TEXT,
-    ...{
-      onClick,
-      onFocus,
-      onBlur,
-      elementRef
-    }
-  });
-};
-describe('<InPlaceEdit />', () => {
-  let consoleWarningMock;
-  let consoleErrorMock;
-  beforeEach(() => {
-    // Mocking console to prevent test output pollution and expect for messages
-    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
-  });
-  afterEach(() => {
-    consoleWarningMock.mockRestore();
-    consoleErrorMock.mockRestore();
-  });
-  it('should render view mode', () => {
-    (0, _react.render)((0, _jsxRuntime.jsx)(_index.InPlaceEdit, {
-      mode: "view",
-      onChangeMode: _vitest.vi.fn(),
-      renderViewer: renderViewer,
-      renderEditor: renderEditor,
-      renderEditButton: renderEditButton
-    }));
-    const viewModeText = _react.screen.getByText(VIEWER_TEXT);
-    const editButton = _react.screen.getByRole('button');
-    expect(viewModeText).toBeInTheDocument();
-    expect(editButton).toBeInTheDocument();
-    expect(editButton).toHaveTextContent(EDIT_BUTTON_TEXT);
-  });
-  it('should render view mode with string button label', () => {
-    const _render = (0, _react.render)((0, _jsxRuntime.jsx)(_index.InPlaceEdit, {
-        mode: "view",
-        onChangeMode: _vitest.vi.fn(),
-        renderViewer: renderViewer,
-        renderEditor: renderEditor,
-        renderEditButton: renderEditButton
-      })),
-      container = _render.container;
-    const viewModeText = _react.screen.getByText(VIEWER_TEXT);
-    const editButton = _react.screen.getByRole('button');
-    const buttonLabel = container.querySelector("[class$='-screenReaderContent']");
-    expect(viewModeText).toBeInTheDocument();
-    expect(editButton).toBeInTheDocument();
-    expect(editButton).toContainElement(buttonLabel);
-    expect(buttonLabel).toHaveTextContent(EDIT_BUTTON_TEXT);
-  });
-  it('should render edit mode', () => {
-    (0, _react.render)((0, _jsxRuntime.jsx)(_index.InPlaceEdit, {
-      mode: "edit",
-      onChangeMode: _vitest.vi.fn(),
-      renderViewer: renderViewer,
-      renderEditor: renderEditor,
-      renderEditButton: renderEditButton
-    }));
-    const inputForEdit = _react.screen.getByTestId('input-editor');
-    expect(inputForEdit).toBeInTheDocument();
-    expect(document.activeElement).toBe(inputForEdit);
-  });
-  it('should render a custom edit button', () => {
-    var _button;
-    const customButtonText = 'custom-button-text';
-    (0, _react.render)((0, _jsxRuntime.jsx)(_index.InPlaceEdit, {
-      mode: "view",
-      onChangeMode: _vitest.vi.fn(),
-      renderViewer: renderViewer,
-      renderEditor: renderEditor,
-      renderEditButton: () => {
-        return _button || (_button = (0, _jsxRuntime.jsx)("button", {
-          "data-testid": "custom_button",
-          children: customButtonText
-        }));
-      }
-    }));
-    const viewModeText = _react.screen.getByText(VIEWER_TEXT);
-    const customEditButton = _react.screen.getByTestId('custom_button');
-    expect(viewModeText).toBeInTheDocument();
-    expect(customEditButton).toBeInTheDocument();
-    expect(customEditButton).toHaveTextContent(customButtonText);
-  });
-  it('should switch mode to edit via props, and focus the editor', () => {
-    const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.InPlaceEdit, {
-        mode: "view",
-        onChangeMode: _vitest.vi.fn(),
-        renderViewer: renderViewer,
-        renderEditor: renderEditor,
-        renderEditButton: renderEditButton
-      })),
-      rerender = _render2.rerender,
-      container = _render2.container;
-    const viewModeText = _react.screen.getByText(VIEWER_TEXT);
-    expect(viewModeText).toBeInTheDocument();
-
-    // Simulate mode prop change
-    rerender((0, _jsxRuntime.jsx)(_index.InPlaceEdit, {
-      mode: "edit",
-      onChangeMode: _vitest.vi.fn(),
-      renderViewer: renderViewer,
-      renderEditor: renderEditor,
-      renderEditButton: renderEditButton
-    }));
-    const inputForEdit = _react.screen.getByTestId('input-editor');
-    expect(container).not.toHaveTextContent(VIEWER_TEXT);
-    expect(inputForEdit).toBeInTheDocument();
-    expect(document.activeElement).toBe(inputForEdit);
-  });
-  it('should switch mode to view via props, and focus the edit button', () => {
-    const _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.InPlaceEdit, {
-        mode: "edit",
-        onChangeMode: _vitest.vi.fn(),
-        renderViewer: renderViewer,
-        renderEditor: renderEditor,
-        renderEditButton: renderEditButton
-      })),
-      rerender = _render3.rerender,
-      container = _render3.container;
-    const inputForEdit = _react.screen.getByTestId('input-editor');
-    expect(container).not.toHaveTextContent(VIEWER_TEXT);
-    expect(inputForEdit).toBeInTheDocument();
-
-    // Simulate mode prop change
-    rerender((0, _jsxRuntime.jsx)(_index.InPlaceEdit, {
-      mode: "view",
-      onChangeMode: _vitest.vi.fn(),
-      renderViewer: renderViewer,
-      renderEditor: renderEditor,
-      renderEditButton: renderEditButton
-    }));
-    const inputForEditAfterModeChange = container.querySelector("[id='input-editor']");
-    const editButton = _react.screen.getByRole('button');
-    expect(container).toHaveTextContent(VIEWER_TEXT);
-    expect(inputForEditAfterModeChange).not.toBeInTheDocument();
-    expect(editButton).toBeInTheDocument();
-    expect(editButton).toHaveTextContent(EDIT_BUTTON_TEXT);
-    expect(document.activeElement).toBe(editButton);
-  });
-  it('should meet a11y standards in view mode', async () => {
-    const _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.InPlaceEdit, {
-        mode: "view",
-        onChangeMode: _vitest.vi.fn(),
-        renderViewer: renderViewer,
-        renderEditor: renderEditor,
-        renderEditButton: renderEditButton
-      })),
-      container = _render4.container;
-    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
-    expect(axeCheck).toBe(true);
-  });
-  it('should meet a11y standards in edit mode', async () => {
-    const _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.InPlaceEdit, {
-        mode: "edit",
-        onChangeMode: _vitest.vi.fn(),
-        renderViewer: renderViewer,
-        renderEditor: renderEditor,
-        renderEditButton: renderEditButton
-      })),
-      container = _render5.container;
-    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
-    expect(axeCheck).toBe(true);
-  });
-});

package/src/Editable/__new-tests__/Editable.test.tsx

@@ -1,271 +0,0 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2018 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { vi } from 'vitest'
-import type { MockInstance } from 'vitest'
-import userEvent from '@testing-library/user-event'
-import '@testing-library/jest-dom'
-
-import { Editable } from '../index'
-import type { EditableRenderProps } from '../props'
-
-const TEXT_VIEW = 'text-view'
-const TEXT_EDIT = 'text-edit'
-
-const childRender = vi.fn(
-  ({
-    mode,
-    getContainerProps,
-    getViewerProps,
-    getEditorProps,
-    getEditButtonProps
-  }: EditableRenderProps) => {
-    const { isVisible, buttonRef, ...buttonProps } = getEditButtonProps()
-    const { onBlur, editorRef } = getEditorProps()
-    return (
-      <div data-testid="child-container" {...getContainerProps()}>
-        {mode === 'view' && <div {...getViewerProps()}>{TEXT_VIEW}</div>}
-        {mode === 'edit' && (
-          <input
-            ref={editorRef}
-            onBlur={onBlur}
-            defaultValue="textvalue"
-            data-testid="edit-mode-input"
-          />
-        )}
-        {
-          <button
-            {...buttonProps}
-            className={isVisible ? 'test-visible' : 'test-hidden'}
-          >
-            {TEXT_EDIT}
-          </button>
-        }
-      </div>
-    )
-  }
-)
-
-describe('<Editable />', () => {
-  let consoleWarningMock: ReturnType<typeof vi.spyOn>
-  let consoleErrorMock: ReturnType<typeof vi.spyOn>
-
-  beforeEach(() => {
-    // Mocking console to prevent test output pollution and expect for messages
-    consoleWarningMock = vi
-      .spyOn(console, 'warn')
-      .mockImplementation(() => {}) as MockInstance
-    consoleErrorMock = vi
-      .spyOn(console, 'error')
-      .mockImplementation(() => {}) as MockInstance
-  })
-
-  afterEach(() => {
-    consoleWarningMock.mockRestore()
-    consoleErrorMock.mockRestore()
-    childRender.mockClear()
-  })
-
-  it('should render view mode', async () => {
-    render(<Editable mode="view" onChangeMode={vi.fn()} render={childRender} />)
-    const currentMode = childRender.mock.calls[0][0].mode
-    const viewModeText = screen.getByText(TEXT_VIEW)
-    const editButton = screen.getByRole('button', { name: TEXT_EDIT })
-
-    expect(childRender).toHaveBeenCalled()
-    expect(currentMode).toBe('view')
-
-    expect(viewModeText).toBeInTheDocument()
-    expect(editButton).toBeInTheDocument()
-  })
-
-  it('should render edit mode', async () => {
-    render(<Editable mode="edit" onChangeMode={vi.fn()} render={childRender} />)
-    const currentMode = childRender.mock.calls[0][0].mode
-    const inputForEdit = screen.getByTestId('edit-mode-input')
-    const editButton = screen.getByRole('button', { name: TEXT_EDIT })
-
-    expect(childRender).toHaveBeenCalled()
-    expect(currentMode).toBe('edit')
-
-    expect(inputForEdit).toBeInTheDocument()
-    expect(editButton).toBeInTheDocument()
-  })
-
-  it('should change to edit mode on button click', () => {
-    const onChangeModeSpy = vi.fn()
-
-    render(
-      <Editable
-        mode="view"
-        onChangeMode={onChangeModeSpy}
-        render={childRender}
-      />
-    )
-    const viewModeText = screen.getByText(TEXT_VIEW)
-    const editButton = screen.getByRole('button')
-
-    expect(viewModeText).toBeInTheDocument()
-
-    fireEvent.click(editButton)
-
-    expect(onChangeModeSpy).toHaveBeenCalledWith('edit')
-  })
-
-  it('should change to edit mode on component click', async () => {
-    const onChangeModeSpy = vi.fn()
-
-    render(
-      <Editable
-        mode="view"
-        onChangeMode={onChangeModeSpy}
-        render={childRender}
-      />
-    )
-    const childContainer = screen.getByTestId('child-container')
-
-    userEvent.click(childContainer)
-
-    await waitFor(() => expect(onChangeModeSpy).toHaveBeenCalledWith('edit'))
-  })
-
-  it('should set the button to visible on mouse over', async () => {
-    const onChangeModeSpy = vi.fn()
-
-    render(
-      <Editable
-        mode="view"
-        onChangeMode={onChangeModeSpy}
-        render={childRender}
-      />
-    )
-    const editButton = screen.getByRole('button')
-
-    expect(editButton).toHaveClass('test-hidden')
-
-    fireEvent.mouseOver(editButton)
-
-    await waitFor(() => {
-      expect(editButton).toHaveClass('test-visible')
-    })
-
-    fireEvent.mouseOut(editButton)
-
-    await waitFor(() => {
-      expect(editButton).toHaveClass('test-hidden')
-    })
-  })
-
-  it('should change to view mode on editor blur', () => {
-    const onChangeModeSpy = vi.fn()
-
-    render(
-      <Editable
-        mode="edit"
-        onChangeMode={onChangeModeSpy}
-        render={childRender}
-      />
-    )
-    const inputForEdit = screen.getByTestId('edit-mode-input')
-
-    fireEvent.focus(inputForEdit)
-    fireEvent.blur(inputForEdit)
-
-    expect(onChangeModeSpy).toHaveBeenCalledWith('view')
-  })
-
-  it('should change to view mode on escape', () => {
-    const onChangeModeSpy = vi.fn()
-
-    render(
-      <Editable
-        mode="edit"
-        onChangeMode={onChangeModeSpy}
-        render={childRender}
-      />
-    )
-    const inputForEdit = screen.getByTestId('edit-mode-input')
-
-    fireEvent.keyUp(inputForEdit, { key: 'Escape', code: 'Escape' })
-
-    expect(onChangeModeSpy).toHaveBeenCalledWith('view')
-  })
-
-  it('should call onChange when the user is finished editing', () => {
-    const onChangeSpy = vi.fn()
-
-    const { rerender } = render(
-      <Editable
-        mode="edit"
-        onChangeMode={vi.fn()}
-        render={childRender}
-        value="initial_value"
-        onChange={onChangeSpy}
-      />
-    )
-    const inputForEdit = screen.getByTestId('edit-mode-input')
-
-    fireEvent.change(inputForEdit, { target: { value: 'updated_value' } })
-
-    expect(onChangeSpy).not.toHaveBeenCalled()
-
-    // Simulate mode prop change
-    rerender(
-      <Editable
-        mode="view"
-        onChangeMode={vi.fn()}
-        render={childRender}
-        value="updated_value"
-        onChange={onChangeSpy}
-      />
-    )
-
-    expect(onChangeSpy).toHaveBeenCalledWith('updated_value')
-  })
-
-  it('should warn if readOnly + mode="edit"', () => {
-    const consoleWarningSpy = vi
-      .spyOn(console, 'warn')
-      .mockImplementation(() => {})
-
-    render(
-      <Editable
-        mode="edit"
-        onChangeMode={vi.fn()}
-        render={childRender}
-        value="foo"
-        readOnly
-      />
-    )
-    const expectedErrorMessage = 'When readOnly is true, mode must be "view"'
-
-    expect(consoleWarningSpy).toHaveBeenCalledWith(
-      expect.stringContaining(expectedErrorMessage),
-      expect.any(String)
-    )
-
-    consoleWarningSpy.mockRestore()
-  })
-})