feat(Drawer): Documentation & Tests #2015

saurabhdaware · 2024-02-14T09:57:53Z

Documentation Link

https://drawer-docs-tests--61c19ee8d3d282003ac1d81c.chromatic.com/?path=/story/components-drawer

Description

Implementation PR feat(Drawer): add Drawer component #2011
Docs & Tests (This PR)
Component Status Update (Followup PR once we know version number)

Changes

Documentation
E2E
Unit Test
Snapshot Updates

Additional Information

No

Component Checklist

Update Component Status Page
Perform Manual Testing in Other Browsers
Add KitchenSink Story
Add Interaction Tests (if applicable)
Add changeset

Co-authored-by: Nitin Kumar <[email protected]>

…zorpay/blade into drawer/api-decision

…drawer/implementation

…o drawer/docs-tests

anuraghazra · 2024-02-23T09:18:05Z

packages/blade/src/components/Drawer/__tests__/Drawer.test.stories.tsx

+DrawerOpen.play = async () => {
+  const { getByRole, queryByRole, getByTestId, queryByTestId } = within(document.body);
+
+  await expect(queryByRole('heading', { name: 'Drawer Heading' })).not.toBeInTheDocument();


put the texts in variables and reuse them

anuraghazra · 2024-02-23T09:19:29Z

packages/blade/src/components/Drawer/__tests__/Drawer.web.test.tsx

+    await waitFor(() => expect(getByRole('dialog')).toBeVisible());
+    await user.click(getByRole('button', { name: 'Close' }));
+    await waitFor(() => expect(queryByRole('dialog')).not.toBeInTheDocument());
+    expect(onDismiss).toHaveBeenCalledTimes(1);


We can also test this in interaction tests, see carousel interaction tests

Not sure why but its not working as expected in interaction test. Like the onDismissMock is getting called but something going wrong with referrencing variable from global scope I guess. The onDismissMock reference getting called might be different from onDiss

Anyways I think this should be tested on unit test since on a unit you're checking if your prop and handlers work or not.

On interaction I have added state handling that eventually ensures drawer is getting closed or not when the close state is handled

anuraghazra · 2024-02-23T09:20:00Z

packages/blade/src/components/Drawer/__tests__/Drawer.web.test.tsx

+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('should dismiss on overlay click', async () => {


I don't think we need this, if this case is already covered via interaction tests.

I wanted to keep some basic functionality tests on unit test as well since interaction tests we can miss to run. So unit test only covers open close handlers and critical dismiss behaviour

anuraghazra · 2024-02-23T09:21:05Z

packages/blade/src/components/Drawer/docs/Drawer.stories.tsx

+export default {
+  title: 'Components/Drawer',
+  component: Drawer,
+  subcomponents: { Drawer, DrawerHeader, DrawerBody },


We need to do this for all overlay components.

The con of this is that the storybook controls don't work with such components. With Drawer it seems fine since it doesn't have that many props and I have added interactive examples but don't think so we can do it on other components

anuraghazra · 2024-02-23T09:23:27Z

packages/blade/src/utils/storybook/Sandbox/baseCode.ts

@@ -12,7 +12,7 @@ const getBladeVersion = (): string => {
    return `https://pkg.csb.dev/razorpay/blade/commit/${shortSha}/@razorpay/blade`;
  }

-  return '*';
+  return 'https://pkg.csb.dev/razorpay/blade/commit/a168a460/@razorpay/blade';


TODO: revert

…e.tsx Co-authored-by: Nitin Kumar <[email protected]>

packages/blade/src/components/Drawer/docs/Drawer.stories.tsx

snitin315

LGTM

…o drawer/docs-tests

* feat(Drawer): add Drawer component (#2011) * feat(Drawer): add API decisions * feat: add full skeleton * fix: image width * fix: typo * feat: add base implementation, move zIndices to utils * fix: animation speed * refactor: move to different files * feat: make animations smooth * feat: add fancy header in example * fix: link and button instances * feat: change animation speed from xgentle to gently * feat: add stacking section to api decision * Update packages/blade/src/components/Drawer/_decisions/decisions.md Co-authored-by: Nitin Kumar <[email protected]> * fix: focus management on back button * feat: add native warning * fix: focus of back and close button * refactor: move stack provider to drawer directory * fix: remove DrawerHeaderLink and DrawerHeaderButton * fix: linting issue * fix: header alignments and button size * feat: add open questions * feat: add discussion slack thread * feat: update API decision with new API * feat: build for new API * fix: z-index and stacking animations * fix: spacing between header icon and title * fix: rn error * fix: ts errors * feat: export Drawer * fix: allow scrollable content * Update packages/blade/src/components/Drawer/DrawerSubcomponents.native.tsx Co-authored-by: Nitin Kumar <[email protected]> * Update packages/blade/src/components/Drawer/DrawerSubcomponents.native.tsx Co-authored-by: Nitin Kumar <[email protected]> --------- Co-authored-by: Nitin Kumar <[email protected]> * feat(Drawer): Documentation & Tests (#2015) * feat(Drawer): add API decisions * feat: add full skeleton * fix: image width * fix: typo * feat: add base implementation, move zIndices to utils * fix: animation speed * refactor: move to different files * feat: make animations smooth * feat: add fancy header in example * fix: link and button instances * feat: change animation speed from xgentle to gently * feat: add stacking section to api decision * Update packages/blade/src/components/Drawer/_decisions/decisions.md Co-authored-by: Nitin Kumar <[email protected]> * fix: focus management on back button * docs: add basic page * feat: add native warning * fix: focus of back and close button * refactor: move stack provider to drawer directory * fix: remove DrawerHeaderLink and DrawerHeaderButton * fix: linting issue * fix: args * fix: header alignments and button size * feat: add Drawer examples * feat: add open questions * feat: add discussion slack thread * feat: add subcomponent prop * feat: add no overlay story * feat: update API decision with new API * feat: build for new API * fix: drawer api * fix: z-index and stacking animations * fix: spacing between header icon and title * fix: rn error * fix: ts errors * feat: export Drawer * feat: add scrollable content example * fix: allow scrollable content * docs: add complex examples * feat: add basic e2e * feat: add e2e * tests: add unit tests * tests: update snapshots * feat: add kitchen sink * feat: add story with kitchen sink * fix: flaky test * feat: resolve jsdoc grammer * Update packages/blade/src/components/Drawer/DrawerSubcomponents.native.tsx Co-authored-by: Nitin Kumar <[email protected]> * Update packages/blade/src/components/Drawer/DrawerSubcomponents.native.tsx Co-authored-by: Nitin Kumar <[email protected]> * feat: add jsdoc for testid * feat: revert blade version * empty --------- Co-authored-by: Nitin Kumar <[email protected]> * Create mean-comics-flash.md --------- Co-authored-by: Nitin Kumar <[email protected]>

saurabhdaware and others added 30 commits February 7, 2024 21:15

feat(Drawer): add API decisions

48f6a9b

feat: add full skeleton

b5fa002

fix: image width

9555c14

fix: typo

04d4444

feat: add base implementation, move zIndices to utils

46e6adb

fix: animation speed

950fa2e

refactor: move to different files

869e03e

feat: make animations smooth

0fc305d

feat: add fancy header in example

7114284

fix: link and button instances

0c81f0e

feat: change animation speed from xgentle to gently

61ca7b2

feat: add stacking section to api decision

b70b70d

Update packages/blade/src/components/Drawer/_decisions/decisions.md

593fe1b

Co-authored-by: Nitin Kumar <[email protected]>

fix: focus management on back button

ef67dc3

docs: add basic page

f0a1294

feat: add native warning

baa4c64

fix: focus of back and close button

3c2f570

refactor: move stack provider to drawer directory

690feaf

fix: remove DrawerHeaderLink and DrawerHeaderButton

6be7125

Merge branch 'drawer/api-dect push origin dra ision' of github.com:ra…

73bfc17

…zorpay/blade into drawer/api-decision

Merge branch 'drawer/api-decision' of github.com:razorpay/blade into …

efe73f3

…drawer/implementation

fix: linting issue

2c6dc3d

Merge branch 'drawer/implementation' of github.com:razorpay/blade int…

651e7d1

…o drawer/docs-tests

fix: args

6e6cc3d

fix: header alignments and button size

f2c381f

feat: add Drawer examples

14c6dc8

feat: add open questions

6776ff4

feat: add discussion slack thread

96975bf

Merge branch 'drawer/implementation' of github.com:razorpay/blade int…

09db4b5

…o drawer/docs-tests

feat: add subcomponent prop

4436f1c

fix: flaky test

93628b5

saurabhdaware added Run Interaction Tests Review - L1 First level of review labels Feb 22, 2024

saurabhdaware assigned anuraghazra Feb 23, 2024

anuraghazra reviewed Feb 23, 2024

View reviewed changes

anuraghazra approved these changes Feb 23, 2024

View reviewed changes

saurabhdaware and others added 4 commits February 26, 2024 11:29

feat: resolve jsdoc grammer

2211044

Update packages/blade/src/components/Drawer/DrawerSubcomponents.nativ…

d359936

…e.tsx Co-authored-by: Nitin Kumar <[email protected]>

Update packages/blade/src/components/Drawer/DrawerSubcomponents.nativ…

8f92c9a

…e.tsx Co-authored-by: Nitin Kumar <[email protected]>

feat: add jsdoc for testid

4350b08

snitin315 reviewed Feb 26, 2024

View reviewed changes

packages/blade/src/components/Drawer/docs/Drawer.stories.tsx Show resolved Hide resolved

snitin315 approved these changes Feb 26, 2024

View reviewed changes

saurabhdaware added Review - L3 Third level of review and removed Review - L1 First level of review labels Feb 26, 2024

saurabhdaware unassigned anuraghazra Feb 26, 2024

saurabhdaware added 3 commits February 26, 2024 13:02

feat: revert blade version

2cd4bbd

Merge branch 'drawer/implementation' of github.com:razorpay/blade int…

724dfad

…o drawer/docs-tests

empty

da41c98

chaitanyadeorukhkar approved these changes Feb 26, 2024

View reviewed changes

Base automatically changed from drawer/implementation to drawer/integration February 26, 2024 10:48

saurabhdaware mentioned this pull request Feb 26, 2024

feat(Drawer): Drawer Integration Branch #2045

Merged

11 tasks

fix: merge conflict

49ff4cc

saurabhdaware merged commit 1cf00bc into drawer/integration Feb 26, 2024
12 of 14 checks passed

saurabhdaware deleted the drawer/docs-tests branch February 26, 2024 11:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Drawer): Documentation & Tests #2015

feat(Drawer): Documentation & Tests #2015

saurabhdaware commented Feb 14, 2024 •

edited

Loading

anuraghazra Feb 23, 2024

anuraghazra Feb 23, 2024

saurabhdaware Feb 26, 2024

anuraghazra Feb 23, 2024

saurabhdaware Feb 26, 2024

anuraghazra Feb 23, 2024

snitin315 Feb 25, 2024

saurabhdaware Feb 26, 2024

anuraghazra Feb 23, 2024

snitin315 left a comment

feat(Drawer): Documentation & Tests #2015

feat(Drawer): Documentation & Tests #2015

Conversation

saurabhdaware commented Feb 14, 2024 • edited Loading

Documentation Link

Description

Changes

Additional Information

Component Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snitin315 left a comment

Choose a reason for hiding this comment

saurabhdaware commented Feb 14, 2024 •

edited

Loading