feat(grid): add responsive grid component

Sage · Mar 16, 2020 · 62e76c5 · 62e76c5
1 parent f8d862d
commit 62e76c5
Show file tree

Hide file tree

Showing 20 changed files with 1,639 additions and 6 deletions.
diff --git a/cypress/features/accessibility/accessibility.feature b/cypress/features/accessibility/accessibility.feature
@@ -113,5 +113,6 @@ Feature: Accessibility tests
       | Button Toggle Group      | button-toggle-group |
       | Draggable                | draggable           |
       | Flat Table               | flat-table          |
+      | Grid                     | grid                |
       | Search                   | search              |
-      | Popover Container        | popover-container   |
+      | Popover Container        | popover-container   |
diff --git a/cypress/features/build/build.feature b/cypress/features/build/build.feature
@@ -189,11 +189,12 @@ Feature: Build tests
       | component                | data-component      |
       | Accordion                | accordion           |
       | Anchornavigation         | anchor-navigation   |
-      | Flat Table               | flat-table          |
-      | Search                   | search              |
       | Button Toggle Group      | button-toggle-group |
+      | Flat Table               | flat-table          |
+      | Grid                     | grid                |
       | Popover Container        | popover-container   |
-
+      | Search                   | search              |
+
   @build
   Scenario: Component Draggable basic default page and verify data-element
     When I open basic Test "Draggable" component page in noIframe

diff --git a/cypress/features/regression/test/grid.feature b/cypress/features/regression/test/grid.feature
@@ -0,0 +1,73 @@
+Feature: Grid component
+  I want to check Grid component properties
+
+  Background: Open Grid component page
+    Given I open basic Test "Grid" component page in noIframe
+
+  @positive
+  Scenario Outline: Check Grid has "<title>" as title
+    # commented because of BDD default scenario Given - When - Then
+    # When I open "Grid" component page
+    Then pod <index> is "<title>"
+    Examples:
+      | index | title       |
+      | 0     | GridItem 1. |
+      | 1     | GridItem 2. |
+      | 2     | GridItem 3. |
+
+  @positive
+  Scenario Outline: Set viewport to default and check size of <podTitle>
+    When I resize grid viewport to "default"
+    Then pod <index> has height from row "auto" to row "auto"
+      And pod <index> has width from column 1 to column 13
+    Examples:
+      | index | podTitle    |
+      | 1     | GridItem 1. |
+      | 2     | GridItem 2. |
+      | 3     | GridItem 3. |
+
+  @positive
+  Scenario Outline: Set viewport to small and check size of <podTitle>
+    When I resize grid viewport to "small"
+    Then pod <index> has height from row "<index>" to row "<index>"
+      And pod <index> has width from column 1 to column 13
+    Examples:
+      | index | podTitle    |
+      | 1     | GridItem 1. |
+      | 2     | GridItem 2. |
+      | 3     | GridItem 2. |
+
+  @positive
+  Scenario Outline: Set viewport to medium and check size of <podTitle>
+    When I resize grid viewport to "medium"
+    Then pod <index> has height from row "<index>" to row "<index>"
+      And pod <index> has width from column 1 to column 13
+    Examples:
+      | index | podTitle    |
+      | 1     | GridItem 1. |
+      | 2     | GridItem 2. |
+      | 3     | GridItem 3. |
+
+@positive
+Scenario Outline: Set viewport to large and check size of <podTitle>
+  When I resize grid viewport to "large"
+  Then pod <index> has height from row "auto" to row "auto"
+    And pod <index> has width from column 1 to column 13
+  Examples:
+    | index | podTitle    |
+    | 1     | GridItem 1. |
+    | 2     | GridItem 2. |
+    | 3     | GridItem 3. |
+
+@positive
+Scenario Outline: Set viewport to <viewport> and check proper margins and grid-gaps
+  When I resize grid viewport to "<viewport>"
+  Then grid has "margin" set to <margin>
+    And grid has "grid-gap" set to <grid-gap>
+  Examples:
+    | viewport    | margin | grid-gap |
+    | extra small | 16     | 16       |
+    | small       | 24     | 16       |
+    | medium      | 32     | 24       |
+    | large       | 40     | 24       |
+    | extra large | 40     | 40       |
diff --git a/cypress/locators/grid/index.js b/cypress/locators/grid/index.js
@@ -0,0 +1,9 @@
+import { POD_PREVIEW } from '../pod/locators';
+import { DLS_ROOT } from '../locators';
+import { GRID_COMPONENT } from './locators';
+
+export const pod = index => cy.get(POD_PREVIEW).eq(index);
+export const gridPod = index => cy.get(DLS_ROOT)
+  .find('div')
+  .find(`div:nth-child(${index})`);
+export const gridComponent = () => cy.get(GRID_COMPONENT);
diff --git a/cypress/locators/grid/locators.js b/cypress/locators/grid/locators.js
@@ -0,0 +1,2 @@
+// component preview locators
+export const GRID_COMPONENT = '[data-component="grid"]';
diff --git a/cypress/support/step-definitions/common-steps.js b/cypress/support/step-definitions/common-steps.js
@@ -1,13 +1,15 @@
 import {
-  visitComponentUrl, setSlidebar, pressESCKey, pressTABKey, asyncWaitForKnobs, visitFlatTableComponentNoiFrame,
+  visitComponentUrl, setSlidebar, pressESCKey, pressTABKey, asyncWaitForKnobs,
+  visitFlatTableComponentNoiFrame,
 } from '../helper';
 import {
   commonButtonPreview, labelPreview, helpIcon, helpIconByPosition, inputWidthSlider,
   fieldHelpPreview, labelWidthSlider, backgroundUILocator,
   closeIconButton, tooltipPreview, getKnobsInput, getKnobsInputWithName, getKnobsInputByGroup,
   icon, inputWidthPreview, label, eventInAction, getDataElementByNameAndValue, storyRoot,
   precisionSlider, storyRootNoIframe, tooltipPreviewNoIframe, getDataElementByValueNoIframe,
-  knobsNameTab, fieldHelpPreviewByPosition, labelByPosition, dlsRoot, commonButtonPreviewNoIFrameRoot,
+  knobsNameTab, fieldHelpPreviewByPosition, labelByPosition, dlsRoot,
+  commonButtonPreviewNoIFrameRoot,
 } from '../../locators';
 import { dialogTitle, dialogSubtitle } from '../../locators/dialog';
 import { DEBUG_FLAG } from '..';

diff --git a/cypress/support/step-definitions/grid-steps.js b/cypress/support/step-definitions/grid-steps.js
@@ -0,0 +1,51 @@
+import { pod, gridPod, gridComponent } from '../../locators/grid';
+
+Then('pod {int} is {string}', (index, title) => {
+  pod(index).should('have.text', title);
+});
+
+When('I resize grid viewport to {string}', (sizeOfViewport) => {
+  switch (sizeOfViewport) {
+    case 'default':
+      cy.viewport(1958, 900);
+      break;
+    case 'extra small':
+      cy.viewport(599, 900);
+      break;
+    case 'small':
+      cy.viewport(959, 900);
+      break;
+    case 'medium':
+      cy.viewport(1259, 900);
+      break;
+    case 'large':
+      cy.viewport(1920, 900);
+      break;
+    case 'extra large':
+      cy.viewport(1922, 900);
+      break;
+    default: throw new Error(`${sizeOfViewport} is not defined in a scope. We want to resize to only for types of viewport`);
+  }
+});
+
+Then('pod {int} has height from row {string} to row {string}', (index, rowStart, rowEnd) => {
+  gridPod(index).should('have.css', 'grid-row-start', `${rowStart}`)
+    .and('have.css', 'grid-row-end', `${rowEnd}`);
+});
+
+Then('pod {int} has width from column {int} to column {int}', (index, colStart, colEnd) => {
+  gridPod(index).should('have.css', 'grid-column-start', `${colStart}`)
+    .and('have.css', 'grid-column-end', `${colEnd}`);
+});
+
+Then('grid has {string} set to {int}', (property, value) => {
+  switch (property) {
+    case 'margin':
+      gridComponent().should('have.css', property, `${value}px`);
+      break;
+    case 'grid-gap':
+      gridComponent().should('have.css', property, `${value}px ${value}px`);
+      break;
+    default: throw new Error(`${property} is not defined in a scope.`);
+  }
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// component preview locators
		export const GRID_COMPONENT = '[data-component="grid"]';