test: add visual tests

cypress/component/DatePicker.spec.tsx

@@ -7,6 +7,8 @@ import {
   Button,
 } from '@toptal/picasso'
 import React, { useState } from 'react'
+import { HAPPO_TARGETS } from '@toptal/picasso/test-utils'
+import { PicassoBreakpoints } from '@toptal/picasso-provider'
 
 const TestDatePicker = (props: Partial<DatePickerProps>) => {
   const [value, setValue] = useState<DatePickerProps['value']>(
@@ -168,4 +170,40 @@ describe('DatePicker', () => {
 
     cy.getByTestId('date-picker-input').should('have.value', '')
   })
+
+  describe('when number of displayed months is more than one', () => {
+    Cypress._.each(HAPPO_TARGETS, happoTarget => {
+      const { width } = happoTarget
+
+      describe(`when screen has ${width}px width`, () => {
+        const isNarrowScreen = width < PicassoBreakpoints.breakpoints.values.md
+
+        it(
+          isNarrowScreen ? 'displays one month' : 'displays two months',
+          () => {
+            cy.viewport(width, 1000)
+
+            cy.mount(
+              <TestDatePicker
+                numberOfMonths={2}
+                testIds={{
+                  input: 'date-picker-input',
+                  calendar: 'date-picker-calendar',
+                }}
+              />
+            )
+
+            cy.getByTestId('date-picker-input').focus()
+            cy.get('.rdp-month').should('have.length', isNarrowScreen ? 1 : 2)
+
+            cy.get('body').happoScreenshot({
+              component,
+              variant: `date-picker/${width}-default`,
+              targets: [happoTarget],
+            })
+          }
+        )
+      })
+    })
+  })
 })

cypress/component/Modal.spec.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react'
 import type { ModalProps } from '@toptal/picasso'
 import { Modal, Form, Input, Select, Checkbox, Button } from '@toptal/picasso'
+import { HAPPO_TARGETS } from '@toptal/picasso/test-utils'
 
 const TestModalForm = (props: Partial<Omit<ModalProps, 'open'>>) => {
   const [isOpen, setOpen] = React.useState(false)
@@ -211,4 +212,26 @@ describe('Modal', () => {
       variant: 'overflown',
     })
   })
+
+  Cypress._.each(HAPPO_TARGETS, happoTarget => {
+    const { width } = happoTarget
+
+    describe(`when screen has ${width}px width`, () => {
+      Cypress._.each(['small', 'medium', 'large', 'full-screen'], modalSize => {
+        it(`renders ${modalSize} size modal`, () => {
+          cy.viewport(width, 1000)
+
+          cy.mount(
+            <TestModalOverflown size={modalSize as ModalProps['size']} />
+          )
+
+          cy.get('body').happoScreenshot({
+            component,
+            variant: `modal-${modalSize}-size/${width}-default`,
+            targets: [happoTarget],
+          })
+        })
+      })
+    })
+  })
 })

packages/picasso/src/test-utils/get-happo-targets/get-checkpoints.test.ts

@@ -0,0 +1,19 @@
+import { getCheckpoints } from './get-checkpoints'
+
+jest.mock('@toptal/picasso-provider', () => ({
+  PicassoBreakpoints: {
+    breakpoints: {
+      values: {
+        first: 0,
+        second: 100,
+        third: 200,
+      },
+    },
+  },
+}))
+
+describe('getCheckpoints', () => {
+  it('returns correct checkpoints (skips first breakpoint and generates two checkpoints for the last breakpoint)', () => {
+    expect(getCheckpoints()).toEqual([99, 199, 201])
+  })
+})

packages/picasso/src/test-utils/get-happo-targets/get-happo-targets.test.ts

@@ -0,0 +1,14 @@
+import { getHappoTargets } from './get-happo-targets'
+
+describe('getHappoTargets', () => {
+  it('returns correct Happo responsive testing targets', () => {
+    expect(getHappoTargets([1000])).toEqual([
+      {
+        browser: 'chrome',
+        name: 'chrome-desktop-width-1000',
+        viewport: '1000x1024',
+        width: 1000,
+      },
+    ])
+  })
+})