Skip to content

Commit

Permalink
port rest of enzyme tests to react-test-renderer
Browse files Browse the repository at this point in the history
  • Loading branch information
@Saadnajmi
Saadnajmi committed Jan 29, 2025
1 parent 3190b95 commit 9213f9c
Show file tree
Hide file tree
Showing 12 changed files with 487 additions and 988 deletions.
248 changes: 74 additions & 174 deletions packages/framework/framework/src/__snapshots__/compressible.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,192 +3,92 @@
exports[`compressible tests Two labels, one plugging in SuperHeader instead 1`] = `
<View>
<View>
<component
captionText="Normal caption"
headerSlot={[Function]}
headerText="Super Header"
<Text
style={
{
"color": "purple",
"fontSize": 24,
"fontWeight": "700",
}
}
>
<View>
<View>
<Text
style={
{
"color": "purple",
"fontSize": 24,
"fontWeight": "700",
}
}
>
<Text
style={
{
"color": "purple",
"fontSize": 24,
"fontWeight": "700",
}
}
>
Super Header
</Text>
</Text>
<Text
style={
{
"color": "gray",
"fontSize": 12,
"fontWeight": "300",
}
}
>
<Text
style={
{
"color": "gray",
"fontSize": 12,
"fontWeight": "300",
}
}
>
Normal caption
</Text>
</Text>
</View>
</View>
</component>
<component
captionText="Another normal caption"
headerText="Normal Header"
Super Header
</Text>
<Text
style={
{
"color": "gray",
"fontSize": 12,
"fontWeight": "300",
}
}
>
<View>
<View>
<Text
style={
{
"color": "blue",
"fontSize": 16,
"fontWeight": "700",
}
}
>
<Text
style={
{
"color": "blue",
"fontSize": 16,
"fontWeight": "700",
}
}
>
Normal Header
</Text>
</Text>
<Text
style={
{
"color": "gray",
"fontSize": 12,
"fontWeight": "300",
}
}
>
<Text
style={
{
"color": "gray",
"fontSize": 12,
"fontWeight": "300",
}
}
>
Another normal caption
</Text>
</Text>
</View>
</View>
</component>
Normal caption
</Text>
</View>
<View>
<Text
style={
{
"color": "blue",
"fontSize": 16,
"fontWeight": "700",
}
}
>
Normal Header
</Text>
<Text
style={
{
"color": "gray",
"fontSize": 12,
"fontWeight": "300",
}
}
>
Another normal caption
</Text>
</View>
</View>
`;

exports[`compressible tests Two labels, one with caption and one without 1`] = `
<View>
<Text
style={
{
"color": "blue",
"fontSize": 16,
"fontWeight": "700",
}
}
>
Header1
</Text>
<View>
<component
headerText="Header1"
<Text
style={
{
"color": "blue",
"fontSize": 16,
"fontWeight": "700",
}
}
>
<Text
style={
{
"color": "blue",
"fontSize": 16,
"fontWeight": "700",
}
Header2
</Text>
<Text
style={
{
"color": "gray",
"fontSize": 12,
"fontWeight": "300",
}
>
<Text
style={
{
"color": "blue",
"fontSize": 16,
"fontWeight": "700",
}
}
>
Header1
</Text>
</Text>
</component>
<component
captionText="Caption2"
headerText="Header2"
}
>
<View>
<View>
<Text
style={
{
"color": "blue",
"fontSize": 16,
"fontWeight": "700",
}
}
>
<Text
style={
{
"color": "blue",
"fontSize": 16,
"fontWeight": "700",
}
}
>
Header2
</Text>
</Text>
<Text
style={
{
"color": "gray",
"fontSize": 12,
"fontWeight": "300",
}
}
>
<Text
style={
{
"color": "gray",
"fontSize": 12,
"fontWeight": "300",
}
}
>
Caption2
</Text>
</Text>
</View>
</View>
</component>
Caption2
</Text>
</View>
</View>
`;
43 changes: 19 additions & 24 deletions packages/framework/framework/src/compressible.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import { mergeStyles } from '@fluentui-react-native/merge-props';
import type { Theme } from '@fluentui-react-native/theme-types';
import { useSlot, withSlots } from '@fluentui-react-native/use-slot';
import { applyTokenLayers } from '@fluentui-react-native/use-tokens';
import { mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import * as renderer from 'react-test-renderer';

import { compressible } from './compressible';
import { buildUseTokens } from './useTokens';
Expand Down Expand Up @@ -103,32 +102,28 @@ const Label = compressible<LabelProps, LabelTokens>((props: LabelProps, useToken
};
}, useLabelTokens);

/**
* this wrapper solves the (so-far) inexplicable type errors from the matchers in typescript
*/
function snapshotTestTree(tree: any) {
(expect(toJson(tree)) as any).toMatchSnapshot();
}

describe('compressible tests', () => {
/** first render the component with no updates */
it('Two labels, one with caption and one without', () => {
const tree = mount(
<View>
<Label headerText="Header1" />
<Label headerText="Header2" captionText="Caption2" />
</View>,
);
snapshotTestTree(tree);
const tree = renderer
.create(
<View>
<Label headerText="Header1" />
<Label headerText="Header2" captionText="Caption2" />
</View>,
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it('Two labels, one plugging in SuperHeader instead', () => {
const tree = mount(
<View>
<Label headerText="Super Header" headerSlot={SuperHeader} captionText="Normal caption" />
<Label headerText="Normal Header" captionText="Another normal caption" />
</View>,
);
snapshotTestTree(tree);
const tree = renderer
.create(
<View>
<Label headerText="Super Header" headerSlot={SuperHeader} captionText="Normal caption" />
<Label headerText="Normal Header" captionText="Another normal caption" />
</View>,
)
.toJSON();
expect(tree).toMatchSnapshot();
});
});
Loading

0 comments on commit 9213f9c

Please sign in to comment.