Add unit tests to roosterjs - react

[gm-al]

How about writing end-to-end testing for roosterJs-react, currently the test dir doesn't have any tests. I would like to work on this @JiuqingSong thank you!

Tasks

Beta Give feedback

1. colorPicker
2. rooster
3. ribbon
4. pastOptions
5. inputDialog
6. emoji
7. common
8. contextMenu

Tasks

Beta Give feedback

No tasks being tracked yet.

[romanisa]

@gm-al sure please go ahead and our team will be happy to do code review.

[gm-al]

I'm working on writing the unit tests for the roosterjs-react, I'm facing some issues related to the webpack config when running tests I wrote for the createPasteOptionPlugin in the pasteOptions folder. When I run npm test I get the following error logs.

An error was thrown in afterAll
  Uncaught Error: Module parse failed: Unexpected token (12:12)
  You may need an appropriate loader to handle this file type, 
   currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  | import { renderReactComponent } from '../../common/utils/renderReactComponent';
  | import { useTheme } from '@fluentui/react/lib/Theme';
  > import type { LocalizedStrings, UIUtilities } from '../../common/index';
  | import type { Theme } from '@fluentui/react/lib/Theme';
  | import type { PasteOptionButtonKeys, PasteOptionStringKeys } from '../type/PasteOptionStringKeys';

an example of a unit test:

describe('createPasteOptionPlugin', () => {
    let editor: IEditor;
    let plugin: ReactEditorPlugin;

    beforeEach(() => {
        plugin = createPasteOptionPlugin();
        editor = initEditor(div, [plugin]);
        plugin.initialize(editor);
    });

    it('getName', () => {
        expect(plugin.getName()).toEqual('PasteOption');
    });
});

I'm not sure what I'm missing but the webpack.config already handles files with ts extension using ts-loader. Is there new configuration we need to add to handle these TypeScript files with type imports and update the tsconfig? I would appreciate your help on this @JiuqingSong . Thank you!

[JiuqingSong]

From the error message, it is complaining the keyword "type". Can you try to remove it?

Currently we didn't force adding "type" import for test code, so we didn't test when adding it if it can pass the build

[gm-al]

Yes, actually I did that earlier and got another error but now that I am thinking about it, I think webpack is complaining about the code being imported from the fluentui lib?

  Uncaught Error: Module parse failed: Unexpected token (17:55)
  You may need an appropriate loader to handle this file type, 
  currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  | import { useTheme } from '@fluentui/react/lib/Theme';
  |
  > const getPasteOptionClassNames = memoizeFunction((theme: Theme) => {
  |     const palette = theme.palette;
  |

[JiuqingSong]

@gm-al FYI, we will upgrade the roosterjs-react code to be v9 and use new v9 editor in a near future. Although in this change most logic is not changed, but all the code interfaces will be moved to using v9 types.

So if you are still working on the unit test, you may hold on and wait for this v9 change so that your test can target to the new roosterjs-react code.