@pingux/astro 2.131.0-alpha.1 → 2.131.0

package/lib/components/TableBase/TableBase.test.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Cell, Column, Row, TBody, THead } from '../../index';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import TableBase from './TableBase';
@@ -26,10 +27,7 @@ var objects = [{
   key: '1',
   country: 'USA',
   population: '320,000,000',
-  continent: 'South America',
-  cellProps: {
-    noWrap: true
-  }
+  continent: 'South America'
 }, {
   key: '2',
   country: 'Canada',
@@ -47,7 +45,8 @@ var objects = [{
   continent: 'Europe'
 }];
 var getComponent = function getComponent() {
-  return render(___EmotionJSX(TableBase, defaultProps, ___EmotionJSX(THead, {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(TableBase, _extends({}, defaultProps, props), ___EmotionJSX(THead, {
     columns: headers
   }, function (head) {
     return ___EmotionJSX(Column, {
@@ -59,7 +58,7 @@ var getComponent = function getComponent() {
     return ___EmotionJSX(Row, {
       key: row.key
     }, function (columnKey) {
-      return ___EmotionJSX(Cell, row.cellProps || {}, row[columnKey]);
+      return ___EmotionJSX(Cell, null, row[columnKey]);
     });
   })));
 };
@@ -112,8 +111,158 @@ test('renders table rows', function () {
     expect(screen.getByText(object.continent)).toBeInTheDocument();
   });
 });
-test('renders cell with noWrap prop', function () {
+test('renders checkbox in case of multi selection', function () {
+  getComponent({
+    selectionMode: 'multiple'
+  });
+  var checkboxes = screen.getAllByRole('checkbox');
+  expect(checkboxes).toHaveLength(objects.length + 1);
+});
+test('should change selection on mouse press', function () {
+  getComponent({
+    selectionMode: 'multiple'
+  });
+  var rows = screen.getAllByRole('row');
+  expect(rows[1]).not.toHaveClass('is-selected');
+  userEvent.click(rows[1]);
+  expect(rows[1]).toHaveClass('is-selected');
+});
+test('should change select all checkbox on mouse press', function () {
+  getComponent({
+    selectionMode: 'multiple'
+  });
+  var rows = screen.getAllByRole('row');
+  _forEachInstanceProperty(rows).call(rows, function (element) {
+    userEvent.click(element);
+  });
+  var headerCheckbox = screen.getByTestId('select-all-checkbox');
+  expect(headerCheckbox).toBeChecked();
+});
+test('should checked checkboxes if selected keys are provided', function () {
+  getComponent({
+    selectionMode: 'multiple',
+    selectedKeys: ['1', '3']
+  });
+  var checkboxes = screen.getAllByRole('checkbox');
+  var rows = screen.getAllByRole('row');
+  expect(checkboxes[1]).toBeChecked();
+  expect(rows[1]).toHaveClass('is-selected');
+  expect(checkboxes[2]).not.toBeChecked();
+  expect(rows[2]).not.toHaveClass('is-selected');
+  expect(checkboxes[3]).toBeChecked();
+  expect(rows[3]).toHaveClass('is-selected');
+  var headerCheckbox = screen.getByTestId('select-all-checkbox');
+  expect(headerCheckbox).toBePartiallyChecked();
+});
+test('tab key should focus on the first cell of the first row', function () {
+  getComponent();
+  var rows = screen.getAllByRole('row');
+  userEvent.tab();
+  expect(rows[1]).toHaveFocus();
+});
+test('Arrow Down key should focus the next row', function () {
+  getComponent();
+  var rows = screen.getAllByRole('row');
+  userEvent.tab();
+  expect(rows[1]).toHaveFocus();
+  fireEvent.keyDown(rows[1], {
+    key: 'ArrowDown'
+  });
+  fireEvent.keyUp(rows[1], {
+    key: 'ArrowDown'
+  });
+  expect(rows[2]).toHaveFocus();
+  fireEvent.keyDown(rows[2], {
+    key: 'ArrowDown'
+  });
+  fireEvent.keyUp(rows[2], {
+    key: 'ArrowDown'
+  });
+  expect(rows[3]).toHaveFocus();
+});
+test('Arrow Up key should focus the next row', function () {
+  getComponent();
+  var rows = screen.getAllByRole('row');
+  userEvent.tab();
+  expect(rows[1]).toHaveFocus();
+  fireEvent.keyDown(rows[1], {
+    key: 'ArrowUp'
+  });
+  fireEvent.keyUp(rows[1], {
+    key: 'ArrowUp'
+  });
+  var columnheader = screen.getAllByRole('columnheader');
+  expect(columnheader[0]).toHaveFocus();
+});
+test('Arrow Right move the focus to next cell', function () {
+  getComponent();
+  var rows = screen.getAllByRole('row');
+  var firstRow = screen.getAllByRole('row')[1];
+  var tableCells = firstRow.querySelectorAll('td');
+  userEvent.tab();
+  expect(rows[1]).toHaveFocus();
+  fireEvent.keyDown(rows[1], {
+    key: 'ArrowRight'
+  });
+  fireEvent.keyUp(rows[1], {
+    key: 'ArrowRight'
+  });
+  expect(tableCells[0]).toHaveFocus();
+  fireEvent.keyDown(tableCells[0], {
+    key: 'ArrowRight'
+  });
+  fireEvent.keyUp(tableCells[0], {
+    key: 'ArrowRight'
+  });
+  expect(tableCells[1]).toHaveFocus();
+  fireEvent.keyDown(tableCells[1], {
+    key: 'ArrowRight'
+  });
+  fireEvent.keyUp(tableCells[1], {
+    key: 'ArrowRight'
+  });
+  expect(tableCells[2]).toHaveFocus();
+  fireEvent.keyDown(tableCells[2], {
+    key: 'ArrowRight'
+  });
+  fireEvent.keyUp(tableCells[2], {
+    key: 'ArrowRight'
+  });
+  expect(rows[1]).toHaveFocus();
+});
+test('Arrow Left move the focus to next cell', function () {
   getComponent();
-  var cell = screen.getByText('South America');
-  expect(cell).toHaveClass('no-wrap');
+  var rows = screen.getAllByRole('row');
+  var firstRow = screen.getAllByRole('row')[1];
+  var tableCells = firstRow.querySelectorAll('td');
+  userEvent.tab();
+  expect(rows[1]).toHaveFocus();
+  fireEvent.keyDown(rows[1], {
+    key: 'ArrowLeft'
+  });
+  fireEvent.keyUp(rows[1], {
+    key: 'ArrowLeft'
+  });
+  expect(tableCells[2]).toHaveFocus();
+  fireEvent.keyDown(tableCells[2], {
+    key: 'ArrowLeft'
+  });
+  fireEvent.keyUp(tableCells[2], {
+    key: 'ArrowLeft'
+  });
+  expect(tableCells[1]).toHaveFocus();
+  fireEvent.keyDown(tableCells[1], {
+    key: 'ArrowLeft'
+  });
+  fireEvent.keyUp(tableCells[1], {
+    key: 'ArrowLeft'
+  });
+  expect(tableCells[0]).toHaveFocus();
+  fireEvent.keyDown(tableCells[0], {
+    key: 'ArrowLeft'
+  });
+  fireEvent.keyUp(tableCells[0], {
+    key: 'ArrowLeft'
+  });
+  expect(rows[1]).toHaveFocus();
 });

package/lib/styles/themes/next-gen/variants/tableBase.js

@@ -38,6 +38,7 @@ var row = {
   }
 };
 var thead = {
+  borderBottomColor: 'border.base',
   backgroundColor: 'background.base',
   '&:not(.has-caption)': {
     '& > tr:first-child': {

package/lib/styles/themes/next-gen/variants/variants.js

@@ -380,5 +380,17 @@ export default {
   loader: loader,
   callout: callout,
   table: table,
-  tableBase: tableBase
+  tableBase: tableBase,
+  box: {
+    indeterminateCheckboxIcon: {
+      height: '19.25px',
+      width: '19.25px',
+      '&.is-disabled': {
+        '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+          fill: 'gray-500',
+          stroke: 'gray-500'
+        }
+      }
+    }
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.131.0-alpha.1",
+  "version": "2.131.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",