test: scoped variables

src/components/scopedVariables/__tests__/Descriptor.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import Descriptor from '../Descriptor'
+import { DEFAULT_TITLE } from '../constants'
+
+describe('Descriptor', () => {
+    it('should show the title', () => {
+        const { getByText } = render(<Descriptor />)
+        expect(getByText(DEFAULT_TITLE)).toBeTruthy()
+    })
+
+    it('should show customized tippy showing the description', () => {
+        const { container } = render(<Descriptor />)
+        const enableTippy = container.querySelector('.descriptor-help-button')
+        fireEvent.click(enableTippy!)
+        expect(container.querySelector('.tippy-box')).toBeTruthy()
+        expect(container.querySelector('.tippy-box .tippy-content')).toBeTruthy()
+    })
+
+    it('show show upload button when showUploadButton is true', () => {
+        const { container } = render(<Descriptor showUploadButton={true} />)
+        expect(container.querySelector('.descriptor-container__upload-button')).toBeTruthy()
+    })
+
+    it('should be able to upload a file', () => {
+        const readFile = jest.fn()
+        const { container } = render(<Descriptor showUploadButton={true} readFile={readFile} />)
+        const uploadButton = container.querySelector('.descriptor-container__upload-button')
+        fireEvent.click(uploadButton!)
+        const input = container.querySelector('input')
+        fireEvent.change(input!, { target: { files: [new File([''], 'filename.txt', { type: 'text/plain' })] } })
+        expect(readFile).toHaveBeenCalled()
+    })
+})

src/components/scopedVariables/__tests__/SavedVariables.test.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react'
+import SavedVariablesView from '../SavedVariables'
+import { validScopedVariablesData } from '../mocks'
+import { downloadData } from '../utils/helpers'
+
+jest.mock('../../CodeEditor/CodeEditor', () => jest.fn(() => null))
+jest.mock('../utils/helpers', () => ({
+    downloadData: jest.fn(),
+    parseIntoYAMLString: jest.fn(() => 'YAML'),
+}))
+
+describe('SavedVariables', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    it('should render YAML view by default', () => {
+        const { container } = render(
+            <SavedVariablesView
+                scopedVariablesData={validScopedVariablesData.result.payload}
+                jsonSchema={JSON.parse(validScopedVariablesData.result.jsonSchema)}
+                reloadScopedVariables={() => {}}
+            />,
+        )
+        expect(container.querySelector('.scoped-variables-active-tab')?.textContent).toBe('YAML')
+    })
+
+    it('should render Variable List view when Variable List tab is clicked', () => {
+        const { container } = render(
+            <SavedVariablesView
+                scopedVariablesData={validScopedVariablesData.result.payload}
+                jsonSchema={JSON.parse(validScopedVariablesData.result.jsonSchema)}
+                reloadScopedVariables={() => {}}
+            />,
+        )
+        const variableListTab = container.querySelector('.scoped-variables-tab:nth-child(2)')
+        fireEvent.click(variableListTab as Element)
+        expect(container.querySelector('.scoped-variables-active-tab')?.textContent).toBe('Variable List')
+        const yamlTab = container.querySelector('.scoped-variables-tab:nth-child(1)')
+        fireEvent.click(yamlTab as Element)
+        expect(container.querySelector('.scoped-variables-active-tab')?.textContent).toBe('YAML')
+    })
+
+    it('should download saved file when download saved file button is clicked from dropdown', () => {
+        const { container } = render(
+            <SavedVariablesView
+                scopedVariablesData={validScopedVariablesData.result.payload}
+                jsonSchema={JSON.parse(validScopedVariablesData.result.jsonSchema)}
+                reloadScopedVariables={() => {}}
+            />,
+        )
+        const dropdownButton = container.querySelector('.scoped-variables-editor-infobar__btn:nth-child(3)')
+        fireEvent.click(dropdownButton as Element)
+        expect(container.querySelector('.scoped-variables-editor-infobar__dropdown')).toBeTruthy()
+        const downloadButton = container.querySelector('.scoped-variables-editor-infobar__dropdown-item:nth-child(1)')
+        expect(downloadButton?.innerHTML).toBe('Download saved file')
+        expect(downloadData).not.toHaveBeenCalled()
+        fireEvent.click(downloadButton as Element)
+        expect(container.querySelector('.scoped-variables-editor-infobar__dropdown')).toBeFalsy()
+    })
+
+    it('should download template file when download template file button is clicked from dropdown', () => {
+        const { container } = render(
+            <SavedVariablesView
+                scopedVariablesData={validScopedVariablesData.result.payload}
+                jsonSchema={JSON.parse(validScopedVariablesData.result.jsonSchema)}
+                reloadScopedVariables={() => {}}
+            />,
+        )
+        const dropdownButton = container.querySelector('.scoped-variables-editor-infobar__btn:nth-child(3)')
+        fireEvent.click(dropdownButton as Element)
+        expect(container.querySelector('.scoped-variables-editor-infobar__dropdown')).toBeTruthy()
+        const downloadButton = container.querySelector('.scoped-variables-editor-infobar__dropdown-item:nth-child(2)')
+        expect(downloadButton?.innerHTML).toBe('Download template')
+        expect(downloadData).not.toHaveBeenCalled()
+        fireEvent.click(downloadButton as Element)
+        expect(container.querySelector('.scoped-variables-editor-infobar__dropdown')).toBeFalsy()
+    })
+
+    it('should close dropdown when dropdown is open and somewhere outside is clicked', () => {
+        const { container } = render(
+            <SavedVariablesView
+                scopedVariablesData={validScopedVariablesData.result.payload}
+                jsonSchema={JSON.parse(validScopedVariablesData.result.jsonSchema)}
+                reloadScopedVariables={() => {}}
+            />,
+        )
+        const dropdownButton = container.querySelector('.scoped-variables-editor-infobar__btn:nth-child(3)')
+        fireEvent.click(dropdownButton as Element)
+        expect(container.querySelector('.scoped-variables-editor-infobar__dropdown')).toBeTruthy()
+        fireEvent.click(container.querySelector('.scoped-variables-tab-container') as Element)
+        expect(container.querySelector('.scoped-variables-editor-infobar__dropdown')).toBeFalsy()
+    })
+
+    it('should show ScopedVariablesEditor when edit button is clicked', () => {
+        const { container } = render(
+            <SavedVariablesView
+                scopedVariablesData={validScopedVariablesData.result.payload}
+                jsonSchema={JSON.parse(validScopedVariablesData.result.jsonSchema)}
+                reloadScopedVariables={() => {}}
+            />,
+        )
+        const editButton = container.querySelector('.scoped-variables-editor-infobar__btn:nth-child(2)')
+        fireEvent.click(editButton as Element)
+        expect(container.querySelector('.scoped-variables-editor-infobar__btn:nth-child(2)')).toBeFalsy()
+        expect(container.querySelector('.uploaded-variables-editor-background')).toBeTruthy()
+    })
+})

src/components/scopedVariables/__tests__/ScopedVariablesEditor.test.tsx

@@ -0,0 +1,106 @@
+import React from 'react'
+import { fireEvent, render, act } from '@testing-library/react'
+import ScopedVariablesEditor from '../ScopedVariablesEditor'
+import { validScopedVariablesData } from '../mocks'
+import { PARSE_ERROR_TOAST_MESSAGE, SAVE_ERROR_TOAST_MESSAGE } from '../constants'
+import { toast } from 'react-toastify'
+
+jest.mock('../../CodeEditor/CodeEditor', () => jest.fn(() => null))
+
+jest.mock('react-toastify', () => ({
+    toast: {
+        error: jest.fn(),
+        success: jest.fn(),
+    },
+}))
+
+describe('ScopedVariablesEditor', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    it('should redirect back to SavedVariablesView when close button is clicked if setShowEditView is present', () => {
+        const setShowEditView = jest.fn()
+        const { container } = render(
+            <ScopedVariablesEditor
+                variablesData={validScopedVariablesData.result.payload}
+                name="test"
+                abortRead={() => {}}
+                reloadScopedVariables={() => {}}
+                jsonSchema={JSON.parse(validScopedVariablesData.result.jsonSchema)}
+                setShowEditView={setShowEditView}
+            />,
+        )
+        const closeButton = container.querySelector('.uploaded-variables-editor-infobar__abort-read-btn')
+        expect(closeButton).toBeTruthy()
+        expect(setShowEditView).not.toHaveBeenCalled()
+        fireEvent.click(closeButton as Element)
+        expect(setShowEditView).toHaveBeenCalled()
+    })
+
+    it('should abort read when close button is clicked if setShowEditView is not present', () => {
+        const abortRead = jest.fn()
+        const { container } = render(
+            <ScopedVariablesEditor
+                variablesData={validScopedVariablesData.result.payload}
+                name="test"
+                abortRead={abortRead}
+                reloadScopedVariables={() => {}}
+                jsonSchema={JSON.parse(validScopedVariablesData.result.jsonSchema)}
+            />,
+        )
+        const closeButton = container.querySelector('.uploaded-variables-editor-infobar__abort-read-btn')
+        expect(closeButton).toBeTruthy()
+        expect(abortRead).not.toHaveBeenCalled()
+        fireEvent.click(closeButton as Element)
+        expect(abortRead).toHaveBeenCalled()
+    })
+
+    it('should show error toast when save button is clicked and yaml is not parsable', () => {
+        const { container } = render(
+            <ScopedVariablesEditor
+                variablesData={''}
+                name="test"
+                abortRead={() => {}}
+                reloadScopedVariables={() => {}}
+                jsonSchema={JSON.parse(validScopedVariablesData.result.jsonSchema)}
+            />,
+        )
+        const saveButton = container.querySelector('.uploaded-variables-editor-footer__save-button')
+        expect(saveButton).toBeTruthy()
+        fireEvent.click(saveButton as Element)
+        expect(toast.error).toHaveBeenCalledWith(PARSE_ERROR_TOAST_MESSAGE)
+    })
+
+    it('should show error toast when save button is clicked and save fails', async () => {
+        jest.spyOn(global, 'fetch').mockImplementation(
+            () =>
+                Promise.resolve({
+                    json: () =>
+                        Promise.resolve({
+                            result: {
+                                code: 500,
+                                status: 'Internal Server Error',
+                            },
+                        }),
+                }) as Promise<Response>,
+        )
+
+        await act(async () => {
+            const { container } = render(
+                <ScopedVariablesEditor
+                    variablesData={JSON.stringify(validScopedVariablesData.result.payload)}
+                    name="test"
+                    abortRead={() => {}}
+                    reloadScopedVariables={() => {}}
+                    jsonSchema={JSON.parse(validScopedVariablesData.result.jsonSchema)}
+                />,
+            )
+            const saveButton = container.querySelector('.uploaded-variables-editor-footer__save-button')
+            expect(saveButton).toBeTruthy()
+            fireEvent.click(saveButton as Element)
+            await Promise.resolve()
+        })
+        expect(toast.error).toHaveBeenCalledWith(SAVE_ERROR_TOAST_MESSAGE)
+    })
+})

src/components/scopedVariables/__tests__/Table.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { TableList, TableItem } from '../Table'
+
+describe('Table', () => {
+    describe('When TableList mounts', () => {
+        it('should have all the headings with the correct width', () => {
+            const headings = ['heading1', 'heading2', 'heading3']
+            const width = ['100px', '200px', '300px']
+            const { container } = render(<TableList headings={headings} width={width} />)
+            const headingElements = container.querySelectorAll('.scoped-variables-list-header > div')
+            expect(headingElements.length).toBe(3)
+            headingElements.forEach((headingElement, index) => {
+                expect(headingElement.getAttribute('style')).toBe(`width: ${width[index]};`)
+                expect(headingElement.querySelector('.scoped-variables-list-item__heading')?.textContent).toBe(
+                    headings[index],
+                )
+            })
+        })
+
+        it('should have all the children', () => {
+            const { container } = render(
+                <TableList>
+                    <p>children</p>
+                </TableList>,
+            )
+            expect(container.querySelector('.scoped-variables-list-container > p')?.textContent).toBe('children')
+        })
+    })
+
+    describe('TableItem', () => {
+        it('should have all the data with the correct width', () => {
+            const columnsData = ['data1', 'data2', 'data3']
+            const width = ['100px', '200px', '300px']
+            const { container } = render(<TableItem columnsData={columnsData} width={width} />)
+            const dataElements = container.querySelectorAll('.scoped-variables-list-item > div')
+            expect(dataElements.length).toBe(3)
+            dataElements.forEach((dataElement, index) => {
+                expect(dataElement.getAttribute('style')).toBe(`width: ${width[index]};`)
+                expect(dataElement.querySelector('.scoped-variables-list-item__data')?.textContent).toBe(
+                    columnsData[index],
+                )
+            })
+        })
+    })
+})

src/components/scopedVariables/__tests__/UploadScopedVariables.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react'
+import UploadScopedVariables, { LoadScopedVariables } from '../UploadScopedVariables'
+import { downloadData } from '../utils/helpers'
+import { VARIABLES_TEMPLATE, DOWNLOAD_TEMPLATE_NAME } from '../constants'
+
+jest.mock('../utils/helpers', () => ({
+    validator: jest.fn(),
+    downloadData: jest.fn(),
+}))
+
+describe('UploadScopedVariables', () => {
+    describe('LoadScopedVariables', () => {
+        it('should show Upload Failed when status is false', () => {
+            const { container } = render(
+                <LoadScopedVariables
+                    status={{
+                        status: false,
+                        message: {
+                            data: 'test',
+                            description: 'test',
+                        },
+                    }}
+                    progress={0}
+                    fileData={{
+                        data: 'test',
+                        type: 'test',
+                        name: 'test',
+                    }}
+                    abortRead={() => {}}
+                />,
+            )
+            expect(container.querySelector('.styled-progress-bar-error')).toBeTruthy()
+        })
+    })
+
+    describe('UploadScopedVariables', () => {
+        it('should download template when download template button is clicked', () => {
+            const { container } = render(<UploadScopedVariables reloadScopedVariables={() => {}} jsonSchema={{}} />)
+            fireEvent.click(container.querySelector('.default-download-template-typography')!)
+            expect(downloadData).toHaveBeenCalledWith(VARIABLES_TEMPLATE, DOWNLOAD_TEMPLATE_NAME, 'application/x-yaml')
+        })
+
+        it('should read file when file is uploaded', () => {
+            const reloadScopedVariables = jest.fn()
+            const { container } = render(
+                <UploadScopedVariables reloadScopedVariables={reloadScopedVariables} jsonSchema={{}} />,
+            )
+            fireEvent.change(container.querySelector('input')!, {
+                target: {
+                    files: [
+                        {
+                            name: 'test',
+                            type: 'application/x-yaml',
+                        },
+                    ],
+                },
+            })
+            expect(container.querySelector('.load-scoped-variables-container')).toBeTruthy()
+        })
+    })
+})