1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4import SpecResult from './SpecResult';
5
6export default function SuiteResult({ r, depth }) {
7  const renderSpecResult = React.useMemo(
8    () => (r) => {
9      const status = r.get('status');
10      const key = r.get('id');
11      const description = r.get('description');
12      const failedExpectations = r.get('failedExpectations');
13
14      return (
15        <SpecResult
16          key={`spec-result-${key}`}
17          status={status}
18          description={description}
19          failedExpectations={failedExpectations}
20        />
21      );
22    },
23    []
24  );
25
26  const renderSuiteResult = React.useMemo(
27    () => (r) => <SuiteResult key={r.get('result').get('id')} r={r} depth={depth + 1} />,
28    [depth]
29  );
30
31  const result = r.get('result');
32  const description = result.get('description');
33  const specs = r.get('specs');
34  const children = r.get('children');
35
36  const titleStyle = depth === 0 ? styles.titleParent : styles.titleChild;
37  const containerStyle = depth === 0 ? styles.containerParent : styles.containerChild;
38
39  return (
40    <View testID="test_suite_view_suite_container" style={containerStyle}>
41      <Text testID="test_suite_text_suite_description" style={titleStyle}>
42        {description}
43      </Text>
44      {specs.map(renderSpecResult)}
45      {children.map(renderSuiteResult)}
46    </View>
47  );
48}
49
50const styles = StyleSheet.create({
51  containerParent: {
52    paddingLeft: 16,
53    paddingVertical: 16,
54    borderBottomWidth: 1,
55    borderColor: '#ddd',
56  },
57  containerChild: {
58    paddingLeft: 16,
59  },
60  titleParent: {
61    marginBottom: 8,
62    fontSize: 16,
63    fontWeight: 'bold',
64  },
65  titleChild: {
66    marginVertical: 8,
67    fontSize: 16,
68  },
69});
70