fix storybook interaction test according to the review

Joystream · Aug 7, 2023 · 41a642b · 41a642b
1 parent eaa7468
commit 41a642b
Showing 1 changed file with 24 additions and 35 deletions.
diff --git a/packages/ui/src/app/pages/Validators/ValidatorList.stories.tsx b/packages/ui/src/app/pages/Validators/ValidatorList.stories.tsx
@@ -130,7 +130,7 @@ export default {
                   ['j4ShWRXxTG4K5Q5H7KXmdWN8HnaaLwppqM7GdiSwAy3eTLsJt'],
                   ['j4WfB3TD4tFgrJpCmUi8P3wPp3EocyC5At9ZM2YUpmKGJ1FWM'],
                 ],
-                commission: joy(0.0000011),
+                commission: 0.0000011 * 10 ** 9,
                 blocked: false,
               },
             },
@@ -152,36 +152,27 @@ export const TestsFilters: Story = {
     const searchElement = screen.getByPlaceholderText('Search')
     const verificationFilter = screen.getAllByText('Verification')[0]
     const stateFilter = screen.getAllByText('State')[0]
-    const clearFilter = async () => {
-      expect(screen.getByText('Clear all filters'))
-      await userEvent.click(screen.getByText('Clear all filters'))
-    }
-    const expectNumberOfValidatorsToBe = async (n: number) => {
-      const liElements = screen.queryAllByRole('listitem')
-      const validatorElements = liElements.filter((li) => li.textContent?.includes('Nominate'))
-      await expect(validatorElements.length).toBe(n)
-    }
 
     await step('Verifcation Filter', async () => {
       await selectFromDropdown(screen, verificationFilter, 'verified')
-      await expect(screen.queryByText('unverifed')).toBeNull()
-      await expectNumberOfValidatorsToBe(4)
-      await expect(screen.getByText('alice'))
-      await expect(screen.getByText('bob'))
+      expect(screen.queryByText('unverifed')).toBeNull()
+      expect(screen.queryAllByRole('button', { name: 'Nominate' })).toHaveLength(4)
+      expect(screen.getByText('alice'))
+      expect(screen.getByText('bob'))
       await selectFromDropdown(screen, verificationFilter, 'unverified')
-      await expect(screen.queryByText('verifed')).toBeNull()
-      await expectNumberOfValidatorsToBe(7)
-      await expect(screen.queryByText('alice')).toBeNull()
-      await expect(screen.queryByText('bob')).toBeNull()
+      expect(screen.queryByText('verifed')).toBeNull()
+      expect(screen.queryAllByRole('button', { name: 'Nominate' })).toHaveLength(7)
+      expect(screen.queryByText('alice')).toBeNull()
+      expect(screen.queryByText('bob')).toBeNull()
       await selectFromDropdown(screen, verificationFilter, 'All')
     })
     await step('State Filter', async () => {
       await selectFromDropdown(screen, stateFilter, 'active')
-      await expect(screen.queryByText('waiting')).toBeNull()
-      await expectNumberOfValidatorsToBe(9)
+      expect(screen.queryByText('waiting')).toBeNull()
+      expect(screen.queryAllByRole('button', { name: 'Nominate' })).toHaveLength(9)
       await selectFromDropdown(screen, stateFilter, 'waiting')
-      await expect(screen.queryByText('active')).toBeNull()
-      await expectNumberOfValidatorsToBe(2)
+      expect(screen.queryByText('active')).toBeNull()
+      expect(screen.queryAllByRole('button', { name: 'Nominate' })).toHaveLength(2)
       await selectFromDropdown(screen, stateFilter, 'All')
     })
     await step('Search', async () => {
@@ -190,31 +181,29 @@ export const TestsFilters: Story = {
         await userEvent.type(searchElement, '{enter}')
         expect(screen.queryAllByRole('button', { name: 'Nominate' })).toHaveLength(1)
       })
-      await expect(screen.getByText('alice'))
+      expect(screen.queryByText('alice'))
       await userEvent.clear(searchElement)
       await userEvent.type(searchElement, 'j4R')
       await waitFor(async () => {
         await userEvent.type(searchElement, '{enter}')
         expect(screen.queryAllByRole('button', { name: 'Nominate' })).toHaveLength(9)
       })
-      await expect(screen.getByText('alice'))
-      await expect(screen.getByText('bob'))
+      expect(screen.queryByText('alice'))
+      expect(screen.queryByText('bob'))
     })
 
     await step('Clear Filter', async () => {
       await selectFromDropdown(screen, verificationFilter, 'verified')
-      await expect(screen.getByText('Clear all filters'))
-      await selectFromDropdown(screen, stateFilter, 'waiting')
-      await expectNumberOfValidatorsToBe(0)
+      expect(screen.queryByText('Clear all filters'))
       await selectFromDropdown(screen, stateFilter, 'active')
-      await expectNumberOfValidatorsToBe(4)
-      await clearFilter()
-      await expectNumberOfValidatorsToBe(11)
+      expect(screen.queryAllByRole('button', { name: 'Nominate' })).toHaveLength(4)
+      await userEvent.click(screen.getByText('Clear all filters'))
+      expect(screen.queryAllByRole('button', { name: 'Nominate' })).toHaveLength(11)
       await userEvent.type(searchElement, 'j4R{enter}')
-      await expectNumberOfValidatorsToBe(9)
-      await expect(screen.getByText('Clear all filters'))
-      await clearFilter()
-      await expectNumberOfValidatorsToBe(11)
+      expect(screen.queryAllByRole('button', { name: 'Nominate' })).toHaveLength(9)
+      expect(screen.queryByText('Clear all filters'))
+      await userEvent.click(screen.getByText('Clear all filters'))
+      expect(screen.queryAllByRole('button', { name: 'Nominate' })).toHaveLength(11)
     })
   },
 }