@instructure/ui-pagination 9.0.2-snapshot-9 → 9.0.2-snapshot-11

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.0.2-snapshot-9](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.0.2-snapshot-9) (2024-06-11)
+## [9.0.2-snapshot-11](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.0.2-snapshot-11) (2024-06-12)
 
 **Note:** Version bump only for package @instructure/ui-pagination
 

package/{lib/Pagination/PaginationPageInput/PaginationPageInputLocator.js → es/Pagination/PaginationArrowButton/__new-tests__/PaginationArrowButton.test.js}

@@ -1,12 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PaginationPageInputLocator = void 0;
-var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-var _NumberInputLocator = require("@instructure/ui-number-input/lib/NumberInput/NumberInputLocator");
-var _index = require("./index");
+var _PaginationArrowButto;
 /*
  * The MIT License (MIT)
  *
@@ -31,12 +23,31 @@ var _index = require("./index");
  * SOFTWARE.
  */
 
-// @ts-ignore: Cannot find module
-// eslint-disable-line no-restricted-imports
-
-const PaginationPageInputLocator = exports.PaginationPageInputLocator = (0, _locator.locator)(
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-_index.PaginationPageInput.selector, {
-  findInput: (...args) => _NumberInputLocator.NumberInputLocator.findInput(...args),
-  findNumberInputArrows: (...args) => _NumberInputLocator.NumberInputLocator.findArrowButtons(...args)
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { PaginationArrowButton } from '../index';
+describe('<PaginationArrowButton />', () => {
+  it('should render', async () => {
+    render(_PaginationArrowButto || (_PaginationArrowButto = /*#__PURE__*/React.createElement(PaginationArrowButton, {
+      direction: "prev",
+      label: "Label"
+    })));
+    const button = screen.getByRole('button', {
+      name: 'Label'
+    });
+    expect(button).toBeInTheDocument();
+  });
+  it('should provide a ref to the button element', async () => {
+    const buttonRef = jest.fn();
+    render( /*#__PURE__*/React.createElement(PaginationArrowButton, {
+      direction: "prev",
+      label: "Label",
+      buttonRef: buttonRef
+    }));
+    const button = screen.getByRole('button', {
+      name: 'Label'
+    });
+    expect(buttonRef).toHaveBeenCalledWith(button);
+  });
 });

package/es/Pagination/PaginationButton/__new-tests__/PaginationButton.test.js

@@ -0,0 +1,74 @@
+var _PaginationButton, _PaginationButton2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - 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 React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { PaginationButton } from '../index';
+describe('<PaginationButton />', () => {
+  it('should designate current page', async () => {
+    render(_PaginationButton || (_PaginationButton = /*#__PURE__*/React.createElement(PaginationButton, {
+      current: true
+    }, "1")));
+    const button = screen.getByRole('button', {
+      name: '1'
+    });
+    expect(button).toHaveAttribute('aria-current', 'page');
+  });
+  it('should navigate using button when onClick provided', async () => {
+    const onClick = jest.fn();
+    render( /*#__PURE__*/React.createElement(PaginationButton, {
+      onClick: onClick
+    }, "1"));
+    const button = screen.getByRole('button', {
+      name: '1'
+    });
+    button.click();
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
+  it('should disable navigation to current page', async () => {
+    const onClick = jest.fn();
+    render( /*#__PURE__*/React.createElement(PaginationButton, {
+      onClick: onClick,
+      current: true
+    }, "1"));
+    const button = screen.getByRole('button', {
+      name: '1'
+    });
+    button.click();
+    await waitFor(() => {
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+  it('should navigate using link when href provided', async () => {
+    render(_PaginationButton2 || (_PaginationButton2 = /*#__PURE__*/React.createElement(PaginationButton, {
+      href: "https://instructure.design/"
+    }, "1")));
+    const button = screen.getByRole('link');
+    expect(button).toHaveAttribute('href', 'https://instructure.design/');
+  });
+});

package/es/Pagination/PaginationPageInput/__new-tests__/PaginationPageInput.test.js

@@ -0,0 +1,126 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - 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 React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { PaginationPageInput } from '../index';
+const defaultSRLabel = (currentPage, numberOfPages) => `Select page (${currentPage} of ${numberOfPages})`;
+describe('<PaginationPageInput />', () => {
+  it('should render', async () => {
+    const defaultOnChange = jest.fn();
+    render( /*#__PURE__*/React.createElement(PaginationPageInput, {
+      numberOfPages: 10,
+      currentPageIndex: 0,
+      onChange: defaultOnChange,
+      screenReaderLabel: defaultSRLabel
+    }));
+    const input = screen.getByRole('textbox');
+    expect(input).toBeInTheDocument();
+    expect(input.tagName).toBe('INPUT');
+  });
+  it('should display the current page number', async () => {
+    const defaultOnChange = jest.fn();
+    render( /*#__PURE__*/React.createElement(PaginationPageInput, {
+      numberOfPages: 10,
+      currentPageIndex: 3,
+      onChange: defaultOnChange,
+      screenReaderLabel: defaultSRLabel
+    }));
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveAttribute('value', '4');
+  });
+  it('should correctly update page number', async () => {
+    const defaultOnChange = jest.fn();
+    const _render = render( /*#__PURE__*/React.createElement(PaginationPageInput, {
+        numberOfPages: 10,
+        currentPageIndex: 3,
+        onChange: defaultOnChange,
+        screenReaderLabel: defaultSRLabel
+      })),
+      rerender = _render.rerender;
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveAttribute('value', '4');
+
+    // Set currentPageIndex: 6
+    rerender( /*#__PURE__*/React.createElement(PaginationPageInput, {
+      numberOfPages: 10,
+      currentPageIndex: 6,
+      onChange: defaultOnChange,
+      screenReaderLabel: defaultSRLabel
+    }));
+    expect(input).toHaveAttribute('value', '7');
+  });
+  it("shouldn't display the arrow keys of NumberInput", async () => {
+    const defaultOnChange = jest.fn();
+    const _render2 = render( /*#__PURE__*/React.createElement(PaginationPageInput, {
+        numberOfPages: 10,
+        currentPageIndex: 3,
+        onChange: defaultOnChange,
+        screenReaderLabel: defaultSRLabel
+      })),
+      container = _render2.container;
+    const arrowButtons = screen.queryAllByRole('button');
+    expect(arrowButtons.length).toBe(0);
+    const arrowKeys = container.querySelectorAll('svg');
+    expect(arrowKeys.length).toBe(0);
+  });
+  it("should disable the input on 'disabled'", async () => {
+    const defaultOnChange = jest.fn();
+    render( /*#__PURE__*/React.createElement(PaginationPageInput, {
+      numberOfPages: 10,
+      currentPageIndex: 3,
+      onChange: defaultOnChange,
+      screenReaderLabel: defaultSRLabel,
+      disabled: true
+    }));
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveAttribute('disabled');
+  });
+  it('should set the ScreenReaderLabel for the input', async () => {
+    const defaultOnChange = jest.fn();
+    const _render3 = render( /*#__PURE__*/React.createElement(PaginationPageInput, {
+        numberOfPages: 10,
+        currentPageIndex: 3,
+        onChange: defaultOnChange,
+        screenReaderLabel: defaultSRLabel
+      })),
+      container = _render3.container;
+    const label = container.querySelector('label');
+    expect(label).toHaveTextContent('Select page (4 of 10)');
+  });
+  it('should display the number of pages in the label', async () => {
+    const defaultOnChange = jest.fn();
+    const _render4 = render( /*#__PURE__*/React.createElement(PaginationPageInput, {
+        numberOfPages: 10,
+        currentPageIndex: 3,
+        onChange: defaultOnChange,
+        screenReaderLabel: defaultSRLabel,
+        label: numberOfPages => `of ${numberOfPages}`
+      })),
+      container = _render4.container;
+    const label = container.querySelector('label');
+    expect(label).toHaveTextContent('of 10');
+  });
+});