From 0222a06ba38a3df2db80192172daf2e359b00d5a Mon Sep 17 00:00:00 2001 From: Laurent Nguyen Date: Tue, 7 May 2024 11:34:17 +0200 Subject: [PATCH] Add more unit tests. Add lcov coverage report to display in vscode --- jest.config.js | 2 +- .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx | 22 ++- .../DocumentsTableComponent.test.tsx | 126 +++++++++++++++++- 3 files changed, 141 insertions(+), 9 deletions(-) diff --git a/jest.config.js b/jest.config.js index b4f660063..1c1f48e6d 100644 --- a/jest.config.js +++ b/jest.config.js @@ -31,7 +31,7 @@ module.exports = { coveragePathIgnorePatterns: ["/node_modules/"], // A list of reporter names that Jest uses when writing coverage reports - coverageReporters: ["json", "text", "cobertura"], + coverageReporters: ["json", "text", "cobertura", "lcov"], // An object that configures minimum threshold enforcement for coverage results coverageThreshold: { diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx index b0a08b73a..096927013 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx +++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx @@ -97,7 +97,8 @@ let renderObjectForEditor = ( space: string | number, ): string => JSON.stringify(value, replacer, space); -const getSaveNewDocumentButtonState = (editorState: ViewModels.DocumentExplorerState) => ({ +// Export to expose to unit tests +export const getSaveNewDocumentButtonState = (editorState: ViewModels.DocumentExplorerState) => ({ enabled: (() => { switch (editorState) { case ViewModels.DocumentExplorerState.newDocumentValid: @@ -118,7 +119,8 @@ const getSaveNewDocumentButtonState = (editorState: ViewModels.DocumentExplorerS })(), }); -const getDiscardNewDocumentChangesButtonState = (editorState: ViewModels.DocumentExplorerState) => ({ +// Export to expose to unit tests +export const getDiscardNewDocumentChangesButtonState = (editorState: ViewModels.DocumentExplorerState) => ({ enabled: (() => { switch (editorState) { case ViewModels.DocumentExplorerState.newDocumentValid: @@ -140,7 +142,8 @@ const getDiscardNewDocumentChangesButtonState = (editorState: ViewModels.Documen })(), }); -const getSaveExistingDocumentButtonState = (editorState: ViewModels.DocumentExplorerState) => ({ +// Export to expose to unit tests +export const getSaveExistingDocumentButtonState = (editorState: ViewModels.DocumentExplorerState) => ({ enabled: (() => { switch (editorState) { case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid: @@ -162,7 +165,8 @@ const getSaveExistingDocumentButtonState = (editorState: ViewModels.DocumentExpl })(), }); -const getDiscardExistingDocumentChangesButtonState = (editorState: ViewModels.DocumentExplorerState) => ({ +// Export to expose to unit tests +export const getDiscardExistingDocumentChangesButtonState = (editorState: ViewModels.DocumentExplorerState) => ({ enabled: (() => { switch (editorState) { case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid: @@ -185,7 +189,8 @@ const getDiscardExistingDocumentChangesButtonState = (editorState: ViewModels.Do })(), }); -const getDeleteExistingDocumentButtonState = ( +// Export to expose to unit tests +export const getDeleteExistingDocumentButtonState = ( editorState: ViewModels.DocumentExplorerState, selectedRows: Set, ) => ({ @@ -213,7 +218,9 @@ const getDeleteExistingDocumentButtonState = ( }); type UiKeyboardEvent = (e: KeyboardEvent | React.SyntheticEvent) => void; -type ButtonsDependencies = { + +// Export to expose to unit tests +export type ButtonsDependencies = { _collection: ViewModels.CollectionBase; selectedRows: Set; editorState: ViewModels.DocumentExplorerState; @@ -245,7 +252,8 @@ const createUploadButton = (container: Explorer): CommandButtonComponentProps => }; }; -const getTabsButtons = ({ +// Export to expose in unit tests +export const getTabsButtons = ({ _collection, selectedRows, editorState, diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx index 8b74af6f8..040fb3fce 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx +++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx @@ -1,4 +1,14 @@ import { TableRowId } from "@fluentui/react-components"; +import { DocumentExplorerState } from "Contracts/ViewModels"; +import { + ButtonsDependencies, + getDeleteExistingDocumentButtonState, + getDiscardExistingDocumentChangesButtonState, + getDiscardNewDocumentChangesButtonState, + getSaveExistingDocumentButtonState, + getSaveNewDocumentButtonState, + getTabsButtons, +} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2"; import { ReactWrapper, mount } from "enzyme"; import React from "react"; import { DocumentsTableComponent, IDocumentsTableComponentProps } from "./DocumentsTableComponent"; @@ -30,8 +40,122 @@ describe("DocumentsTableComponent", () => { }, }); - let wrapper: ReactWrapper; + describe("when getting command bar button state", () => { + describe("should set Save New Document state", () => { + const testCases = new Set<{ state: DocumentExplorerState; enabled: boolean; visible: boolean }>(); + testCases.add({ state: DocumentExplorerState.noDocumentSelected, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.newDocumentValid, enabled: true, visible: true }); + testCases.add({ state: DocumentExplorerState.newDocumentInvalid, enabled: false, visible: true }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentNoEdits, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentDirtyValid, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentDirtyInvalid, enabled: false, visible: false }); + + testCases.forEach((testCase) => { + const state = getSaveNewDocumentButtonState(testCase.state); + it(`enable for ${testCase.state}`, () => { + expect(state.enabled).toBe(testCase.enabled); + }); + it(`visible for ${testCase.state}`, () => { + expect(state.visible).toBe(testCase.visible); + }); + }); + }); + + describe("should set Discard New Document state", () => { + const testCases = new Set<{ state: DocumentExplorerState; enabled: boolean; visible: boolean }>(); + testCases.add({ state: DocumentExplorerState.noDocumentSelected, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.newDocumentValid, enabled: true, visible: true }); + testCases.add({ state: DocumentExplorerState.newDocumentInvalid, enabled: true, visible: true }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentNoEdits, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentDirtyValid, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentDirtyInvalid, enabled: false, visible: false }); + + testCases.forEach((testCase) => { + const state = getDiscardNewDocumentChangesButtonState(testCase.state); + it(`enable for ${testCase.state}`, () => { + expect(state.enabled).toBe(testCase.enabled); + }); + it(`visible for ${testCase.state}`, () => { + expect(state.visible).toBe(testCase.visible); + }); + }); + }); + + describe("should set Save Existing Document state", () => { + const testCases = new Set<{ state: DocumentExplorerState; enabled: boolean; visible: boolean }>(); + testCases.add({ state: DocumentExplorerState.noDocumentSelected, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.newDocumentValid, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.newDocumentInvalid, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentNoEdits, enabled: false, visible: true }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentDirtyValid, enabled: true, visible: true }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentDirtyInvalid, enabled: false, visible: true }); + + testCases.forEach((testCase) => { + const state = getSaveExistingDocumentButtonState(testCase.state); + it(`enable for ${testCase.state}`, () => { + expect(state.enabled).toBe(testCase.enabled); + }); + it(`visible for ${testCase.state}`, () => { + expect(state.visible).toBe(testCase.visible); + }); + }); + }); + + describe("should set Discard Existing Document state", () => { + const testCases = new Set<{ state: DocumentExplorerState; enabled: boolean; visible: boolean }>(); + testCases.add({ state: DocumentExplorerState.noDocumentSelected, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.newDocumentValid, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.newDocumentInvalid, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentNoEdits, enabled: false, visible: true }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentDirtyValid, enabled: true, visible: true }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentDirtyInvalid, enabled: true, visible: true }); + + testCases.forEach((testCase) => { + const state = getDiscardExistingDocumentChangesButtonState(testCase.state); + it(`enable for ${testCase.state}`, () => { + expect(state.enabled).toBe(testCase.enabled); + }); + it(`visible for ${testCase.state}`, () => { + expect(state.visible).toBe(testCase.visible); + }); + }); + }); + + describe("should set Delete Existing Document state", () => { + const testCases = new Set<{ state: DocumentExplorerState; enabled: boolean; visible: boolean }>(); + testCases.add({ state: DocumentExplorerState.noDocumentSelected, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.newDocumentValid, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.newDocumentInvalid, enabled: false, visible: false }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentNoEdits, enabled: true, visible: true }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentDirtyValid, enabled: true, visible: true }); + testCases.add({ state: DocumentExplorerState.exisitingDocumentDirtyInvalid, enabled: true, visible: true }); + + testCases.forEach((testCase) => { + const state = getDeleteExistingDocumentButtonState(testCase.state, new Set()); + it(`enable for ${testCase.state} (no selected rows)`, () => { + expect(state.enabled).toBe(testCase.enabled); + }); + it(`visible for ${testCase.state} (no selected rows)`, () => { + expect(state.visible).toBe(false); + }); + + // state = getDeleteExistingDocumentButtonState(testCase.state, new Set([2, 1])); + // it(`enable for ${testCase.state} (2 selected rows)`, () => { + // expect(state.enabled).toBe(testCase.enabled); + // }); + // it(`visible for ${testCase.state} (2 selected rows)`, () => { + // expect(state.visible).toBe(testCase.visible); + // }); + }); + }); + }); + + describe("Do not get tabs button for Fabric readonly", () => { + const buttons = getTabsButtons({} as ButtonsDependencies); + }); + describe("when rendered", () => { + let wrapper: ReactWrapper; beforeEach(() => { const props: IDocumentsTableComponentProps = createMockProps(); wrapper = mount();